react-native-quiz-input

Basic Demo

Description

react-native-quiz-input is a React-Native package that allows the creation of individual character text inputs. While typing, focus will automatically move to the next input or to the previous one (in case of backspace). Spaces are also supported, therefore it is suitable for Quiz-like interfaces, Credit Card inputs, OTP screens and so on.

Installation

with Yarn:

yarn add react-native-quiz-input

or NPM:

npm install react-native-quiz-input --save

Usage

Import the component in your project:

import { QuizInput } from 'react-native-quiz-input';

Use the component:

<QuizInput
    wordStructure={ [ true, true, true, false, true, true, true ] }
    onChange={ onChange }
/>

const onChange = ( data ) => {
    console.log(data);
    // your code goes here
};

Props

| Name | Type | Description | Example | isRequired? | |:-----------------|:---------------------------| :------------------------------------------------------------------------------------------------------------------------| :-----------------------------------------|:------------| | wordStructure | TWordStructure | Array representation of the words, where true is a letter and false is a space | [true, true, false, true, true, true] | yes | | onChange | (TCallbackData) => void | Callback function. It will return the input content as an array and as a string | check types section for data structure | yes | | maxBoxesPerLine | number | Max input boxes per line. When set, it will automatically create multiple rows when needed. Default: 0 (off) | 13 | no | | lineBreakOnSpace | boolean | Create a new row for each word. Default: false | true | no | | autoFocus | boolean | Autofocus first input when component is loaded. Default: true | true | no | | backgroundColor | string | Background color of each input box. Default: transparent | #7FDCFF | no | | textColor | string | Text color of each input box. Default: #000 | #001F3F | no | | borderColor | string | Border color of each input box. Default: #BBB | #DDD | no | | size | small \| medium \| large | Size of each input. Default: medium | large | no |

Types

TWordStructure

type TWordStructure = ReadonlyArray<boolean>;

Word structure is defined by providing an array of booleans where true means letter and false mean space.

Example:

Hello World
[ true, true, true, true, true, false, true, true, true, true, true ]

TCallbackData

type TCallbackData = {
    wordArray: ReadonlyArray<string | false>;
    wordString: string;
};

The callback returns an object with 2 properties:

wordArray

An array with the input content. Each row in the array is either a string with the letter or false in case of a space.

wordString

The input content as a string

Example:

{
    wordArray: ['H', 'E', 'L', 'L', 'O', false, 'W', 'O', 'R', 'L', 'D' ],
    wordString: 'HELLO WORLD'
}

Other examples

With lineBreakOnSpace: true

const wordStructure = [ true, true, true, true, true, false, true, true, true, true, true ];

<QuizInput
    wordStructure={ wordStructure }
    onChange={ onChange }
    lineBreakOnSpace={ true }
/>

With long word and maxBoxesPerLine set

const wordStructure = [ true, true, true, true, true, true, true, true, true, true, true, true, true, true, true, true ];

<QuizInput
    wordStructure={ wordStructure }
    onChange={ onChange }
    maxBoxesPerLine={ 12 }
/>

With size: big

const wordStructure = [ true, true, true, true, true, false, true, true, true, true, true ];

<QuizInput
    wordStructure={ wordStructure }
    onChange={ onChange }
    size={ 'big' }
/>

With size: small

const wordStructure = [ true, true, true, true, true, true, true, true, true, true, true, true, true, true, true ];

<QuizInput
    wordStructure={ wordStructure }
    onChange={ onChange }
    size={ 'small' }
/>

Live Demos

Playground

You can try out the component in different environments (including your device) on Expo.io

• react-native-quiz-input-demo

Live Apps

This library is currently used in Flipping Cards, an iOS/Android flashcards app availble in the App Store and Play Store. If you want to see the component in action just download the app and try out Challenge Mode.

Are you using this library in your project? Feel free to let me know by opening an issue. I will be happy to feature your app here.

Credits

Developed and maintained by @antoniocosentino

Many thanks to @demchenkoalex for creating the boilerplate that I used for this repo.

License

MIT

Found a bug?

Please open an issue. PRs are also welcome 😉