Announcing NativeBase

We are amazed and thrilled simultaneously. Few anticipated this trajectory for a React Native UI component library. Beginning in 2016, we created a starter-kit and extracted reusable components into NativeBase.

The initial release contained bundled components in an NPM package. Version 2.0 followed, incorporating Material and Cupertino design principles. The evolution continues.

With over 55,000 dependent projects and nearly 16,000 GitHub stars, NativeBase 3.0 introduces a utility-first paradigm offering reusable components across design spectrums. This library prioritizes flexibility and customization while enabling universal platform support across web and mobile, with native behavior, accessibility focus (keyboard, mouse, screen readers), and dark mode capabilities.

We're positioned at an exciting technological juncture where platforms converge. React Native and community contributions enable this transformation. The NativeBase team contributes to helping millions build quality software faster.

What's new and improved?

Themability

Based on the Styled System Theme specification, NativeBase 3.0 features highly themable core components, allowing you to define color palettes, type scales, font stacks, breakpoints, and border radius values according to your needs.

Out of the box Accessibility

Integrated with React ARIA and React Native ARIA, which provides React hooks, this feature enables building accessible design systems efficiently. The framework's customizability and consistency support extensive coding flexibility.

Utility Props

Inspired by Styled System, rapidly construct custom UI components using constraint-based utility style props. The platform delivers expressive, consistent UI components defined according to your theme.

<Box px="3" py="2" mb="4" bg="primary.400" rounded="lg">
  <Text fontWeight="medium" color="white" fontSize="sm">
    Hey There!
  </Text>
</Box>

Customisable Theme

Theming represents a NativeBase core element. Customize the theme freely. The NativeBase theme object is easily extended and customized.

import React from "react";
import { NativeBaseProvider, extendTheme } from "native-base";
import { Content } from "./Content";
 
export default function () {
  const theme = extendTheme({
    colors: {
      // Add new color
      primary: {
        50: "#E3F2F9",
        100: "#C5E4F3",
        200: "#A2D4EC",
        300: "#7AC1E4",
        400: "#47A9DA",
        500: "#0088CC",
        600: "#007AB8",
        700: "#006BA1",
        800: "#005885",
        900: "#003F5E",
      },
      // Redefining only one shade, rest of the color will remain same.
      amber: {
        400: "#d97706",
      },
    },
    config: {
      // Changing initialColorMode to 'dark'
      initialColorMode: "dark",
    },
  });
 
  return (
    <NativeBaseProvider theme={theme}>
      <Content />
    </NativeBaseProvider>
  );
}

Introducing Pseudo Props

Inspired by Chakra and utility-first libraries, we provide pseudo props support covering conditional domains like platforms, color modes, and interaction states.

<Button
  _hover={{
    _text: { color: "secondary.400" },
  }}
>
  Change My Color
</Button>

A demo—Kitchen Sink

We launched a demo app showcasing all NativeBase components in action. Kitchen Sink demonstrates buttons, forms, icons, and more.

Rich Component Library

Over forty pre-provided components enable seamless development, including buttons, action sheets, menus, spinners, popovers, breadcrumbs, and additional options.

Highly Responsive

NativeBase 3.0 accepts object and array values for responsive styles, making apps ideal for mobile phones through large desktops.

<Center
  bg="primary.400"
  rounded="xl"
  w={["24", "48", "72"]}
  h={{ base: "24", sm: "48", md: "72" }}
>
  This is a responsive box
</Center>

Introducing Dark Mode

NativeBase now supports dark and light themes by default, simplifying dark mode implementation.

function UseColorMode() {
  const { colorMode, toggleColorMode } = useColorMode();
  return (
    <Box flex={1} bg={colorMode === "dark" ? "black" : "coolGray.300"}>
      <Button m={2} ml="auto" onPress={toggleColorMode}>
        Toggle
      </Button>
      <Center flex={1}>
        <Button
          _light={{ bg: "teal.600", _text: { color: "white" } }}
          _dark={{ bg: "amber.500" }}
        >
          Sample
        </Button>
      </Center>
    </Box>
  );
}
 
export default function () {
  return (
    <NativeBaseProvider>
      <UseColorMode />
    </NativeBaseProvider>
  );
}

Consistent Across Platforms

Built using the React Native Framework, we deliver native experiences consistent across iOS, Android, and web. Universal components enable fast-tracked development with reliable, organized coding.

The Future of NativeBase 2.0 & 3.0

Over years, NativeBase served over 50,000 projects worldwide. We've received considerable support for NativeBase 3.0 through downloads and GitHub stars.

With NativeBase 3.0's arrival, we're slowing NativeBase 2.0 to support migration to v3.0. NativeBase 2.0 remains supported, allowing continued use for those preferring to remain on the previous version. Critical bug fixes for v2.0 are supported through March 2022.

The NativeBase 2.0 blog is deprecated but archived. Find it here.

We're excited sharing NativeBase 3.0 with the community. We hope you appreciate it and contribute improvements. Plans include introducing NativeBase StartUp+, featuring 100+ production-ready UI screens for web and native platforms, launching soon. Follow our Discord channel and Twitter for updates.