like

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

const members = [
  {
    id: 1,
    name: "Tunde Ayodele",
    comment: "that is ithe first time we will do that",
    initials: "TA",
    likesCount: 2,
  },
  {
    id:2,
    name: "David Kenku",
    comment: "that is ithe first time we will do that",
    initials: "DK",
    likesCount: 2,
  },
  {
    id : 3,
    name: "Ifeany Anyam",
    comment: "that is ithe first time we will do that",
    initials: "IA",
    likesCount: 1,
  },
  {
    id: 4,
    name: "Samuel Olurunda",
    comment: "that is ithe first time we will do that",
    initials: "SO",
    likesCount: 1,
  },
  {
    id : 5,
    name: "Toyin Saula",
    comment: "that is ithe first time we will do that",
    initials: "TS",
    likesCount: 1,
  }
];

const likesCount = members.reduce((a,b) => a + b.likesCount, 0)

const index = () => {
  const { colors } = useTheme()
  const [toggle, setToggle] = useState(true);
  const [count, setCount] = useState(1);
  const [likes, setLikes] = useState(likesCount);
 // const [like1, setLike] =useState(false)

// const { members }= member

  
  console.log('member', likes)
 
   const toggleColor =()=>{
     const newState=!toggle
     setCount(count => count === 1 ? -1 : 1)
    // const newUser = user === `11 and others` ? `You, ${user + 1} and others ` : `11 and others`
    // const newMember= member ? "": ` ${members[1].likesCount+5}`  
     setToggle(newState)
     setLikes(likes => likes + count)
   }
  //  const increment=()=>{
  //    const newState=count
  //   setCount(prevState => prevState + 1);
  // }

   const textColor =  toggle?'grey':'dodgerblue'
  
  return (
    <View style={styles.container}>
      <TouchableOpacity style={styles.like, {color: colors.text}} >
          <AntDesign name='like1' size={25} style={{color:textColor}} onPress={() =>toggleColor()} />
      </TouchableOpacity>
      <View>
        <Text style={[styles.text, {color:textColor}]}>{likes}{" likes"}</Text>
        <Text style={[styles.text, {color:textColor}]}>like</Text>
        {/* <View>
        {like1?setUser(user+1):user}
        </View> */}
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
    container: {
      flex: 1,
      flexDirection: "row",
      alignItems: "center",
    },
    like: {
      marginLeft: 20,
      marginTop: 20,
      marginRight: 20,
    },
    text: {
      marginLeft: 10,
      marginTop: 20,
      color: "grey",
      fontSize: 20,
    },
  });
  
export default index