npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

react-native-animated-code-input-text

v1.0.3

Published

Animated code input component for React Native, with support for iOS, Android, and React Native Web. It works with one-time code autofill on iOS and Android.

Downloads

61

Readme

Animated Code Input

A FORK OF https://github.com/brains-and-beards/react-native-animated-code-input to allow alphanumber inputs

Description

Animated code input component for React Native, with support for iOS, Android, and React Native Web. It works with one-time password autofill on iOS and Android.

This component is fully customizable. You can change the appearance of the fields, cursor and animation timing. It presents code in separate input fields without losing support for filling out one time passwords from messages.

Two-factor authentication, for a good reason, is part of more and more applications. Many times the screen where the user has to enter the code is one of the first screens they will see in your app. As you know, users are fast to judge your app quality by the UI. Why not give them a sweet looking eye candy, where your app can stand out from the others? That's why we are sharing with you our Animated Code Input Field.

Support: RN >=0.59.0

Demo

A small demo showing the animations and an automatic fill in of one-time passwords. On Android the user must tap the Copy button in the notification popup.

| Android | iOS | | :-----------------------------------------------------------------------------------------------------------------------------: | :-----------------------------------------------------------------------------------------------------------------: | | react-native-animated-code-input android demo | react-native-animated-code-input ios demo | | react-native-animated-code-input android sms autofill demo | react-native-animated-code-input ios autofill demo |

Getting started

Installation

Install the package with npm.

npm install @brainsbeards/react-native-animated-code-input

or with yarn

yarn add @brainsbeards/react-native-animated-code-input

Run example

 cd example
 yarn install
 cd ios
 pod install
 cd ..
 yarn react-native run-ios

Simple Example

import React, { FC, useRef, useState, useCallback } from "react";
import { TextInput, View, StyleSheet } from "react-native";
import AnimatedCodeInput from "@brainsbeards/react-native-animated-code-input";

const App: FC = () => {
  const [code, setCode] = useState<string>("");

  const onChangeText = useCallback((text: string) => {
    setCode(text);
  }, []);

  const onSubmit = useCallback((codeValue: string) => {
    Alert.alert(
      "DONE",
      codeValue,
      [{ text: "OK", onPress: () => setCode("") }],
      { cancelable: false }
    );
  }, []);

  return (
    <>
      <View style={styles.container}>
        <AnimatedCodeInput
              value={code}
              numberOfInputs={NUMBER_OF_INPUTS}
              onChangeText={onChangeText}
              onSubmitCode={onSubmit}
            />
      </View>
    </>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
  },
});

Attributes

Properties for this component:

| Prop | Type | Default | Description | | ------------------------------ | ------------ | ------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | onSubmitCode (Required) | function | | Callback function called when every input field has a value. You will receive code value passed in as parameter | | value (Required) | string | '' | It is the value displayed by the input. Use the app state to update it on every key press. This is similar to how React Native TextInput works. Please refer to example if you need more guidance. | | onChangeText (Required) | function | | Callback that is called when the text input's text changes. | | numberOfInputs | number | 1 | Number of code inputs | | onBlur | function | | Callback that is called when the text input loses focus. | | afterInputDelay | number | 50 | Delay after which an input will be registered and fade in animation will start. | | cursorAnimationDuration | number | 500 | Cursor animation duration | | codeAnimationDuration | number | 300 | Code fade in animation duration | | index | number | 0 | Active code input field | | codeContainerStyle | style object | {} | Custom input style | | activeCodeContainerStyle | style object | {} | Custom active input style | | cursorStyle | style object | {} | Custom cursor style | | textColor | string | black | Input text color | | autoFocus | boolean | true | Set to false if you want the user to press on the code input first before it starts register. | | textContentType | string | 'oneTimeCode' | Give the keyboard and the system information about the expected semantic meaning for the entered content. Leave it set to oneTimeCode if you want iOS to auto fill it from SMS. |

Made with 💛 at Brains and Beards

Show some 💛 and star the repo to support the project

GitHub stars GitHub forks GitHub watchers GitHub followers Twitter Follow

Author & support

Brains & Beards Logo

Brains and Beards

Credits

Backdrop for the screenshot is an amazing photo by Johannes Plenio.

Inspiration

Component source inspired by react-native-input-code by sfjwr