ui-kit-react-native

UI kit for React Native


Keywords
ui-kit-react-native, ui component kit, react native components, react native ui
License
ISC
Install
npm install ui-kit-react-native@0.1.2

Documentation

UI-Kit-for-react-native

We have made effective building blocks referred to as components. The Components are constructed in pure React Native platform along with some JavaScript functionality with rich set of customisable properties. These components allow you to quickly build the perfect interface. A collection of ready to use React Native components which you can edit or override according to your need.

Installation

You can use the components by using following steps

  1. Open command prompt and navigate to your working directory.
  2. Clone the repository in your project directory.
git clone https://github.com/ysethi92/ui-kit-react-native.git
  1. Import the Component needed in your project.
import {<component-name>} from './ui-kit-react-native/components'

Components

List of Components:

  1. Avatar
  2. Button
  3. Cards
  4. Checkbox
  5. Floating Button
  6. Header
  7. List
  8. Radio Button
  9. Spinner
  10. Text
  11. Thumbnail

1. Avatar

Avatars are used to visually represent a user or a person with which it is associated

Usage

<View style={styles.container}>
    <Text>Avatar Icon</Text>
    <Avatar Icon name="ios-menu" size={40} color="white"/>
    <Text>Avatar Label</Text>
    <Avatar Label name="AG" size={40} color="white" />
    <Text>Avatar Image</Text>
    <Avatar Image source={{uri:uri}} size={40} />
</View>

Props Reference:

Property Default Option Description
source - - Image path for thumbnail
color - - Color of a label or icon
Size - - Size of the avatar
icon - - Represents icon as an avatar
label - - Represents label as an avatar
image - - Represent image as an avatar

2. Button

For interaction between user and system buttons are used. They are the touchable component found in almost every interactive application.

Usage

</View>
  <Button
      text="Primary"
      round
      theme="primary"
      onPress={() => null}
  />
  <Button
      text="Success"
      round
      theme="success"
      onPress={() => null}
  />
  <Button
      text="Warning"
      round
      theme="warning"
      onPress={() => null}
  />
</View>

Props Reference:

Property Default Option Description
source - - Image path for thumbnail
color - - Color of a label or icon
Size - - Size of the avatar
icon - - Represents icon as an avatar
label - - Represents label as an avatar
image - - Represent image as an avatar

3. Cards

Card

  • This component adds a box-shadow by default.
  • It also provides default spacing and alignment between cards.

CardItem

  • This is the child component of Card.
  • Works very similar to the list items of the list.
  • Takes input such as Text, Button, Image, Thumbnail, Icon.
  • The card takes any number of CardItem.

Usage

<Card>
  <CardItem header >
      <Left>
        <Thumbnail Rounded size="medium" source={require('./assets/Amish-Tripathi.jpg')}>
        </Thumbnail>
      </Left>
      <Body>
        <Text>Amish Tripathi</Text>
        <Text note>Author</Text>
      </Body>

    </CardItem>
    <CardItem body>

        <Image source={require('./assets/bg.jpg')} style={{height: 100, width: '100%'}}/>

    </CardItem>
  
</Card>

Props Reference:

Property Default Option Description
header - - Displays text as a header for cards
body - - Defines section for the body of the card.The child components are rendered with proper spacing and alignment.
footer - - Displays text as a footer for cards
button - - To navigate on the click of a card item
border false boolean Adds border to the cardItems

4. Checkbox

Checkbox are used to select between the choices where the multiple options can be selected.

Usage

const checkBoxEntries = [
	{
		text: 'Yes',
		checked: false,
	},
	{
		text: 'No',
		checked: false,
	},
	{
		text: 'None',
		checked: false,
	},
];
<CheckBox
	entries={checkBoxEntries}
	backgroundColor="red" />

Props Reference:

Property Default Option Description
entries - - List of the description of the checkboxes.
backgroundColor red Color of the selected checkboxes

5. Floating Button

Floating buttons are overlay button found in most of the latest apps.

Usage

<FB 
  onPress = {this.clickHandler}
  style =  {styles.FB} 
  imageUri = {require('./assets/plus-icon.png')}
 />

Props Reference:

Property Default Option Description
source - - Image path for thumbnail
color - - Color of a label or icon
Size - - Size of the avatar
icon - - Represents icon as an avatar
label - - Represents label as an avatar
image - - Represent image as an avatar

6. Header

Header represents the information about the screen where the user is at that moment.

Usage

<Header
	onBackPressed={() => ToastAndroid.show('Please implement a specific task!!!', ToastAndroid.SHORT)}
	onSearchPressed={() => ToastAndroid.show('Please implement a specific!!!', ToastAndroid.SHORT)}
	search
	back
	hidden={true}
	headerText="Header"
	textSize={22}
	backgroundColor="skyblue"/>

Props Reference:

Property Default Option Description
search - - Search icon in the header
back - - Back button in the header
hidden true - By default, the status bar is hidden
headerText Header - Description of the header
textSize 22 - The text size of the description
backgraoundColor skyblue - The background color of the header.

7. List

  • List: This component defines a section to include your list items.
  • ListItem:
    • This is the child component of List.
    • Defines a list item.
    • Adds border at bottom of each ListItem.
    • The list takes any number of ListItem.
    • Takes input such as Text, Badge, Thumbnail, Icon.

Usage

<List>
     <ListItem divider>
       <Text h4>A</Text>
     </ListItem>
     <ListItem>
       <Left><Text>Anmol</Text></Left>
       <Right><Icon name="angle-right"/></Right>
     </ListItem>
     <ListItem onPress={() => alert("HI")}>
       <Text>Akbar</Text>
     </ListItem>
     <ListItem >
     <Left>
         <Thumbnail Rounded size="small" source={require('./assets/Amish-Tripathi.jpg')}>
         </Thumbnail>
       </Left>
       <Body>
         <Text style={{fontWeight: 'bold'}}>Amish Tripathi</Text>
         <Text note>Author</Text>
       </Body>
       <Right><Text note>3:45 pm</Text></Right>
     </ListItem>

     <ListItem>
       <Left><Text>Baban</Text></Left>
       <Right><Icon name="angle-right"/></Right>
     </ListItem>

     <ListItem>
       <Left><Text>Cisco</Text></Left>
       <Right><Icon name="angle-right"/></Right>
     </ListItem>
     <ListItem onPress={() => alert("HI")}>
       <Text>Clark</Text>
     </ListItem>
</List>

Props Reference:

Property Default Option Description
divider - boolean It helps to organize and group the list items.
icon To have list styling of icons

8. Radio Button

Radio Button are provided where only one option needs to be selected between the given items.

Usage

const radioButtonEntries = [
	{
		text: 'Yes',
	},
	{
		text: 'No',
	},
	{
		text: 'None'
	},
];
<RadioButton
	entries={radioButtonEntries}
	backgroundColor="pink" />

Props Reference:

Property Default Option Description
entries - - List of the description of Radio button.
backgroundColor red Color of the selected button

9. Spinner

Spinner represents loading screen

Usage

<Spinner
    size="large"
    color="skyblue"
/>

Props Reference:

Property Default Option Description
size small - The spinner has two sizes: small and large
color black - Color of a spinner

10. Text

Text includes words and sentences of different styles.

Usage

<View style={styles.container}>
  <Text h1 h1Style={{color: 'blue', fontStyle: 'italic' }}>Title 1</Text>
  <Text h2 h2Style={{color: 'green', fontStyle: 'italic' }}>Title 2</Text>
  <Text h3 h3Style={{color: 'red', fontStyle: 'italic' }}>Title 3</Text>
  <Text h4 h4Style={{color: 'yellow', fontStyle: 'italic' }}>Title 4</Text>
</View>

Props Reference:

Property Default Option Description
h1 boolean - font size 40 (optional)
h2 boolean - font size 34 (optional)
h3 boolean - font size 28 (optional)
h4 boolean - font size 22 (optional)
h1Style Text style(object) - Styling for when h1 is set (optional)
h2Style Text style(object) - Styling for when h2 is set (optional)
h3Style Text style(object) - Styling for when h3 is set (optional)
h4Style Text style(object) - Styling for when h4 is set (optional)
Style Text style(object) - add additional styling for Text (optional)

11. Thumbnail

It is the small image representation of larger image.

Usage

const uri = "https://facebook.github.io/react-native/docs/assets/favicon.png";

<View style={styles.container}>
  <Text style={{fontWeight: 'bold'}}>Rounded Thumbnail</Text>
  <Text>Small</Text> 
  <Thumbnail Rounded size="small"  source={{uri: uri}} />
  <Text>Medium</Text>
  <Thumbnail Rounded size="medium"  source={{uri: uri}} />
  <Text>Large</Text>
  <Thumbnail Rounded size="large"  source={{uri: uri}} />
  <Text style={{fontWeight:'bold'}}>Square Thumbnail</Text>
  <Text> Small</Text>
  <Thumbnail size="small" source={{uri: uri}} />
  <Text>Medium</Text>
  <Thumbnail size="medium" source={{uri: uri}} />
  <Text>Large</Text>
  <Thumbnail size="large" source={{uri: uri}} />
</View>

Props Reference:

Property Default Option Description
source - - Image path for thumbnail
rounded - - Represents the shape of a thumbnail
square - - Represents shape of the thumbnail By default, the thumbnail is square in shaper
small - - Small thumbnail with width and height of 36px
large - - Large thumbnail with width and height of 80px