react-native-24
v0.6.2
Published
A clean, modern React Native component library
Downloads
36
Readme
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";
function App() {
return (
<Flex justifyContent="center">
<Text type="h1" color="blue">
24
</Text>
</Flex>
);
}
📚 Components
Flex (for flexible, dynamic divs)
<Flex props>
{...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 props>
{...children}
</Text>
children: any
size?: oneOf(['p', 'span', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6']); Default is 'p'.
color?: string;
bold?: boolean;
skeletonLoading?: boolean;
camel?: boolean;
underlined?: boolean;
numberOfLines?: number;
style?: TextStyle;
Space (handy replacement for margins)
<Space props>
{...children}
</Space>
size?: oneOf(['xs', 'sm', 'md', 'lg', 'xl']). Default is 'md';
children?: any;
style?: ViewStyle;
Button (buttons)
<Button props>
{...children}
</Button>
feedback?: FeedbackType;
theme?: ThemeType;
children: any;
style?: ViewStyle | ViewStyle[];
onPress?: () => void;
onPressIn?: () => void;
onPressOut?: () => void;
disabled?: boolean;
Divider (hr)
<Divider props />
color?: string;
width?: string | number;
style?: ViewStyle;
Spinner (ActivityIndicator)
<Spinner props />
color?: string;
size?: number;
style?: ViewStyle;
SkeletonLoader
<SkeletonLoader>
<Text>Custom text</Text>
</SkeletonLoader>
children: any;
Input (TextInput)
<Input props />
height?: number;
style?: ViewStyle;
value?: string;
onChange?: Function;
multiline?: boolean;
editable?: boolean;
placeholder?: string;
Avatar (for profile/display pictures)
<Avatar props />
source: any; // uri or require local
style?: ViewStyle;
size?: "xxs" | "xs" | "sm" | "md" | "lg";
Image
<Image source="image URI source" width={100} />
width: number;
style: ImageStyle | ImageStyle[];
source: ImageURISource;
onLoad?: (args: any) => any;
Card
<Card props />
children: any;
style?: ViewStyle;
noPadding?: boolean;
Icon
<Icon name="camera" size={20} color="#fff" />
name: string;
size?: number;
color?: string;
Inherits props from react-native-vector-icons/Icon
Select
<Select
onValueChange={(value) => console.log(value)}
items={[
{ label: "Football", value: "football" },
{ label: "Baseball", value: "baseball" },
{ label: "Hockey", value: "hockey" },
]}
/>
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
ref={(ref) => {
Notify.setNotification(ref);
}}
text={Text} // use whatever text component you want (so you can have custom fonts)
/>;
Notify (to call Notification ☝️)
Notify.open(message, type);
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.