Textarea in React Native with JavaScript

Introduction

Textarea is a common input field in web and mobile applications. React Native provides a TextInput component that can be used to create text input fields, including multi-line text input fields that behave like a textarea.

In this tutorial, we will go over how to create a multi-line text input field in React Native, and how to handle the input value in JavaScript.

Creating a Textarea in React Native

To create a TextInput component that behaves like a textarea, we need to set the multiline prop to true. Here is an example:

import React, { useState } from 'react';
import { TextInput } from 'react-native';

const MyTextarea = () => {
  const [value, setValue] = useState('');

  const handleChange = (text) => {
    setValue(text);
  };

  return (
    <TextInput
      multiline
      value={value}
      onChangeText={handleChange}
      placeholder="Enter your text here"
    />
  );
};

export default MyTextarea;

In the above example, we create a MyTextarea component that renders a TextInput with the multiline prop set to true. We also use the useState hook to create a value state variable that holds the current value of the textarea. We set the initial value to an empty string. We also define a handleChange function that updates the value state variable when the user types in the textarea.

We pass the value state variable to the value prop of the TextInput component, and we pass the handleChange function to the onChangeText prop of the TextInput.

We also set a placeholder text for the textarea using the placeholder prop of the TextInput.

Handling Text Input in JavaScript

Now that we have created a textarea in React Native, we need to handle the user input in JavaScript.

To do this, we can define a function that handles the value of the textarea when the user submits the form or clicks a button. Here is an example:

import React, { useState } from 'react';
import { Text, TextInput, TouchableOpacity, View } from 'react-native';

const MyTextarea = () => {
  const [value, setValue] = useState('');

  const handleChange = (text) => {
    setValue(text);
  };

  const handleSubmit = () => {
    // Handle the text value here
    alert(value);
  };

  return (
    <View>
      <TextInput
        multiline
        value={value}
        onChangeText={handleChange}
        placeholder="Enter your text here"
      />
      <TouchableOpacity onPress={handleSubmit}>
        <Text>Submit</Text>
      </TouchableOpacity>
    </View>
  );
};

export default MyTextarea;

In the above example, we define a handleSubmit function that is called when the user clicks the Submit button. In this function, we can do whatever we want with the value of the textarea. In this example, we simply show an alert dialog with the value of the textarea.

We also add a TouchableOpacity component that wraps the Text component of the Submit button. When the user clicks this button, the handleSubmit function is called.

Conclusion

In this tutorial, we learned how to create a multi-line text input field in React Native with JavaScript, and how to save and handle the user input. With this knowledge, you can create rich form inputs in your React Native applications.