green-native

This is a library for React Native code

Usage no npm install needed!

<script type="module">
  import greenNative from 'https://cdn.skypack.dev/green-native';
</script>

README

GREEN NATIVE

Intall

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

Require

npx react-native-link

AnimationButton

Simple buttom

import { AnimationButton } from "green-native";

<AnimationButton
  animation="zoom-out"
  text="Green Native"
  background="red"
  paddingHorizontal={15}
  paddingVertical={10}
  radius={6}
/>;

Using CustomComponents

import { AnimationButton } from "green-native";

<AnimationButton
  animation="zoom-in"
  CustomComponents={() => (
    <View
      style={{
        padding: 10,
        backgroundColor: "red",
        alignItems: "center",
        justifyContent: "center",
      }}
    >
      <Text style={{ fontSize: 18 }}>Green Native</Text>
    </View>
  )}
/>;

Available props

Name Type Default
text string: text center button none
color color #fff
width number none
height number none
fontSize number 16
background color #28C953
radius number 0
isBold boolean false
paddingHorizontal number 5
paddingVertical number 5
fontFamily string: font name none
animation string: zoom-in, zoom-out zoom-in
onPress function console.log(Green Native)
CustomComponents Element none

Icon

import { Icon } from "green-native";

<Icon type="Ionicons" name="camera" size={30} color={Colors.purpleDark} />;

Available props

Require react-native-vector-icons

Icons can be found at: https://oblador.github.io/react-native-vector-icons

Name Type Default
type string: AntDesign, FontAwesome... Ionicons
name string: camera, filter... flask-sharp
size number 18
color color #28C953

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>
  );
};

Available 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

Colors

import { Colors } from "green-native";

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

Available props

Name Color
transparent rgba(0,0,0,0)
trans05 rgba(0,0,0,0.05)
trans50 rgba(0,0,0,0.5)
primaryColor #28C953
red #F44336
blue #2196F3
pink #E91E63
orange #FF5722
blueGrey #607D8B
purple #9C27B0
blueGrey #607D8B
borderColor #ECEFF1

Light or dark colors can be used

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

Social network color

<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("This is handle");
  }}
/>;

Available 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)

Spinner

import { Colors, Spinner } from "green-native";

<Spinner
  type="full"
  size="small"
  transparent={true}
  color={Colors.orangeDark}
/>;

Available props

Name Type Default
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

ButtonIcon

import { Colors, ButtonIcon } from "green-native";

<ButtonIcon
  text="This is Green Native"
  textColor={Colors.black}
  textSize={20}
  onPress={() => {
    console.log("This is Green Native");
  }}
/>;

Available props

Name Type Default
text string: text on right of icon 100%
iconType string: AntDesign, FontAwesome... false -> backgroundColor: '#fff'
iconName string: camera, roket.. fullscreen
iconColor color #28C953
iconSize number 26
textColor color #28C953
textSize number 16
isBold boolean false
onPress function console.log(Green Native)
paddingHorizontal number 0
paddingVertical number 0
activeOpacity number 0.5

ErrorNotification

import { Colors, ErrorNotification } from "green-native";

<ErrorNotification
  text="Please enter password"
  color={Colors.redLight}
  fontSize={18}
/>;

Available props

Name Type Default
text String, number none
color color #28C953
fontSize number 14
isBold boolean false
marginVertical number 0
marginHorizontal number 0

Hook

useKeyboard

import { useKeyboard } from "green-native";

const keyboard = useKeyboard(); // true, false

Other

screenHeight, screenWidth

import { screenHeight, screenWidth } from "green-native";

<View style={{ width: screenWidth, height: screenHeight }} />;

windowHeight, windowWidth

import { windowHeight, windowWidth } from "green-native";

<View style={{ width: windowWidth, height: windowHeight }} />;

GreenStyles: Center, Row, ColumCenter, ShadowBox, Title

Function

Name Type Input Output
isIOS function true - false
is18x9 function true - false
isNull function true - false
saveToStorage function String: name, value
getFromStorage function String: name String
PhoneCall function String: phone number Open phone call
parseMoney function String, number: 69000 69.000

END OF VERSION 1.0.0

About

NGUYEN PHUC BAO CHAU

linked & facebook: baochau9xx

Keyword

baochau9xx, green, green-native, green native, react-native, native, baochau