Android/iOS based asset bundling : React native

React Native provides two ways to execute code by platform:

1. Using the Platform module.
2. Using Platform-specific file extensions.

Using these two approaches we will bundle our platform specific local assets and validate which is the better one.

Using Platform module

In the below code snippet using Platform module we render image based onandroid/ios. This works as expected but there is a drawback using this method.

App.js

import { Platform, Image } from 'react-native';


var icon = Platform.OS === 'ios'
  ? require('./ios.png')
  : require('./android.png');
<Image source={icon} />; 

The drawback here is both the images (ios.png and android.png) are present in both the .apk and .ipa files. This increases the bundle size as in place of one image, both images are present even though only one is required.

Using Platform specific file extension

To avoid this drawback, we will use the platform-specific file extension method which will bundle only the required image.

React Native will detect when a file has a .ios. or .android. extension and load the relevant platform file when required from other components.

To implement this in our example we create two files imageFile.android.js and imageFile.ios.js and import the filename without any extension.

imageFile.android.js

export default from './android.png';

imageFile.ios.js

export default from './ios.png';

App.js

import {Image} from 'react-native';
import imageFile from './imageFile';


<Image source={imageFile} />;

This also works as expected and as a bonus only the required assets are bundled and reduces the .apk and .ipa size.