How to achieve Text area ? -- "multiline" property on <Input> is not effective

Hi trying to build simple form in NativeBase, but even creating the simple forms is not working as expected.

There are three issues that I am facing in below form:

import React, { Component } from 'react';
import { Dimensions, TextInput } from 'react-native';
import {
  Button,
  Container,
  Content,
  Header,
  Form,
  Item,
  Label,
  Input,
  InputGroup,
  Left,
  Right,
  Text,
} from 'native-base';

export default class AddBusiness extends Component {
  render() {
    let { width } = Dimensions.get('window');
    width = width * 0.9;
    return (
      <Container>
        <Content>
          <Form>
            <Item floatingLabel>
              <Label>Name</Label>
              <Input />
            </Item>
            <Item floatingLabel>
              <Label>Address</Label>
              <Input />
            </Item>
            <Item floatingLabel>
              <Label>Detils</Label>
              <Input
                multiline={true}
                numberOfLines={10}
              />
            </Item>
          </Form>
          <Text> </Text>
          <Button block success >
            <Text>Add</Text>
          </Button>
        </Content>
      </Container>
    );
  }
}

This looks like below on Android:

Issues in above code:

1. If you see in screenshot, the first character in Name and Address field is getting cut (not shown completely. If I add last property to <Item> then is shows up but in that case the underline below text field goes from one end of screen to other, make the UI look bit different.

2. Although I added block property to <Button> but still the button if full length from one end to another end. To make it look like block button, I have to att extra style to it as style={{ width, alignSelf: 'center' }} to <Button>. Here width is defined as let { width } = Dimensions.get('window'); width = width * 0.9;. I was expecting block property to do that magic, as explained in docs, but its not working for me.

3. I want to make Details field as miltiline textbox. What should, I do to make it work as multiline text box? I tried below things, but nothing worked.

Tried multiline on <Input>

<Item floatingLabel last>
    <Label>Detils</Label>
    <Input multiline={true} numberOfLines={10} />
 </Item>

Tried <Textarea> from NativeBase

<Textarea placeholder="Enter details" style={{height: 40}} />

Tried <TextInput> from react-native

<TextInput multiline={true} numberOfLines={10}/>

None of the above worked. In all these cases, the field is still single line, not multi-line.

When I started with NativeBase few days back, I was excited that it will simplify life as I am not good in styling / CSS, but after trying it for some time now, I feel its not out of the box. I may be wrong.

1. Another issue I am facing is this one, but that comes when I use NativeBase components in react-native-snap-carousel component. Please refer the big filed here: https://github.com/archriss/react-native-snap-carousel/issues/143

I will appreciate, if you can look into these 4 issues and provide me some solution / work around. Let me know if you need any other info.

Gaurav

[SupriyaKalghatgi]

@gauravdhiman

1. That happens while you run your app on expo. You can verify this by running pure RN app The last property is meant to be used with last element of any component, say List, Form. It is designed particularly for it. You can also verify this by installing NativeBase-KitchenSink app from Play Store. Click here

2. You can check the screenshot attached at the end, adding block to Button renders it of full length without any additional style. block fits in the width of Content (with some borderRadius) If you dont want Button with any borderRadius and of full width, use full with Button

3. NativeBase components are built on top of React Native components Each NativeBase Component has its corresponding replacement component for React Native This is documented for all the NativeBase Components. NativeBase Input is replacement for React Native TextInput Anything which is possible with React Native, it is equally compatible with NativeBase. So you have to include height in this case. Also about the cursor where it points with multiline text input, for Android its from center of the input (you can refer screenshot shared by you) You can fix this by including textAlignVertical: "top" within style of Input

4. This is happening due to flex property If you specify height for carousel, do mention it for Card also, since Card uses flex OR Wrap the Card in View of React Native

[aayushi14]

You can try using rowSpan as shown below: <Textarea rowSpan={10} bordered style={{color: '#616161'}} placeholder="INSTRUCTIONS" />