I have 3 screens here for example:
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?
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>
);
}