All these different options are kind of confusing me. What situations would call for using separate files vs just having one entry point?
So far, I've not found a need to have different entry files index.ios.js and index.android.js. The first thing I do, and what most people seem to do, is add something like the following to both files.
import { AppRegistry } from 'react-native'
import App from './App/Containers/App'
AppRegistry.registerComponent('YourAppName', () => App)
You could also delete them both, replacing them with a single index.js file and the above code as well. Not sure why more people (including myself) don't do that.
I think you can safely follow this pattern as well until you find that you need to split your logic between the platforms. Even when you do, I think it's unlikely you'd ever split it from the entry file itself. It's more likely you'll need to split logic further down in your leaf nodes.
When you do need to write platform specific code, you can do so inline using the Platform module.
import { Platform, StyleSheet } from 'react-native';
const styles = StyleSheet.create({
height: (Platform.OS === 'ios') ? 200 : 100,
});
Or Platform.select
import { Platform, StyleSheet } from 'react-native';
const styles = StyleSheet.create({
container: {
flex: 1,
...Platform.select({
ios: {
backgroundColor: 'red',
},
android: {
backgroundColor: 'blue',
},
}),
},
});
which you can also use to select the proper component...
const Component = Platform.select({
ios: () => require('ComponentIOS'),
android: () => require('ComponentAndroid'),
})();
<Component />;
The last example could be accomplished via file naming convention as well. For instance, if you have the following two component files...
|- Component.ios.js
|- Component.android.js
and in your file you just require Component as such...
import Component from './Component';
And the bundler will import the proper component based on the .ios or .android bit.
