I want to make two buttons which go into different screen like if i click on chat it will go to chat page if i click on calls it will go in calls page

Question

How can I build two buttons where when i click at chat button then it will directly go to chat history and if i click at calls button it will directly go to call history?

Is there is alternative of making dynamic buttons?

import { StyleSheet, TouchableOpacity, Text, View } from 'react-native'
import React, { useState } from 'react'
import { Colors } from '../constants'
import { useNavigation } from '@react-navigation/native'


export const GroupofButtons = ({ buttons, dosom }) => {
    const navigation = useNavigation();
    const [clickedId, setClickedId] = useState(0);
    // const doinSomething = ({item}) => {
    //     navigation.navigator('item');
    // }
    const Nav = () => {
        navigation.navigate("ChatsPage");
      }
      const Nav1 = () => {
        navigation.navigate("CallingScreen");
      }
    const handleClick = (id) => {
        setClickedId(id)
    }

    return (
        <View style={styles.container}>
            {
                buttons.map((buttonsLabel, index) => {
                    return (
                        <TouchableOpacity
                            onPress={() => {Nav(),Nav1() , handleClick( index)}}
                            
                            key={index}
                            style={[
                                index === clickedId ? styles.buttonActive : styles.buttons,

                            ]}>
                            <Text
                                style={index === clickedId ? styles.textActive : styles.text}>{buttonsLabel}</Text>
                        </TouchableOpacity>
                    )

                })
            }
        </View>
    )
}


const styles = StyleSheet.create({
    container: {
        padding: 10,
        flexDirection: 'row',
    },
    buttons: {
        height: 25,
        width: 55,
        marginLeft: 10,
        alignItems: 'center',
        justifyContent: 'center',
        backgroundColor: 'white',
        borderRadius: 7,
        borderWidth: 1,
        boarderColor: Colors.primary,
    },
    buttonActive: {
        height: 25,
        width: 55,
        marginLeft: 10,
        alignItems: 'center',
        justifyContent: 'center',
        borderRadius: 7,
        backgroundColor: Colors.primary,

    },
    textActive: {
        color: 'white',
    },
    text: {
        color: 'black',
    },
})

Answer 1

Well I did solve this problem from my side. Let me explain. How I Did this. So first of all I made a GroupofButtons Component;

like this:

export const GroupofButtons = ({ buttons , setClicked,  Clicked}) =>{



const handleClick = (item, id) => {
    setClicked(id);
}



return (
    <View>
        <View style={styles.Floorcontainer} >
            {
                buttons.map((item, index) => {
                    return (

                        <TouchableOpacity
                            onPress={(item) => { handleClick(item, index) }}
                            key={item}
                            style={[
                                index === Clicked ? 
        styles.ActiveFloorContainer : styles.InActiveFloorContainer,
                            ]}
                        >

                            <Text style={[index === Clicked ? styles.ActiveFloorText : styles.InActiveFloorText]}>{item}</Text>
                        </TouchableOpacity >


                    )

                })
            }

        </View>
    </View>
)}

And Then I updated the value of Clicked button according to the Indexes and used useEffect hook In Main screen where my buttons is present.

const [Clicked, setClicked] = useState(0);
useEffect(() => {
console.log(Clicked);}, [Clicked])

And In Main Screen :

<GroupofButtons buttons={selectedhouse.floorplan} setClicked={setClicked} Clicked={Clicked} Floor1={selectedhouse} />

After this I will get the Index of the current clicked Button and we can do what even we want with that Index.

Like Running a loop in a array and render images and videos in flex box.