TextInput flexDirection:row not working in React-Native

Question

I am currently using React-Native for an Android Project. I have been trying to make a TextInput field with an icon beside the field. However, for some reasons, I notice that the flexDirection: 'row' is not working if the TextInput is one of its child component. The whole view of the one that I apply the style will automatically disappear. This is a snippet of how my code looks like:

<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 component inside each individual view, but the problem still persists. Is there anyone who knows how to solve this? or anyone can confirm that this is a bug?

Answer 1

Your code with a small modification worked fine for me. The only thing I did was adding a width to the TextInput resulting in the icon being beside the text-input.

Working 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

I had the same problem when I was building example code from the book Mastering React Native

The code had enclosed a TextInput field in a View with a flexDirection: 'row' and the child TextInput field was not accessible. Only the TextInput border was visible. After playing around with some of the suggestions on this page I found something that worked.

If the container view has a flexDirection: 'row'. Please make sure to add a flex: 1 into your textfield input. The image flex does not seem necessary. As soon as I added the flex: 1 to the styles.input sheet, the TextInput was accessible.

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'
    }
});

Hopefully this provides assistance to you guys. It took me a long time get something this simple working.