Navigate from a function call React native

Question

Hi guys I am having trouble finding a solution on my problem because I want to navigate to another page but here's the problem

function NewOrderPopUp({id, services, name, rating, accepted, destinationPlaceName, userPlaceName, driverName, driverContactNumber, driverRating, driverTrackingNumber})
{
    async function toggleAcceptBooking()
    {
        await firestore()
        .collection('userBookingRequest')
        .doc(id)
        .update({
            accepted : !accepted,
            driverName: 'Sample Driver',
            driverContactNumber: '09123456789',
            driverRating: '4.9',
            driverPlateNumber: 'NFT-2020',
            driverTrackingNumber: GenerateTrackingNumber(),
        })
        CheckIfBookingAccepted();
    }
}

return (
        <View>....</View>
);

export default NewOrderPopUp;

And I am calling the NewOrderPopUp Page in another file. like this

import NewOrderPopUp from "../../components/NewOrderPopUp";
const HomeScreen = () => {

//... codes here

return (
<View>
    <FlatList
         horizontal
         contentContainerStyle={{paddingHorizontal: 30}}
         data={userBookingData}
         keyExtractor={(item) => item.id} 
         renderItem={({item}) => <NewOrderPopUp {...item}/>} />                     
</View>
);
}
export default HomeScreen;

What I wanted is that if I click the toggleAcceptBooking it will nagivate to another page like

navigation.navigate('BookingPage');

Can someone enlighten me please . Thank you.

Add nav script in CheckIfBookingAccepted() or after the firestore() promise resolve — Rajendran Nadar
– Rajendran Nadar, Commented Aug 16, 2021 at 16:10

Ahmed Gaber · Accepted Answer · 2021-08-16 16:25:20Z

1

Do it by passing navigation down as a prop.

do the following steps.

handle navigation prop in HomeScreen

const HomeScreen = ({ navigation }) => {

}

pass navigation as a prop to NewOrderPopUp

<FlatList
    ...
    renderItem={({item}) => <NewOrderPopUp navigation={navigation} {...item}/>} />

handle navigation prop in NewOrderPopUp and use it to navigate.

function NewOrderPopUp( {navigation, ...} ){
    async function toggleAcceptBooking(){
        await ...
        navigation.navigate('BookingPage');
    }
}

answered Aug 16, 2021 at 16:25

Ahmed Gaber

4,1042 gold badges17 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Ginxxx Over a year ago

TypeError: undefined is not an object (evaluating 'navigation.navigate') I am having this error

Ginxxx Over a year ago

"@react-navigation/native": "^6.0.2", "@react-navigation/stack": "^6.0.6",

Ahmed Gaber Over a year ago

please update your question with the code to can find the error.

Collectives™ on Stack Overflow

Navigate from a function call React native

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related