First Steps

Setup

Each module is responsible for installing the uilib as a dev dependency.

npm i --save-dev @wix/wix-react-native-ui-lib@ga

Please make sure the library was added to your package.json with the ga tag.

Usage

Our design is based on basic style presets/constants.
Colors, Typography, Spacing, BorderRadius, Shadows and more..

How should I use it?

import {View, Text, Colors, Typography, Spacings, Button} from '@wix/wix-react-native-ui-lib';

<View style={{
        backgroundColor: Colors.grey80,
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center',
        padding: Spacings.page
      }}>
  <Text style={{color: Colors.grey10, ...Typography.text20}}>Hello World</Text>
  <Button label="Click Me!" backgroundColor={Colors.purple30}/>
</View>

How should I use it even better? With Modifiers!

import {View, Text, Colors, Typography, Button} from '@wix/wix-react-native-ui-lib';

<View flex bg-grey80 center padding-page>
  <Text grey10 text20>Hello World<Text>
  <Button bg-purple30 label="Click Me!">
</View>

For a list of available modifiers see here

Setup​

Usage​

Setup

Usage