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.
You can use the components by using following steps
- Open command prompt and navigate to your working directory.
- Clone the repository in your project directory.
git clone https://github.com/ysethi92/ui-kit-react-native.git- Import the Component needed in your project.
import {<component-name>} from './ui-kit-react-native/components'Avatars are used to visually represent a user or a person with which it is associated
<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>| 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 |
For interaction between user and system buttons are used. They are the touchable component found in almost every interactive application.
</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>| 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 |
- This component adds a box-shadow by default.
- It also provides default spacing and alignment between cards.
- 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.
<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>| 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 |
Checkbox are used to select between the choices where the multiple options can be selected.
const checkBoxEntries = [
{
text: 'Yes',
checked: false,
},
{
text: 'No',
checked: false,
},
{
text: 'None',
checked: false,
},
];
<CheckBox
entries={checkBoxEntries}
backgroundColor="red" />| Property | Default | Option | Description |
|---|---|---|---|
| entries | - | - | List of the description of the checkboxes. |
| backgroundColor | red | Color of the selected checkboxes |
Floating buttons are overlay button found in most of the latest apps.
<FB
onPress = {this.clickHandler}
style = {styles.FB}
imageUri = {require('./assets/plus-icon.png')}
/>| 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 |
Header represents the information about the screen where the user is at that moment.
<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"/>| 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. |
- 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.
<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>| Property | Default | Option | Description |
|---|---|---|---|
| divider | - | boolean | It helps to organize and group the list items. |
| icon | To have list styling of icons |
Radio Button are provided where only one option needs to be selected between the given items.
const radioButtonEntries = [
{
text: 'Yes',
},
{
text: 'No',
},
{
text: 'None'
},
];
<RadioButton
entries={radioButtonEntries}
backgroundColor="pink" />| Property | Default | Option | Description |
|---|---|---|---|
| entries | - | - | List of the description of Radio button. |
| backgroundColor | red | Color of the selected button |
Spinner represents loading screen
<Spinner
size="large"
color="skyblue"
/>| Property | Default | Option | Description |
|---|---|---|---|
| size | small | - | The spinner has two sizes: small and large |
| color | black | - | Color of a spinner |
Text includes words and sentences of different styles.
<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>| 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) |
It is the small image representation of larger image.
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>| 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 |