React Native: Passing context to provider constructors

Question

I have imported ui-kitten for my react native project. I am following the docs and notice that they have a function for modifying the theme. In my App.js, I also declare the navigator, as well as the providers. How can I make the value of of theme in <ApplicationProvider theme={theme}> accessible to a screen/component in my application?

App.js:
// ui-kitten
import { ApplicationProvider, IconRegistry } from '@ui-kitten/components';
import { mapping, light as lightTheme, dark as darkTheme } from '@eva-design/eva';
import { EvaIconsPack } from '@ui-kitten/eva-icons';
...
// our app export:
export default () => {
<Provider1>
  <Provider2, etc>
     <ApplicationProvider mapping={ mapping } theme={ darkTheme }>
       <IconRegistry icons={ EvaIconsPack }/>
       <App ref={ (navigator) => {
         setNavigator(navigator)
        } }/>
     </ApplicationProvider>
  </Provider2, etc>
</Provider1>

I have already tried creating a ThemeContext:

export default () => {
const { setTheme } = useContext(ThemeContext);
<Provider1>
  <Provider2, etc>
     <ApplicationProvider mapping={ mapping } theme=setTheme>
       <IconRegistry icons={ EvaIconsPack }/>
       <App ref={ (navigator) => {
         setNavigator(navigator)
        } }/>
     </ApplicationProvider>
  </Provider2, etc>
</Provider1>

Answer 1

It depends on the value you're passing in ThemeContext.Provider. By following this guide, you work with strings which represent a theme key, but you're also able to pass a theme as object and do something like this: const { theme } = React.useContext(ThemeContext);