React Native Create Drop Shadow Effect Text in Android iOS Example

Drop shadow effect is very common between developers. Drop shadow effect creates a consistent view just like the Parent View of drawing element. It is same as the real object but in the shadow form. So in this tutorial we would going to create a react native app with Create Drop Shadow Effect Text in both Android iOS applications using textShadowColor, textShadowOffset and textShadowRadius attributes of Text component in CSS Style.

Note: This project runs perfectly on both Android and iOS devices.

Contents in this project Create Drop Shadow Effect Text in React Native Android iOS App Example:

1. Import StyleSheet, View and Text component in your project.

2. Create a Root Parent View in render’s return block. This would be our main View.

3. Create a Text component in Root View and call the TextShadowStyle CSS Style class on it. We have done all the Shadow settings in this class.

4. Create 2 Style classes for View and Text component.

MainContainer : For Root Main View.

TextShadowStyle :  To apply shadow effect on Text component.

  • textShadowColor : Set the Shadow color of Text component.
  • textShadowOffset :  Set the Shadow offset.
  • textShadowRadius : Set the Blur radius on drop shadow.

5. Complete source code for App.js File :

Screenshot in Android device :

Create Drop Shadow Effect Text

Screenshot in iOS device:

5 Comments

  1. can you post more tutorial about networking , image picker, flatlist pls. Thanks you so much

  2. It was nice! I want to know that how do we put shadow (Its colour, radius, offset, etc.) to the border of the particular view.

  3. Hello All, I have implemented CardView for react-native with elevation, that support android(All version) and iOS. https://github.com/Kishanjvaghela/react-native-cardview. Check this out

Leave a Reply

Your email address will not be published.