DEV Community

ramanathanMuthuraman
ramanathanMuthuraman

Posted on

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} />; 
Enter fullscreen mode Exit fullscreen mode

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';
Enter fullscreen mode Exit fullscreen mode

imageFile.ios.js

export default from './ios.png';
Enter fullscreen mode Exit fullscreen mode

App.js

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


<Image source={imageFile} />;
Enter fullscreen mode Exit fullscreen mode

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

Discussion (0)