Home » React-native » How to align text to the top multiline TextInput in React Native

How to align text to the top multiline TextInput in React Native

Beginner React-native

Hi Guys, In this article, we are going to learn about How to align text to the top multiline TextInput in React Native. In a project, we submit content like name, email, and address using the React-native TextInput component.

This component by default is displayed in a single line. it displayed only a single line of text in it. And sometimes we need to show multiline TextInput for that developer can use multiple ways as it will add property multiline as a true and numberOfLines with an integer value in it but most of the developers face issues with aligning text to the top in multiline TextInput in React Native.

So let’s see with an example.

1. Create a new project

Use the following comment to create a new project.

react-native init ProjectName

2. Multiline TextInput React Native

We are going to display multiline TextInput on the screen. and add three properties that are very important and mandatory if you want to display multiline TextInput in React native.

  • multiline: This property multiline={true} tells TextInput that multiline is enabled for particular TextInput.
  • numberOfLines: This property numberOfLines={5} set number of line for Multiline TextInput.
  • textAlignVertical: By adding this property textAlignVertical:’top’ in TextInput style, we tell that text should align at the top of multiline TextInput.

See the source code below,

import React, {useState, useEffect, useRef} from 'react';
import {
  Text,
  View,
  TextInput,
  Platform,
  Modal,
  TouchableOpacity,
} from 'react-native';
export default function Dashboard({navigation}) {
  const [msg, setMsg] = useState(null);
  return (
    <View style={{alignItems: 'center'}}>
      <Text style={{fontSize: 25, margin: 20, textAlign: 'center'}}>
       Align text to the top multiline TextInput in React Native
      </Text>
      <TextInput
        placeholder="Enter text here"
        onChangeText={setMsg}
        value={msg}
        multiline={true}
        numberOfLines={5}
        keyboardType={
          Platform.OS == 'ios' ? 'ascii-capable' : 'visible-password'
        }
        style={{See the source code below,
          alignItems: 'center',
          height: 100,
          width: '80%',
          backgroundColor: 'white',
          borderRadius: 5,
          textAlignVertical:'top'
        }}
      />
    </View>
  );
}

3. Output:

This is How to align text to the top multiline TextInput in React Native

How to align text to the top multiline TextInput in React Native

 

Related Posts

Leave a Reply

Your email address will not be published. Required fields are marked *