The Image component has ability to programmatically rendering image at application runtime, This functionality is know as Dynamic image rendering. Now developer can dynamically change the Image URL from a specific function using State. So in this tutorial we would going to Change Image Source Dynamically using State on Button Click in react native Android iOS application example.
Contents in this project Change Image Source Dynamically using State on Button Click in React Native Android iOS app:
1. Import StyleSheet, View, Image, Button and Platform components in your project.
|
1 2 3 |
import React, { Component } from 'react'; import { StyleSheet, View, Image, Button, Platform } from 'react-native'; |
2. Create constructor() in your project, Now make a State named as imageURL. This State holds a Image URL this is the first image which would display before loading the other image.
|
1 2 3 4 5 6 7 8 9 10 11 |
constructor(){ super(); this.state={ imageURL : 'https://reactnativecode.com/wp-content/uploads/2017/10/Guitar.jpg' } } |
3. Create a function named as Load_New_Image(), Inside this function we would simply update the State value and store a new Image URL inside it. We would call this function on Button onPress event.
|
1 2 3 4 5 6 7 8 |
Load_New_Image=()=>{ this.setState({ imageURL : 'https://reactnativecode.com/wp-content/uploads/2018/02/motorcycle.jpg' }) } |
4. Create a Root View in render’s return block, Now we would make a Image component and 1 Button component in Root View. We would set the image source dynamically using State, So if the State is updated it will change the image at app runtime.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
render() { return ( <View style={styles.MainContainer}> <Image source = {{ uri: this.state.imageURL }} style = {styles.imageStyle} /> <Button title="Click Here To Load Image From Different Source" onPress={this.Load_New_Image} /> </View> ); } |
5. Creating Style.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
const styles = StyleSheet.create({ MainContainer :{ justifyContent: 'center', alignItems: 'center', flex:1, paddingTop: (Platform.OS) === 'ios' ? 20 : 0, margin: 10 }, imageStyle:{ width: 200, height: 300, resizeMode: 'center' } }); |
6. 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 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 |
import React, { Component } from 'react'; import { StyleSheet, View, Image, Button, Platform } from 'react-native'; export default class App extends Component{ constructor(){ super(); this.state={ imageURL : 'https://reactnativecode.com/wp-content/uploads/2017/10/Guitar.jpg' } } Load_New_Image=()=>{ this.setState({ imageURL : 'https://reactnativecode.com/wp-content/uploads/2018/02/motorcycle.jpg' }) } render() { return ( <View style={styles.MainContainer}> <Image source = {{ uri: this.state.imageURL }} style = {styles.imageStyle} /> <Button title="Click Here To Load Image From Different Source" onPress={this.Load_New_Image} /> </View> ); } } const styles = StyleSheet.create({ MainContainer :{ justifyContent: 'center', alignItems: 'center', flex:1, paddingTop: (Platform.OS) === 'ios' ? 20 : 0, margin: 10 }, imageStyle:{ width: 200, height: 300, resizeMode: 'center' } }); |
Screenshots in Android device:
Screenshots in iOS device:
Awesome demo sir…please make one demo for sqlite
Sure Rajveer i will soon publish a new tutorial regarding to SQLite 🙂 .
How would you do this for an image stored locally within the app? I’m using the following code in my app for some images instead of hosted images.
source = {require(‘/Users/benjilightstone/Coding/DroppinBoyss/Images/Map500Cut.png’)}
Benj read our this tutorial this would help you : https://reactnativecode.com/get-image-from-local-resource/ 🙂 .
how to make this an infinite loop, like repeating two images number of times
Please explain for what purpose you need infinite loop ?