CODEWITHSUNDEEP
javascriptreact-nativenative-base
Dhaval Jardosh
Dhaval Jardosh

Reputation: 7309

Do we need to wrap all the screens with NativeBaseProvider in Native Base - React Native?

I have 3 screens here for example:

  1. AuthScreen
  2. HomeScreen
  3. LoginScreen

AuthScreen.js, HomeScreen.js, LoginScreen.js and have their respective content inside. And they are called by <Stack.Navigator> as shown in the link here

<NativeBaseProvider>
.
.
.
</NativeBaseProvider>

Is there a way I can just write the NativeBaseProvider once than have to do it on every screens?

Upvotes: 1

Views: 1647

Answers (1)

Mathusuthan Packiyarajah
Mathusuthan Packiyarajah

Reputation: 11

NativeBaseProvider is a component that makes the theme available throughout your app. It uses React's Context API. Add NativeBaseProvider to the root of your app and update App.js as follows:

import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import { NativeBaseProvider } from 'native-base';

const Stack = createNativeStackNavigator();

export default function App() {
  return (
   <NativeBaseProvider>
     <NavigationContainer>
       <Stack.Navigator>{/* ... */}</Stack.Navigator>
     </NavigationContainer>
    </NativeBaseProvider>
  );
}

Upvotes: 1

Related Questions