How do I make one child of a dom structure rise to the top of the DOM in React Native

Home / reactjs / How do I make one child of a dom structure rise to the top of the DOM in React Native

Question:
I am working on a react native project where I have a being returned by an array with transforms being applied to the container view (making everything inside rotate, as seen below). However, I am aiming to have many of these elements and sometimes the tail end of the container view overlaps the toucharea and stops me from accessing its panhandlers.

How do I make the toucharea float to the top of the stack so that it is always the first item selected when I touch it?

Code:

output.push(
{/* Container for an entire button */}

{/* First Cursor Image */}

{/* First Touch Area */}

{/* Container for an entire button */}

{/* Second Cursor image */}

{/* Second Touch Area */}
this.currentLine = k} lineID={k} style={[ styles.cursorImageTouchArea,
{ height: strokeWidth, width: strokeWidth/3 } ]}
{…_endHandler}/>



)
})
return output;
Stylesheet:const styles = StyleSheet.create({
container: {
// justifyContent: ‘center’
},
stackContainer: {
// position: ‘absolute’,
},
svgElement: {
position: ‘absolute’,
},
image: {
position: ‘absolute’,
resizeMode: ‘cover’
},
cursorImageTouchArea: {
position: ‘absolute’,
backgroundColor: ‘red’,
opacity: 0.15,
},
cursorImageContainer: {
position: ‘absolute’,
alignItems: ‘center’,
},
text: {
position: ‘absolute’,
fontSize: 20,
},
textContainer: {
position: ‘absolute’,
}
});


Answer:

Read more

Leave a Reply

Your email address will not be published. Required fields are marked *