React Native: How to set <TextInput> and <Image> at center together - react-native

Question

I want the text and image to be on one line and centered.
How can I center it?
I updated my code with another require
SearchBox will center when start, and then click to start type, it will be margin left (sorry guys, my english so bad).
constructor(props: any) {
super(props);
this.state = {
onEdit: false,
}
this.onBlur = this.onBlur.bind(this);
this.onEndEditing = this.onEndEditing.bind(this);
}
private onBlur() {
this.setState({
onEdit: true
});
}
private onEndEditing() {
this.setState({
onEdit: !this.state.onEdit
});
}
private get searchView() {
const { onEdit } = this.state;
return (
<View style={styles.searchContainer}>
<View style= {[styles.search, onEdit === true || this.props.keyword.length !== 0 ? undefined : { justifyContent: 'center' }]}>
<Image source={searchIcon} style={[styles.image, { marginLeft: onEdit === true || this.props.keyword.length !== 0 ? 10 : 0 }]} />
<TextInput
style={styles.searchInput}
placeholder={'search'}
onEndEditing={this.onEndEditing}
onFocus={this.onBlur}
defaultValue={this.props.keyword}
clearButtonMode="while-editing"
/>
</View>
</View>
);
}
const styles = StyleSheet.create({
searchContainer: {
height: 72,
padding: 16,
},
search: {
flex: 1,
flexDirection: 'row',
alignItems: 'center',
height: 40,
},
image: {
marginRight: 10,
alignSelf: 'center'
},
searchInput: {
paddingRight: 10,
fontSize: 14,
},
})
Update: I got a new error when I type text in search box. It was hidden for the first few characters.

Answer 1

You need to use flex instead of flexBox.
Here you go:
render() {
return (
<View style={styles.container}>
<View style={styles.searchContainer}>
<Image source={IC_PRIVATE_CLUB_NORMAL} style={styles.image} />
<TextInput
style={styles.searchInput}
placeholder={'search'}
/>
</View>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
searchContainer: {
height: 72,
width: '90%',
justifyContent: 'center',
alignItems: 'center',
backgroundColor: 'pink',
flexDirection: 'row'
// padding: 16,
// paddingLeft: 10,
// paddingRight: 10,
// flex: 1,
},
search: {
// width: '80%',
flexDirection: 'row',
alignItems: 'center',
height: 60,
backgroundColor: 'gray'
},
image: {
marginRight: 10,
alignSelf: 'center'
},
searchInput: {
height: 40,
width: '80%',
fontSize: 14,
textAlign: 'center',
backgroundColor: 'red'
},
})