In this lesson, you will learn how to break out of the standard layout flow to place elements precisely where you want them on the screen.
The Default Flow: Relative Positioning
By default, every component in React Native uses relative positioning. Imagine you are stacking building blocks; each new block is placed right after the previous one based on the flow of your layout. This is why when you add a View, it naturally stacks below or next to its siblings. You don't have to tell it where to go—it follows the "rules" of the layout container.
Breaking the Flow: Absolute Positioning
Sometimes, you need an element to ignore those rules. Think of a Floating Action Button (FAB) that sits in the bottom-right corner of a screen, floating over a list of items. To achieve this, we use position: 'absolute'.
When you set an element to absolute, it is removed from the normal flow. It no longer takes up space that affects other elements. Instead, you position it by defining its distance from the edges of its parent container using top, bottom, left, or right.
How to use it
To use absolute positioning, you simply define the property in your style object:
const styles = StyleSheet.create({
container: {
flex: 1, // The parent container
},
floatingButton: {
position: 'absolute',
bottom: 20,
right: 20,
width: 50,
height: 50,
backgroundColor: 'blue',
},
});
In this example, the floatingButton ignores the other components in the container and pins itself exactly 20 pixels from the bottom and 20 pixels from the right edge of the screen.
Crucial tip: An absolutely positioned element is always positioned relative to its nearest positioned parent. If you don’t set a position on the parent, it will default to being positioned relative to the screen boundaries.
Key Takeaway: Use relative positioning for standard layout flow, and use absolute positioning when you need to pin an element to a specific coordinate regardless of other components.