How to put One View over Another in React Native

Last Updated on August 22, 2020.

When the user interface of your react native app begins to get complex you may need to place or position one view over another view to create components. In this blog post, I will show you a simple react native example where one view is put over another one.

We use the style property position to align one view over another. The position of the view which is beneath the surface should be made relative whereas the position of views above it should be absolute. Make use of properties such as top, left, right and bottom to align the views.

We have a header view and a circle view in the following example. The position of header view is relative and the position of the circle which placed above header is absolute. Go through the complete react native example to get the idea.

import React from 'react';
import {StyleSheet, View} from 'react-native';

const App = () => {
  return (
    <View style={styles.container}>
      <View style={styles.header} />
      <View style={styles.circle} />
    </View>
  );
};

export default App;

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: 'white',
  },
  header: {
    width: '100%',
    height: 200,
    position: 'relative',
    top: 0,
    left: 0,
    backgroundColor: 'indigo',
  },
  circle: {
    height: 100,
    width: 100,
    borderRadius: 50,
    position: 'absolute',
    top: 150,
    right: 10,
    elevation: 10,
    backgroundColor: 'yellow',
  },
});

Please note that order of the views are important in the code. Here first we given header and the circle is followed. We get the following output for this example.

I hope this react native tutorial will help you.

Leave a Reply

%d bloggers like this: