[React Native] Writing Platform-Specific Components for iOS and Android in React Native

Learn to write components that render differently on iOS and Android, but present the same API. First, we'll use the Platform module to change behavior based on the platform. Then, we'll use the platform-specific file extensions, .ios.js and .android.js, to render platform-specific components.

 

There are two ways to code for different platform.

 

1. Using 'Platform' from 'react-native' package.

import {Platform} from 'react-native';
...


render() {
   if(Platform.OS === 'ios') {
        let info = <Text>From ios</Text>
   } else if(Platform.OS === 'android'){
        let info = <Text>From Android</Text>
   }
}    

This way works, but really not a good approach.

 

2. Using .ios & .android as file extention:

Create two files 'info.android.js' & 'info.ios.js':

// info.ios.js

import React from 'react';
import {Text} from 'react-native';

export const PInfo = () => (
    <Text>iOS</Text>
);



// info.android.js

import React from 'react';
import {Text} from 'react-native';

export const PInfo = () => (
    <Text>Android</Text>
);

 

Then we can use those component by:

// Import the file without extension

import {PInfo} from './info';

// Use it as normal
<PInfo />