无法覆盖react-native的TextInput默认填充

Question

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:

Answer 1

After a long day of endless googling , 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.

Answer 2

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}}

Answer 3

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

multiline={true}

Answer 4

       <TextInput multiline={true}
          underlineColorAndroid='transparent'
          style={styles.input}
          onChangeText={(text) => this.setState({ text })}
          value={this.state.text}
          placeholder={this.props.navigation.state.params.screen}
          placeholderTextColor={colors.light_grayc}
          textAlignVertical='top'
          paddingRight={12}
          paddingLeft={12}
        />