How to position left and right items when 3 items in a row?

Question

In React Native 0.70 app, 2nd Header (react-native-element 3.4.2 is added to the view under the 1st Header with its centerComponent pointing to a search bar (one line only). Here is the code:

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", wifth:"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={"plcholder"} 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 to show screen name
            containerStyle={{backgroundColor: '#f4511e'}}
            centerComponent={<HeaderCenter />}. //<<==show screen name
            />
            <Header //<<==2nd header to show search bar
            containerStyle={{backgroundColor: 'white'}} //<<==white background color
            centerComponent={<Bar/>} //<<==here goes the search bar
            />
            <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:

The problem is 2 icons position. The icon on the left shall start from the left most and the icon on the right shall be at the far right. `alignContent:"flex-start/flex-end" on icon did not work. Increase TextInput flex to 10 cut off portion of 2 icons and did not push the icon away. How to move those 2 icons to their position?

Answer 1

The search bar was constructed on its own instead of using Header from react-native-elements. Here is the code:

return (
   
        <View style={styles.container}>
            <Header 
            containerStyle={{backgroundColor: '#f4511e'}}
            centerComponent={<HeadCenter />}
            />
             <View style={{ bottom:hp("0%"), alignContent:"space-between", paddingTop:hp("0.1%"),flexDirection:"row", width:"100%", height:hp("7%")}}>. //<<==this is the View bloc to hold search bar.
                
                <View style={{flex:1, alignContent:"flex-start",justifyContent:"center",alignItems:"center"}}>
                    <Pressable  onPress={()=>{submit()}} >
                        <Icon  name="search-outline" color="black" size={hp("4.4%")}/> 
                    </Pressable>
                </View>
                
                <View style={{flex:5}}>
                    <TextInput  style={{fontSize:hp("3%")}} placeholder={plcholder} onChangeText={strChg}></TextInput>
                </View>
                <TouchableOpacity  onPress={()=>{navigation.navigate("MyHelp")}} >
                <View style={{flex:2, alignContent:"flex-start", justifyContent:"center",alignItems:"center"}}>
                    
                        <Icon  name="help-outline" color="black" size={hp("4.4%")}/> 
                     
                </View>  
                </TouchableOpacity>            
            </View>
            
            <ScrollView>
    ....
            </ScrollView>
    )

Answer 2

just give justifyContent: 'space-between' and it will place left item to the left most and right item to the right most