TypeScript | NativeBase | Universal Components for React and React Native

Data Display
Typography
Disclosure
Media and Icons
Others
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