Adding a second Header (from react-native-element 3.4.2) to a React Native 0.70 app involves placing it under the first Header, with its centerComponent pointing to a search bar that spans only one line. Below is the code snippet:
import { Header } from 'react-native-elements';
import { Col, Row, Grid } from 'react-native-easy-grid';
import { widthPercentageToDP as wp, heightPercentageToDP as hp } from 'react-native-responsive-screen';
Bar = () => { // Search element
return (
<View style={{position: "absolute", bottom:-hp("2.2%"), alignContent:"flex-start", paddingTop:hp("2.5%"), flexDirection:"row", width:"100%"}}>
<View style={{flex:1, alignItems:"center"}}>
<TouchableOpacity onPress={()=>{submit()}} >
<Icon name="search-outline" color="black" size={hp("4.4%")}/>
</TouchableOpacity>
</View>
<View style={{flex:8}}>
<TextInput placeholder={"placeholder"} onChangeText={strChg}></TextInput>
</View>
<View style={{flex:1, alignItems:"center"}}>
<TouchableOpacity onPress={()=>{navigation.navigate("MyHelp")}} >
<Icon name="help-outline" color="black" size={hp("4.4%")}/>
</TouchableOpacity>
</View>
</View>
)
}
return (
<View style={styles.container}>
<Header // First header showing screen name
containerStyle={{backgroundColor: '#f4511e'}}
centerComponent={<HeaderCenter />}. // Show screen name
/>
<Header // Second header displaying search bar
containerStyle={{backgroundColor: 'white'}} // White background color
centerComponent={<Bar/>} // Search bar component
/>
<ScrollView>
....
</ScrollView>
</View>
)
styles = StyleSheet.create({
container: {
flex:1
},
text: {
alignItems:'center',
alignContent:'center',
paddingTop:wp("20%"),
fontSize:wp("5%"),
},
}
Here is how the header bar looks:
https://i.sstatic.net/gHv82.png
The issue lies in the position of the two icons. The left icon should start from the far left and the right icon should be at the far right. Using `alignContent: "flex-start/flex-end"` on the icons did not work. Increasing TextInput flex to 10 resulted in cutting off a portion of the two icons without pushing them away. How can these icons be moved to their proper positions?