How to make a like function similar to Instagram (like button) with react native

Question

Hello I am trying to make a Instagram like button with react-native by changing the image on press, but when I press the image no changes

Everything is up to date. And the code has no errors.

Here is my code:

import React, { Component } from 'react';
import { View, Text, StyleSheet, Image,navigation,TouchableOpacity } from 'react-native';
import { Container, Content, Badge, Left, Icon, Header} from 'native-base';
import { DrawerActions } from 'react-navigation';

class HomePage extends Component {
    constructor(props){
        super(props)
        this.state = {
        likedQ: false,   
         uri: require('./images/mianIcons/like.png') 
        }
    }

    _ifLiked = () => {
        likedQ = true;
        uri: require('./images/mianIcons/like3.png') 
    }

    render(){
        return(
               <View>
                    <Header>
                        <Left>
                          <Icon name="ios-menu" onPress={()=> this.props.navigation.openDrawer()}
                          />
                        </Left>
                   </Header>   

                  <TouchableOpacity onPress={this._ifLiked()}>  
                    <Image 
                    style={{width: 32 , height: 32 ,}}
                    source={require(uri)}
                   />
                  </TouchableOpacity>          
           </View>           

        )
    }
}

export default HomePage;

Answer 1

You should set state to rerender the component

_ifLiked = () => { 
  this.setState({
    likedQ: true, 
    uri: require('./images/mianIcons/like3.png')
  })
} 

change your onPress function like this. It is basic thing that you should set state for react components to update

There are some more corrections. Following is the corrected code

class HomePage extends Component{ 
  constructor(props){ 
    super(props) 
    this.state = { 
      likedQ: false, 
      uri: './images/mianIcons/like.png' 
    } 
  } 

  _ifLiked = () => { 
  this.setState({
    likedQ: true, 
    uri: require('./images/mianIcons/like3.png')
  }
}  

  render(){ 
   return( 
    <View> 
      <Header> 
        <Left> 
          <Icon name="ios-menu" onPress={()=> this.props.navigation.openDrawer()} /> 
       </Left> 
     </Header> 
     <TouchableOpacity onPress={() => this._ifLiked}> 
       <Image style={{width: 32 , height: 32}} source={require(this.state.uri)} /> 
     </TouchableOpacity> 
   </View> 
 )} 
}