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