react-native-reusable-custom-components
TypeScript icon, indicating that this package has built-in type declarations

1.0.9 • Public • Published

react-native-reusable-custom-components

Custom and reusable components for react-native

Installation

npm install react-native-reusable-custom-components
OR
yarn add react-native-reusable-custom-components

Features

  1. CustomHeader
  2. CustomButton
  3. CustomLoader
  4. iPhoneXHelper
  5. Scalability Functions
  6. Helper Funcions
  7. Custom OTP TextInput
  8. CustomModal

Usage

1. CustomHeader

import { CustomHeader } from "react-native-reusable-custom-components"

 <CustomHeader
    middleText='Home'
    backButton
 />

2. CustomButton

import {  CustomButton, } from "react-native-reusable-custom-components"

 <CustomButton
    title='Next'
    onPress={() => console.log("Pressed")}
 />

3. CustomLoader

import { CustomLoader } from "react-native-reusable-custom-components"

 <CustomLoader loading />

4. iPhoneXHelper

import { iPhoneHelp, } from "react-native-reusable-custom-components"

  <View
    style={{
       marginBottom: iPhoneHelp.isIphoneX() ? 20 : 0
    }}
    />

5. Scalability Functions

import { scale, verticalScale, moderateScale } from "react-native-reusable-custom-components"

  <View
    style={{
          marginHorizontal: moderateScale(15),
          marginVertical: verticalScale(20),
          padding: scale(3)
    }}
    />

6. Helper Functions

import { HelperFunction, } from "react-native-reusable-custom-components"

  const checkValidation = async () => {
    var email = "test@gmail.com"
    var isValidmail = await HelperFunction.isValidEmail(email);
    console.log("isValidmail-->", isValidmail);

    var password = "Test123@"
    var validPassword = await HelperFunction.isValidPassword(password);
    console.log("validPassword-->", validPassword);
  }

7. Custom OTP TextInput

import { OTPTextInput, } from "react-native-reusable-custom-components"

<OTPTextInput
    otpCount={4}
    onCodeUpdate={(code) => {
     console.log("Code is--->", code)
    }}
/>

8. CustomModal

import {CustomModal,CustomButton } from "react-native-reusable-custom-components"

 const [visible, setVisible] = useState(false)

 <CustomButton
    title='Next'
    onPress={() => setVisible(true)}
 />

<CustomModal
   visible={visible}
   onRequestClose={() => setVisible(false)}
/>

Contributing

See the contributing guide to learn how to contribute to the repository and the development workflow.

License

MIT

Install

npm i react-native-reusable-custom-components

DownloadsWeekly Downloads

17

Version

1.0.9

License

MIT

Unpacked Size

201 kB

Total Files

81

Last publish

Collaborators

  • ronakkotak