Automatically image component image scaling is one of the extremely used feature in currently developed mobile application. Using the auto image scaling feature the image can automatically scale itself to given width, It automatically calculates the image height according to given width as respect of image. We are using the react-native-scalable-image NPM GitHub library to achieve this functionality. This library would override the original image component and add the image scaling functionality on it. It works on Image aspect ration calculation system, So in this tutorial we would going to make a tutorial on Auto Scale Image Width Height Dimension in react native android iOS application. So let’s get started .
Note: Width and Height of Image component will calculate automatically but all other props will be same as original React Native
<Image/> component.
Contents in this project Auto Scale Image Width Height Dimension in React Native Android iOS App Example Tutorial:
1. Open your react native project folder in CMD / Terminal and execute below command to install the react-native-scalable-image library in your project.
|
1
|
npm install react–native–scalable–image —save
|
Screenshot of CMD :
Screenshot of CMD after executing above command:
2. Import StyleSheet and View component in your project.
|
1
2
3
|
import React, {Component} from ‘react’;
import { StyleSheet, View } from ‘react-native’;
|
3. Import Image component from react-native-scalable-image library.
|
1
|
import Image from ‘react-native-scalable-image’;
|
4. Create a constant named as Scale_Image in render’s block, We are calling image from online URL and only defining the image width as 250. It will automatically calculate the image height as respect of image width.
|
1
2
3
4
5
6
7
8
9
10
|
const Scale_Image = (
<Image
width={250}
// Image height will be automatically calculated.
source={{uri: ‘https://reactnativecode.000webhostapp.com/images/pexels-photo-70069.jpeg’}}
/>
);
|
5. Calling the Scale_Image constant in render’s return block inside the root View component.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
|
render() {
const Scale_Image = (
<Image
width={250}
// Image height will be automatically calculated.
source={{uri: ‘https://reactnativecode.000webhostapp.com/images/pexels-photo-70069.jpeg’}}
/>
);
return (
<View style={styles.MainContainer}>
{ Scale_Image }
</View>
);
}
|
6. Creating css style.
|
1
2
3
4
5
6
7
8
9
10
|
const styles = StyleSheet.create({
MainContainer: {
flex: 1,
justifyContent: ‘center’,
alignItems: ‘center’,
padding: 10
}
});
|
7. Complete source code for App.js File :
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
|
import React, {Component} from ‘react’;
import { StyleSheet, View } from ‘react-native’;
import Image from ‘react-native-scalable-image’;
export default class App extends Component{
render() {
const Scale_Image = (
<Image
width={250}
// Image height will be automatically calculated.
source={{uri: ‘https://reactnativecode.000webhostapp.com/images/pexels-photo-70069.jpeg’}}
/>
);
return (
<View style={styles.MainContainer}>
{ Scale_Image }
</View>
);
}
}
const styles = StyleSheet.create({
MainContainer: {
flex: 1,
justifyContent: ‘center’,
alignItems: ‘center’,
padding: 10
}
});
|
Screenshot:
Also Read :
React Native Set onPress onClick on View Component Android iOS Example Tutorial
React Native Disable Hide ScrollBar ScrollIndicator in ScrollView
React Native Dynamically Add Remove Component using Animation in ScrollView
React Native flexDirection Row Column Explained iOS Android example
React Native Remove Repeated Duplicate Object Items from Array
