rn-os-ui v0.2.0

RN-OS-UI

React Native UI Library Typescript supported inspired from tailwind and chakra ui

0. Install

npm install rn-os-ui

1. Use

import { Text, View, TouchableOpacity, TextInput, Image } from "rn-os-ui";

export default function App() {
  return (
    <View flex={1} p="40">
      <View flex={1} />
      <Text size="20" fontWeight="bold" mb="20">
        Login to your Account
      </Text>
      <Input placeholder="Email" />
      <View h="10" />
      <Input placeholder="Password" />
      <TouchableOpacity
        mt="20"
        bg="#23049d"
        h="50"
        justify="center"
        round="8"
        shadow="sm"
      >
        <Text textAlign="center" color="white">
          Sign In
        </Text>
      </TouchableOpacity>
      <Text textAlign="center" mt="40" mb="20" color="#aaa">
        - Or sign in with -
      </Text>
      <View row>
        <SnsButton uri="https://cdn.icon-icons.com/icons2/2699/PNG/512/google_logo_icon_169090.png" />
        <View w="10" />
        <SnsButton uri="https://recruit.navercorp.com/img/favicon/naver_favicon.ico" />
        <View w="10" />
        <SnsButton uri="https://upload.wikimedia.org/wikipedia/commons/f/f2/Kakao_logo.jpg" />
      </View>
      <View flex={1} />
    </View>
  );
}

const Input = ({ placeholder }: { placeholder: string }) => {
  return (
    <TextInput
      placeholder={placeholder}
      h="50"
      px="10"
      bg="#fff"
      round="8"
      shadow="sm"
    />
  );
};

const SnsButton = ({ uri }: { uri: string }) => {
  return (
    <TouchableOpacity
      flex={1}
      bg="#fff"
      shadow="sm"
      p="10"
      round="8"
      align="center"
    >
      <Image source={{ uri }} w="24" h="24" />
    </TouchableOpacity>
  );
};

2. Compoments

• View
• ScrollView
• Text
• Image
• TouchableOpacity
• TextInput

3. Props

4. Margin / Padding Props

4. Box Style Props

5. borderRound Props