DEV Community: Brains and Beards

React Native Animated Code Input

Natalia — Mon, 03 Aug 2020 09:00:00 +0000

Introduction

Hello folks! Quarantine time has been productive for Brains and Beards and we are here today to show you our new baby. We created a small library for an animated code input. Our motivation for creating this library came from the need to give users a good first impression of an application. Generally, one time password screens are amongst the first screens a user will experience. We also weren't able to find suitable libraries in the community for auto-filling an input with text from a SMS text message. In this article we will demonstrate how to use it, show you a few input styles and teach you how to handle SMS autofill.

React Native Animated Code Input supports RN >=0.59.0.

Description

Animated Code Input is a 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.

Installation

Install the package with npm;

npm install react-native-animated-code-input

Or with yarn:

yarn add react-native-animated-code-input

Usage

A component has three required properties: code, onChangeText, and onSubmit.

value - [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 - [function] Callback that is called when the text input's text changes.
onSubmitCode = [function] Callback function called when every input field has a value. You will receive code value passed in as parameter

Simple Example

   <AnimatedCodeInput
              value={value}
              numberOfInputs={5} // default value 1
              onChangeText={onChangeText}
              onSubmitCode={onSubmit}
            />

Life would be boring without any custom options so we exposed some properties to let the developer customize their component:

activeCodeContainerStyle - [style object] custom active input style
afterInputDelay - [number] timeout after something is typed in an input
autoFocus - [boolean] Set to false if you want the user to press on the code input first before it starts register
codeAnimationDuration - [number] duration of fade effect for the code
codeContainerStyle - [style object] custom input style
cursorAnimationDuration - [number] cursor animation duration
cursorStyle - [style object] - custom cursor style
index - [number] active code input
numberOfInputs - [number] number of code inputs
onBlur - [function] callback that is called when the text input loses focus.
textColor - [string] input text color
textContentType - [string] 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.

Here are some examples using above properties:

Example 1

<AnimatedCodeInput
    value={code}
    numberOfInputs={NUMBER_OF_INPUTS}
    onChangeText={onChangeText}
    onSubmitCode={onSubmit}
    textColor={"black"}
    activeCodeContainerStyle={{
        customStyle: styles.simplyActiveCodeContainer,
    }}
    codeContainerStyle={{
        customStyle: styles.simplyCustomCodeContainer,
    }}
    cursorStyle={styles.simplyCursorStyle}/>


// Example styles for the above
simplyCustomCodeContainer: {
    backgroundColor: "#ffde1a",
    color: "#c1cefa",
    borderRadius: 5,
    borderColor: "black",
    borderWidth: 2,
  },
simplyCursorStyle: {
    color: "black",
  },
simplyActiveCodeContainer: {
    backgroundColor: "#ffde1a",
    borderColor: "black",
    borderRadius: 5,
    borderWidth: 2,
  },

Example 2

  <AnimatedCodeInput
    value={value}
    numberOfInputs={NUMBER_OF_INPUTS}
    onChangeText={onChangeText}
    onSubmitCode={onSubmit}
    textColor={"white"}
    activeCodeContainerStyle={{
        customStyle: styles.customActiveCodeContainer,
    }}
    codeContainerStyle={{ customStyle: styles.customCodeContainer }}
    cursorStyle={styles.customCursorStyle}/>

  // Example styles for the above
  customCodeContainer: {
    backgroundColor: "#060054",
    color: "#c1cefa",
    borderRadius: 5,
  },
  customActiveCodeContainer: {
    backgroundColor: "#c1cefa",
    borderColor: "#060054",
    borderRadius: 10,
  },
  customCursorStyle: {
    color: "#00b5f5",
  },

Example 3

<AnimatedCodeInput
    value={code}
    numberOfInputs={NUMBER_OF_INPUTS}
    onChangeText={onChangeText}
    onSubmitCode={onSubmit}
    textColor={'black'}
    activeCodeContainerStyle={{
        customStyle: styles.borderActiveCodeContainer,
    }}
    codeContainerStyle={{ customStyle: styles.borderCodeContainer }}
    cursorStyle={styles.cursorStyle}/>

// Example styles for the above
borderActiveCodeContainer: {
    backgroundColor: '#ffde1a',
    borderRadius: 50,
    borderColor: '#b2b',
    borderWidth: 2,
    width: 70,
    height: 70,
  },
borderCodeContainer: {
    backgroundColor: '#ffde1a',
    borderRadius: 50,
    borderColor: '#060054',
    borderWidth: 2,
    width: 70,
    height: 70,
  },
cursorStyle: {
    color: 'transparent',
  },

Two-Factor Authentication

Two-factor authentication, for good reason, is becoming a popular security feature of many applications. We decided to make our input handle autofill when receiving an SMS message. For iOS, it works by default because the default value for textContentType is oneTimeCode. For Android, we've created an example to show how the input is filled after a user clicks the copy button. To implement this, we start by adding a dependency for Clipboard:

yarn add "@react-native-community/clipboard

I wrote a simple function readFromClipboard that is responsible for checking a value that is copied to the clipboard. If the value is a number and has the same length as the input, the code is updated with the value. The input will then be populated with the code.

Here is a full example and demo:

import React, { FC, useState, useCallback, useEffect } from "react";
import {
  Text,
  View,
  StyleSheet,
  Alert,
  Platform,
  ScrollView,
  SafeAreaView,
} from "react-native";
import AnimatedCodeInput from "react-native-animated-code-input";
import Clipboard from "@react-native-community/clipboard";

const NON_NUMBER_REGEX = /[^0-9]/g;
const NUMBER_OF_INPUTS = 5;

const App: FC = () => {
  const [code, setCode] = useState<string>("");
  let intervalId: NodeJS.Timeout;

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

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

  const readFromClipboard = useCallback(async () => {
    const clipboardContent = await Clipboard.getString();
    const value = clipboardContent.replace(NON_NUMBER_REGEX, "");
    if (value.length === NUMBER_OF_INPUTS) {
      setCode(value);
      onSubmit(value);
      await Clipboard.setString("");
      clearInterval(intervalId);
    }
  }, []);

  // To handle sms code after click "Copy "NUMBER"" ("Copy "12345"") option on Android
  useEffect(() => {
    if (Platform.OS === "android") {
      intervalId = setInterval(() => readFromClipboard(), 1000);
      return () => {
        clearInterval(intervalId);
      };
    }
  }, []); // if you want to observe code all the time, replace [] with [code]

  return (
    <SafeAreaView style={styles.container}>
      <ScrollView
        contentContainerStyle={{
          flexGrow: 1,
          flexDirection: "column",
          justifyContent: "space-between",
        }}
      >
        <View style={styles.scrollContainer}>
          <Text style={styles.title}>
            react-native-animated-code-input demo
          </Text>

          <View>
            <AnimatedCodeInput
              value={code}
              numberOfInputs={NUMBER_OF_INPUTS}
              onChangeText={onChangeText}
              onSubmitCode={onSubmit}
            />

          </View>
        </View>
      </ScrollView>
    </SafeAreaView>
  );
};

Summary

We created this component out of the need to have a code input that could be customized for a number of different use cases (pardon the pun). By providing an animated experience, the user feels something more than just entering some digits into a boring text field. We also wanted to make it easy to style for any style guide and use in any project, so we hope you'll find this useful.

If you like our new component, you can follow the repository on Github and give as a star ⭐. If you find and issues or you have an idea to improve this component contact us.

Repository link:

brains-and-beards / react-native-animated-code-input

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.

Visit our blog for more posts 🚀 https://brainsandbeards.com/blog/

How to add redux-persist to Flutter app?

Natalia — Sun, 26 Apr 2020 09:12:41 +0000

Hello everyone, after a busy break from writing Flutter tutorials I'm back. I was thinking about interesting projects to build and thought it'd be nice to test out local notifications in Flutter. I came up with an idea to write a simple app for managing reminders. I'm the kind of person that remembers what happened 10 years ago, but doesn't remember to drink water during the day 😂. I started developing the app using an easy Redux-style setup. There's more info in this article 👉 Ultimate Redux Guide for Flutter. I then realised I need to store my data somewhere because I don't want to add my reminders every time I relaunch the app. I decided to add redux-persist. In this article, I'll show you how to set up a simple store to save and load state.

Setup

Add this to your package's pubspec.yaml file:

dependencies:
  redux_persist: ^0.8.3

After this, run this command in the terminal:

$ flutter pub get

Preparing models for storing and loading

In the app, there is a Reminder class. The class will evolve over the course of this post but essentially we'll use it to model our reminders.

class Reminder {
  final String time;
  final RepeatInterval repeat;
  final String name;

  const Reminder({
    @required this.time,
    @required this.repeat,
    @required this.name,
  });
}

RepeatInterval is an enum from the local notification's library. We'll talk more about it in the next article, but for now you just need to know it looks like this:

enum RepeatInterval { EveryMinute, Hourly, Daily, Weekly }

We've decided that the app will store persistent state in a JSON file. If we want to save and load data from the JSON file into an object model, we need to add two methods: fromJson and toJson. The first one is for creating objects from JSON; the second is for saving objects to JSON. One of the fields is of the type enum, which means we must write a method to parse it.

import 'package:flutter_local_notifications/flutter_local_notifications.dart';
import 'package:meta/meta.dart';

class Reminder {
  final String time;
  final RepeatInterval repeat;
  final String name;

  const Reminder({
    @required this.time,
    @required this.repeat,
    @required this.name,
  });

  static Reminder fromJson(dynamic json) {
    return json != null
        ? new Reminder(
            time: json["time"],
            repeat: parseRepeatIntervalToValue(json["repeat"]),
            name: json["name"])
        : null;
  }

  dynamic toJson() {
    return {
      "time": time,
      "repeat": parseRepeatIntervalToString(repeat),
      "name": name,
    };
  }

   static String parseRepeatIntervalToString(RepeatInterval repeat) {
    switch (repeat) {
      case RepeatInterval.Daily:
        return "Daily";
      case RepeatInterval.EveryMinute:
        return "EveryMinute";
      case RepeatInterval.Hourly:
        return "Hourly";
      case RepeatInterval.Weekly:
        return "Weekly";
      default:
        return "Daily";
    }
  }

  static RepeatInterval parseRepeatIntervalToValue(String repeat) {
    switch (repeat) {
      case "Daily":
        return RepeatInterval.Daily;
      case "EveryMinute":
        return RepeatInterval.EveryMinute;
      case "Hourly":
        return RepeatInterval.Hourly;
      case "Weekly":
        return RepeatInterval.Weekly;
      default:
        return RepeatInterval.Weekly;
    }
  }
}

Preparing RemindersState and AppState objects

If we prepared the model for loading and reading now we can adjust the state. The app stores the list of reminders in RemindersState. To save this state I also need a fromJson and toJson method.

import 'package:hello_world/models/index.dart';

class RemindersState {
  final List<Reminder> reminders;

  RemindersState({this.reminders});

  factory RemindersState.initial() {
    return new RemindersState(reminders: []);
  }

  static RemindersState fromJson(dynamic json) {
    return json != null
        ? RemindersState(
            reminders: parseList(json),
          )
        : [];
  }

  dynamic toJson() {
    return {
      'reminders': this.reminders.map((reminder) => reminder.toJson()).toList()
    };
  }

  RemindersState copyWith({List<Reminder> reminders}) {
    return RemindersState(reminders: reminders ?? this.reminders);
  }
}

List<Reminder> parseList(dynamic json) {
  List<Reminder> list = new List<Reminder>();
  json["reminders"].forEach((item) => list.add(Reminder.fromJson(item)));
  return list;
}

We've added a method parseList. It will iterate over a list and add Reminder models using the fromJson method to parse the list.

RemindersState is a member of the AppState class because AppState is a global state representation and we want to provide access to RemindersState across the entire application.

This setup is easier because we have everything ready. We just need to call on the RemindersState property methods: fromJson and toJson.

import 'package:flutter/material.dart';
import 'package:hello_world/store/RemindersState.dart';

@immutable
class AppState {
  final RemindersState remindersState;

  AppState({@required this.remindersState});

  factory AppState.initial() {
    return AppState(
      remindersState: RemindersState.initial(),
    );
  }

  dynamic toJson() {
    return {'remindersState': this.remindersState.toJson()};
  }

  static AppState fromJson(dynamic json) {
    return json != null
        ? AppState(
            remindersState: RemindersState.fromJson(json["remindersState"]))
        : {};
  }

  AppState copyWith({RemindersState remindersState}) {
    return AppState(remindersState: remindersState ?? this.remindersState);
  }
}

Preparing a store

When we finish preparing the models we can add the logic responsible for preparing the store. If you use redux in your app you will have a createStore method. Mine looks like this:

Future<Store<AppState>> createStore() async {
  final persistor = Persistor<AppState>(
    storage: FileStorage(await _localFile),
    serializer: JsonSerializer<AppState>(AppState.fromJson),
    debug: true,
  );

  var initialState;
  try {
    initialState = await persistor.load();
  } catch (e) {
    initialState = null;
  }

  return Store(
    appReducer,
    initialState: initialState ?? new AppState.initial(),
    middleware: [persistor.createMiddleware()],
  );
}

The Persistor object is responsible for saving to and loading from the disk.

Storage is the storage engine. I'm using a simple FileStorage engine but you can use your own custom storage engine. I created a local file using this code.

More information about Persistor can be found in the documentation for redux-persist.

If you want to use this code, add path_provider to the pubspec.yaml file.

  path_provider: ^1.6.7

Store<AppState> store;
Future<String> get _localPath async {
  final directory = await getApplicationDocumentsDirectory();

  return directory.path;
}

Future<File> get _localFile async {
  final path = await _localPath;
  return File('$path/state.json');
}

Serializer is used to serialize the state to and from bytes.

debug is a flag which outputs debug information as logs. It is very helpful when you prepare methods fromJson and toJson because you can easily check where you have an error

Another section is the try/catch, which helps prevent an error when you run the app without any saved state or you have some problems with serializing state.

The last section is returning a store with the app reducer, which we will cover in the next article. The initial state is a result of loaded state or just the initial AppState if we run an app for a first time.

The definition of Middleware is "A function that intercepts actions and potentially transforms actions before they reach the reducer." I added my persistor and call the createMiddleware method on it. Now you can enjoy redux-persist in you app.

Here is the result:

Summary

As you can see it is easy to set up. For me, the worst part was adjusting the models. Especially, if you have more complicated objects it can take some time. Anyway, it is worth it because it gives you sound type safety and works automatically whenever you're adding or changing state in your store. I hope you've enjoyed this tutorial and will see you back when we cover local notifications in Flutter 🧐.

If you like our Flutter tutorials, here are some more interesting articles to read:

DEV Community: Brains and Beards

React Native Animated Code Input

Introduction

Description

Installation

Usage

Simple Example

Example 1

Example 2

Example 3

Two-Factor Authentication

Summary

brains-and-beards / react-native-animated-code-input

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.

How to add redux-persist to Flutter app?

Setup

Preparing models for storing and loading

Preparing RemindersState and AppState objects

Preparing a store

Summary

Source Code

brains-and-beards / flutter-reminders-app

App which demonstrates using redux-persist and local notifications in Flutter

References