CODEWITHSUNDEEP
react-native
imran shoukat
imran shoukat

Reputation: 1159

What is an alternative of textarea in react-native?

Is there any built in text area component for react-native? I have tried to implement these ones:

https://github.com/buildo/react-autosize-textarea

https://github.com/andreypopp/react-textarea-autosize

but getting an error "Expected a component class got object object".

Upvotes: 96

Views: 165712

Answers (6)

Marvin Soto
Marvin Soto

Reputation: 911

If you want to see your TextInput component like a TextArea, you will need to add this:

<TextInput
    multiline={true}
    numberOfLines={10}
    style={{ 
        height: 200,
        textAlignVertical: 'top'
    }}
/>

Upvotes: 81

Raghuvansh mani mishra
Raghuvansh mani mishra

Reputation: 89

You can make textArea in React Native like this:

<View style={{ flex: 1, backgroundColor: COLORS.white }}>

<TextInput 
    style={{
        flex:1,
        textAlignVertical:'top',
        justifyContent: "flex-start", 
        backgroundColor: 'white' 
    }} 
placeholder="type something here" 
multiline={true} 
/>

</View>

Upvotes: 1

funkysoul
funkysoul

Reputation: 3241

Yes there is. It's called TextInput, the normal TextInput Component supports multiple lines.

Just assign following properties to your TextInput Component

multiline = {true}
numberOfLines = {4}

At the end you should have this: 

<TextInput
    multiline={true}
    numberOfLines={4}
    onChangeText={(text) => this.setState({text})}
    value={this.state.text}/>

Source https://facebook.github.io/react-native/docs/textinput

Upvotes: 232

Nacho Justicia Ramos
Nacho Justicia Ramos

Reputation: 9771

I build text areas in react-native by wrapping a TextInput component into a View the following way:

  <View style={styles.textAreaContainer} >
    <TextInput
      style={styles.textArea}
      underlineColorAndroid="transparent"
      placeholder="Type something"
      placeholderTextColor="grey"
      numberOfLines={10}
      multiline={true}
    />
  </View>

...

const styles = StyleSheet.create({
  textAreaContainer: {
    borderColor: COLORS.grey20,
    borderWidth: 1,
    padding: 5
  },
  textArea: {
    height: 150,
    justifyContent: "flex-start"
  }
})

enter image description here enter image description here

Upvotes: 42

Eduard
Eduard

Reputation: 9205

I am using this component: https://www.npmjs.com/package/react-native-autogrow-textinput

It expands automatically on-text growth. I created my own reusable component with the autogrow-textinput as part of it, which inside the component looks like that:

<AutoGrowingTextInput 
    minHeight={40}
    maxHeight={maxHeight} // this is a flexible value that I set in my 
        component, where I use this reusable component, same below, unless specified the other
    onChangeText={onChangeText}
    placeholder={placeholder}
    placeholderTextColor='#C7C7CD'
    style={inputStyle}
    value={value}
/>

Upvotes: 7

Manuel E Carpio
Manuel E Carpio

Reputation: 124

If you are using only react-native components your option is TextInput

As "funkysoul" explained:

Just assign following properties to your TextInput Component

multiline = {true}
numberOfLines = {4}

If you want to see this component as the classic textarea (bigger than an inline text-input), you usually will need to add the height style-property. See the following example:

 <TextInput
     multiline={true}
     numberOfLines={10}
     style={{ height:200, backgroundColor:'red'}}
 />

I added the backgroundColor for a better understanding of the height role. Please don't use it on your project ;)

Upvotes: 4

Related Questions