Package detail

GREEN NATIVE

Intall

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

Require

npx react-native-link

AnimationButton

Simple buttom

import { AnimationButton } from "green-native-ts";

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

Using CustomComponents

import { AnimationButton } from "green-native-ts";

<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

Icon

import { Icon } from "green-native-ts";

<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

CheckBox

import { Colors, CheckBox } from "green-native-ts";

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

Colors

import { Colors } from "green-native-ts";

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

Available props

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-ts";

<Button
  isOutLine={true}
  background={Colors.orange}
  boder={1}
  boderColor={Colors.green}
  radius={4}
  onPress={() => {
    console.log("This is handle");
  }}
/>;

Available props

Spinner

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

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

Available props

ButtonIcon

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

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

Available props

ErrorNotification

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

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

Available props

Hook

useKeyboard

import { useKeyboard } from "green-native-ts";

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

Other

screenHeight, screenWidth

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

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

windowHeight, windowWidth

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

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

GreenStyles: Center, Row, ColumCenter, ShadowBox, Title

Function

Contact

NGUYEN PHUC BAO CHAU

• Website: https://ischau.org
• Website 2: https://dovuihainao.com
• Website 3: https://thatthuvi.com
• Telegram: https://t.me/baochau9xx
• Facebook: https://facebook.com/baochau9xx
• Mail: chau.02it@gmail.com

Keyword

baochau9xx, green, green-native-ts, green native, react-native, native, baochau, dovuihainao