React Native ​

Prod:

The @zurich/react-native NPM package is a package made exclusively to be used with React Native.

It uses pure TypeScript, so the notions of the @zurich/design-tokens package do not apply here. The customization mechanics are completely different. But has also exclusive components to help with the use of the foundations to supply those functionalities.

INFO

We recommend the use Expo as the main tool for development.

Install ​

Use the following command to install the package in your repo.

sh
npm i -D @zurich/react-native

Use ​

In order to use components, just import them from the @zurich/react-native source.

The app requires the use of the ZrThemeProvider component in order to inject a context where the components can react to the theme changes. The theme attribute can de light or dark and nested a explained in the theme foundations.

tsx
import { View } from 'react-native';

import { ZrThemeProvider, ZrIcon } from '@zurich/react-native';

export default function App () {
  return (
    <ZrThemeProvider style={styles.container}>
      <ZrIcon icon="close:line" />
    </ZrThemeProvider>
  );
}

Unique components ​

As mentioned, there are some components that are exclusive of this React Native library and that candle some the foundations specifications.

ZrText ​

...

ZrView ​

...