Reduce height and vertical padding for a react-native-paper TextInput
11,715
Solution 1
add height
and justifyContent
in style
input: {
flex: 1,
height: 40,
justifyContent:"center"
}
Solution 2
You can set height for it if you want:
<TextInput
style={{height: 40, borderColor: 'gray', borderWidth: 1, justifyContent:"center"}}
onChangeText={(text) => this.setState({text})}
value={this.state.text}
/>
Source: https://facebook.github.io/react-native/docs/textinput
Also try searching in Github for some custom inputtext. They may have what you need. Good luck!
Author by
davidesp
Updated on June 14, 2022Comments
-
davidesp almost 2 years
I have the following code:
import React, { Component } from 'react'; import { View, StyleSheet } from 'react-native'; import { Button, TextInput } from 'react-native-paper'; export default class Header extends Component { state = { text: '', }; render() { return ( <View style={styles.container}> <TextInput value={this.state.text} style={styles.input} /> <Button mode="contained" style={styles.button}>Add Todo</Button> </View> ); } } const styles = StyleSheet.create({ container: { flexDirection: 'row', justifyContent: 'center', alignItems: 'center', alignSelf: 'stretch', backgroundColor: '#c1deff', }, input: { flex: 1, }, button: { flex: 0, }, });
which outputs the following screen:
My goal is to reduce the height for the
TextInput
. It also looks like it has some vertical padding. Is it possible to decrease that as well? I'm just trying to save space on the screen and in my opinion is taking lot of it area.EDIT 01
I tried with the following style:
input: { flex: 1, height: 40, borderColor: 'gray', borderWidth: 1, }
but didn't work, because I got the following result:
which as you can see, doesn't look good (obvious).
Thanks!
-
davidesp about 5 yearstried that with no success. Please, check my Edit 01
-
Amir Hedieh about 5 years@davidesp edited. Sry i dont have access to laptop right now and im on my phone :) i cant test any code right now to give you sure answer
-
davidesp about 5 yearsno probs @Amas, this question is now solved. Thanks!
-
Code Cooker almost 5 yearsThat's a life saving thing! anything isn't working
padding, margin, paddingHorizontal, paddingVertical
Nothing but this :/ set height to save your life as well