How to fill save between to views in React Native

Question

I got two views and in my views there are two TextInput fileds in each view, the problem is that in between my each textinput filed there's a lot of space, How to fill gap between each one of them. Here's my views:

    <View style={styles.inputContainer}>
          <Image style={styles.inputIcon} source={require('../assets/email.png')}/>
          <TextInput style={styles.inputs}
              placeholder="Email"
              keyboardType="email-address"
              underlineColorAndroid='transparent'
              onChangeText={(email) => this.setState({email})}/>
        </View>
        <View style={styles.inputContainerx}>
          <Image style={styles.inputIcon} source={require('../assets/email.png')}/>
          <TextInput style={styles.inputs}
              placeholder="Password"
              secureTextEntry={true}
              underlineColorAndroid='transparent'
              onChangeText={(password) => this.setState({password})}/>
        </View>

This is the styling:

const styles = StyleSheet.create({
    inputs:{
        height:155,
        marginLeft:7,
        borderBottomColor: '#ffff',
    },
      inputContainer: {
        borderBottomColor: '#F5FCFF',
       // backgroundColor: '#FFFFFF',
        borderRadius:50,
        borderBottomWidth: 2,
        width:350,
        height:45,
        marginBottom:180,
        flexDirection: 'row',
        alignItems:'center'
    },
    inputContainerx: {
        borderBottomColor: '#F5FCFF',
       // backgroundColor: '#FFFFFF',
        borderRadius:50,
        borderBottomWidth: 2,
        width:350,
        height:45,
        flexDirection: 'row',
        alignItems:'center',
    },
    inputIcon:{
        width:30,
        height:30,
        marginLeft:15,
        justifyContent: 'center'
      },
});

Answer 1

check below example. hope this will help you

import * as React from 'react';
import { Button, View, Text, StyleSheet, TextInput, Image } from 'react-native';

class App extends React.Component {
  render() {
    return (
      <View
        style={{
          flex: 1,
          justifyContent: 'center',
          width: '90%',
          alignSelf: 'center',
        }}>
        <View style={styles.inputContainer}>
          <Image
            style={styles.inputIcon}
            source={{ uri: 'https://reactnative.dev/img/tiny_logo.png' }}
          />
          <TextInput
            style={styles.inputs}
            placeholder="Email"
            keyboardType="email-address"
            underlineColorAndroid="transparent"
            onChangeText={email => this.setState({ email })}
          />
        </View>
        <View style={styles.inputContainerx}>
          <Image
            style={styles.inputIcon}
            source={{ uri: 'https://reactnative.dev/img/tiny_logo.png' }}
          />
          <TextInput
            style={styles.inputs}
            placeholder="Password"
            secureTextEntry={true}
            underlineColorAndroid="transparent"
            onChangeText={password => this.setState({ password })}
          />
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  inputs: {
    flex: 1,
    height: 35,
    paddingHorizontal: 8,
  },
  inputContainer: {
    borderBottomColor: 'gray',
    borderBottomWidth: 1,
    flexDirection: 'row',
    paddingVertical: 10,
    justifyContent: 'center',
  },
  inputContainerx: {
    borderBottomColor: 'gray',
    borderBottomWidth: 1,
    flexDirection: 'row',
    alignItems: 'center',
    paddingVertical: 10,
  },
  inputIcon: {
    width: 30,
    height: 30,
  },
});

export default App;

Feel free for doubts.