I have an issue when i try to use functions from a context inside a child component in a React native android app.
Below is my code for the context, and the form component im using it in (stripped down for brevity).
The "isFormOpen" object can be read no problem from inside any children that is wrapped in the provider, but when i try to call the "toggleForm" function from the same child component, it does nothing, no console errors either.
I have another context which is identical in structure and syntax except for vairable and function names etc, and that works perfectly, so im a bit confused as to why this does not work. I removed the other context, thinking there might be some type of conflict, but didnt solve it.
AccountContext.tsx
import React, { FC, createContext, useContext, useState } from 'react';interface AccountContextType { isFormOpen: boolean, toggleForm: (toggle: boolean) => void};export const AccountContext = createContext<AccountContextType>({ isFormOpen: false, toggleForm: () => null});export const AccountContextProvider: FC = props => { const [formOpen, setFormOpen] = useState<boolean>(false); const toggleForm = (toggle: boolean) => { setFormOpen(toggle); } const value: AccountContextType = { isFormOpen: formOpen, toggleForm } return (<AccountContext.Provider value={value}> {props.children}</AccountContext.Provider> )}export const useAccountContext = () => useContext(AccountContext);TrackUploadForm.js
import React from 'react';import { SafeAreaView } from 'react-native';import { Button } from 'react-native-paper';import { useAccountContext } from '../contexts/AccountContext';import { AccountContextProvider } from '../contexts/AccountContext';const TrackUploadForm = () => { const accountContext = useAccountContext(); return (<AccountContextProvider><SafeAreaView><Button onPress={() => accountContext.toggleForm(false)} mode='outlined'>Cancel</Button></SafeAreaView></AccountContextProvider> )};export default TrackUploadForm;