@coder-shubh/react-native-pincode

`PinInput` is a customizable React Native component for entering PIN codes.

Table of Contents

• Installation
• Usage
• Props
• License

Installation

You can install the @coder-shubh/react-native-pincode package using npm or yarn:

# with npm
npm i @coder-shubh/react-native-pincode

# with yarn
yarn add @coder-shubh/react-native-pincode

Usage

import React, { useState } from "react";
import PinInput from "@coder-shubh/react-native-pincode";
import { SafeAreaView, StyleSheet } from "react-native";

export default function App() {
  const [pin, setPin] = useState("");
  const [isFirstPinSetupComplete, setIsFirstPinSetupComplete] = useState(false);

  const whenPinEntered = (text: string) => {
    setIsFirstPinSetupComplete(true);
    setPin(text);
  };
  return (
    <SafeAreaView style={styles.container}>
      <PinInput
        testID="pinInputTestId"
        onPinEntered={whenPinEntered}
        customDotStyle={{ backgroundColor: "red" }}
        customFilledDotStyle={{ backgroundColor: "green" }}
        customPinLength={6}
      />
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    backgroundColor: "#ecf0f1",
    padding: 8,
  },
  customDot: {
    borderColor: "#000",
  },
  customDotFilled: {
    borderColor: "red",
    backgroundColor: "blue",
  },
});

Props

Prop	Type	Description	Default Value
onPinEntered	Function	Callback function triggered when the PIN is fully entered.	-
testID	string	Test identifier for testing purposes.	-
customDotStyle	object	Custom styles for the empty PIN dot.	null
customFilledDotStyle	object	Custom styles for the filled PIN dot.	null
customPinLength	number	Custom length for the PIN.	-1

In this table:

Prop: Name of the prop. Type: Type of the prop. Description: Description of what the prop does. Default Value: Default value of the prop, if any.

License

This project is licensed under the MIT License - see the LICENSE file for details.

In this version, I've added:

• Title and badges centered at the top.
• Descriptive text centered.
• Table of Contents for easy navigation.
• Stylish section headings.
• Usage code block with syntax highlighting.
• More visual appeal with horizontal lines and section separators.

Feel free to adjust the styles, colors, or any other aspects to better suit your preferences or project branding.