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

[gauravdhiman]

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.

1. 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.

2. 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

[gauravdhiman]

Is NativeBase still an active project ? Wondering, as no response is there on this defect since last 3 days :-( ... Hope someone is looking at it.

[SupriyaKalghatgi]

@gauravdhiman It becomes quite difficult to answer all the issues in a day.
But yes, we are trying to attend all of them as quick as possible

[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

1. 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

2. 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

3. 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

[gauravdhiman]

Thanks @SupriyaKalghatgi for your response.

1. Floating Text Input: Does that only happen wen using Expo ? Will it not happen when we will build an app for final deployment ? Also can you put some light on why it happens with Expo when we dont use last property on <Input> component.

2. Block button: I saw it in NavtiveBase KitchenSink app, the block button is not full width. It is centrally aligned and is approx 90% of screen width. That is what I expected, but when I use block with Button, it shows full width button (not as shown in KitchenSink app) but with slightly rounded corners.See the width of block buttons here: http://docs.nativebase.io/Components.html#button-block-headref, see the width, it's not full width.

3. Thanks for explaining 3rd point. It really helped me achieve multi-line text area.

4. I will try your suggestion to render Card properly in Carousel component.

I will appreciate you response on 1 and 2 point s above.
Thanks again !!

[SupriyaKalghatgi]

@gauravdhiman

1. Floating Text Input
   yes that happens only in case of expo

1. Block Button
   the image shared for this in docs, it is because of padder with Content
padder adds padding of 10px on all 4 sides