React Native Scalable Image - Android iOS Example

Image aspect ratio is used to set image scaling according to a given ration count. There are several type of image aspect ratio available for scaling image. In react native the Image component dose not support scale image according to width or height. But using the react-native-scalable-image custom component we can easily make the image component scalable. The react-native-scalable-image dose support all the major props like width, height and style. If we pass width only in react-native-scalable-image component then it will automatically resize the image according to given width and set its height. So in this tutorial we would learn about React Native Scalable Image Component Android iOS Example.

Contents in this project React Native Scalable Image – Android iOS Example:

1. First we need to download and install the react-native-scalable-image component in our react native project. So open your react native project root director and execute below command to install it.

<br />
npm install react-native-scalable-image –save

1	npm install react–native–scalable–image —save

Screenshot of CMD:

Screenshot of CMD after finish installation:

2. Now open your project’s main App.js file and import View, StyleSheet and Text component.

<br />
import React from ‘react’;</p>
<p>import { View, StyleSheet, Text } from ‘react-native’;

import React from ‘react’;

import { View, StyleSheet, Text } from ‘react-native’;

3. Importing Image component from react-native-scalable-image library.

<br />
import Image from ‘react-native-scalable-image’;

1	import Image from ‘react-native-scalable-image’;

4. Creating our main export default functional component App. This is our main parent component.

<br />
export default function App() {</p>
<p>}

export default function App() {

}

5. Creating return() block and here we would first make a Root View component then make the Image component. We are calling the image from online URL, so if anyone copies my code it will directly run into your project.

List of React Native Scalable Image Props:

width : Image width.
height : Image height.
onPress : To set click event on Image.
background : Image can be used as background, Support Boolean True False value. Value should bet set True if user wants to set image as background.
onSize : Is called with { width, height } as the first argument once image size is calculated.

<br />
  return (<br />
    <View style={styleSheet.MainContainer}></p>
<p>      <Text style={{fontSize: 24}}> React Native Scalable Image </Text></p>
<p>      <Image<br />
        width={300}<br />
        // height={400}<br />
        // Image height will be automatically calculated.<br />
        // If user give specific Height then Width will be automatically calculated.<br />
        source={{ uri: ‘/wp-content/uploads/2021/01/cute_puppy.jpg’ }}<br />
        style={{marginTop: 20}}</p>
<p>      /></p>
<p>    </View><br />
  );

return (

<Text style={{fontSize: 24}}> React Native Scalable Image </Text>

<Image

width={300}

// height={400}

// Image height will be automatically calculated.

// If user give specific Height then Width will be automatically calculated.

source={{ uri: ‘/wp-content/uploads/2021/01/cute_puppy.jpg’ }}

style={{marginTop: 20}}

</View>

);

6. Creating Style.

<br />
const styleSheet = StyleSheet.create({</p>
<p>  MainContainer: {<br />
    flex: 1,<br />
    justifyContent: ‘center’,<br />
    alignItems: ‘center’,<br />
    padding: 12<br />
  },</p>
<p>});

const styleSheet = StyleSheet.create({

MainContainer: {

flex: 1,

justifyContent: ‘center’,

alignItems: ‘center’,

padding: 12

});

7. Complete Source Code for App.js file:

<br />
import React from ‘react’;</p>
<p>import { View, StyleSheet, Text } from ‘react-native’;</p>
<p>import Image from ‘react-native-scalable-image’;</p>
<p>export default function App() {</p>
<p>  return (<br />
    <View style={styleSheet.MainContainer}></p>
<p>      <Text style={{fontSize: 24}}> React Native Scalable Image </Text></p>
<p>      <Image<br />
        width={300}<br />
        // height={400}<br />
        // Image height will be automatically calculated.<br />
        // If user give specific Height then Width will be automatically calculated.<br />
        source={{ uri: ‘/wp-content/uploads/2021/01/cute_puppy.jpg’ }}<br />
        style={{marginTop: 20}}</p>
<p>      /></p>
<p>    </View><br />
  );<br />
}</p>
<p>const styleSheet = StyleSheet.create({</p>
<p>  MainContainer: {<br />
    flex: 1,<br />
    justifyContent: ‘center’,<br />
    alignItems: ‘center’,<br />
    padding: 12<br />
  },</p>
<p>});