CODEWITHSUNDEEP
react-nativeflexbox
Raihan
Raihan

Reputation: 63

React Native Flex: 1 Does not fill whole screen

I tried to fill the whole screen with black using flex: 1. but the result is like this

resuls in iphone simulator

result in my android devices

  <View
    style={{
      flex: 1,
      backgroundColor: 'black',
    }}
  />

i've also tried using:

   height: '100%',
   width: '100%',

and

const HEIGHT = Dimensions.get('window').height;
const WIDTH = Dimensions.get('window').width;

but the result is still the same.

is there a way to completely fill the whole screen?

Upvotes: 2

Views: 9495

Answers (8)

Smitha Gowda
Smitha Gowda

Reputation: 41

make sure parent element also have flex:1

Upvotes: 1

localhost_3000
localhost_3000

Reputation: 194

First wrap your view component in SafeAreaView then provide a flex style to it.

<SafeAreaView style={{flex: 1}}>
    <View style={/* do your styling */}>...</View>
</SafeAreaView>

Upvotes: 1

Ryan
Ryan

Reputation: 126

I have had similar problem. But in my case, I have solved the problem by modifying View to SafeAreaView in App.js (especially return() session) and other related files.

Upvotes: 0

Mayank Jain
Mayank Jain

Reputation: 271

Try this if you are using react navigation

const ReactNavigation = require('react-navigation');
ReactNavigation.SafeAreaView.setStatusBarHeight(0);

or

navigationOptions: {
  headerForceInset: {top: 'never'},
}

Upvotes: 1

Ayan
Ayan

Reputation: 2918

First import: 

import { StatusBar } from "react-native";
import { SafeAreaView } from "react-native-safe-area-context";

Change your layout to: 

<StatusBar backgroundColor="black" barStyle="white-content"/>
<SafeAreaView 
    style={{
        flex: 1,
        backgroundColor: 'black',
    }}
>
      <View>...</View>
</SafeAreaView>

Upvotes: 3

Dhananjay Patel
Dhananjay Patel

Reputation: 34

If you given padding of parent view, so remove it. May be it work and Your render function it should be like this.

render() {
  return (
   <View style={{ flex: 1, backgroundColor: 'black'}} />
  )
}

Upvotes: -1

Imjaad
Imjaad

Reputation: 604

Are you wrapping your app inside safe area view, anyway you can use percentage width and heights to fill the entire screen if flex:1 is not working.

style = {{ width:'100%', height:'100%' }}

Upvotes: 2

user12551649
user12551649

Reputation: 426

You can user Dimensions.get('window') to get the full height and width of the screen.

declare a const

const HEIGHT = Dimensions.get('window').height;
const WIDTH = Dimensions.get('window').width;

then use this inside style

style = {{
            height = HEIGHT,
            width = WIDTH,
            backgroundColor = 'black',
        }}

Upvotes: 0

Related Questions