Show different Images on Android and iOS devices using same Code in React Native

This tutorial explains how to show different images on android and iOS devices using same code in react native application. Every developer wants to write code once and wants to use exact same code for different platform with exact same output and behavior, if he/she is working on cross platform apps like react native. It reduces the code in terms of complexity, length, enables developer to manage code easily, enhances the quality of code and make code easy to read and understand.

React native provides a powerful library named as Platform . Through Platfom  library, you can identify that on which device you are working and according to that you can perform your action. In this example we are going to use Platform component to detect whether device is android or ios. 

Show different Images on Android and iOS devices In React Native :

Lets follow the below steps to show different images on android and iOS devices using same code in react native application.

Step 1: Create a new react native project, if you don’t know how to create a new project in react native just follow this tutorial.

Step 2: Open App.js File in your favorite code editor and erase all code and follow this tutorial.

Step 3: Through react , react-native  packages import all required components.

import React, { Component } from 'react';
import { AppRegistry, View, StyleSheet, Platform, Image } from 'react-native';

Step 4: Create App class  and implement render method and return a Image component wrapped by root View component.

export default class App extends Component {
  render() {
    return (
      <View style={styles.container}>
        <Image
          source={{
            uri:
              Platform.OS === 'android'
                ? 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMwONUbQcUyyMBxyBm3qBo5chvBvCZcFGQm6JAdTWLxkVI9Z_oiZNWjCuUuVSOrXAF48zx8Qzh65rijuPH48LGvzvTj8FAXEafay32HBTSAW3QGOypC6yz_C_QJBTiXeBmjlR0BJHBVHg8/h120/ios.jpg'
                : 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMwONUbQcUyyMBxyBm3qBo5chvBvCZcFGQm6JAdTWLxkVI9Z_oiZNWjCuUuVSOrXAF48zx8Qzh65rijuPH48LGvzvTj8FAXEafay32HBTSAW3QGOypC6yz_C_QJBTiXeBmjlR0BJHBVHg8/h120/ios.jpg',
          }}
          style={styles.image}
        />
      </View>
    );
  }
}

Step 5 : Apply the below style sheet design.

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: '#ecf0f1',
  },

  image: {
    height: '45%',
    width: '100%',
    resizeMode: 'contain',
  },
});

Complete Source Code for App.js 

Lets see the complete source code that helps to show different images on android and iOS devices using same code in react native application.

import React, { Component } from 'react';
import { AppRegistry, View, StyleSheet, Platform, Image } from 'react-native';

export default class App extends Component {
  render() {
    return (
      <View style={styles.container}>
        <Image
          source={{
            uri:
              Platform.OS === 'android'
                ? 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMwONUbQcUyyMBxyBm3qBo5chvBvCZcFGQm6JAdTWLxkVI9Z_oiZNWjCuUuVSOrXAF48zx8Qzh65rijuPH48LGvzvTj8FAXEafay32HBTSAW3QGOypC6yz_C_QJBTiXeBmjlR0BJHBVHg8/h120/ios.jpg'
                : 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMwONUbQcUyyMBxyBm3qBo5chvBvCZcFGQm6JAdTWLxkVI9Z_oiZNWjCuUuVSOrXAF48zx8Qzh65rijuPH48LGvzvTj8FAXEafay32HBTSAW3QGOypC6yz_C_QJBTiXeBmjlR0BJHBVHg8/h120/ios.jpg',
          }}
          style={styles.image}
        />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: '#ecf0f1',
  },

  image: {
    height: '45%',
    width: '100%',
    resizeMode: 'contain',
  },
});

AppRegistry.registerComponent('App', () => App);

Screenshot : 

Android output Screenshot:

iOS output Screenshot:

This is all about Show different Images on Android and iOS devices using same Code in React Native. Thank you for reading this article, and if you have any problem, have a another better useful solution about this article, please write message in the comment section.