2.0.6 • Published 3 years ago
react-native-baochau v2.0.6
Information
Create by NGUYEN PHUC BAO CHAU
Date: 19/03/2021
Requirements
Install vector-icons
npm install react-native-vector-icons
Link vector-icons to your project
npx react-native link
Installation
npm i react-native-baochau
Version 1.0
Add Header and scale Sizes
Usage
import React from 'react';
import { View, Text } from 'react-native';
import {Header, Sizes} from 'react-native-header-baochau9xx';
export default class Home extends React.Component {
render() {
return (
<View style={{ flex: 1 }}>
<Header
title={'This is header'}
iconLeft={'chevron-back'} // Ionicons (vector-icons)
iconRight={'plus'} // Octicons (vector-icons)
colorTitle={'red'}
colorIcon={'green'}
colorBackground={'yellow'}
headerSize={Sizes.h100}
onPressLeft={() => console.log('Click left')}
onPressRight={() => console.log('Click Right')}
/>
<View style={{ flex: 1, alignItems: 'center' }}>
<View style={{ flex: 1, flexDirection: 'row', alignItems: 'center' }}>
<Text style={{ fontSize: 18 }}>Running..</Text>
</View>
</View>
</View>
);
}
}
Available props
Name | Type | Default | Description |
---|---|---|---|
colorBackground | color | '#fff' | Color background of header |
colorTitle | color | '#555555' | Color of title (text center) |
colorIcon | color | '#d4d5d8' | Color of icon left and right |
title | string | This is title | Title of header (screen name) |
headerSize | number | Scale 100 | Size (height) of header |
iconLeft | Ionicons | Icon in left of header (Ionicons) | |
iconRight | Octicons | Icon in right of header (Octicons) | |
onPressLeft | function | When click left icon | |
onPressRight | function | When click right icon |
Version 2.0
Add some function
Usage
import {plus, saveToStorage, getFromStorage, randomNonRepeat} from 'react-native-baochau';
usePlus() {
var a = 0;
var b = 0;
return plus(a, b);
}
useSaveToStorage() {
saveToStorage('name', 'value');
}
async useGetFromStorage() {
var data = await getFromStorage('name');
}
useRandomNonRepeat() {
var data = randomNonRepeat(10); // random 0 - 10
}
About me
Facebook: My Facebook
Linkedin: My Linkedin