🔑 react-native-pincode

PIN CODE component for react-native

If you have any suggestions or bugs, please don't hesitate to register an issue or PR. Thank you 🥳

🎥 Sample Video

🤖 AOS

🍎 IOS

📦 Installation

install with react-native-reanimated and follow react-native-reanimated to set babel plugin

npm i @wjdghks963/react-native-shuffle-pincode react-native-reanimated

⚙️ Usage

Simple Usage

function App(): JSX.Element {
  const isDarkMode = useColorScheme() === 'dark';

  const backgroundStyle = {
    backgroundColor: isDarkMode ? Colors.darker : Colors.lighter,
  };

  const pincode = ['1', '1', '1', '1', '1', '1'];

  const [backGroundColor, setBackGroundColor] = useState < string > ('');

  return (
    <SafeAreaView style={backgroundStyle}>
      <StatusBar
        barStyle={isDarkMode ? 'light-content' : 'dark-content'}
        backgroundColor={backgroundStyle.backgroundColor}
      />
      <View style={{ height: '100%' }}>
        <PinCode
          pinCount={pincode.length}
          correctPin={pincode}
          afterClear={() => setBackGroundColor('yellow')}
          backgroundColor={backGroundColor}>
          <PinCode.PinContent filledColor="red" emptyColor=""/>
          <PinCode.NumberPad
            emptyIcon={<Text>⭐️</Text>}
            deleteIcon={<Text>DEL</Text>}
            shuffleIcon={<Text>Shuffle</Text>}
            backgroundColor={'red'}
          />
        </PinCode>
      </View>
    </SafeAreaView>
  );
}

🔧 Properties

Properties that accept React.ReactNode can accommodate any type of component, whether they are native components from React Native's core or components from third-party libraries. This flexibility allows you to seamlessly integrate a wide range of UI elements and widgets into your PIN CODE screen.

ex)

<View/>, <Text/>, <Image/> ...

PinCode

| PropertyName | Type | Description | Default | |-----------------|----------|--------------------------------------------------------------|----------| | pinCount | number | Length of pin code | required | | correctPin | string[] | The value You've specified as an answer | required | | afterClear | any | Function that execute when correctPin and User input is same | required | | backgroundColor | string? | Main Container background color | "" |

PINContent

| PropertyName | Type | Description | Default | |--------------|------------|----------------------------------|---------| | title | ReactNode? | Title that above pins | null | | filledColor | string? | Circle Color when user input pin | red | | emptyColor | string? | Circle Color before input comes | #fca5a5 | | badgeSize | number? | Size of badges | 23 |

NumberPad

| PropertyName | Type | Description | Default | |-----------------|------------------|-------------------------------------------------------|----------| | emptyIcon | React.ReactNode | Component that Represents a blank space in the Numpad | required | | deleteIcon | React.ReactNode | Component that can delete input | required | | shuffleIcon | React.ReactNode? | Component that can shuffle numpad | '' | | backgroundColor | string? | Numpad background color | #dc2626 | | textColor | string? | Numpad text color | white |

License

MIT

Made with create-react-native-library