Remove gap between flexbox and component below

Question

After adding flexbox to align 2 TextInput on one row (react native 0.59.5), it generates a huge gap with the TextInput below:

Here is the render and stylesheet:

   render() {
        return (
        <View style={styles.container}>
            <TextInput
            style={styles.input}
            placeholder='Username'
            autoCapitalize="none"
            placeholderTextColor='white'
            onChangeText={val => this.onChangeText('username', val)}
            />
            <View style={{flex: 1, flexDirection: 'row', height:55, width: 350}}>                
                <TextInput
                style={styles.inputLeft}
                placeholder='Country Code'
                autoCapitalize="none"
                keyboardType='number-pad'
                placeholderTextColor='white'
                onChangeText={val => this.onChangeText('cell_country_code', val)}
                />
                <TextInput
                style={styles.inputRight}
                placeholder='Cell'
                keyboardType='number-pad'
                autoCapitalize="none"
                placeholderTextColor='white'
                onChangeText={val => this.onChangeText('cell', val)}
                />
            </View>

            <SegmentedControlTab
                    values={['群众', '群干', '群主']}
                    selectedIndex={this.state.selectedIndex}
                    onTabPress={this.handleIndexChange}
                    tabsContainerStyle={styles.tabContainerStyle}
                    />
            <TextInput
            style={styles.input}
            placeholder='Corp Name'
            autoCapitalize="none"
            placeholderTextColor='white'
            onChangeText={val => this.onChangeText('corp_name', val)}
            />
            <Button
            title='Save'
            onPress={this.save}
            />
        </View>
        )
    }
}

const styles = StyleSheet.create({
    input: {
        width: 350,
        height: 55,
        backgroundColor: '#42A5F5',
        margin: 10,
        padding: 8,
        color: 'white',
        borderRadius: 2,
        fontSize: 18,
        fontWeight: '500',
    },
    inputRight: {
        flex:3,
        //width: 245,
        height: 55,
        backgroundColor: '#42A5F5',
        margin: 5,
        marginRight:0,
        padding: 8,
        color: 'white',
        borderRadius: 2,
        fontSize: 18,
        fontWeight: '500',
    },
    inputLeft: {
        flex:1,
        //width: 95,
        height: 55,
        backgroundColor: '#42A5F5',
        margin: 5,
        marginLeft:0,
        padding: 8,
        color: 'white',
        borderRadius: 2,
        fontSize: 18,
        fontWeight: '500',
    },
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center'
    },
    tabContainerStyle: { 
        height: 50, 
        width: 350, 
        backgroundColor: '#F2F2F2' 
    },
})

The height added to the flexbox did not help to remove the the gap. How to remove the huge gap in between?

Answer 1

Just remove flex:1 from this line

<View style={{flex: 1, flexDirection: 'row', height:55, width: 350}}>

to

<View style={{flexDirection: 'row', height:55, width: 350}}>   

I think this will work