Like

import React, { useState } from "react";
import { View, Text, StyleSheet, TouchableOpacity } from "react-native";
import {
  MaterialCommunityIcons,
  SimpleLineIcons,
  FontAwesome5,
} from "@expo/vector-icons";
import { useTheme } from "@react-navigation/native";

const Like = ({ like }) => {
  const { colors } = useTheme()
  const [toggle, setToggle] = useState(true);
  const [count, setCount] = useState(0);
 
   const toggleColor =()=>{
     const newState=!toggle
     const newCount = count === 0 ? 1 : 0
     setToggle(newState)
     setCount(newCount)
   }

   const textColor =  toggle?'grey':'dodgerblue'
  
  return (
    <View style={styles.container}>
      <TouchableOpacity style={styles.like}>
          <SimpleLineIcons name='like' size={25} style={{color:textColor}}  onPress={() =>toggleColor()} />
      </TouchableOpacity>
      <View>
        <Text style={[styles.text, {color:textColor}]}>{like}</Text>
        <Text style={[styles.text, {color:textColor}]}>{count}</Text>
      </View>
    </View>
  );
};
const styles = StyleSheet.create({
  container: {
    flexDirection: "row",
    alignItems: "center",
    
  },
  like: {
    marginLeft: 20,
    marginTop: 20,
    marginRight: 20,
  },
  text: {
    marginLeft: 10,
    marginTop: 20,
    color: "grey",
    fontSize: 20,
  },
});

export default Like;