An Interest In:
Web News this Week
- April 19, 2024
- April 18, 2024
- April 17, 2024
- April 16, 2024
- April 15, 2024
- April 14, 2024
- April 13, 2024
How to mask Text and TextInput components in React Native and Expo
In this post, I will show you how to work with custom masks in React Native and Expo, available for iOS, Android, and Web!
We will use a library called react-native-mask-text, is a full javascript library without native code, then you can use with all CLI of React Native environment.
You can simply start a new project with npx react-native init
or expo init
on your shell.
Let's assume that you already have a React Native CLI or Expo CLI created. You will need to add the mask library:
NPM:
npm i react-native-mask-text
or
Yarn:
yarn add react-native-mask-text
After the installation, you can import two components from this library:
<MaskedTextInput />
to add a custom mask to React Native TextInput component.
<MaskedText />
to add a custom mask to React Native Text component.
We have a mask
prop in our components, then allow us to add a custom mask format passing string with format that we need.
Pattern used in masked components:
9
- accept digit.A
- accept alpha.S
- accept alphanumeric.
In this example, let's see a simple implementation of a custom date mask.
Below you will see the use of each of the two components:
MaskedTextInput with custom mask:
import React, { useState } from "react";import { StyleSheet, View } from "react-native";import { MaskedTextInput} from "react-native-mask-text";export default function App() { const [maskedValue, setMaskedValue] = useState(""); const [unMaskedValue, setUnmaskedValue] = useState(""); return ( <View style={styles.container}> <MaskedTextInput mask="99/99/9999" onChangeText={(text, rawText) => { setMaskedValue(text); setUnmaskedValue(rawText); }} style={styles.input} keyboardType="numeric" /> );}const styles = StyleSheet.create({ container: { flex: 1, justifyContent: "center", backgroundColor: "#ecf0f1", padding: 8, }, input: { height: 40, margin: 12, borderWidth: 1, },});
You can see that the component accept same properties of TextInput from React Native, we used style
and keyboardType
, and you can use your intellisense to discover other props.
MaskedText with custom mask:
import React from "react";import { StyleSheet, View } from "react-native";import { MaskedText } from "react-native-mask-text";export default function App() { return ( <View style={styles.container}> <MaskedText mask="99/99/9999" style={styles.paragraph}> 30081990 </MaskedText> </View> );}const styles = StyleSheet.create({ container: { flex: 1, justifyContent: "center", backgroundColor: "#ecf0f1", padding: 8, }, paragraph: { margin: 24, fontSize: 18, textAlign: "center", },});
How you can see, we can add native props from React Native Text component to our MaskedText component.
That's it!
Now, you can add whatever mask you want to your Text and Input components from React Native!
If you enjoy this content, don't forget to give a star for react-native-mask-text library on Github.
Original Link: https://dev.to/akinncar/how-to-mask-text-and-textinput-components-in-react-native-and-expo-2l49
Dev To
An online community for sharing and discovering great ideas, having debates, and making friendsMore About this Source Visit Dev To