Navigate back to the homepage

Textarea in React Native

Infinitbility
React Native
June 25th, 2021 · 1 min read
Textarea in React Native

Hello Friends,

Welcome To Infinitbility!

This article will help you to create textarea in react native, React Native not privde any specfic component to make textarea in react native, but react native provide textinput component to manage textarea.

In this article, you will get how to make textarea in react native and how to decide height of textarea.

Let’s start today article Textarea in React Native

React Native provide two props in textinput component to make textarea in react native.

  1. multiline props to change textinput from normal input to textarea and vice versa.
  2. numberOfLines props to decide number of rows you want to show in textinput or height.

Let’s understand with example

React Native Textarea Example

textarea.js

1import React from "react";
2import { SafeAreaView, StyleSheet, TextInput } from "react-native";
3
4const UselessTextInput = () => {
5 const [text, onChangeText] = React.useState("Useless Text");
6 const [number, onChangeNumber] = React.useState(null);
7
8 return (
9 <SafeAreaView>
10 <TextInput
11 style={styles.input}
12 onChangeText={onChangeText}
13 value={text}
14 />
15 <TextInput
16 multiline
17 numberOfLines={10}
18 style={styles.input}
19 onChangeText={onChangeNumber}
20 value={number}
21 placeholder="useless placeholder"
22 keyboardType="numeric"
23 />
24 </SafeAreaView>
25 );
26};
27
28const styles = StyleSheet.create({
29 input: {
30 margin: 12,
31 borderWidth: 1,
32 },
33});
34
35export default UselessTextInput;

Output

Textarea, React Native

Subscribe Our Newsletter You will get monthly free programming book

Looking For React Native Tutorial?

we are trying to create the best Tutorial for react native developers.

When you want a daily updates about React Native Tutorial or infinitbility update subscribe to our newsletter.

Read React Native Tutorial

Request New Tutorial or Article on mail [email protected]

Join our email list and get notified about new content

No worries, I respect your privacy and I will never abuse your email.

Every week, on Tuesday, you will receive a list of free tutorials I made during the week (I write one every day) and news on other training products I create.

Subscribe Our Newsletter You will get monthly free programming book

Tutorials

React Native

Categories

More articles from Infinitbility

React Native Dimensions Example

React Native Dimensions Example

Screen width and height in react native

June 24th, 2021 · 1 min read
How to delete file in react native

How to delete file in react native

React Native file delete example

June 20th, 2021 · 1 min read
© 2020–2021 Infinitbility
Disclaimer
Link to $https://medium.com/infinitbilityLink to $https://www.facebook.com/InfinitbilityLink to $https://github.com/infinitbilityLink to $https://twitter.com/infinitbilityLink to $https://www.buymeacoffee.com/infinitbilityLink to $mailto:[email protected]