Text input not displaying as expected in React Native compared to a text area

I'm having trouble with the Text Area Placeholder not appearing in the center, I would like it to align with the top of the placeholder as shown in the image. Can you please provide suggestions on how to achieve this design? https://i.sstatic.net/AqhnX.png

Below is the code snippet:

textInput: {
        borderRadius: 5,
        borderWidth: 1,
        height: Platform.OS === "ios" ? 60 : 80,
        fontSize: 16,
        paddingHorizontal: 10,
        marginHorizontal: 15,
        padding: 10,
        marginTop: 8
    },
<TextInput
        placeholder="Comment Here"
        blurOnSubmit={false}
        returnKeyType={"go"}
        style={styles.textInput}
        multiline={true}
        numberOfLines={20}
        underlineColorAndroid={"transparent"}
        autoCapitalize={"none"}
        autoCorrect={false}
        onChangeText={this.handleChange.bind(
            this,
            "comment"
        )}
        ref={input => {
            this.inputs["four"] = input;
        }}
        onSubmitEditing={() => {
            this.submitOurView_Method();
        }}
        value={this.state.contactInfo_View.comment}
/>

Answer №1

Here is the code snippet that I have created.

<TextInput
   multiline={true}
   numberOfLines={12}
   textAlignVertical = "top"/>

textAlignVertical attribute is specifically for android platform

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Combining Rails 4 with coffeescript while encountering an issue with the jQuery sortable detatch functionality

Currently, I am using Ruby on Rails 4 along with the jquery-ui-rails gem. Within my application, there are certain lists that have a sortable jQuery function implemented. $ -> $('#projects').sortable handle: '.handle' ...

Limit the number input to only allow values between 0 and 100

I am utilizing the Number input component from MUI, which includes Increment and Decrement buttons for adjusting numbers. Is there a method to limit the input to only accept values ranging from 0 to 100 ? Additionally, how can I decrease the width of the ...

PUPPETER - Unpredictable pause in loop not functioning as expected

Having an issue with this specific part of the code: (async () => { const browser = await puppeteer.launch({ headless: false, // slowMo: 250 // slow down by 250ms }); const page = await browser.newPage(); //some code // CODE ABOVE WORKS, ...

Is it possible to utilize multiple databases with NestJS and TypeORM?

I've been struggling for the past two days trying to figure this out, but it seems like I'm just not grasping the concept here. My objective was to create a NestJS application (with TypeORM integrated) that could serve as a RestAPI for 2 or 3 of ...

Incorporate a class into the fixed navigation menu using fullpage.js

I am attempting to modify the behavior of a sticky menu as the user scrolls down using fullpage.js. My goal is to have the #top-wrapper behave normally when the first section/page loads, and then add a class of is-fixed as you scroll down. When scrolling ...

Passing data retrieved from fetch requests in ReactJS using context: Best practices

Just started learning React and need some help. I'm trying to pass variables with json data to a component for further use but running into errors. What changes should I make to use variables with json data from Store.js in the product.js component? T ...

"Transforming a jQuery UI dialog into a Bootstrap modal: A step-by-step guide

How can I transform this element into a Boostrap UI jQuery object? <div id="dialogDeleteDefaultVariant" title="default"> <p><span style="margin: 0 7px 20px 0;"></span>' . HTML::button('dialog_delete_default_variant_des ...

Multi-line input in ExtJs

Is there a way to create a multiline input with vertical scrollbars in EXTJS? I tried the following code: noteField = new Ext.form.TextField({ emptyText: 'note...', multiline: true, applyTo: &apos ...

My presentations are not functioning as expected, could there be a problem with my HTML, CSS, or JavaScript coding?

My website utilizes a Slideshow feature to display images for blog posts. Recently, I attempted to include multiple slideshows within an article, which unfortunately caused all of the slideshows to malfunction. As it stands now, when the code is executed, ...

Tips for incorporating several form input outputs into an array State in React

I am an aspiring coder diving into the world of React by working on a simple app that helps calculate how much money one has, designed for my kids to use and learn from. The app consists of 5 components, each with its own input field. These fields allow us ...

Issue with Nuxt JS Vuex data not updating in real-time upon page load

Within my Nuxt JS 2.9 application, I have implemented Vuex to store and retrieve data in my layout. The issue I am facing is that when I set data into the Vuex store on a page-specific basis, it requires me to refresh the page in order to see the updated d ...

Modifying the state object in ReactJS: A step-by-step guide on updating values

Below my query and explanation, you will find all the code. I am currently attempting to update the state in a grandparent class. This is necessary due to file-related reasons, and I am using Material-UI for text boxes. Additionally, I am implementing Red ...

Capturing HTTP requests using JavaScript

I am looking to modify all my ajax requests by intercepting them and changing POST methods before they go out. To intercept all my ajax calls, I can do the following: $.ajaxSetup({ beforeSend: function() { alert('sending...'); } ...

Why is my "webpack" version "^5.70.0" having trouble processing jpg files?

Having trouble loading a jpg file on the Homepage of my app: import cad from './CAD/untitled.106.jpg' Encountering this error message repeatedly: assets by status 2 MiB [cached] 1 asset cached modules 2.41 MiB (javascript) 937 bytes (rjavascript ...

Vue: event triggers malfunctioning and components unresponsive

I am new to Vue.js and I'm attempting to trigger an event from my grand-child component (card) to the child component (hand) and then to the parent component (main): card (emit play event) => hand (listen for play event and emit card-play event) ...

The addition of one hour to the date time format increases the total time

Currently, I am retrieving a datetime column value from a database table as 2015-03-04 21:00:00 UTC. When attempting to convert this format into a datetime picker, the following code is used: date = moment($("#event_start").val()); // date time value fro ...

Running system commands using javascript/jquery

I have been running NodeJS files in the terminal using node filename.js, but now I am wondering if it is possible to execute this command directly from a JavaScript/jQuery script within an HTML page. If so, how can I achieve this? ...

Encounter the "Error: Source 'cloudsTileLayer-RasterSource' not found" message while trying to integrate a weather tile layer into Azure Maps

I have been working on a React application that utilizes the React-Azure-Maps npm package. My current challenge involves creating a weather layer, which I believe shares similarities with the sample code provided for layers. The code snippet responsible f ...

Creating Dynamic Lists with React Native

<Search ref="search_box" onSearch={this.onSearch} backgroundColor="white" cancelButtonTextStyle={{ color: "red" }} placeholder="Search Food..." ...

html input type called array named AmountMap[1] is unable to be configured with <input type="textbox" size="15" name="amountMap[1]" value="0" >

**Having trouble setting the value of an HTML input type named like an array AmountMap[1] <input type="textbox" size="15" name="amountMap[1]" value="0" > When trying to set amountMap[1].value='10', ...