Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Setting it as a Background #22

Open
Engr-Sufian opened this issue Dec 4, 2023 · 3 comments
Open

Setting it as a Background #22

Engr-Sufian opened this issue Dec 4, 2023 · 3 comments

Comments

@Engr-Sufian
Copy link

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

@PatriciaSauer
Copy link

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! 😞🙏

@caiangums
Copy link
Contributor

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)

@beneditomauro
Copy link

Use it like this:

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

4 participants