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!