Using Shadow with absolutely positioned child

[Richard-HeadCoach]

Not yet an issue, but ....

I am using Shadow with an absolutely positioned child and a zIndex. The positioning gets all messed up. What are the expectations for shadow when used this way?

        <Shadow
          distance={8}
          startColor={reflectionGlowColour}
          endColor="rgba(20, 163, 159, 0.1)"
          paintInside
          style={styles.moodShadowWrapper}
        >
          <View style={[styles.moodWrapper, { zIndex: zIndexes.mood }]}>
            <MoodCircleDisplay onMoodPress={handleMoodPress} />
          </View>
        </Shadow>
      </View>

moodShadowWrapper: {
width: WINDOW_WIDTH * 0.3,
height: WINDOW_WIDTH * 0.3,
justifyContent: 'center',
alignItems: 'center',
overflow: 'hidden',
},
moodWrapper: {
position: 'absolute',
right: WINDOW_WIDTH * 0.05,
bottom: 0,
width: WINDOW_WIDTH * 0.3,
height: WINDOW_WIDTH * 0.3,
borderRadius: WINDOW_WIDTH * 0.15,
justifyContent: 'center',
alignItems: 'center',
overflow: 'hidden',
},

[ftzi]

Hi, Richard!

It's been a while since I last touched this project so I am afraid I can't help you much. IIRC, absolute children are indeed messy. Would it work if you put a View as an intermediary component?

What you can also try is to have your absolute child as a sibling of the shadow component.

You will need to keep trying until you find a workaround. Or, check the readme for info regarding the new React Native way to do shadows, which might suit you!