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

import React from "react";
import { SafeAreaView, StyleSheet, TextInput } from "react-native";

const UselessTextInput = () => {
  const [text, onChangeText] = React.useState("Useless Text");
  const [number, onChangeNumber] = React.useState(null);

  return (
    <SafeAreaView>
      <TextInput
        style={styles.input}
        onChangeText={onChangeText}
        value={text}
      />
      <TextInput
        multiline
        numberOfLines={10}
        style={styles.input}
        onChangeText={onChangeNumber}
        value={number}
        placeholder="useless placeholder"
        keyboardType="numeric"
      />
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  input: {
    margin: 12,
    borderWidth: 1,
  },
});

export default UselessTextInput;

Output

Textarea, React Native

Thanks for reading…