A clean, modern React Native component library. Light and easy to use. Built for 2020 and beyond.
Made with 🔥 in the UK.
## 💻 Installation
```sh
npm install react-native-24
```
or
```sh
yarn add react-native-24
```
## 🚀 Usage
Here is a quick example to get you started, **it's all you need**:
```jsx
import React from "react";
import { Text, Flex } from "react-native-24";
function App() {
return (
24
);
}
```
## 📚 Components
Flex (for flexible, dynamic divs)
```jsx
{...children}
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)
```jsx
{...children}
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)
```jsx
{...children}
size?: oneOf(['xs', 'sm', 'md', 'lg', 'xl']). Default is 'md';
children?: any;
style?: ViewStyle;
```
Button (buttons)
```jsx
feedback?: FeedbackType;
theme?: ThemeType;
children: any;
style?: ViewStyle | ViewStyle[];
onPress?: () => void;
onPressIn?: () => void;
onPressOut?: () => void;
disabled?: boolean;
```
Divider (hr)
```jsx
color?: string;
width?: string | number;
style?: ViewStyle;
```
Spinner (ActivityIndicator)
```jsx
color?: string;
size?: number;
style?: ViewStyle;
```
SkeletonLoader
```jsx
Custom text
children: any;
```
Input (TextInput)
```jsx
height?: number;
style?: ViewStyle;
value?: string;
onChange?: Function;
multiline?: boolean;
editable?: boolean;
placeholder?: string;
```
Avatar (for profile/display pictures)
```jsx
source: any; // uri or require local
style?: ViewStyle;
size?: "xxs" | "xs" | "sm" | "md" | "lg";
```
Image
```jsx
width: number;
style: ImageStyle | ImageStyle[];
source: ImageURISource;
onLoad?: (args: any) => any;
```
Card
```jsx
children: any;
style?: ViewStyle;
noPadding?: boolean;
```
Icon
```jsx
name: string;
size?: number;
color?: string;
```
Inherits props from [react-native-vector-icons/Icon](https://github.com/oblador/react-native-vector-icons#icon-component)
Select
```jsx