@wjdghks963/react-native-shuffle-pincode v1.0.5

🔑 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

PINContent

NumberPad

License

MIT

Made with create-react-native-library