Separate IOS and Android Component

This is the way i find how to seperate platform by specific condition during my learning react native time.

Create helper class

isIOS.js

import { Platform } from 'react-native';

export default function isIOS(iosComponent, androidComponent) {
    if (Platform.OS === 'ios') {
        return iosComponent;
    } if (Platform.OS === 'android') {
        return androidComponent;
    }else {
        return null;
    }
}

App.js

import isIOS from './isIOS';
... 
...
render() {
  return (
     <View>
         { 
             isIOS(<Text>IOS</Text>, <Text>Android</Text>)
         }
     </View>
  );
}

 

Separate File
Moments.android.js
Moments.ios.js
App.js

 

If else statement

const styles = StyleSheet.create({
    container: {
        paddingTop: 20,
        backgroundColor: '#fff',
    },
    baseText: {
        fontFamily: Platform.OS === 'ios' ? 'Apple SD Gothic Neo' : 'Roboto',
        textAlign: 'center',
    },
});

 

Or Platform.Select

const styles = StyleSheet.create({
    container: {
        paddingTop: 20,
        backgroundColor: '#fff',
    },
    baseText: {
        ...Platform.select({
            ios: { fontFamily: 'Apple SD Gothic Neo'},
            android: { fontFamily: 'Roboto'}
        }),
        textAlign: 'center',
    },
});


 

Separate IOS and Android Component

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.