CODEWITHSUNDEEP
reactjsreact-native
Ray
Ray

Reputation: 9684

Can't override react-native's TextInput default padding

I have the following TextInput:

  _renderTextInput() {
    return (
      <TextInput
        onChangeText={TextInput => this.setState({TextInput})}
        style={{flex: 1, backgroundColor: "maroon", paddingVertical: 0}}
        autoFocus={true}
        multiline={true}
        underlineColorAndroid="transparent"
        returnKeyType="go"
      />
    )
  }

  render() {
    return(
      <View style={{flex: 1, backgroundColor: "#E0E0E0", paddingVertical: 0}}>
        {this._renderTextInput()}
      </View>
    )
  }

What I am trying to achieve is a full-screen distraction-free zone for the user to type his post.

I know for sure that it's a padding issue but whatever I try I simply can not override it. I tried padding:0 paddingTop:0 paddingVertical: 0 nothing seems to work...

Preview:

enter image description here

Upvotes: 8

Views: 34075

Answers (4)

Dilshod Sh
Dilshod Sh

Reputation: 301

You just have to delete "flex: 1" because it makes your input place entire space.

Upvotes: -1

SaumyadipDev
SaumyadipDev

Reputation: 275

In case anyone is looking for a solution while using an Input, set it's multiline property to true.

multiline={true}

Upvotes: -2

Ray
Ray

Reputation: 9684

After a long day of endless g-o-o-g-l-i-n-g, I found out what's causing the unwanted padding. It looks like by default, TextInput has the Text vertically centered hence why everything is exactly in the middle. To override it, just add:

textAlignVertical: 'top' to the TextInput's style and you're done. :)

@matt-aft 's comment about changing the style of the text helped to solve this.

Upvotes: 24

Matt Aft
Matt Aft

Reputation: 8936

Flex wont work here because you have other components also using flex so the screen is getting divided up. Using the device's height and width should work, or using a modal with a test input should also work.

const {height, width} = Dimensions.get('window');

style={{ height, width, backgroundColor: "maroon", paddingVertical: 0}}

Upvotes: 3

Related Questions