# react-native-sb-chiper
React Native component library using Shopify's Restyle, based on Chiper's design system.

## Contributing

See the [contributing guide](CONTRIBUTING.md) to learn how to contribute to the repository and the development workflow.

## Installation

```sh
npm install react-native-sb-chiper
```
```sh
yarn add react-native-sb-chiper
```
## Storybook

```sh
yarn expo start
```

## Usage

Wrapper your code into `ThemeProvider`
`App.tsx`
```tsx
import * as React from 'react';
import { Box, ThemeProvider, Text, useTheme } from 'react-native-sb-chiper';

export default function App() {
  const { fonts } = useTheme();

  return (
    <ThemeProvider>
      <Box flex={1} justifyContent={'center'} alignItems={'center'}>
        <Text
          variant={'H1'}
          fontFamily={fonts.caustenRoundBold}
          color="chiperBrandRed"
        >
          example
        </Text>
      </Box>
    </ThemeProvider>
  );
}
```

If you are using `react-native-reanimated` add 1 line on `babel.config.js`
```tsx
module.exports = function (api) {
  return {
    plugins: [
      'react-native-reanimated/plugin', // added
  };
};
```


## Components

- AlertTop
- ArrowButton
- Badge
- BasicInput
- Box
- Button
- CardAlert
- CardAlternativeItem
- CardBasicItem
- CardContainer
- CardGroup
- CartButton
- CheckBox
- DisabledCardTooltip
- Flag
- Icon
- ImageAvatar
- InfoBar
- LightBox
- Loading
- MessageView
- NavBar
- NewLoading
- OnBoarding
- OrderNowButton
- PercentageCircle
- ProductCard
- ProgressBar
- ProgressValidation
- Rating
- Searchbar
- Select
- SelectPicker
- Separator
- Skeleton
- StepNavButton
- SwipeButton
- SwitchButton
- Text
- TextArea
- TextField
- TextFieldDigit
- TextFieldSearch
- Tooltip
- TopBar
- TouchableComponent
- TransWithFormat
- VivoProductCard

## License

MIT