react-native-24
A clean, modern React Native component library
Last updated 19 days ago by alcuin .
ISC · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install react-native-24 
SYNC missed versions from official npm registry.

react 24 logo

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.

Current Tags

  • 0.6.2                                ...           latest (19 days ago)

62 Versions

  • 0.6.2                                ...           19 days ago
  • 0.6.1                                ...           a month ago
  • 0.6.0                                ...           a month ago
  • 0.5.9                                ...           2 months ago
  • 0.5.8                                ...           2 months ago
  • 0.5.7                                ...           3 months ago
  • 0.5.6                                ...           3 months ago
  • 0.5.5                                ...           3 months ago
  • 0.5.4                                ...           3 months ago
  • 0.5.3                                ...           5 months ago
  • 0.5.2                                ...           5 months ago
  • 0.5.1                                ...           5 months ago
  • 0.5.0                                ...           6 months ago
  • 0.4.9                                ...           6 months ago
  • 0.4.8                                ...           6 months ago
  • 0.4.7                                ...           6 months ago
  • 0.4.6                                ...           6 months ago
  • 0.4.5                                ...           7 months ago
  • 0.4.4                                ...           7 months ago
  • 0.4.3                                ...           8 months ago
  • 0.4.2                                ...           8 months ago
  • 0.4.1                                ...           8 months ago
  • 0.4.0                                ...           8 months ago
  • 0.3.9                                ...           8 months ago
  • 0.3.8                                ...           8 months ago
  • 0.3.7                                ...           8 months ago
  • 0.3.6                                ...           8 months ago
  • 0.3.4                                ...           8 months ago
  • 0.3.3                                ...           8 months ago
  • 0.3.2                                ...           8 months ago
  • 0.3.1                                ...           9 months ago
  • 0.3.0                                ...           9 months ago
  • 0.2.9                                ...           9 months ago
  • 0.2.8                                ...           9 months ago
  • 0.2.7                                ...           9 months ago
  • 0.2.6                                ...           9 months ago
  • 0.2.5                                ...           9 months ago
  • 0.2.4                                ...           9 months ago
  • 0.2.3                                ...           9 months ago
  • 0.2.2                                ...           9 months ago
  • 0.2.1                                ...           9 months ago
  • 0.2.0                                ...           9 months ago
  • 0.1.9                                ...           9 months ago
  • 0.1.8                                ...           9 months ago
  • 0.1.7                                ...           9 months ago
  • 0.1.6                                ...           9 months ago
  • 0.1.5                                ...           9 months ago
  • 0.1.4                                ...           9 months ago
  • 0.1.3                                ...           9 months ago
  • 0.1.2                                ...           9 months ago
  • 0.1.1                                ...           9 months ago
  • 0.1.0                                ...           9 months ago
  • 0.0.9                                ...           9 months ago
  • 0.0.8                                ...           9 months ago
  • 0.0.7                                ...           9 months ago
  • 0.0.6                                ...           9 months ago
  • 0.0.5                                ...           9 months ago
  • 0.0.4                                ...           9 months ago
  • 0.0.3                                ...           9 months ago
  • 0.0.2                                ...           9 months ago
  • 0.0.1                                ...           9 months ago
  • 1.2.3                                ...           9 months ago
Maintainers (1)
Downloads
Today 0
This Week 0
This Month 10
Last Day 0
Last Week 0
Last Month 24
Dev Dependencies (5)
Dependents (0)
None

Copyright 2014 - 2016 © taobao.org |