I have a component that wraps a TextInput and has an option to display the content on multiline. However, it's used in multiple places around the app, and in some spots the multiline makes the height of the TextInput grow, but in others it remains the same. The weirdest thing is that it is used in the exact same screen, one below the other (as you can see below)!
<View style={styles.inputContainer}>
<TextInput
style={styles.input}
onChangeText={(text) => onChangeText(text)}
value={value}
multiline={multiline}
keyboardType={keyboardType}
/>
</View>
Styling:
inputContainer: {
flexDirection: 'row',
alignItems: 'center',
borderBottomWidth: 1,
borderBottomColor: colors.grayLighter
},
input: {
color: colors.grayTextDarker,
paddingVertical:12,
width: '100%',
paddingHorizontal: 20,
fontFamily: FONTS.Arial,
fontSize: 18,
textAlign: 'center',
justifyContent: 'center'
},
Usage of component when height is not adapted:
<CustomInput2
label={'HEIGHT OF TEXTINPUT NOT RESIZING WHEN TEXT IS MULTILINE'}
onChangeText={(value) => updateState(value)}
value={'vjner vnrjg nvdy hf ythnf vt f mb yhb c vyh fbt j vth yb j fv yjbd trxh vydr hbf tdfx yd yjhbtf jy'}
multiline={true}
keyboardType="default"
/>
Usage of component when height IS adapted:
<CustomInput2
label={"My Label}
onChangeText={(value) => setState(value)}
value={"as you can see in the picture below, the height of the input resizes here"}
multiline={true}
keyboardType="url"
/>
