Advantages of having index.ios.js instead of just index.js

Question

New to react-native and used create-react-native-app to make the scaffolding for my first app. It made an App.js which I guess is equivalent to most app's index.js and serves as the entry point to my app.

Looking at a lot of tutorials I'm seeing separate index.ios.js and index.android.js files. I'm confused as to why these apps have seperate files for each platform.

I see from this question that there are even hybrid apps that use both the individual files as well as one index.js.

All these different options are kind of confusing me. What situations would call for using separate files vs just having one entry point?

Answer 1

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.

Answer 2

The whole idea of having iOS and android files is for dealing with codes that needs to be written differently in android and iOS. For example, the Picker component in React Native works differently in iOS and Android. By splitting the code, you can easily split the code and maintain them. When running, React Native will find which file to use automatically based on the platform the app is running on.

Source: https://facebook.github.io/react-native/releases/0.26/docs/platform-specific-code.html

Answer 3

Some components are not universal between ios and Android.

In terms of getting set up, create react native app keeps it simple for beginners and to get started. As you set up more complex views you will find you need to have a separate view for ios and Android.

If you structure your app well, you can split the logic into one file and then have a separate view for ios, Android and even web. Essentially writing 1 app for 3 platforms.

Answer 4

index.js will run on both platforms. index.ios.js will only run on iOS devices while index.android.js only runs on Android devices.

If you have a view that is going to look the same on both devices and any dependencies you have run on both platforms in the same way skip the platform specifier.

If, however, the view needs to look a bit different on the two platforms(to follow differing design standards on the two platforms perhaps) or you need to use different dependencies on the two platforms then you need to use the specifiers.

By having some components be simply .js and others be .io.js or .android.js it allows you to consolidate code where possible while still being able to make platform specific choices when needed.

It should be noted that the platform specifiers can be used on any component, not just index files. (i.e. You can have MyCoolButton.js that will be used on both platforms and MyRegularButton.ios.js and MyRegularButton.android.js` that will each get used on the appropriate platform automatically.)