Nativebase logo
NativeBase
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
Copy
import React from 'react';
// 1. import `NativeBaseProvider` component
import { NativeBaseProvider, Text, Box } from 'native-base';
export default function App() {
// 2. Use at the root of your 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.
Copy
// 1. Import the extendTheme function
import { extendTheme, NativeBaseProvider } from 'native-base';
// 2. Extend the theme to include custom colors, fonts, etc
const newColorTheme = {
brand: {
900: '#8287af',
800: '#7c83db',
700: '#b3bef6',
},
};
const theme = extendTheme({ colors: newColorTheme });
// 3. Pass the `theme` prop to the `NativeBaseProvider`
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 a async storage, so it can be consistent all around our app.
Copy
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}>
{/* Your App Goes Here */}
</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
Copy
import React from 'react';
import { NativeBaseProvider } from 'native-base';
const config = {
dependencies: {
// For Expo projects (Bare or managed workflow)
'linear-gradient': require('expo-linear-gradient').LinearGradient,
// For non expo projects
// 'linear-gradient': require('react-native-linear-gradient').default,
},
};
export default () => {
return (
<NativeBaseProvider config={config}>
<Center flex={1}>
<Example />
</Center>
</NativeBaseProvider>
);
};
NativeBaseProvider Props
Name
Type
Description
Default
initialWindowMetrics
Object
Mock data for frame and insets. for further information.
-
colorModeManager
{ get : Function , set : Function }
Manage Color mode in your app
-
theme
Object
use custom theme in your app
NativeBase Default Theme
config
{dependencies: {}}
To include external dependencies. For example -
-
Nativebase logo
MadeWithNativeBase