two inputs in one line?

Question

I have created a form in react-native which looks like:

Here is my code:

const Login = (props) => {
  const { phoneContainerStyles, loginButtonStyle } = styles;
  return (
    <View>
      <Field id="country" name="country" type="select" mode="dropdown" label="Country:" component={FormInput}>
        {
          props.countries && props.countries.map(country => <Picker.Item key={country.code} label={country.name} value={country.code} />)
        }
      </Field>
      <Field id="phone" name="phone" type="phone" label="Phone Number:" component={FormInput} />
      <Button type="submit" title="Login" buttonStyle={loginButtonStyle} onPress={props.handleSubmit(onLogin)} />
    </View>
  );
}

const styles = {
  loginButtonStyle: {
    backgroundColor: '#fc4482'
  }
}

Here is the FormInput:

const FormInput = (props) => {
  const { touched, error } = props.meta || {};
  const { labelStyles, errorStyles } = styles;
  return (
    <View>
      <Text style={[labelStyles, { display: props.label ? 'flex' : 'none', color: `${(touched && error) ? 'red' : 'black'}` }]}>{props.label}</Text>
      <View style={{ padding: props.inputWrapperPadding }}>
        {returnInput(props)}
        <View>
          <Text style={errorStyles}>{touched ? (error ? error : '') : ''}</Text>
        </View>
      </View>
    </View>
  );
};

const returnInput = (props) => {
  const { touched, error } = props.meta || {};  
  switch (props.type) {
    case 'select':
      .....
    case 'phone':
      return (
        <View>
          <TextBox {...props.input} id={`sel-${props.id}`} value={props.sel} style={styles.phoneSelStyle} />
          <TextBox {...props.input} id={props.id} placeholder={props.placeholder} disabled={props.disabled}
            style={[ styles.textBoxStyle, { borderColor: `${(touched && error) ? 'red' : 'black'}` }]}
            value={props.input.value} onChangeText={value => props.input.onChange(value)} />
        </View>
      );
    default:
      .....
  }
};

const styles = {
  labelStyles: {
    paddingLeft: 16, 
    fontWeight: 'bold'
  },
  errorStyles: {
    color: 'red',
    marginLeft: 16,
    marginRight: 16,
    marginBottom: 8
  },
  pickerStyles: {
    marginLeft: 16, 
    marginRight: 16
  },
  textBoxStyle: {
    marginBottom: 4,
    borderWidth: 1,
  }
  phoneSelStyle: {
    width: 50
  }
}

Now, I want the two TextInputs below Phone Number label in 1 line.

So, I added this style to View:

case 'select':
  .......
case 'phone':
  return (
    <View style={styles.phoneContainerStyles}>
      <TextBox {...props.input} id={`sel-${props.id}`} value={props.sel} style={styles.phoneSelStyle} />
      <TextBox {...props.input} id={props.id} placeholder={props.placeholder} disabled={props.disabled}
        style={[ styles.textBoxStyle, { borderColor: `${(touched && error) ? 'red' : 'black'}` }]}
        value={props.input.value} onChangeText={value => props.input.onChange(value)} />
    </View>
  );
default:
  .......

Here is the style:

phoneContainerStyles: {
    flex: 1,
    flexDirection: 'row'
  }

Now, If I run my app, then output looks like below:

I don't know why my textbox gets width = 0. Also, why button comes over the textboxes.

After following the answer by @Himanshu

Answer 1

Update your style like this:

//Child view component (<TextBox>) style use flex property
textBoxStyle: {
   flex:2
   borderWidth: 1,
}
phoneSelStyle: {
   //width: 50 don't apply width instead use flex
   flex:8
}

//Parent view style

phoneContainerStyles: {
   flex: 1,
   flexDirection: 'row'
}