react-native-gradients icon indicating copy to clipboard operation
react-native-gradients copied to clipboard

Setting it as a Background

Open Engr-Sufian opened this issue 1 year ago • 3 comments
trafficstars

How can we set it as a Background for a mobile app (React Native)

Engr-Sufian avatar Dec 04 '23 16:12 Engr-Sufian

Hi @yildizberkay and @caiangums,

I hope this message finds you well. I've been trying to reproduce the examples displayed in the README, specifically attempting to create a radial gradient background with text overlay. Unfortunately, I'm facing challenges, and I would greatly appreciate your assistance.

Is it possible to provide the actual code snippets used for the examples in the README? I believe having access to the exact code would be immensely helpful for troubleshooting and ensuring accurate implementation.

Currently, I'm encountering difficulties achieving the desired result of having a radial gradient as the background with text overlaid. If there are any specific steps or considerations for achieving this, I would love to hear your insights.

Thank you so much for your time and support! 😞🙏

PatriciaSauer avatar Jan 20 '24 21:01 PatriciaSauer

Hi @Engr-Sufian and @PatriciaSauer ! Thanks for opening an issue.

Have you read the With Content section? It is possible to create this behavior by just wrapping the <Gradient /> component with a <View />, setting the View style to have { position: 'relative' } and the <Gradient /> style as { position: 'absolute' } if I'm not wrong.

Also, to better understand what's going on, could you please provide a working repo with your current environment? (it could be just a simple one with the correct versions of RN and other libraries too)

caiangums avatar Feb 07 '24 02:02 caiangums

Use it like this:

<View style={{ ...StyleSheet.absoluteFillObject }}>
    <RadialGradient ... />
  </View>

beneditomauro avatar Jun 04 '24 15:06 beneditomauro