I am using styled-component in React native.
I have a component called FirstContain and a sibling component SecondContain, and each of these components has a button component.
At this time, FirstContain and SecondContain overlap and SecondButton hides FirstButton, but I want to put SecondButton higher and press SecondButton,
So I tried using zIndex and elevation, but to no avail. What should I do?
this is my code
import React from 'react';
import styled from "styled-components/native";
import { Text, View, StyleSheet } from "react-native";
const FirstContain = styled.View`
background-color: lightblue;
flex:1;
`;
const FirstButton = styled.TouchableOpacity`
width: 100px;
height: 40px;
background: lavender;
`;
const SecondContain = styled.View`
position: absolute;
background-color: lightgreen;
flex:1;
top:0;
bottom:0;
right:0;
left: 5%;
`;
const SecondButton = styled.TouchableOpacity`
width: 100px;
height: 40px;
background-color: lightpink;
`;
const App = () => {
const firstConfunc = () => {
console.log("firstConfunc");
}
const secondfunc = () => {
console.log("secondconfuc");
}
return (
<>
<FirstContain>
<FirstButton
onPress={firstConfunc}>
<Text>FirstContain</Text>
</FirstButton>
</FirstContain>
<SecondContain>
<SecondButton
onPress={secondfunc}>
<Text>secondContainer</Text>
</SecondButton>
</SecondContain>
</>
);
};
this is my snack
CodePudding user response:
If you want it like this: then change your these styles to this
const FirstContain = styled.View`
background-color: lightblue;
`;
const SecondContain = styled.View`
background-color: lightgreen;
`;
CodePudding user response:
This code snippet is working perfect fine, same as you are expecting, You'll get some idea from this code -
import * as React from 'react';
import { Text, View, StyleSheet, TouchableOpacity } from 'react-native';
export default function App() {
return (
<View>
<TouchableOpacity onPress={() => console.log("first")} style={{padding: 10, backgroundColor:'red'}}>
</TouchableOpacity>
<TouchableOpacity onPress={() => console.log("second")} style={{padding: 10, backgroundColor:'blue', position:'absolute', left: 0, right: 0, top: 0, bottom: 0}}>
</TouchableOpacity>
</View>
);
}
As per Your code, You should change this part to likewise :
const SecondContain = styled.View`
position: absolute;
background-color: lightgreen;
flex:1;
top:0;
bottom:0;
right:0;
left: 0;
`;