How to Create a Text input with helper text in react-native?
Last Updated :
26 Jul, 2024
React native is a framework developed by Facebook for creating native-style apps for iOS & Android under one common language, JavaScript. Initially, Facebook only developed React Native to support iOS. However, with its recent support of the Android operating system, the library can now render mobile UI's for both platforms.
Prerequisites:
Approach: In this article, we will see how to create a text input that shows helper text just below it. We will use a react-native-paper library to show helper texts. Helper text shows the hints. It can be a text that may help the user to fill the input field or it can show error text. We will see the approach step-by-step.
Below is the step by step implementation:
Step 1: Create a project in react-native using the following command:
npx react-native init DemoProject
Step 2: Install react-native paper using the following command:
npm install react-native-paper
Step 3: Create a components folder inside your project. Inside the components folder create a file HelperText.js.
Project Structure: It will look like this.

Example: Write down the code in respective files. In HelperText.js, we have imported HelperText and TextInput from react-native-paper library. HelperText uses props type and visible:
- type: It can take any of the two values based on the requirement.
- visible: It can be true or false to show or hide the hints.
HeplerText.js
import React, { useState } from 'react';
import { View, StyleSheet } from 'react-native';
import { HelperText, TextInput } from 'react-native-paper';
const HelperTextExample = () => {
const [emailId, setEmailId] = useState('');
const [platform, setPlatform] = useState('');
const checkErrors = () => {
return !emailId.includes('@');
};
const checkString = () => {
return platform === 'Geeks';
};
return (
<View style={styles.container}>
<TextInput
label="Learning Platform"
value={platform}
onChangeText={(text) => setPlatform(text)}
/>
<HelperText visible={checkString()}>Geeks for Geeks</HelperText>
<TextInput label="Email" value={emailId}
onChangeText={(text) => setEmailId(text)} />
<HelperText type="error" visible={checkErrors()}>
Email Id is invalid
</HelperText>
</View>
);
};
export default HelperTextExample;
const styles = StyleSheet.create({
container: {
padding: 25,
},
});
App.js
import React from 'react';
import type { Node } from 'react';
import { View } from 'react-native';
import HelperTextExample from './components/HelperText';
const App: () => Node = () => {
return (
<View>
<HelperTextExample />
</View>
);
};
export default App;
Step to run the application: Run the application using the following command:
npx react-native run-android
Output:
Similar Reads
How to create basic text input in React Native ? Text input is a basic component that allows users to input text through the keyboard. It is widely used in mobile applications for taking usernames, passwords, user details, and much more.In React Native, we have a TextInput component to achieve this. It comes with many props that help us to modify
4 min read
How to create custom dialog box with text input React Native? React Native is a framework developed by Facebook for creating native-style apps for iOS & Android under one common language, JavaScript. In this article, we are going to create a dialog with Text Input. To achieve this we will use React Native's built-in Modal component which we will use as a D
3 min read
How to Copy Text to the Clipboard in React Native ? Mobile app deÂvelopment requires enabling text copying to the clipboard for seÂamless content sharing and improved useÂr experienceÂ. A popular cross-platform framework, React Native, offers a solution to this common requirement. This article will guide developeÂrs through implementing clipboard fun
3 min read
How to Add Tag Input in React Native ? Tags are widely used for managing items or categories in UI. Adding a tag input feature in React Native allows users to dynamically add and remove tags, enhancing data organization and filtering in applications. In this article, we will see how we can add tag input in react native application. We ar
4 min read
How to create a Surface in react-native ? React native is a framework developed by Facebook for creating native-style apps for iOS & Android under one common language, JavaScript. Initially, Facebook only developed React Native to support iOS. However, with its recent support of the Android operating system, the library can now render m
3 min read