CODEWITHSUNDEEP
cssreact-native
user15974221
user15974221

Reputation:

How to fix the footer on bottom of the page in react-native?

I want to fix the footer on the bottom of the page,

Thats why my whole container was in flex:1 so it takes all the space,

and in my footer, i added position:"absolute",marginBottom:0,, the footer affected so badly which i didnt expect. It goes to up like in the header of the page, then i deleted it,

How can i fix it on bottom of page?

Here is the related code.

    <SafeAreaView style={{ flex: 1, backgroundColor:"#ffffff", }}>
{/* Footer */}
        <View style={{ flexDirection:"row", alignItems:"center", justifyContent:"space-between",marginHorizontal:35,}}>
        <View> // here there are some code
         <View> 
          <Home height={30} width={22} fill={"#1E2439"} />
          <Ratio height={30} width={22} fill={"#1E2439"} />
          <Time height={30} width={22} fill={"#1E2439"} />
          <User height={30} width={22} fill={"#1E2439"} />

        </View>   

      </View>

    </SafeAreaView>

Here how the page seen: enter image description here

enter image description here

Upvotes: 3

Views: 2416

Answers (3)

Bhavesh Jain
Bhavesh Jain

Reputation: 71

The position is from the CSS language.

{
  position:"absolute",
  bottom:0,
  height: 60
}

Upvotes: 1

Jain Bhavesh
Jain Bhavesh

Reputation: 578

here is my code for fixed footer

<View style={{flex:1}}>
<ScrollView style={{flex:1}}>
/// some Code
</ScrollView>

// here is bottom bar

<View style={{height: 60, justifyContent: 'center', borderTopLeftRadius: 20, borderTopRightRadius: 20, flexDirection: 'row', alignContent: 'center', alignItems: 'center'}}>

<View style={{flex: 1,
        flexDirection: 'column',
        justifyContent: 'center',
        alignItems: 'center'}}>

//Here is you bottom icon or image
<View>

</View>

</View>

Upvotes: 1

gwl002
gwl002

Reputation: 752

Position is from the css language.

{
  position:"absolute",
  bottom:0
}

Upvotes: 3

Related Questions