TextInput flexDirection: string not working in React-Native

Question

I am currently using React-Native for an Android project. I am trying to create a TextInput field with an icon next to the field. However, for some reason, I notice that flexDirection: 'row' does not work if TextInput is one of its child components. The whole view of the one I apply will automatically disappear. This is the code snippet of my code:

 <View style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}> <View style={{flexDirection: 'row'}}> <Image style={{height: 30, width: 30}} source={require('./images/email-white.png')} /> <TextInput style={{height: 40}} underlineColorAndroid={'transparent'} placeholder={'E-mail'} placeholderTextColor={'white'} onChangeText={(data) => this.setState({ username: data })} /> </View> </View> 

I also tried to wrap both components inside each separate view, but the problem still persists. Is there anyone who knows how to solve this? or can anyone confirm that this is a mistake?

Answer 1

Your code with a little modification worked fine for me. The only thing I did was add a width to the TextInput, whereby the icon is next to the text input.

Work code:

 <View style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}> <View style={{flexDirection: 'row'}}> <Image style={{height: 30, width: 30}} source={require('./images/email-white.png')} /> <TextInput style={{height: 40, width: 300}} underlineColorAndroid={'transparent'} placeholder={'E-mail'} placeholderTextColor={'white'} onChangeText={(data) => this.setState({ username: data })} /> </View> </View> 

Answer 2

Try closing your image tag ...

 <Image style={{width:30, height: 30}} source={require('./icon.png')} /> 

Also, add some sizes to your TextInput ...

 <TextInput style={{height: 40, borderColor: 'gray', borderWidth: 1}} /> 

You may also need to set flex: 0 to the image and flex: 1 to TextInput

Answer 3

I had the same problem when I built the sample code from Reagent Mastering

The code enclosed the TextInput field in the view with the flexDirection: 'row' function, and the child TextInput field was not available. Only the TextInput border was visible. After playing with some suggestions on this page, I found something that worked.

If the container view has flexDirection: 'row'. Be sure to add flex: 1 to your text box input. The flex image does not seem necessary. As soon as I added flex: 1 to the styles.input sheet, TextInput was available.

The following code works for me:

 <View style={globalStyles.COMMON_STYLES.pageContainer}> <View style={styles.search}> <Image style={{height: 30, width: 30}} source={require('../../images/email-white.png')}/> <TextInput style={styles.input} onChangeText={text => this.setState({ searchText: text})} value={this.state.searchText} placeholder={'Search'} placeholderTextColor={globalStyles.MUTED_COLOR}/> </View> </View> 

Local styles:

 const styles = StyleSheet.create({ input: { flex: 1, height: 35, color: globalStyles.TEXT_COLOR, borderColor: globalStyles.MUTED_COLOR, backgroundColor: globalStyles.BG_COLOR }, search: { borderColor: globalStyles.MUTED_COLOR, flexDirection: 'row', alignItems: 'center', borderRadius: 5, borderWidth: 1, // marginTop: 10, // marginBottom: 5 } }) 

Global styles (styles / global)

 export const COMMON_STYLES = StyleSheet.create({ pageContainer: { backgroundColor: BG_COLOR, flex: 1, marginTop: 0, paddingTop: 20, marginBottom: 48, marginHorizontal: 10, paddingHorizontal: 0 }, text: { color: TEXT_COLOR, fontFamily: 'Helvetica Neue' } }); 

Hope this helps you guys. It took me a long time to get this simple job.