React Native Typed UI

A strongly typed themeable design system for react native

Getting Started

Add react-native-typed-ui to the dependencies

npm i react-native-typed-ui
Copy

or if you are using yarn,

yarn add react-native-typed-ui
Copy

Usage

React Native Typed UI requires you to initialize the components using createTypedComponents module with a default light theme object & a dark theme object.

Your design system is represented as the theme object. The components created using the createTypedComponents module will have the required types to work with your theme object. The idea behind Typed UI is to create strong typescript bindings between the components you use & your design system.

import createTypedComponents, {
  defaultDarkTheme,
  defaultTheme,
} from 'react-native-typed-ui';

export const {
  Box,
  Column,
  Row,
  InputText,
  TextBlock,
  Touchable,
  ThemeProvider,
  useTheme,
  useThemeToggle,
  useChangeDarkTheme,
  useChangeLightTheme,
} = createTypedComponents(defaultTheme, defaultDarkTheme);
Copy

The useThemeToggle hook will help you change your theme modes between light & dark. useChangeDarkTheme & useChangeLightTheme hooks will let you change your theme on the fly.

Typed UI in Action

The following example is built using three different themes, each having its own dark mode version.

Using the created components

Wrap your application's Root component inside the ThemeProvider component. This will add your theme to the React's context and lets all the child elements use the required theme configuration.

const App = () => {
  return <ThemeProvider>{/*.. Rest of your application ..*/}</ThemeProvider>;
};
Copy

Box component

Box component is the most basic layout component. It is built using a regular React Native <View/> component. However, the primary props of the Box component are ViewStyles that will work with your theme configuration.

For example, If your theme has the following configuration

{
  // ...
  spacing: {
    // ...
    "xl": 16,
    // ...
  },
  colors: {
    // ...
    brand100: "red",
    // ...
  }
  // ...
}
Copy

The Box component can use this color & spacing in it's attributes as

<Box backgroundColor="brand100" padding="xl">
  {/* ... */}
</Box>
Copy

Example

The following is a simple navbar built using the default theme configuration

<Box
  flexDirection="row"
  alignItems="center"
  justifyContent="space-around"
  backgroundColor="grey000"
  padding="xl"
  borderRadius="xs"
>
  <TextBlock padding="md" backgroundColor="brand300" borderRadius="md">
    Home
  </TextBlock>
  <TextBlock padding="md">About</TextBlock>
  <TextBlock padding="md">Contact Us</TextBlock>
</Box>
Copy

It will produce the following component ﹣