@coder-shubh/react-native-pincode
v1.0.9
Published
A custimizable and easy-to-use PIN code component for react-native.
Downloads
15
Maintainers
Readme
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
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",
},
});
| 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.
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.