Tabbar React Native

Question

Tabbar React Native

Navigation

#1 by (0 votes)

0

I'm having trouble positioning a component of tabbar 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 position: 'absolute' , it disappears from the screen, if I take it, it gets below my card component.

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

react-native react flexbox

asked by anonymous 26.01.2018 / 23:30

1 answer

Query Analytics without the client being authenticated How do I use a Vast Survival Multiplayer?

score 0 · Answer 1

When setting position:absolute under a container it is necessary to observe if 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 container does not occupy full height, simply add height: 100%