---
id: basics-dimensions
title: Dimensions
layout: docs
category: The Basics
permalink: docs/basics-dimensions.html
next: basics-layout
---
A component's dimensions determine its size on the screen.
#### Fixed Dimensions
The simplest way to set the dimensions of a component is by adding a fixed `width` and `height` to style. All dimensions in React Native are unitless, and represent density-independent pixels.
```ReactNativeWebPlayer
import React from 'react';
import { AppRegistry, View } from 'react-native';
class AwesomeProject {
render() {
return (
);
}
};
AppRegistry.registerComponent('AwesomeProject', () => AwesomeProject);
```
Setting dimensions this way is common for components that should always render at exactly the same size, regardless of screen dimensions.
#### Flex Dimensions
Use `flex` in a component's style to have the component expand and shrink dynamically based on available space. Normally you will use `flex: 1`, which tells a component to fill all available space, shared evenly amongst each other component with the same parent. The larger the `flex` given, the higher the ratio of space a component will take compared to its siblings.
> A component can only expand to fill available space if its parent has dimensions greater than 0. If a parent does not have either a fixed `width` and `height` or `flex`, the parent will have dimensions of 0 and the `flex` children will not be visible.
```ReactNativeWebPlayer
import React from 'react';
import { AppRegistry, View } from 'react-native';
class AwesomeProject {
render() {
return (
// Try removing the `flex: 1` on the parent View.
// The parent will not have dimensions, so the children can't expand.
// What if you add `height: 300` instead of `flex: 1`?
);
}
};
AppRegistry.registerComponent('AwesomeProject', () => AwesomeProject);
```