react-native-masked-text - A simple masked text and input text component for React-Native.

  •        673

This is a simple masked text (normal text and input text) component for React-Native. credit-card: use the mask 9999 9999 9999 9999. It accepts options (see later in this doc). cpf: use the mask 999.999.999-99 and numeric keyboard. cnpj: use the mask 99.999.999/9999-99 and numeric keyboard. zip-code: use the mask 99999-999 and numeric keyboard. only-numbers: accept only numbers on field with numeric keyboard. money: use the mask R$ 0,00 on the field with numeric keyboard. It accepts options (see later in this doc). cel-phone: use the mask (99) 9999-9999 or (99) 99999-9999 (changing automaticaly by length). It accepts options (see later in this doc). datetime: use datetime mask with moment format (default DD/MM/YYYY HH:mm:ss). It accepts options (see later in this doc). custom: use your custom mask (see the options props later in this doc).

https://github.com/benhurott/react-native-masked-text#readme

Dependencies:

moment : 2.19.3
tinymask : ^1.0.2

Tags
Implementation
License
Platform

   




Related Projects

react-native-textinput-effects - Text inputs with custom label and icon animations for iOS and android

  •    Javascript

I've come across with those beautiful text inputs created and blogged by Codrops and wanted to port them to react-native. Some of those text fields are now ready to use in iOS and android thanks to react-native. There is also a native iOS library called TextFieldEffects which has built some of them in Swift.

react-native-autogrow-textinput

  •    Objective-C

A helper component meant to be used as a drop-in replacement for RN TextInput to allow automatic expanding of a multi-line text input according to the number of lines. To fix the issue with the height not being set for initial values (or with other cases where the input is not set by the user typing using the keyboard) you need to add the libAutoGrowTextInput to your project. After performing npm install, locate AutoGrowTextInput.xcodeproj in YOUR_PROJECT/node_modules/react-native-autogrow-textinput/ios and drag it to your own project, then in your target's general settings, add it to the "Linked Frameworks and Libraries".

react-native-md-textinput - React Native TextInput styled with Material Design.

  •    Javascript

React Native TextInput styled with Material Design. I'm going to refer to the react-native-md-textinput Component as TextField. You can name it whatever you like when importing it.

react-native-speech - A text-to-speech library for React Native.

  •    Objective-C

React Native Speech is a text-to-speech library for React Native. In order to use Speech, you must first link the library your project. There's excellent documentation on how to do this in the React Native Docs.


react-native-keyboard-aware-scroll-view - A ScrollView component that handles keyboard appearance and automatically scrolls to focused TextInput

  •    Javascript

A ScrollView component that handles keyboard appearance and automatically scrolls to focused TextInput. You can use the KeyboardAwareScrollView, the KeyboardAwareListView, KeyboardAwareSectionList or the KeyboardAwareFlatList components. They accept ScrollView, ListView, SectionList and FlatList default props respectively and implement a custom high order componente called KeyboardAwareHOC to handle keyboard appearance. The high order component is also available if you want to use it in any other component.

react-native-parsed-text - Parse text and make them into multiple React Native Text elements

  •    Javascript

This library allows you to parse a text and extract parts using a RegExp or predefined patterns. Currently there are 3 predefined types: url, phone and email.All the props are passed down to a new Text Component if there is a matching text. If those are functions they will receive as param the value of the text.

react-native-snippets - :pencil2: A collection of React Native snippets for Sublime Text and Atom

  •    Makefile

A collection of React Native snippets for Sublime Text and Atom. These snippets use ES6/7 syntax.

react-native-keyboard-input - Use your own custom input component instead of the system keyboard

  •    Objective-C

Presents a React component as an input view which replaces the system keyboard. Can be used for creating custom input views such as an image gallery, stickers, etc. Supports both iOS and Android.

react-native-zss-rich-text-editor - React Native rich text editor based on ZSSRichTextEditor

  •    HTML

A fully functional Rich Text Editor for both Android and iOS, based off the ZSSRichTextEditor project. Also, follow instructions here to add the native react-native-webview-bridge-updated dependency.

react-native-social-share - Use the iOS and Android native Twitter and Facebook share popup with React Native https://github

  •    Objective-C

Use the built-in share view from iOS and Android to let the user share on Facebook and Twitter. It will use the user's existing account without having to get new authorizations. You can even preset text, image and link for the share view. Let me know how it works.

rn-placeholder - :dash: :dizzy: :sparkles: Display some placeholder stuff before rendering your text or media content in React Native

  •    Javascript

Display some placeholder stuff before rendering your text or media content in React Native. _Fully compatible with Expo and react-native-web.

react-native-mask-loader - React Native App Loader that shows an expanding image as a mask on your app

  •    Javascript

This component provides a loading screen for React Native apps that is meant to reproduce Twitter's app loading animation. There is an accompanying blog post at https://facebook.github.io/react-native/blog/2018/01/18/implementing-twitters-app-loading-animation-in-react-native.html.

react-native-facebook-login - React Native component wrapping the native Facebook SDK login button and manager

  •    Objective-C

<FBLogin /> provides a React Native component wrapping the native Facebook SDK login button and manager. Note: Demo above includes debug text to confirm login (i.e. user name, email and access token). <FBLogin />, by default, will only display the native blue 'Log in with Facebook' button.

react-native-typography - Pixel–perfect, native–looking typographic styles for React Native ✒️

  •    Javascript

Pixel–perfect, native–looking typographic styles for React Native. Creating great Text Styles in React Native is not a simple task, it requires a lot of fiddling and handling edge cases.

react-native-timeago - An auto-updating timeago component for React Native using moment.js

  •    Javascript

An auto-updating timeago component for React Native using moment.js. All normal Text props are applicable (including style). Use the interval prop to change the update interval in milliseconds (default: 60000).

react-native-autocomplete-input - Pure javascript autocomplete input for react-native

  •    Javascript

A pure JS autocomplete component for React Native. Use this component in your own projects or use it as inspiration to build your own autocomplete. Tested with RN >= 0.26.2. If you want to use RN < 0.26 try to install react-native-autocomplete-input <= 0.0.5.