CODEWITHSUNDEEP
react-native
Phil Mok
Phil Mok

Reputation: 4050

React Native exported Dimension height and width are small

In my app I have a style.js file where I am exporting styles to my components. I have a container style that I want to always be 100% of the width and height.

import { StyleSheet, Dimensions } from 'react-native';

const { height, width } = Dimensions.get('window');

const styles = StyleSheet.create({
  container: {
    height,
    width,
  },
};

export default styles;

When I import this object into my component the height and width are much smaller than the width of the screen. If I get the height and width within the screen component's js file, the dimensions are correct.

Is there a way to get the height and width once and export them to all my screen components or do I have to get the Dimensions from every screen individually?

Upvotes: 0

Views: 487

Answers (1)

Arbnor
Arbnor

Reputation: 2352

You could use flex:1 instead. flex:1 ensures that this component will take up the existing space that is available. Your component is kinda container and it's common behaviour to use flex:1.

Upvotes: 1

Related Questions