How to pass a function/method as a parameter in react navigation.navigate

Question

I have two components named Home.js and ViewList.js the user can navigate to each component using a stack navigator.

I want to pass the updatePrice function as a parameter from Home.js to ViewList.js below are snippets on what I am attempting to accomplish. Here is a brief description of how the app is suppose to work. The user navigates from the Home.js component to the ViewList.js component. In the View.js component the user has the ability to enter a price for the item.

onChangeText I want to run the updatePrice function so that I can update the state of the list item in the Home.js component. My problem is that I cannot seem to figure out how to pass the updatePrice function to the ViewList through. Any suggestions on how I can accomplish this ?

Below is a code snippet for Home.js

export default function Home({navigation}){

    const updatePrice = (key, id, price) =>{
            setShoppingList(list =>
            list.map(list =>
            list.key === key
                ? {
                ...list,
                listItems: list.listItems.map(item =>
                    item.id === id
                    ? {
                    ...item,
                        price
                        }
                        :item
                )
                }
                : list
            )
            )
        console.log(shoppingLists);
    }
    return(
        <View style={globalStyles.container}>
            <FlatList
            data={shoppingLists}
            renderItem={({ item }) =>(
                <TouchableOpacity onPress={() => 
                                  // Here I try to pass the function through the 
                                 //navigate prop as an object.
navigation.navigate('ViewList',item,{'updatePrice': () => this.updatePrice})}>
                    {/*Create card container to wrap text in*/}
                    <Card>
                        <Text>{item.name}</Text>
                        <Text>Budget: $ {item.budget}</Text>
                    </Card>
                </TouchableOpacity>
            )}
            keyExtractor={item => item.key}
            />
        </View>
    )
}

Here is another ViewList.js

export default function ViewList({navigation}){
    const shoppingListKey = navigation.getParam('key');
    const updatePrice = navigation.getParam('updatePrice');
    const listInfo = navigation.getParam('listItems');

    return(
        <View style={globalStyles.container}>
            <Card>
                <Text>{navigation.getParam('name')}</Text>
                <Text>Budget: $ {budget}</Text>
                <Text> Total: {total}</Text>
                <FlatList
                    data={listInfo}
                    renderItem={({item}) =>(
                        <View>

                            <Text>{item.name}</Text>
                            <Text>Price: {item.price}</Text>
                            <TextInput
                                style={globalStyles.globalTextInput}
                                keyboardType={'numeric'}

                                onChangeText={(value) => 
//Here I try to retrieve the updatePrice function but I got an error.
this.props.navigation.state.params.updatePrice(shoppingListKey,item.id,value)}

                            />
                        </View>
                    )}
                    keyExtractor={item => item.id}
                />
            </Card>
        </View>
    )
}