Search code examples
iosreact-nativestyles

Correct approach to specific style code for small and big iOS screen in React Native?

Is there an easy way to make a different style (like smaller and bigger buttons etc. ) for small size ios devices and the big ones in React Native? Like here (https://reactnative.dev/docs/platform-specific-code#platform-specific-extensions) when I need different styles for a specific platform iOS and Android in React Native?

Thanks

Solution

  • All is explained in your link.

    Two solutions:

    1. One component where you handle the platform

    :

    import { Platform } from 'react-native';

...

<Button style={Platform.OS === 'ios' ? styles.iosButton: styles.androidButton} />
    1. Two components for each platforms

    :

    BigButton.ios.js
BigButton.android.js

...

import BigButton from './BigButton';

    Importing like this will load the correct component depending of the platform

    To adjust depending of the screen size you can use Dimensions

    import { Dimensions } from 'react-native';

const windowWidth = Dimensions.get('window').width;

<View style={windowWidth > 1200 ? styles.big_screen : styles.small_screen}>
    ...
</View>