CODEWITHSUNDEEP
react-native
Muhammad Shahvaiz
Muhammad Shahvaiz

Reputation: 51

React Native UI Issue in Samsung Z fold devices

I am using React Native version 0.70.0. When I run the React Native application for the first time on a Samsung Z Fold 3 mobile device, it appears to work fine. However, as soon as I fold and then unfold the device, the UI becomes distorted. The UI also becomes distorted when I leave it as a background process. If I open it from the beginning after unfolding, the UI will appear correctly.

I have used Dimension,pixelRatio,and 'react-native-size-matters' to make it responsive.

In my opinion, I can't understand this screen dimension. The view on which I start the application remains the same, even when it should change. What should I do to fix this problem?

Upvotes: 2

Views: 1634

Answers (2)

Tobilashy
Tobilashy

Reputation: 61

2025 UPDATE: If you're open to using 3rd party packages, then react-native-size-matters is a great package for responsiveness in react native UI.

If you are targeting foldable devices in your app, you should know that screen folding/unfolding triggers a change in the screen size constants (from Dimension or useDimension() etc).

So you should listen to change events by hooking to the 'change' event, and update the sizes where necessary (in your JSX or stylesheets).

A great example can be found here: https://reactnative.dev/docs/dimensions

Upvotes: 1

Petr Tripolsky
Petr Tripolsky

Reputation: 1623

Use rn-declarative to make ui responsive.

The rn-declarative is a responsive layout engine which allow rendering single form codebase to multiple mobile devices form factors

npm i @ui-kitten/components @eva-design/eva react-native-svg rn-declarative rn-declarative-eva

enter image description here

You can find more details about development of react-native app for Galaxy Fold and Samsung DeX by read this article

enter image description here

The forms which you build with rn-declarative use the phoneStyle, tabletStyle, desktopStyle properties to adapt ui for different mobile devices form factor

import { One, FieldType, TypedField } from 'rn-declarative';

import { Text } from '@ui-kitten/components';
import { ScrollView } from 'react-native';

const fields: TypedField[] = [
    {
        type: FieldType.Component,
        style: {
            justifyContent: 'center',
            width: '100%',
            height: 125,
        },
        element: () => (
            <Text category='h4'>
                Adaptive columns
            </Text>
        ),
    },
    {
        type: FieldType.Group,
        style: {
            width: '100%',
        },
        fields: [
            {
                type: FieldType.Group,
                phoneStyle: {
                    width: '100%',
                },
                tabletStyle: {
                    width: '50%',
                },
                desktopStyle: {
                    width: '25%',
                },
                fields: [
                    {
                        type: FieldType.Component,
                        style: {
                            width: '100%',
                        },
                        element: () => (
                            <Text category='h6'>
                                FieldType.Text
                            </Text>
                        ),
                    },
                    {
                        type: FieldType.Text,
                        style: {
                            width: '100%',
                        },
                        name: 'text',
                        title: 'Text',
                        description: 'Single line',
                    },
                    {
                        type: FieldType.Text,
                        style: {
                            width: '100%',
                        },
                        validation: {
                            required: true,
                        },
                        dirty: true,
                        name: 'text_invalid',
                        title: 'Text',
                        description: 'Invalid',
                    },
                    {
                        type: FieldType.Text,
                        style: {
                            width: '100%',
                        },
                        inputMultiline: true,
                        name: 'text',
                        title: 'Text',
                        description: 'Multi line',
                    },
                ],
            },

            ...

];

export const MainPage = () => {
    return (
        <ScrollView>
            <One fields={fields} onChange={console.log} />
        </ScrollView>
    );
};

export default MainPage;

Also you can use useMediaContext hook to write code in more standard way with classic JSX markup

import { useMediaContext } from 'rn-declarative'

...

const { isPhone, isTablet, isDesktop } = useMediaContext();

Upvotes: 0

Related Questions