Simplistic Fullscreen Image Viewer: React Native
If you are working with the latest version of React Native like 0.35 or above, then there are lot of modules available to show an image in full screen mode. Now the twist here is when you are working with the older version of React Native. In this blog, I wanted to share how I implemented this use case on the application on React Native 0.21 and React 0.14.8 versions respectively.
One of the biggest challenge with the older versions are that it does not support all the node modules. However if they support too, you still can’t upgrade the version of the modules that you are using for latest feature support. It is very important to keep in mind the compatibility issues and also ensure that it should work for both Android and iOS.
You might be thinking that why am I not upgrading my React Native version to the latest one? But that’s not easy too! When I tried upgrading from the existing React Native version to latest one, I noticed that few modules on my application were breaking. Also, when your application is already deployed in production you really need to prioritize between investing more time and effort in upgrading the application or releasing the features of your application which are more useful to your customers.
So, in this blog, I will be helping out my developer buddies who due to few constraints cannot use jazzy npm modules like https://github.com/alwx/react-native-photo-view and want to show images in their application beautifully in full screen mode something like a lightbox.
Note: I have also opened an issue on github repo about the build errors I got when I tried using this module. You can follow it here : https://github.com/alwx/react-native-photo-view/issues/23 . Having said this, I believe this module can be a good option if you are working with latest versions of React and React-Native.
We will be using react-native-overlay (https://github.com/brentvatne/react-native-overlay) module and CSS for implementing this. Now don’t get startled by readme.md of this module which says “Should you use this? Ideally, no. This should probably only be used as a last resort. You can usually accomplish what you need to by just absolute positioning an view at the bottom of your root component.” Remember our React Native version is old and zIndex is supported on version 0.29 and above.
First, lets go through the code snippet below (Assuming you are familiar with development in React Native) :
[js]
import React, {
Component,
View,
Image,
TouchableOpacity,
TouchableHighlight,
} from ‘react-native’;
import Icon from ‘react-native-vector-icons/Ionicons’;
const Overlay = require(‘react-native-overlay’);
export default class ImageView extends Component {
state = {
imageUrl : ‘http://www.tothenew.com/themes/ttnd/images/logo.png’
}
render() {
return <View style={{flex: 1}}>
<View>
<TouchableOpacity onPress={()=>{this.setState({isVisible: true})}}
style={{flex: 1}}>
<Image resizeMode="cover"
source={{uri: this.state.image}}>
</Image>
</TouchableOpacity>
</View>
<Overlay isVisible={this.state.isVisible}>
<View style={styles.fullscreenImage}>
<Image resizeMode="contain"
source={{uri: this.state.imageUrl}} style={{flex: 1}}>
</Image>
<TouchableHighlight
style={styles.overlayCancel}
onPress={()=>{this.setState({isVisible: false})}}>
<Icon name="close"
style={styles.cancelIcon} size={28} />
</TouchableHighlight>
</View>
</Overlay>
</View>
}
}
const styles = StyleSheet.create({
overlayCancel: {
padding: 20,
position: ‘absolute’,
right: 10,
top: 0,
},
cancelIcon: {
color: ‘white’,
},
});
[/js]
To use react-native-overlay module, run npm install react-native-overlay --save in the terminal from your project directory and require it in the file where you are showing your image. As you can see in above lines of code, we have added an onPress event on actual image and on clicking this we will show the Overlay tag by setting isVisible field to true. Now it is the duty of Overlay module to show the image in fullscreen mode. We have also added a cross button in the top right corner to close the fullscreen image and resume to initial image view. The styling may vary according to UI of your application and you can anytime customize that too.
Here, you will notice that I have used another module react-native-vector-icons for showing a cross icon. You can explore more options for icons here : https://github.com/oblador/react-native-vector-icons
So on clicking the image, the final fullscreen view will look something like this:
The best part about this solution is that it works well on both Android and iOS.
I hope this will be of some help. Keep watching this space for more real life challenges and their solutions in React Native world. 🙂
Thanks for great post
I was able to implement it to my app.
Here I would like to suggest a quite helpful Android quiz and interview question for everybody