CODEWITHSUNDEEP
reactjsreact-native
Alwaysblue
Alwaysblue

Reputation: 11940

Margin in React-Native not working properly

I was trying to make an app on React-Native

To start, I did mere basic where I wanted to make a bottom Navigation

This is what I did at start to test 

import React, { Component } from 'react'
import {
    StyleSheet,  
    View, 
    Text, 
    Image
}  from 'react-native';

class MainScreen extends Component {

    constructor () {
        super () 
        this.board = []
    }
    render () {
        return (
            <View style={MainScreenBox}>
                 <View style={GridBox}>
                    <Text> Testing..........</Text>
                </View>
            </View>
        )
    }
}

const styles = StyleSheet.create({ 
    MainScreenBox: {
        display: "flex",
        flexDirection: "column"
    },
    GridBox: {
        marginTop: "90%",
        marginLeft: 5,
        marginRight: 5
    }
})

const {
    GridBox, 
    MainScreenBox
} = styles

Here, I did something as simple as marginTop: "90%", expecting the text would come at bottom but it still remains half way on the screen.

enter image description here

Question: Any Idea why this could be happening?

Upvotes: 1

Views: 14987

Answers (2)

Francois Nadeau
Francois Nadeau

Reputation: 7463

Add a flex weight (flex:1) to your main container.

MainScreenBox: {
    flex:1,
    display: "flex",
    flexDirection: "column"
},

Upvotes: 1

Osiel Lima
Osiel Lima

Reputation: 227

Clean all styles and put this to MainScreenBox style:

const styles = StyleSheet.create({ 
    MainScreenBox: {
      flex: 1,
      justifyContent:'flex-end'
    }
})

and use style={styles.MainScreenBox} to apply in root View. You can refer to flex doc to see how FlexBox works. Also notice that flexDirection is column by default in react native you do not have to set it and display:"flex" neither.

Upvotes: 1

Related Questions