How to wrap appContainer with a theme provider tag from react-native-elements?

Question

I need to enclose my app main component with a ThemeProvider tag, but I don't know where to enclose it, because I am using an appContainer from react-navigation, look like I need to enclose the appContainer instead.

I am working in a react-native project without expo. I am importing react-native-elements and react-navigation. I need to enclose my app.js which is already wrapped by an appContainer

App.js

import { createSwitchNavigator, createStackNavigator, createAppContainer } from 'react-navigation';
import PantallaInicio from './components/home/PantallaInicio';
import PantallaLogin from './components/auth/PantallaLogin';
import PantallaRegistro from './components/auth/PantallaRegistro';
import PantallaCargando from './components/auth/PantallaCargando';

const AppStack = createStackNavigator({ Home: PantallaInicio, });
const AuthStack = createStackNavigator({ Login: PantallaLogin, Registro: PantallaRegistro });

export default createAppContainer(createSwitchNavigator(
  {
    AuthLoading: PantallaCargando,
    App: AppStack,
    Auth: AuthStack,
  },
  {
    initialRouteName: 'AuthLoading',
  }

));

index.js

/**
 * @format
 */

import {AppRegistry} from 'react-native';
import App from './src/App';
import {name as appName} from './app.json';

AppRegistry.registerComponent(appName, () => App);

Sorry, I don't have any output yet, Thanks for your time.

Answer 1

createAppContainer returns React Component. Thus, you can wrap this using any provider.

import React from 'react';
import {AppRegistry} from 'react-native';
import App from './src/App';
import { ThemeProvider } from 'react-native-elements';
import theme from './your-theme';
import {name as appName} from './app.json';

const ProvidedApp = () => {
  return <ThemeProvider theme={theme} ><App /></ThemeProvider>
}

AppRegistry.registerComponent(appName, () => ProvidedApp);