Change of the image using touchable opacity in react-native

 

1. Below Are The Lines Of Source Code Of React-Native

import React, { Component, useState } from 'react';
import {
  SafeAreaView,
  StyleSheet,
  ScrollView,
  View,
  Alert,
  Modal,
  Text,
  StatusBar,
  TouchableOpacity,
  TouchableHighlight,
  TextInput, FlatList, Button, Image
} from 'react-native';

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      isBlack: true,
      isBlue: false,
    }
  }
  handleChange = (bool) => {
    if (bool)
      this.setState({ isBlack: true, isBlue: false })
    else
      this.setState({ isBlack: false, isBlue: true })
  }
  render() {
    const { isBlack, isBlue } = this.state;
    return (
      <View style={styles.container}>
        <Image
          style={{ height: 400, width: "100%" }}
          resizeMode="contain"
          source={{
            uri: isBlack ? 'https://th.bing.com/th/id/OIP.m4sB6cgi6FFzN-XqiT0MlgHaE6?w=240&h=180&c=7&o=5&pid=1.7' :
              'https://th.bing.com/th/id/OIP.F2ltfzP_4yei7cP4uzNUdgHaFj?w=224&h=180&c=7&o=5&pid=1.7'
          }}
        />
        <View style={{flexDirection:'row',width:'100%',justifyContent:'space-around'}}>
        <TouchableOpacity
          style={{ backgroundColor: isBlack ? "black" : "grey", padding: 20 }}
          onPress={() => this.handleChange(true)}>
          <Text style={{ fontSize: 20, color: "white" }}>Black</Text>
        </TouchableOpacity>
        <TouchableOpacity
          style={{ backgroundColor: isBlue ? "blue" : "grey", padding: 20 }}
          onPress={() => this.handleChange(false)}>
          <Text style={{ fontSize: 20, color: "white" }}>Blue</Text>
        </TouchableOpacity>
        </View>
      </View>
    );
  }
}
const styles = StyleSheet.create({
  container: {
    flex: 1,
    paddingTop: 40,
    alignItems: "center",
  }
});
export default App;