A pure javascript masked text and input text component for React-Native.

Overview

react-native-masked-text

downloads Help Contribute to Open Source

logo

This is a simple masked text (normal text and input text) component for React-Native.

Alert

Hey guys!

Unfortunatelly I'm not developing js apps anymore. This repo will not receive updates anymore.

Supported Versions

React-native: 0.32.0 or higher

Install

npm install react-native-masked-text --save

Usage (TextInputMask)

For all the masks you will use in this way:

import { TextInputMask } from 'react-native-masked-text'

//...

<TextInputMask
  type={'type-of-the-mask'}
  options={
    {
      // the options for your mask if needed
    }
  }

  // dont forget to set the "value" and "onChangeText" props
  value={this.state.text}
  onChangeText={text => {
    this.setState({
      text: text
    })
  }}
/>

Cel Phone

Mask:

  • BRL (default): (99) 9999-9999 or (99) 99999-9999 (will detect automatically)
  • INTERNATIONAL: +999 999 999 999

If you need a different formatting, use the Custom mask =).

Sample code (source):

<TextInputMask
  type={'cel-phone'}
  options={{
    maskType: 'BRL',
    withDDD: true,
    dddMask: '(99) '
  }}
  value={this.state.international}
  onChangeText={text => {
    this.setState({
      international: text
    })
  }}
/>

Options

name type required default description
maskType string no maskType the type of the mask to use. Available: BRL or INTERNATIONAL
withDDD boolean no true if the mask type is BRL, include the DDD
dddMask string no (99) if the mask type is BRL, the DDD mask

Methods

You can get the unmasked value using the getRawValue method:

<TextInputMask
  type={'cel-phone'}
  options={{
    maskType: 'BRL',
    withDDD: true,
    dddMask: '(99) '
  }}
  value={this.state.international}
  onChangeText={text => {
    this.setState({
      international: text
    })
  }}
  // add the ref to a local var
  ref={(ref) => this.phoneField = ref}
/>

//...

const unmasked = this.phoneField.getRawValue()
// in the mask: (51) 98765-4321
// unmasked: 51987654321

CPF

Mask: 999.999.999-99

Sample code (source):

<TextInputMask
  type={'cpf'}
  value={this.state.cpf}
  onChangeText={text => {
    this.setState({
      cpf: text
    })
  }}
/>

Methods

You can check if the cpf is valid by calling the isValid() method:

<TextInputMask
  type={'cpf'}
  value={this.state.cpf}
  onChangeText={text => {
    this.setState({
      cpf: text
    })
  }}
  // add the ref to a local var
  ref={(ref) => this.cpfField = ref}
/>

// get the validation

const cpfIsValid = this.cpfField.isValid()
console.log(cpfIsValid) // boolean

You can get the unmasked cpf calling the getRawValue method:

const unmasked = this.cpfField.getRawValue()
// in the mask: 123.456.789-01
// unmasked: 12345678901

CNPJ

Mask: 99.999.999/9999-99

Sample code (source):

<TextInputMask
  type={'cnpj'}
  value={this.state.cnpj}
  onChangeText={text => {
    this.setState({
      cnpj: text
    })
  }}
/>

Methods

You can check if the cnpj is valid by calling the isValid() method:

<TextInputMask
  type={'cnpj'}
  value={this.state.cnpj}
  onChangeText={text => {
    this.setState({
      cnpj: text
    })
  }}
  // add the ref to a local var
  ref={(ref) => this.cnpjField = ref}
/>

// get the validation

const cnpjIsValid = this.cnpjField.isValid()
console.log(cnpjIsValid) // boolean

You can get the unmasked cpf calling the getRawValue method:

const unmasked = this.cnpjField.getRawValue()
// in the mask: 99.999.999/9999-99
// unmasked: 99999999999999

Credit Card

Mask:

  • visa or master: 9999 9999 9999 9999 or 9999 **** **** 9999 (obfuscated)
  • amex: 9999 999999 99999 or 9999 ****** 99999 (obfuscated)
  • diners: 9999 999999 9999 or 9999 ****** 9999 (obfuscated)

Sample code (source)

<TextInputMask
  type={'credit-card'}
  options={{
    obfuscated: false,
    issuer: 'amex'
  }}
  value={this.state.creditCard}
  onChangeText={text => {
    this.setState({
      creditCard: text
    })
  }}
/>

Options

name type required default description
obfuscated boolean no false if the mask should be obfuscated or not
issuer string no visa-or-mastercard the type of the card mask. The options are: visa-or-mastercard, amex or diners

Methods

You can get the array containing the groups of the value value using the getRawValue method:

<TextInputMask
  type={'credit-card'}
  options={{
    obfuscated: false,
    issuer: 'amex'
  }}
  value={this.state.creditCard}
  onChangeText={text => {
    this.setState({
      creditCard: text
    })
  }}
  // add the ref to a local var
  ref={(ref) => this.creditCardField = ref}
/>

//...

const unmasked = this.creditCardField.getRawValue()
// in the mask: 9874 6541 3210 9874
// unmasked: [9874, 6541, 3210, 9874]

Custom

Mask: defined by pattern

  • 9 - accept digit.
  • A - accept alpha.
  • S - accept alphanumeric.
  • * - accept all, EXCEPT white space.

Ex: AAA-9999

Sample code (source):

//
// SIMPLE
// 
<TextInputMask
  type={'custom'}
  options={{
    /**
     * mask: (String | required | default '')
     * the mask pattern
     * 9 - accept digit.
     * A - accept alpha.
     * S - accept alphanumeric.
     * * - accept all, EXCEPT white space.
    */
    mask: '999 AAA SSS ***'
  }}
  value={this.state.text}
  onChangeText={text => {
    this.setState({
      text: text
    })
  }}
  style={textInputStype}
/>


//
// ADVANCED
// 
<TextInputMask
  type={'custom'}
  options={{
    // required

    /**
     * mask: (String | required | default '')
     * the mask pattern
     * 9 - accept digit.
     * A - accept alpha.
     * S - accept alphanumeric.
     * * - accept all, EXCEPT white space.
    */
    mask: '999 AAA SSS ***',

    // optional

    /**
     * validator: (Function | optional | defaults returns true)
     * use this funcion to inform if the inputed value is a valid value (for invalid phone numbers, for example). The isValid method use this validator.
    */
    validator: function(value, settings) {
      return true
    },

    /**
     * getRawValue: (Function | optional | defaults return current masked value)
     * use this function to parse and return values to use what you want.
     * for example, if you want to create a phone number mask (999) 999-99-99 but want to get only
     * the numbers for value, use this method for this parse step.
    */
    getRawValue: function(value, settings) {
      return 'my converted value';
    },
    /**
     * translation: (Object | optional | defaults 9, A, S, *)
     * the dictionary that translate mask and value.
     * you can change defaults by simple override the key (9, A, S, *) or create some new.
    */
    translation: {
      // this is a custom translation. The others (9, A, S, *) still works.
      // this translation will be merged and turns into 9, A, S, *, #.
      '#': function(val) {
        if (val === ' ') {
          return val;
        }

        // if returns null, undefined or '' (empty string), the value will be ignored.
        return null;
      },
      // in this case, we will override build-in * translation (allow all characters)
      // and set this to allow only blank spaces and some special characters.
      '*': function(val) {
        return [' ', '#', ',', '.', '!'].indexOf(val) >= 0 ? val : null;
      }
    }
  }}
  value={this.state.text}
  onChangeText={text => {
    this.setState({
      text: text
    })
  }}
  style={textInputStype}
/>

Options

name type required default description
mask string YES The mask pattern
validator function no function that returns true the function that's validate the value in the mask
getRawValue function no return current value function to parsed value (like unmasked or converted)
translation object (map{string,function}) no 9 - digit, A - alpha, S - alphanumeric, * - all, except space The translator to use in the pattern

Datetime

Mask:

  • DD/MM/YYYY HH:mm:ss
  • DD/MM/YYYY
  • MM/DD/YYYY
  • YYYY/MM/DD
  • HH:mm:ss
  • HH:mm
  • HH

You can use - instead of / if you want.

Sample code (source):

<TextInputMask
  type={'datetime'}
  options={{
    format: 'YYYY/MM/DD'
  }}
  value={this.state.dt}
  onChangeText={text => {
    this.setState({
      dt: text
    })
  }}
/>

Options

name type required default description
format string YES The date format to be validated

Methods

You can check if the date is valid by calling the isValid() method:

<TextInputMask
  type={'datetime'}
  options={{
    format: 'YYYY/MM/DD'
  }}
  value={this.state.dt}
  onChangeText={text => {
    this.setState({
      dt: text
    })
  }}
  // add the ref to a local var
  ref={(ref) => this.datetimeField = ref}
/>

// get the validation

const isValid = this.datetimeField.isValid()
console.log(isValid) // boolean

You can get the moment object from the date if it's valid calling the getRawValue method:

const momentDate = this.datetimeField.getRawValue()

Money

Mask: R$999,99 (fully customizable)

Sample code (source):

// SIMPLE
<TextInputMask
  type={'money'}
  value={this.state.simple}
  onChangeText={text => {
    this.setState({
      simple: text
    })
  }}
/>

// ADVANCED
<TextInputMask
  type={'money'}
  options={{
    precision: 2,
    separator: ',',
    delimiter: '.',
    unit: 'R$',
    suffixUnit: ''
  }}
  value={this.state.advanced}
  onChangeText={text => {
    this.setState({
      advanced: text
    })
  }}
/>

Options

name type required default description
precision number no 2 The number of cents to show
separator string no , The cents separator
delimiter string no . The thousand separator
unit string no R$ The prefix text
suffixUnit string no '' The sufix text

Methods

You can get the number value of the mask calling the getRawValue method:

<TextInputMask
  type={'money'}
  value={this.state.simple}
  onChangeText={text => {
    this.setState({
      simple: text
    })
  }}
  // add the ref to a local var
  ref={(ref) => this.moneyField = ref}
/>

const numberValue = this.moneyField.getRawValue()
console.log(numberValue) // Number

// CAUTION: the javascript do not support giant numbers.
// so, if you have a big number in this mask, you could have problems with the value...

Only Numbers

Mask: accept only numbers

Sample code (source):

<TextInputMask
  type={'only-numbers'}
  value={this.state.value}
  onChangeText={text => {
    this.setState({
      value: text
    })
  }}
/>

Zip Code

Mask: 99999-999

Sample code (source):

<TextInputMask
  type={'zip-code'}
  value={this.state.value}
  onChangeText={text => {
    this.setState({
      value: text
    })
  }}
/>

Methods

You can get the unmasked value using the getRawValue method:

<TextInputMask
  type={'zip-code'}
  value={this.state.value}
  onChangeText={text => {
    this.setState({
      value: text
    })
  }}
  // add the ref to a local var
  ref={(ref) => this.zipCodeField = ref}
/>

//...

const unmasked = this.zipCodeField.getRawValue()
// in the mask: 98765-321
// unmasked: 98765321

... Utils

Including the rawText in onChangeText [1.12.0+]

If you need the raw value in every text change, you can use the includeRawValueInChangeText.

It will provide the masked and the raw text in every text change.

<TextInputMask
  type={'cpf'}
  value={this.state.value}
  includeRawValueInChangeText={true}
  onChangeText={(maskedText, rawText) => {
    // maskedText: 123.456.789-01
    // rawText: 12345678901
  }}
/>

Getting the TextInput instance

If you want to get the TextInput raw component, use the getElement() method:

<TextInputMask
  type={'zip-code'}
  value={this.state.value}
  onChangeText={text => {
    this.setState({
      value: text
    })
  }}
  // add the ref to a local var
  ref={(ref) => this.zipCodeField = ref}
/>

//...

const textInput = this.zipCodeField.getElement()

Blocking user to add character

If you want, you can block a value to be added to the text using the checkText prop:

<TextInputMask
  //...
  /**
   * @param {String} previous the previous text in the masked field.
   * @param {String} next the next text that will be setted to field.
   * @return {Boolean} return true if must accept the value.
  */
  checkText={
    (previous, next) => {
      return next === 'your valid value or other boolean condition';
    }
  }
/>

Using custom text inputs

You can use this prop if you want custom text input instead native TextInput component:

const Textfield = MKTextField.textfield()
  .withPlaceholder('Text...')
  .withStyle(styles.textfield)
  .build();


<TextInputMask
  // ...

  // the custom text input component
  customTextInput={Textfield}

  // the props to be passed to the custom text input
  customTextInputProps={{
    style:{ width: '80%' },
    label:'Birthday'
  }}
/>

About the normal text input props

You can use all the normal TextInput props from React-Native, with this in mind:

  • onChangeText is intercepted by component.
  • value is intercepted by component.
  • if you pass keyboardType, it will override the keyboardType of masked component.

Code Samples

If you want, you can check the code samples in this repo:

react-native-masked-text-samples

Usage (TextMask)

import React, { Component } from 'react'

// import the component
import { TextMask } from 'react-native-masked-text'

export default class MyComponent extends Component {
    constructor(props) {
        super(props)
        this.state = {
            text: '4567123409871234'
        }
    }

    render() {
        // the type is required but options is required only for some specific types.
        // the sample below will output 4567 **** **** 1234
        return (
            <TextMask
                value={this.state.text}
                type={'credit-card'}
                options={{
                    obfuscated: true
                }}
            />
        )
    }
}

Props

The same of TextInputMask, but for React-Native Text component instead TextInput.
Warning: if the value not match the mask, it will not appear.

Methods

getElement(): return the instance of Text component.

Extra (MaskService)

If you want, we expose the MaskService. You can use it:

Methods

  • static toMask(type, value, settings): mask a value.
    • type (String, required): the type of the mask (cpf, datetime, etc...)
    • value (String, required): the value to be masked
    • settings (Object, optional): if the mask type accepts options, pass it in the settings parameter
  • static toRawValue(type, maskedValue, settings): get the raw value of a masked value.
    • type (String, required): the type of the mask (cpf, datetime, etc...)
    • maskedValue (String, required): the masked value to be converted in raw value
    • settings (Object, optional): if the mask type accepts options, pass it in the settings parameter
  • static isValid(type, value, settings): validate if the mask and the value match.
    • type (String, required): the type of the mask (cpf, datetime, etc...)
    • value (String, required): the value to be masked
    • settings (Object, optional): if the mask type accepts options, pass it in the settings parameter
  • static getMask(type, value, settings): get the mask used to mask the value

Ex:

import { MaskService } from 'react-native-masked-text'

var money = MaskService.toMask('money', '123', {
    unit: 'US$',
    separator: '.',
    delimiter: ','
})

// money -> US$ 1.23

Throubleshooting

  • If the es2015 error throw by babel, try run react-native start --reset-cache

Changelog

View changelog HERE

Thanks to

Comments
  • Problem with removing characters in the middle of the mask

    Problem with removing characters in the middle of the mask

    v1.6.1 Having the following input

    <TextInputMask
      type="custom"
      options={{ mask: '999 (99) 999 99 99' }}
    />
    

    If I'll type 380934295576 the mask will display correct value like 380 (93) 429 55 76 But if I remove the 2 from the middle of the mask it will display 380 (93) 49, instead of 380 (93) 495 57 6.

    I've made some research and figured that problem is in passing value to tinymask that is already masked. in this particular case the value 380 (93) 49 55 76 is passed to the mask method and since space after 9 char doesn't match to numeric wildcard all the following chars are getting trimmed.

    Suggest passing normalized value to mask

    Bug 
    opened by Oxyaction 18
  • TypeError: TypeError: TypeError: text.replace is not a function. (In 'text.replace(/[^0-9]+/g, '')', 'text.replace' is undefined)

    TypeError: TypeError: TypeError: text.replace is not a function. (In 'text.replace(/[^0-9]+/g, '')', 'text.replace' is undefined)

    I am receiving this error: TypeError: TypeError: TypeError: text.replace is not a function. (In 'text.replace(/[^0-9]+/g, '')', 'text.replace' is undefined)

    when I use this component:

    <TextInputMask refInput={ref => this.inputMinAlunos = ref} value={curso.minAlunos} type={'only-numbers'} style={themeStyles.input} returnKeyType={'next'} onChangeText={(text) => { this.updateValue('minAlunos', text) }} onFocus={(event) => { this.focusIndex = 3 }} onSubmitEditing={() => { this.inputMaxAlunos.focus() }} />

    Bug 
    opened by dfsilva 12
  • Is it possible use textinput-effects?

    Is it possible use textinput-effects?

    Is there any chance to apply these masks using https://github.com/halilb/react-native-textinput-effects?

    Here's what I did

    onChangeText={(value) => { this.setState({ phone: value }) }}
    onBlur={(e) => { this.setState({phone: MaskService.toMask('cel-phone', e.nativeEvent.text)}) }}
    

    Still, if there's something fancy, let me know.

    opened by rochapablo 11
  • Flickering effect when input

    Flickering effect when input

    opened by anniewey 8
  • Remove moment.js dependency

    Remove moment.js dependency

    Hey @benhurott, awesome library !

    Would you be open to removing the type={'datetime'} functionality, so we can remove the moment.js dependency? As you mentioned in #61, we can already implement custom masks in user land!

    Removing this dependency would decrease the bundle size substantially, as moment currently accounts for 85% (source):

    image

    If you want to keep things the way they are, I totally understand. Just wanted to float the idea !

    Enhancement 
    opened by pcooney10 7
  • problem with onChangeText when function with setState

    problem with onChangeText when function with setState

    Problem report:

    1

    I noticed that this happens when I pass a function with setState (as shown in the code example below). When in the onSave function I leave only with console.tron.log the value displays and allows the value to be inserted into the input correctly.

    Code Modal:

    ...
    class ModalInput extends Component {
      state = {
        field: '',
      }
    
      componentWillMount() {
        this.setState({ field: this.props.navigation.state.params.input?.value });
      }
    
      onSave = (field) => {
        this.setState({ field });
        // console.tron.log(field);
      }
    
      getComponent = (component, params) => {
        let returnComponent = false;
    
        switch (component.toLowerCase()) {
          case 'inputmask':
            returnComponent = <InputMask params={params} onSave={value => this.onSave(value)} />;
            break;
    ...
    

    Code InputMask:

    ...
    
    const InputMask = ({ params, onSave }) => (
      <Fragment>
        {!!params.input.title && (
          <Text style={styles.title}>
            {params.input.title}
          </Text>
        )}
        <TextInputMask
          // value={params.input.value}
          onChangeText={text => onSave(text)}
          keyboardType={params.input.keyboardType}
          ref={ref => (this._myTextInputMask = ref)}
          autoFocus
          style={styles.input}
          type="money"
          options={{
            unit: '',
            delimiter: '',
            separator: '.',
            precision: 3,
          }}
        />
        {!!params.input.description && (
          <Text style={styles.description}>
            {params.input.description}
          </Text>
        )}
      </Fragment>
    );
    ...
    
    opened by henriqueweiand 7
  • Value resets when parent's state changes

    Value resets when parent's state changes

    If you have a the a TextInputMask inside a component and this component re-renders due to a state change, the TextInputMask resets its value.

    The same doesn't happen with TextInput.

    Enhancement 
    opened by JulioC 7
  • TextInput Focus

    TextInput Focus

    This component is created byTextInputreact-native component. But react-native-masked-textdon't have method like focus() and other.

    So I use this way, this.refs._some_ref.refs['$input-text'].focus() But I think that is not cool.

    opened by speaker73 7
  • Error: Passing props inside type=

    Error: Passing props inside type="" doesn't work

    I'm creating a generic TextInput using 'react-native-masked-text', but I cannot pass props inside type="", how is it works?

    <TextInputMask {...props} type={this.props.type} // HERE ... />

    opened by lancaluis 6
  • Git repo checked in?

    Git repo checked in?

    The most recent changes from a few hours ago result in this on successive npm installs:

    npm ERR! path /Users/jcroft/Dropbox/GitHub/thebloxoffice-native/node_modules/react-native-masked-text npm ERR! code EISGIT npm ERR! git /Users/jcroft/Dropbox/GitHub/thebloxoffice-native/node_modules/react-native-masked-text: Appears to be a git repo or submodule. npm ERR! git /Users/jcroft/Dropbox/GitHub/thebloxoffice-native/node_modules/react-native-masked-text npm ERR! git Refusing to remove it. Update manually, npm ERR! git or move it out of the way first.

    npm ERR! A complete log of this run can be found in: npm ERR! /Users/jcroft/.npm/_logs/2019-04-08T01_54_41_908Z-debug.log

    Thanks for a great package!

    Investigating 
    opened by jcroft 6
  • [Question] Getting raw and masked input values

    [Question] Getting raw and masked input values

    Hello, from the README, it is not particularly clear to me, the proper way to get values from the inputs e.g.

    import React, {Component} from 'react';
    
    // import the component
    import {TextInputMask} from 'react-native-masked-text';
    
    export default class MyComponent extends Component {
        constructor(props) {
            super(props);
        }
    
        isValid() {
            // isValid method returns if the inputed value is valid.
            // Ex: if you input 40/02/1990 30:20:20, it will return false
            //     because in this case, the day and the hour is invalid.
            let valid = this.refs['myDateText'].isValid();
    
            // get converted value. Using type=datetime, it returns the moment object.
            // If it's using type=money, it returns a Number object.
            let rawValue = this.refs['myDateText'].getRawValue();
        }
    
        render() {
            // the type is required but options is required only for some specific types.
            return (
                <TextInputMask 
                    ref={'myDateText'}
                    type={'datetime'}
                    options={{
                        format: 'DD-MM-YYYY HH:mm:ss'
                    }} />
            );
        }
    }
    

    From the above usage example, how and when is the method isValid() called? And how should onChangeText be used? Thanks

    opened by tolu360 6
  • How to mock react-native-masked-text to work with jest test cases

    How to mock react-native-masked-text to work with jest test cases

    Here are my package.json details

    "expo": "^44.0.0",
    "react": "17.0.1",
    "react-native": "0.64.3",
    "react-native-masked-text": "^1.13.0",
    "jest": "28.1.2",
    "jest-expo": "^45.0.1",
    

    @benhurott I am stuck onto this, Please help

    opened by SupriyaPKalghatgi 0
  • integer and decimal mask

    integer and decimal mask

    I need to add a mask that is decimal and integer, but this option needs to be dynamic as the user types. For example, the user can put in an integer and then add the comma, making the number decimal.

    I'm using the money type with these settings.

    type="money"
    options={{
    precision: 3,
    separator: ',',
    delimiter: '.',
    unit: '',
    suffixUnit: '',
    }}
    
    opened by brunochimenes 0
  • date-and-time - 2 high severity vulnerabilities

    date-and-time - 2 high severity vulnerabilities

    Hello, When installing current version of this library npm finds 2 high priority vulnerabilities connected to date-and-time liblary. The library's version in the dependencies is very outdated. Would it be possible to update it?

    opened by StorkZ 1
  • Add Placeholder

    Add Placeholder

    How to add placeholder? this my code

    <TextInputMask
          type={'money'}
          value={Amount}
          onChangeText={text => {
            seAmount(text);
          }}
          placeholder="Ex: $500,000"
          options={{
            precision: 0,
            separator: ',',
            delimiter: '.',
            unit: '$ ',
            suffixUnit: '',
          }}
          style={styles.field}
    />
    
    opened by mukash 1
  • chore(deps): bump async from 2.6.2 to 2.6.4

    chore(deps): bump async from 2.6.2 to 2.6.4

    Bumps async from 2.6.2 to 2.6.4.

    Changelog

    Sourced from async's changelog.

    v2.6.4

    • Fix potential prototype pollution exploit (#1828)

    v2.6.3

    • Updated lodash to squelch a security warning (#1675)
    Commits
    Maintainer changes

    This version was pushed to npm by hargasinski, a new releaser for async since your current version.


    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
Releases(1.13.0)
Owner
Ben-hur Santos Ott
Software engineer, musician, workaholic and power metal lover.
Ben-hur Santos Ott
Masked View Component for React

react-native-masked-view Masked View Component for React. Just like a <View /> with a mask. <MaskedView maskImage="mask.png">...</MaskedView> compati

Gil Birman 56 Apr 8, 2022
keyboard-aware-view is a react-native package that handles the view position based on input position and keyboard so that the text input doesn't get hidden behind the keyboard.

keyboard-aware-view is a react-native package that handles the view position based on input position and keyboard so that the text input doesn't get hidden behind the keyboard.

Abhiram K 26 Aug 29, 2022
A gesture password component for React Native. It supports both iOS and Android since it's written in pure JavaScript.

react-native-gesture-password A gesture password component for React Native (web). It supports both iOS, Android and Web since it's written in pure Ja

null 544 Sep 27, 2022
react native Picker component for both Android and iOS based on pure JavaScript [for the old realize, you can use the version 0.0.8]

The React-Native-Picker react native Picker component for both Android and iOS based on pure JavaScript. Main For the iOS, using PickerIOS as the basi

X  Fruit Team 78 Aug 3, 2021
react native toast like component, pure javascript solution

react-native-root-toast Features Pure javascript solution. Support both Android and iOS. Lots of custom options for Toast. You can show/hide Toast by

Horcrux 1.8k Sep 23, 2022
A pure JavaScript solution for react native`s modal component

react-native-root-modal Features Pure javascript solution, easy to install. Support both React element way and javascript class way to invoke, easy to

Horcrux 359 Jul 25, 2022
Pure JavaScript material menu component for React Native

react-native-material-menu · Pure JavaScript material menu component for React Native with automatic RTL support. Install Using yarn yarn add react-na

Maksim Milyutin 451 Sep 1, 2022
A pure JavaScript Slider> component for react-native

react-native-slider A pure JavaScript <Slider> component for react-native. This is still very much a work in progress, ideas and contributions are ver

Jean Regisser 1.2k Sep 29, 2022
Pure JavaScript React-Native dialog

react-native-dialog A pure JavaScript React-Native dialog that follows closely the UI of its native counterpart while expanding its features. Features

Matteo Mazzarolo 555 Sep 28, 2022
A new RN CLI app that includes base components like Text, Animation, Refreshing, Text Input, etc.

A new RN CLI app that includes base components like Text, Animation, Refreshing, Text Input, etc.

Paúl 22 Aug 4, 2022
A marquee label for react-native(if you use js pure marquee, use remobile/react-native-marquee[ https://github.com/remobile/react-native-marquee ])

React Native MarqueeLabel (remobile) A marquee label for react-native if you use js pure marquee, use remobile/react-native-marquee[ https://github.co

YunJiang.Fang 114 Jul 18, 2022
react-native-card-data-input - just another credit card input package

react-native-card-data-input - just another credit card input package

Erick Estevão Riva Pramio 6 Oct 25, 2021
:raised_hands: A pure JS react-native component to render a masonry~ish layout for images with support for dynamic columns, progressive image loading, device rotation, on-press handlers, and headers/captions.

react-native-masonry ?? An easy to use, pure JS react-native component to render a masonry~ish layout for remote images react-native-masonry is built

Brandon Him 1.2k Sep 8, 2022
Flexible and lightweight React Native component for UITableView made with pure CSS

react-native-tableview-simple ?? This component is used in my production app Game ideas. Make sure to check it out! ?? This cross-platform component i

Patrick Puritscher 452 Aug 11, 2022
:level_slider: Yet another, big one, pure JS easily customisable and hackable react-native slider component

react-native-big-slider This package powers Yeti Smart Home and is used in production. A react native reusable and efficient dial knob element. Usage

Netbeast 86 Jan 13, 2022
null 133 Sep 20, 2022
Pure JS react native slider component with one or two markers.

react-native-multi-slider Note: Anyone using RN <=0.18 should use version 0.2.5 Pure JS react native slider component with one or two markers. Options

null 149 May 12, 2022
A pure React Native Component for circular progress bars

React-Native-CircularProgress A pure React Native Component for circular progress bars for iOS. Demo Installation Install library npm i --save react-n

Andy Chrzaszcz 44 Dec 28, 2020
Text input mask for React Native, Android and iOS

react-native-text-input-mask Text input mask for React Native on iOS and Android. Examples Setup npm install --save react-native-text-input-mask # --

null 1.1k Sep 24, 2022