Tabbar React Native

Asked

Viewed 261 times

0

I’m having trouble positioning a component of tabbar what I’m doing.

Home js.

import React, {Component} from 'react'
import {View, Text, ScrollView} from 'react-native'
import Header from './../components/Header'
import Card from './../components/Card'
import TabBar from './../components/TabBar'

class Home extends Component{
    render(){
        const {scrollContent, tab, scroll} = styles

        return(
            <View>
                <Header />

                <View>
                    <ScrollView>
                        <Card />
                    </ScrollView>
                </View> 

                <TabBar />
            </View> 
        )
    }
}



export default Home

Tabbar.js

import React from 'react'
import {View, Text} from 'react-native'

const TabBar = () => {
    const {tab} = styles

    return(
        <View style={tab}>

        </View>
    )
}

const styles = {
    tab: {
        height: 50,
        backgroundColor: '#000',
        position: 'absolute',
        bottom: 0,
        flexDirection: 'row'
    }
}

export default TabBar

If I leave with the position: 'absolute', it disappears from the screen, if I shoot, it gets down from my Component card.

The idea is that it stays at the bottom of the screen, fixed.

react react-native flexbox

  • When setting the position Absolute the width loses the reference, so I think just add a width 100% and take the flexDirection that has no use there, if it doesn’t work the problem is in the container.

  • @Felipeduarte I did what I said and is still missing :/ the container has no style defined

  • But where does it go? , can inspect and show the structure already compiled in the browser?

  • @Felipeduarte Cara, I got it, thanks even in, Voce spoke of container then went and put on container: {height: '100%'} and then stayed there at the end.

  • Then yes haha, I answered to be more organized.

1 answer

0

At setting position:absolute under a container it is necessary to observe whether it fills the height of the screen, usually the document.body initial fills, then just add it at the end with bottom:0, example...

body {
  box-sizing: border-box;
  margin:0;
}
div {
  text-align: center;
  width: 100%;
  height: 40px;
  line-height: 40px;
  background: #333;
  position: absolute;
  bottom:0;
  color: white;
}
<body>

<div>
    Footer
</div>

</body>

If the container does not occupy the full height, just add height: 100%

Browser other questions tagged react react-native flexbox

You are not signed in. Login or sign up in order to post.