How to change TextInput starting and Ending point/ - react-native

Question

As you guys can see the text is cut at the end, how can I change that small white box size or make my text show 'Enter a postcode, street or ...' since, if, the text was smaller it would cut it and put the three dots.
TouchablePlatform is a component used to join both TouchableOpacity and TouchableComponent.
<View style={styles.subContainer1}>
<TouchablePlatform onPress={this._onBackIconPress}>
<Image
source={icon}
style={isListing ? styles.imageIconBack : styles.image}
/>
</TouchablePlatform>
<TextInput
ref={textInput => (this.textInput = textInput)}
placeholderTextColor={'#9CAFB3'}
underlineColorAndroid={'#FFFFFF00'}
placeholder={'Enter a postcode, street or area…'}
style={styles.textInput}
onFocus={this._onTextInputFocus}
value={this.state.text}
/>
</View>
These are the styles being used
const styles = StyleSheet.create({
...
subContainer1: {
flexDirection: 'row',
justifyContent: 'flex-start',
alignItems: 'center',
marginLeft: 15,
marginTop: 10,
height: 40,
borderRadius: 5,
elevation: 4,
shadowOpacity: 0.4,
shadowRadius: 4,
shadowColor: '#073741',
shadowOffset: { height: 2, width: 0 },
},
image: {
resizeMode: 'contain',
height: 25,
width: 25,
marginLeft: 15,
},
imageIconBack: {
resizeMode: 'contain',
height: 18,
width: 18,
marginLeft: 22,
},
...
textInput: {
width: '65%',
fontSize: 14,
marginLeft: 15,
fontFamily: 'azo-sans-light',
color: '#043742',
},
});
How can I change the size of the white area? To make sure the text isn't cut, or, at least, make it cut the text, and show three dots (...) on the trimmed area.

Answer 1

The starting point of the TextInput is controlled by the textInput.marginLeft style, and the end point is set by textInput.width, which is set to 65% of the parent container. You can tweak these values to resize the input box.
The React Native TextInput does not support automatic ellipsization of overflowing placeholder text. If you want to do this, you could hack it by absolutely positioning a Text element on top of it with the following properties, and hiding it when the text input is focused.
<Text numberOfLines={1} ellipsizeMode="tail" pointerEvents="none" />