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

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?