react-ui-kit-native

v0.0.25

Published

4 years ago

React Native components based on React UI Kit

0High
0Medium
0Low

react-ui-kit

react react-native ui ui-kit

React Native UI Kit

React Native components based on React UI Kit

Offical documentation of React UI Kit Native made for React Native applications and you can easily use the components in your project. A lot of predefined styles & properties so it's perfectly fit for prototyping of your app UI.

React UI Kit Native - Website

Support: [email protected]

Setup

Install & usage

Install local module with react-ui-kit-native (it will also download all required dependencies)

npm install react-ui-kit-native --save

Use any component you want, all available props are available separately for each component below in this documentation. For example:

import React from 'react';
import { Button } from 'react-ui-kit-native';

export default class MyButton extends React.Component {
  render() {
    return (
      <Button full primary rounded label="My button" />
    );
  }
}

Components

List of available components:

Button

PROP | TYPE | DEFAULT | DESCRIPTION :--- | :--- | :--- | :--- color | string | #FFFFFF | Specifies a text color size | number | 16 | Specifies a fontSize size label | string | null | Specifies a string for the button text icon | bool | null | Specifies an icon name - check Icon component family | bool | null | Specifies an icon family - check Icon component loading | bool | false | Disable touch/press events and render ActivityIndicator full | bool | false | Set the width of the component to 80% from the total width of the screen opacity | number | 0.8 | Determines what the activeOpacity of the Button should be when touch is active basic | bool | false | Include styles.basic with backgroundColor: #FFFFFF, borderColor: #45547e █ bold | bool | false | Determines whether the styles.bold should be included border | bool | false | Determines whether the styles.border should be included rounded | bool | false | Determines whether the styles.basic should be included primary | bool | false | Include styles.primary with backgroundColor: #7CB527 █ secondary | bool | false | Include styles.secondary with backgroundColor: #FF3D57 █ tertiary | bool | false | Include styles.tertiary with backgroundColor: #7857A9 █ style | View style | {} | Add style properties for better customization

For more properties visit TouchableOpacity props

Link

PROP | TYPE | DEFAULT | DESCRIPTION :--- | :--- | :--- | :--- color | string | color: #323642 █ | Specifies a text color href | string | null | A link (web URL, email, contact etc.) onPress | func | () => {} | Called when the touch is released style | View style | {} | Add style properties for better customization

Input

For more properties visit TextInput props

Text

For more properties visit Text props

Icon

For more properties visit react-native-vector-icons

Image

For more properties visit Image props

Examples

A list of example screens based on the above components:

Login

import React from 'react';
import { Block, Button, Input, Text } from 'react-ui-kit-native';

export default class LoginScreen extends React.Component {
  render() {
    return (
      <Block flex middle>
        <Text title light color="#000">
          LOGIN SCREEN
        </Text>
        <Text caption thin color="#000">
          Please login to your account
        </Text>
        <Input placeholder="Email" />
        <Input password placeholder="Password" />
        <Button full primary rounded label="SIGN IN" />
      </Block>
    );
  }
}

Forgot

Forgot Screen

import React from 'react';
import { Block, Button, Input, Text } from 'react-ui-kit-native';

export default class LoginScreen extends React.Component {
  static navigationOptions = {
    header: null,
  };

  render() {
    return (
      <Block flex middle>
        <Text title light color="#000">
          FORGOT PASSWORD
        </Text>
        <Input placeholder="Email" />
        <Button full rounded label="RESET PASSWORD" />
      </Block>
    );
  }
}

Register

import React from 'react';
import { Block, Button, Input, Text } from 'react-ui-kit-native';

export default class RegisterScreen extends React.Component {
  render() {
    return (
      <Block fluid flex middle>
        <Text title light color="#000">
          REGISTER SCREEN
        </Text>
        <Input label="First name" placeholder="React" right icon="text" family="Entypo" />
        <Input label="Last name" placeholder="UI Kit" right icon="text" family="Entypo" />
        <Input
          right
          icon="location-pin"
          family="Entypo"
          label="Address"
          placeholder="Street name, number, house"
        />
        <Input
          right
          icon="phone"
          family="Entypo"
          type="phone-pad"
          label="Phone number"
          placeholder="0712345678"
        />
        <Button full rounded tertiary label="SIGN UP" />
      </Block>
    );
  }
}

Profile

Profile Screen

import React from 'react';
import { StyleSheet, Image } from 'react-native';
import { Block, Text } from 'react-ui-kit-native';

class ProfileScreen extends React.Component {
  render() {
    const { profile } = this.props;

    return (
      <Block fluid flex middle style={styles.profile}>
        <Text h5 light color="#000">{profile.fullname}</Text>
        <Image source={{ uri: profile.avatar }} style={styles.avatar} />
        <Text subtitle light>{`${profile.city}, ${profile.country}`}</Text>
        <Text bold>{profile.email}</Text>
      </Block>
    );
  }
}

ProfileScreen.defaultProps = {
  profile: {
    fullname: `React UI Kit`,
    city: `London`,
    country: `United Kingdom`,
    email: `[email protected]`,
    avatar: `https://react-ui-kit.com/assets/img/react-ui-kit-logo.png`,
  },
};

export default ProfileScreen;

const styles = StyleSheet.create({
  profile: {
    paddingTop: 15,
    backgroundColor: '#fff',
  },
  avatar: {
    width: 200,
    height: 200,
    resizeMode: 'contain',
  },
});

Work in progress

[x] export components style as styles for easy import
[ ] create theme HoC with default theme.js

Contribution

Have an idea for a new component or Screen? Just contact us at [email protected] and will add it to our list.