A clean, modern React Native component library. Light and easy to use. Built for 2020 and beyond.
Made with 🔥 in the UK.
💻 Installation
npm install react-native-24
or
yarn add react-native-24
🚀 Usage
Here is a quick example to get you started, it's all you need:
import React from "react";import Text Flex from "react-native-24"; { return <Flex ="center"> <Text ="h1" ="blue"> 24 </Text> </Flex> ;}
📚 Components
Flex (for flexible, dynamic divs)
<Flex > ...children</Flex> justifyContent?:| "space-between"| "space-evenly"| "flex-start"| "flex-end"| "center"| "space-around";alignItems?:| "space-between"| "center"| "stretch"| "flex-start"| "flex-end"| "baseline"| "initial"| "inherit";children: any;style?: ViewStyle;vertical?: boolean;
Text (for all kinds of text)
<Text > ...children</Text> children: anysize?: ; Default is 'p'color?: string;bold?: boolean;skeletonLoading?: boolean;camel?: boolean;underlined?: boolean;numberOfLines?: number;style?: TextStyle;
Space (handy replacement for margins)
<Space > ...children</Space> size?: Default is 'md';children?: any;style?: ViewStyle;
Button (buttons)
<Button > ...children</Button> feedback?: FeedbackType;theme?: ThemeType;children: any;style?: ViewStyle | ViewStyle;onPress?: void;onPressIn?: void;onPressOut?: void;disabled?: boolean;
Divider (hr)
<Divider /> color?: string;width?: string | number;style?: ViewStyle;
Spinner (ActivityIndicator)
<Spinner /> color?: string;size?: number;style?: ViewStyle;
SkeletonLoader
<SkeletonLoader> <Text>Custom text</Text></SkeletonLoader> children: any;
Input (TextInput)
<Input /> height?: number;style?: ViewStyle;value?: string;onChange?: Function;multiline?: boolean;editable?: boolean;placeholder?: string;
Avatar (for profile/display pictures)
<Avatar /> source: any; // uri or require localstyle?: ViewStyle;size?: "xxs" | "xs" | "sm" | "md" | "lg";
Image
<Image ="image URI source" = /> width: number;style: ImageStyle | ImageStyle;source: ImageURISource;onLoad?: args: any any;
Card
<Card /> children: any;style?: ViewStyle;noPadding?: boolean;
Icon
<Icon ="camera" = ="#fff" /> name: string;size?: number;color?: string;
Inherits props from react-native-vector-icons/Icon
Select
<Select = =/>
Inherits props from react-native-picker-select
Notification (for in-app toasts)
import Notification Notify from "react-native-24";import Text from "...";// Use at the root level of your app. Then you can call Notify.open elsewhere.<Notification = = // ( )/>;
Notify (to call Notification ☝️)
Notify; message: string;success: "success" | "info" | "error";
Roadmap
Currently in active development, and not ready for production projects. Any feedback is welcome.
License
This project is licensed under the terms of the MIT license.