react-native-sb-chiper

react-native-sb-chiper

React Native component library using Shopify's Restyle, based on Chiper's design system.

Contributing

See the contributing guide to learn how to contribute to the repository and the development workflow.

Installation

npm install react-native-sb-chiper

yarn add react-native-sb-chiper

Storybook

yarn expo start

Usage

Wrapper your code into ThemeProvider App.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

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