Place View on Top of Other View in React Native

Place View on top of other View in React Native

Ok so I found the problem xD

Apparently the elevation={3} messes it up. Everything works if I simply remove this prop from the row Views.

how to set view on top of another view (having just borders) in react native

Hre is a sample example. First you need to have a container with a position: relative. Then you could position the inner divs with positions absolute and with a z-index.

.container {
        width: 200px;
        height: 200px;
        border: 1px solid red;
        position: relative;
    }
    .viewA {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 50%;
        height: 50%;
        z-index: 2;
        background: yellow;
        opacity: 0.5;
    }
    .viewB{
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: green;
        z-index: 1;
    }

<div class="container">
        <div class="viewA">View B</div>
        <div class="viewB">View A</div>
    </div>

react native view over a view in top left corner?

You can try this for all screens

import React from 'react';
import {
  View,
  Text,
  TouchableOpacity,
  ImageBackground,
  StyleSheet,
  SafeAreaView,
} from 'react-native';

const width = 200;
const height = width / 5;
const top = width / Math.sqrt(8) - height;
const left = -(width / Math.sqrt(8) - height / 2);

export default function Login() {
  return (
    <SafeAreaView style={styles.container}>
      <ImageBackground
        source={{
          uri: 'https://i.picsum.photos/id/828/200/300.jpg?hmac=YwDXceJcHQbinJfsIHJgrD8NakhtHzBMH-vD4aNcPo4',
        }}
        style={styles.poster}>
        <TouchableOpacity style={styles.premiumWrapper}>
          <Text style={styles.premiumText}>Premium</Text>
        </TouchableOpacity>
      </ImageBackground>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  poster: {
    height: '100%',
    width: '100%',
    backgroundColor: 'magenta',
  },
  premiumWrapper: {
    height: height,
    width,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#ffa604',
    transform: [{rotate: '-45deg'}],
    top,
    left,
  },
  premiumText: {
    color: 'white',
    fontWeight: 'bold',
    fontSize: 20,
  },
});

React Native How can I put one view in front of the other

You can do it using zIndex for example:

    <View id="top" style={{width: 100, height: 100, zIndex:2, backgroundColor: 'white'}} />
    <View id="bottom" style={{width: 100, height: 100, zIndex:1, backgroundColor: 'black'}} />

By running this the white View with id="top" will be in the front. Now you can use this zIndex style property in your code.

React Native: component on top of another component

Add position styles to the react-native-google-places-autocomplete style property:

styles={{
          container:{
            position: 'absolute',
            top: 0
          },
            description: {
                fontWeight: 'bold',
            },
          .....

---

Related Topics