Display image from URL React-native Android/iOS
Hi Guys, In this article, we learn about How to load image from URL in React-native image view with loader, to carry out we are going to install library to load Image and another library to display loader, so let’s start
1. Create a project
|
1 |
react-native init ImageViewerApp |
after creating a project we have to install two more libraries 1. React-native-image-progress, 2. React-native-progress,
- Use the following commands to install the above libraries. check this link for more about the loader libraries
|
1 2 |
npm install react-native-progress npm install react-native-image-progress |
2. Add the following imports
After the successful installation of the above libraries goto the display screen (in my case App.js) and add the following imports.
|
1 2 3 4 5 6 7 8 9 10 |
import { Text, StatusBar, SafeAreaView, View, StyleSheet, ScrollView, } from 'react-native'; <strong>import ImageLoader from 'react-native-image-progress'; import * as Progress from 'react-native-progress';</strong> |
ImageLoader is used to display image and Progress is used to pass the progress bar as a parameter to ImageLoader.
3. Add ImageLoader view
Add ImageLoader view inside our return method:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<View style={styles.container}> <ImageLoader component={ImageLoader} resizeMode="contain" indicator={Progress} //<---Pass ProgressLoader as a indicator indicator={true} indicatorProps={{size: 80, borderWidth: 0, color: "#062baa", unfilledColor: "#0e6605",}} // disable loading indicator //indicatorColor="white" // react native colors or color codes like #919191 // indicatorSize="small" // (small | large) or integer source={{ uri: "https://www.techup.co.in/wp-content/uploads/2019/01/img_butterfly.jpg" }} style={[styles.fitImage]}> </ImageLoader> </View> |
As we see above code we are passing Progress to the indicator, We can pass different types of progress loader as an indicator.
- Check full App.js code below:
|
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 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 |
import React, {Fragment} from 'react'; import { Text, StatusBar, SafeAreaView, View, StyleSheet, ScrollView, } from 'react-native'; import ImageLoader from 'react-native-image-progress'; import * as Progress from 'react-native-progress'; import { DebugInstructions, ReloadInstructions, Header, LearnMoreLinks, Colors, } from 'react-native/Libraries/NewAppScreen'; const App = () => { return ( <Fragment> <StatusBar barStyle="dark-content" /> <SafeAreaView> <ScrollView contentInsetAdjustmentBehavior="automatic" style={styles.scrollView}> <View style={styles.container}> <ImageLoader component={ImageLoader} resizeMode="contain" indicator={Progress} //<---Pass ProgressLoader as a indicator indicator={true} indicatorProps={{size: 80, borderWidth: 0, color: "#062baa", unfilledColor: "#0e6605",}} //disable loading indicator //indicatorColor="white" // react native color codes like #919191 //indicatorSize="small" // (small | large) or integer source={{ uri: "https://www.techup.co.in/wp-content/uploads/2019/01/img_butterfly.jpg" }} style={[styles.fitImage]}> </ImageLoader> </View> </ScrollView> </SafeAreaView> </Fragment> ); }; const styles = StyleSheet.create({ scrollView: { backgroundColor: Colors.lighter, }, engine: { position: 'absolute', right: 0, }, body: { backgroundColor: Colors.white, }, highlight: { fontWeight: '700', }, fitImage: { height: 300, width: 300, padding: 4, }, container: { flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: '#F5FCFF', flexDirection: 'column', }, }); export default App; |
4. final output