React-native-original-style NPM

react-native-original-style 🎉

Introducing 'Original Style,' a powerful React Native UI library designed to bring simplicity and flexibility to your mobile app development. Inspired by the elegance of Tailwind CSS, 'Original Style' offers a unique approach to styling React Native components, providing a seamless and efficient way to build beautiful user interfaces

Installation

Note: You must be using React Native 0.60.0 or higher.

npm install react-native-original-style react-native-fast-image

cd ios && pod install && cd ..

Configuration

Create a configuration file named original.config.js in the root of your React Native app. Here's an example of the configuration:

module.exports = {
  guideline: {
    //default
    width: 350,
    height: 680,
  },
  colors: {
    default: '#fff0',
    primary: '#000',
    secondary: '#333',
    error: '#bb2124',
    success: '#22bb33',
    info: '#5bc0de',
    gray: '#aaaaaa',
    text: '#000',
  },
  fontFamily: {
    default: 'roboto',
    bold: '',
    extraBold: '',
    semiBold: '',
    normal: '',
    light: '',
    extraLight: '',
    medium: '',
    thin: '',
    //..etc
  },
  fontSize: {
    default: 10,
    xs: 9,
    sm: 14,
    md: 20,
    lg: 25,
    xl: 30,
    xxl: 35,
    //..etc
  },
  spaces: {
    horizontal: 20,
    vertical: 20,
    divide: 10,
    stander: 5,
    //..etc
  },
  fontWeight: {
    bold: 'bold',
    normal: 'normal',
    //..etc
  },
  radius: {
    horizontal: 20,
    vertical: 20,
    //..etc
  },

  combinations: {
    rowCenter: {
      alignItems: 'center',
      justifyContent: 'center',
      flexDirection: 'row',
    },
    center: { alignItems: 'center', justifyContent: 'center' },
    //..etc
  },
};

Usage

import { View, Text } from 'react-native-original-style';

// ...

<View center mt-10 pv-20 ph-10 w-full h-full bg-secondary>
  <Text color-primary size-xl>
    Test
  </Text>
</View>;

The library extends the styling capabilities by providing utility classes like center, mt-10, pv-20, etc. These classes are based on the configuration in the original.config.js file.

Configuration Customization

Feel free to customize the original.config.js file according to your project's needs. Adjust colors, fonts, sizes, and other styling parameters to match your design system.