React Native - View disappears when position is absolute on Android

Question

Whenever I made the position style \'absolute\' for this view, it disappears. I have no idea why it is happening.

import React, { Component } from \'react\';
imp         


        

Answer 1

The problem is the width and height of the TouchableOpacity are zero! because the contents of that are absolute, so you need to set (left, right, top, bottom) for one of the children or set the width and the height for the TouchableOpacity itself

Why it works in iOS?
because in iOS UIView doesn't clip its children by default, so actually TouchableOpacity's width and height are still zero but the children overflowed and you can see them, there is a flag for that (Docs)

but in android ViewGroup always clips its children

How to solve problems like this?
there are some tools that you can debug UI at runtime, but I think the easiest way in react-native is set backgroundColor from the root view to the target view!

so for example in this case: first set backgroundColor for mainView then if it does show, set backgroundColor for parentView and then for TouchableOpacity and you can see it doesn't show backgroundColor of TouchableOpacity because the width and height of that are zero, in each step you can set width and height manually to ensure about the problem