Text is invisible on mobile phone

[rampatra]

Text becomes invisible in iPhone as shown above. It's fine on desktop browsers though.

Workaround for now:

<FloatingWhatsApp 
        accountName='ABC'
        phoneNumber='1234567890'
        style={{color: '#111111'}}    // <----- override color here
/>

[rampatra]

This maybe again happening due to styles clashing and, if this is the case, we can resolve this in a couple of ways:

• Add !important to all css styles you have defined.
• Provide override ability for all the elements like you have for the main div and main whatsapp button.
• Wrap your React component in a secluded style context to prevent such a clash.

[JuanPabloDiaz]

I had the same issue in light mode. But I fix it by wrapping the component in a div and adding css styles to the div as you suggested @rampatra.

[AdarshHatkar]

Hey @rampatra , @JuanPabloDiaz ,
I noticed the original package seems a bit unmaintained.

I’ve created and been actively maintaining a fork under @dxkit-org/react-floating-whatsapp
, which I’m already using across multiple projects. 🚀

Would love for you to check it out, try it in your projects, and share feedback or ideas for improvements. Contributions are always welcome! 💡✨