What is the difference between position: "relative" and position: "absolute" in React Native layout?

Short answer

Relative elements remain in the normal Flexbox flow and move relative to their original position, while absolute elements are completely removed from the layout flow and positioned relative to the nearest parent container.

Explanation

In React Native, all elements are relative by default. When setting position: "absolute", the parent does not need an explicit relative position as it does in a browser; the direct parent is automatically treated as the reference frame. Use top, bottom, left/start, and right/end values to set the exact position.

Code example

// Pin a notification Badge to the corner of an icon
const styles = StyleSheet.create({
  iconContainer: {
    width: 48,
    height: 48,
  },
  badge: {
    position: 'absolute',
    top: -4,
    right: -4,
    backgroundColor: 'red',
    borderRadius: 10,
    width: 20,
    height: 20,
    justifyContent: 'center',
    alignItems: 'center',
  }
});

Common mistakes

• Trying to use zIndex for absolute elements on Android without considering child order in the native view tree, which can prevent the element from appearing in front.

Follow-up questions

• How do you support right-to-left (RTL) writing and layout interfaces for Arabic?

Sources

• React Native docs — Layout Props