React Native Change Image Source Dynamically using State on Button Click

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.

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.

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.

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.

5. Creating Style.

6. Complete source code for App.js File :

Screenshots in Android device:

Change Image Source Dynamically using StateScreenshots in iOS device:

4 Comments

  1. Awesome demo sir…please make one demo for sqlite

  2. 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’)}

Leave a Reply

Your email address will not be published. Required fields are marked *