Setup NativeBase Provider
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:
App.js
import React from 'react';
import { NativeBaseProvider, Text, Box } from 'native-base';
export default function App() {
return (
<NativeBaseProvider>
<Box flex={1} bg="#fff" alignItems="center" justifyContent="center">
<Text>Open up App.js to start working on your app!</Text>
</Box>
</NativeBaseProvider>
);
}
Add custom theme (Optional)
If you need to customize the default theme to match your design requirements, you can extend the theme from native-base.
NativeBase 3.0 provides an extendTheme function that deep merges the default theme with your customizations.
import { extendTheme, NativeBaseProvider } from 'native-base';
const newColorTheme = {
brand: {
900: '#8287af',
800: '#7c83db',
700: '#b3bef6',
},
};
const theme = extendTheme({ colors: newColorTheme });
function App() {
return (
<NativeBaseProvider theme={theme}>
<App />
</NativeBaseProvider>
);
}
Add colorModeManager (Optional)
If you want to do something with the color modes in your app, you can use colorModeManager Prop of NativeBaseProvider to achieve it.
In the below example we will show how to store the active ColorMode in an async storage, so it can be consistent all around your app.
import React from 'react';
import { NativeBaseProvider, ColorMode } from 'native-base';
import type { StorageManager } from 'native-base';
import AsyncStorage from '@react-native-async-storage/async-storage';
export default ({ children, theme }: any) => {
const colorModeManager: StorageManager = {
get: async () => {
try {
let val = await AsyncStorage.getItem('@my-app-color-mode');
return val === 'dark' ? 'dark' : 'light';
} catch (e) {
console.log(e);
return 'light';
}
},
set: async (value: ColorMode) => {
try {
await AsyncStorage.setItem('@my-app-color-mode', value);
} catch (e) {
console.log(e);
}
},
};
return (
<NativeBaseProvider theme={theme} colorModeManager={colorModeManager}>
{}
</NativeBaseProvider>
);
};
Add external dependencies (Optional)
If you want to use
, you need to pass linear gradient dependency as a config object in NativeBaseProvider. This dependency can be either from
or
import React from 'react';
import { NativeBaseProvider } from 'native-base';
const config = {
dependencies: {
'linear-gradient': require('expo-linear-gradient').LinearGradient,
},
};
export default () => {
return (
<NativeBaseProvider config={config}>
<Center flex={1}>
<Example />
</Center>
</NativeBaseProvider>
);
};
Mock data for frame and insets.
for further information.
{ get : Function , set : Function }
Manage Color mode in your app
use custom theme in your app
To include external dependencies. For example -