TypeScript | NativeBase

3.4.x

Search

⌘

K

Introduction

Getting Started

Setup NativeBase Provider

Resources

Creating a Universal App with NativeBase and Solito

Core Concepts

Utility Props Specificity

Pseudo Props: Overview

Pseudo Props: Dos & Don'ts

Internal Pseudo Props

Features

Color mode (Dark Mode)

NativeBase Factory

SafeAreaView Props

Theme

Customizing Theme

Customizing Fonts

Customizing Components

Making components dark mode compatible

Layout

VStack / Column

Forms

Data Display

Feedback

Typography

Overlay

Disclosure

Media and Icons

Transition

PresenceTransition

Others

ReactNative Components

KeyboardAvoidingView

Hooks

useBreakpointValue

useColorModeValue

useContrastText

useAccessibleColors

Examples

Recipes

Designs

Drawer Navigation

Forms

Form with Validation

Login/Signup Forms

Layout

More

IMPORTANT MESSAGE — If you are starting a new project with NativeBase, we recommend using gluestack-ui instead.

Explore gluestack-ui

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

MadeWithNativeBase