In React native a component is very popular among react native mobile application developers named as react-native-lightbox. It is openly available on NPM and GitHub both platforms. The LightBox package has more than 23 thousands installation per week so now you all know how useful it is for react native developers. Using the react-native-lightbox component we can easily Highlight any Image component and also View component. It uses animation technique to high light objects on mobile screen and using the Front in and front out animation. It slightly increases the selected image width and height and start showing object on screen. So in this tutorial we would learn about React Native Image LightBox to Highlight Image Using Animation Android iOS Example Tutorial.
Contents in this project React Native Image LightBox to Highlight Image Using Animation Android iOS Example Tutorial:
1. The first step is to install the react-native-lightbox component in our current react native project. So open your project’s root directory in Command Prompt or Terminal then execute below command.
|
1
|
npm install react–native–lightbox
|
Screenshot after done installation:
2. Now we need to execute
react–native link command to index the newly installed LightBox component in your react native project.
3. Now the library is installed. Next step is to start coding for application. Open your project’s main App.js file and import StyleSheet, ScrollView, Text, Image and View component.
|
1
2
3
|
import React, { Component } from ‘react’;
import { StyleSheet, ScrollView, Text, Image, View } from ‘react-native’;
|
4. Import LightBox component from react-native-lightbox package.
|
1
|
import Lightbox from ‘react-native-lightbox’;
|
5. Call console.disableYellowBox with True value. This would disable all type of yellow boxes in react native app.
|
1
|
console.disableYellowBox = true;
|
6. Creating our main export default App class extends Component. This is our main Root Parent class.
|
1
2
3
4
|
export default class App extends Component {
}
|
7. Creating render’s return block in App class then we would put the ScrollView component and put the Lightbox widget inside it. We would put a Image component inside the Lightbox component as Child. You can also put Fix size view in Lightbox component.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
render() {
return (
<ScrollView style={styles.container} >
<View style={styles.text}>
<Text>Hello Guys, Welcome to ReactNativeCode.com, Today we are going to learn about Lightbox in React Native. </Text>
</View>
<Lightbox underlayColor=“white”>
<Image
style={styles.contain}
resizeMode=“contain”
source={{ uri: ‘/wp-content/uploads/2017/06/sample_image.png’ }}
/>
</Lightbox>
</ScrollView>
);
}
|
8. Creating Style.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
const styles = StyleSheet.create({
container: {
paddingHorizontal: 20,
},
contain: {
flex: 1,
height: 150,
},
text: {
marginVertical: 20,
textAlign: ‘center’
},
});
|
9. 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, ScrollView, Text, Image, View } from ‘react-native’;
import Lightbox from ‘react-native-lightbox’;
console.disableYellowBox = true;
export default class App extends Component {
render() {
return (
<ScrollView style={styles.container} >
<View style={styles.text}>
<Text>Hello Guys, Welcome to ReactNativeCode.com, Today we are going to learn about Lightbox in React Native. </Text>
</View>
<Lightbox underlayColor=“white”>
<Image
style={styles.contain}
resizeMode=“contain”
source={{ uri: ‘/wp-content/uploads/2017/06/sample_image.png’ }}
/>
</Lightbox>
</ScrollView>
);
}
}
const styles = StyleSheet.create({
container: {
paddingHorizontal: 20,
},
contain: {
flex: 1,
height: 150,
},
text: {
marginVertical: 20,
textAlign: ‘center’
},
});
|
Screenshots in Android device:
Screenshot in iOS device:
Also Read :
React Native Insert Data into Realm Local Database iOS Android Tutorial
React Native Change Activity Actionbar Header Background Color in Android iOS Example Tutorial
Border radius for only top left right rounded corners Image View React Native iOS Android Example
Change Text Font Size on Button Click in React Native Programmatically
React Native Sort String Array into Alphabetical Order Example
