React-native-beauty-ui NPM

Beauty UI

The objective of this project is to create a complete and advanced framework such as Antd for the web, I want to be able to offer a set of reusable components that are native and beautiful in such a way that we all love to use it in our projects

Documentation

Documentation under construction, launch scheduled for August 31, 2021.

Installation

npm install react-native-ui-components

Usage

import {
  Button,
  Space,
  SpaceItem,
  Title,
  UINativeProvider,
} from 'react-native-ui-components';

const configProviderUI = {
  colors: {
    magenta: '#E5097F',
    orangered: '#ff4500',
    green: '#00FF00',
    purple: '#800080',
  },
};

export default function App() {
  return (
    <UINativeProvider initialState={configProviderUI}>
      <ScrollView contentContainerStyle={styles.view}>
        <View style={styles.container}>
          <View>
            <Title>Buttons</Title>
            <Title level={4}>Default buttons</Title>
            <Space justify="center">
              <SpaceItem>
                <Button>Primary</Button>
              </SpaceItem>
              <SpaceItem>
                <Button color="success">Success</Button>
              </SpaceItem>
              <SpaceItem>
                <Button type="link" color="warning">
                  Warning
                </Button>
              </SpaceItem>
              <SpaceItem>
                <Button type="outline" color="error">
                  Error
                </Button>
              </SpaceItem>
            </Space>
          </View>
          <View>
            <Title level={4}>Circle buttons</Title>
            <Space justify="center">
              <SpaceItem>
                <Button shape="circle">Primary</Button>
              </SpaceItem>
              <SpaceItem>
                <Button shape="circle" color="success">
                  Success
                </Button>
              </SpaceItem>
              <SpaceItem>
                <Button type="link" shape="circle" color="warning">
                  Warning
                </Button>
              </SpaceItem>
              <SpaceItem>
                <Button type="outline" shape="circle" color="error">
                  Error
                </Button>
              </SpaceItem>
            </Space>
          </View>
          <View>
            <Title level={4}>Custom color buttons</Title>
            <Space justify="center">
              <SpaceItem>
                <Button color="magenta">Magenta</Button>
              </SpaceItem>
              <SpaceItem>
                <Button color="orangered">Orangered</Button>
              </SpaceItem>
              <SpaceItem>
                <Button color="green">Green</Button>
              </SpaceItem>
              <SpaceItem>
                <Button color="purple">Purple</Button>
              </SpaceItem>
            </Space>
          </View>
        </View>
      </ScrollView>
    </UINativeProvider>
  );
}
;