React native Text Input with Left and Right View mode - react-native

Question

I am trying to build a Search component with Textfield with both right view and left view(Images at both end). Text Input wraps itself to the length of the content, so component no covering entire parent width. How to stretch the component so that entire component occupies the full width of parent.
<View
style={{
flexDirection: "row",
height: 40,
alignSelf: "stretch",
backgroundColor: "red"
}}
>
<Image
source={require("./image_assets_rn/search_rn.png")}
style={{ alignSelf: "center" }}
/>
<TextInput
placeholder="Search Jet"
style={{ backgroundColor: "white", alignSelf: "stretch" }}
/>
<Image
source={require("./image_assets_rn/search_rn.png")}
style={{ alignSelf: "center" }}
/>
</View>;
Below is the output. I want to stretch the textfield along the main axis(width)

Answer 1

It can be achieved giving the TextInput flex:1, there is no need to use stretch.
<View style={styles.container}>
<View style={{flexDirection:'row', width: 300, height:40,backgroundColor:'lightgray'}}>
<Image
source={require('./image_assets_rn/search_rn.png')}
style={{ height: 30, width: 20,margin: 5}}
/>
<TextInput
placeholder="Search Jet"
style={{backgroundColor:'white', flex:1}}
/>
<Image
source={require('./image_assets_rn/search_rn.png')}
style={{ height: 30, width: 20, margin:5}}
/>
</View>
</View>
Check it on snack
I recommend you this tutorial to have a grasp on how flexbox works.
Hope it helps!

Answer 2

I just add component flexbox in each component that wrapped in component View. I think it will make every component follow the parent width.
<View style={{ flexDirection:'row',
height:40,
alignSelf:'stretch',
backgroundColor:'red' }}>
<Image source={ require('./image_assets_rn/search_rn.png')}
style={{ flex:1, alignSelf:'center' }}/>
<TextInput placeholder="Search Jet"
style={{ flex:1, backgroundColor:'white',
alignSelf:'stretch' }}/>
<Image source={ require('./image_assets_rn/search_rn.png')}
style={{ flex:1, alignSelf:'center' }}/>
</View>
If you want to learn more about Flexbox maybe you can read on the Official Web ReactNative.
I hope this can help you :))