Question 34321 in React native Question posted in
The official React Native documentation can be found here.

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:

enter image description here

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?

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    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>
    )

  2. 0

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

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search