TypeScript | NativeBase | Universal Components for React and React Native

Search
K
Hire us
Data Display
Typography
Disclosure
Media and Icons
Others
Please opt in to our enterprise plan (coming soon) for priority support with NativeBase. If you are starting a new project, we recommend using gluestack-ui. For your existing projects, you can utilize @gluestack-ui/themed-native-base (beta).
TypeScript
To enable TypeScript for custom theme tokens or variants, we'll follow two simple steps.
Below, in the function, we're adding a space token and a custom variant for the Button.
Copy
import { extendTheme } from 'native-base';
const customTheme = extendTheme({
space: {
'space-2': '29px',
},
components: {
Button: {
variants: {
brand: {
p: '10',
bg: 'brand.500',
},
},
},
},
});
// 2. Get the type of the CustomTheme
type CustomThemeType = typeof customTheme;
// 3. Extend the internal NativeBase Theme
declare module 'native-base' {
interface ICustomTheme extends CustomThemeType {}
}
Result
Nativebase logo
MadeWithNativeBase