How to add prefix in TextInput - React Native

Question

I want to add prefix to my text input and I would like to know how to do it.

Text Input Code

        <TextInput
          style={styles.inputs}
          placeholder="Mobile Number"
          keyboardType="number-pad"
          underlineColorAndroid="transparent"
          onChangeText={mobile_number => this.setState({mobile_number})}
        />

Final output I want

Answer 1

You can do it like that:

  render() {
    return (
      <View style={styles.inputContainer}>
        <Text style={styles.prefix}>+94</Text>
        <TextInput
          placeholder="Mobile Number"
          keyboardType="number-pad"
          underlineColorAndroid="transparent"
          onChangeText={mobile_number => this.setState({ mobile_number })}
        />
      </View>
    )
  }

const styles = StyleSheet.create({
  inputContainer: {
    borderWidth: 1,
    flexDirection: 'row',
    alignItems: 'center',
    backgroundColor: 'white',
    marginHorizontal: 10,
    borderRadius: 10
  },
  prefix: {
    paddingHorizontal: 10,
    fontWeight: 'bold',
    color: 'black'
  }
})