RN-CUSTOM-BUTTOM-QL

• This npm page contains the steps to this custom button
• Version:
  1. "react": "18.1.0",
  2. "react-native": "0.70.6"
  3. "react-native-vector-icons": "^9.2.0"

How do I get set up?

• First create a react native project using react-native init project_name.
• Install the dependency rn-custom-button-ql.
• Run your app using "npm run android" for Android, and "npm run ios" for IOS.

Usage:

Import the package

import RNButton from 'rn-custom-button-ql';

Then call the component

<RNButton
  title="Click Me"
  loading={loading}
  loaderSize={25}
  loaderColor="#fff"
  onPress={() => { setloading(!loading) }}
  style={styles.btnView}
  rev={false}
  textStyle={{ fontSize: 16, color: "#fff" }}
  iconname="facebook"
  iconType={Icons.FontAwesome}
  iconcolor="#fff"
  iconsize={20}
  iconstyle={{}}
/>

Use the image as icon

<RNButton
  title="Click Me"
  image={
    <Image
      source={{uri: "https://cdn-icons-png.flaticon.com/512/3114/3114883.png"}}
      style={{width: 20, height: 20, tintColor: "#fff"}}
    />
  }
  loading={loading}
  loaderSize={25}
  loaderColor="#fff"
  onPress={() => { setloading(!loading) }}
  style={styles.btnView}
  rev={false}
  textStyle={{ fontSize: 16, color: "#fff" }}
/>

Styles

const styles = StyleSheet.create({
  btnView: {
    width: 140, height: 38,
    backgroundColor: "#0073ff",
    justifyContent: "space-evenly",
    alignItems: "center",
    borderRadius: 5
  }
});

More Props

1. onFocus: Function
2. onBlur: Function
3. onPress: Function
4. onLongPress: Function
5. onPressIn: Function
6. onPressOut: Function
7. delayLongPress: Function
8. delayPressIn: Function
9. delayPressOut: Function