Green Native

Green Native

This is a React Native developer support library. 

In the process of working with React Native, I realized that it saves a lot of time using a support library. I also use some other public support libraries, but I feel dissatisfied or it is not suitable for me. 

I hope this library of mine will help you programmers!!

Install

npm i green-native react-native-vector-icons

Require

npx react-native-link

Colors

import { Colors } from "green-native";
<Text style={{ color: Colors.green, fontSize: 18 }}>Green Native</Text>;

Light and dark colors

<Text style={{ color: Colors.orangeDark, fontSize: 18 }}>Green Native</Text>

Social colors

<Text style={{ color: Colors.youtube, fontSize: 18 }}>Green Native</Text>

Button

import { Colors, Button } from "green-native";
<Button
  isOutLine={true}
  background={Colors.orange}
  boder={1}
  boderColor={Colors.green}
  radius={4}
  onPress={() => {
    console.log("green-native");
  }}
/>;

Avalailable props

Name	Type	Default
text	string: text center button	none
width	number	none
height	number	none
background	color	#28C953
textColor	color	#fff
textBold	boolean	false
fontSize	number	14
radius	number	0
boder	number	0
boderColor	color	#28C953
isOutLine	boolean	false
isDark	boolean	false
isLight	boolean	false
onPress	function	console.log(Green Native)

Checkbox

import { Colors, CheckBox } from "green-native";
const GreenMaster = () => {
  const [status, setStatus] = React.useState(false);

  return (
    <View>
      <CheckBox
        checked={status}
        text="This this Green Native CheckBox"
        textColor={Colors.messenger}
        iconColor={Colors.green}
        iconCheckedColor={Colors.orange}
        onPress={() => {
          setStatus(!status);
        }}
      />
    </View>
  );
};

Avalailable props

Name	Type	Default
text	string: text right of icon	none
checked	boolean	false
iconType	string: AntDesign, FontAwesome...	MaterialCommunityIcons
iconName	string: camera, rocket...	checkbox-blank-outline
iconCheckedName	string: camera, rocket...	checkbox-marked
iconColor	color	#607D8B
iconCheckedColor	color	#28C953
iconSize	number	30
textSize	number	16
textColor	number	#28C953
onPress	function	console.log(Green Native)
activeOpacity	number	0.5

Spinner

import { Colors, Spinner } from "green-native";
<Spinner
  type="full"
  size="small"
  transparent={true}
  color={Colors.orangeDark}
/>;

Avalailable props

type	string: full, fullscreen -> full screen	100%
transparent	boolean	false -> backgroundColor: '#fff'
width	number	fullscreen
height	number	fullscreen
color	color	#28C953
size	string: large, small	large

Updating..

Keyword: green-native green native Green Native baochau baochau9xx