How to Style a Text Component with Shadows in React Native

Last Updated on December 15, 2020.

Shadows are pretty useful to create beautiful designs. In react native, we use style props such as elevation to add shadows to different components. But how to add shadows to a text component in react native. Let’s check.

A text can be given shadows using three text style props of react native- textShadowOffset, textShadowColor, and textShadowRadius.

The textShadowOffset style prop is used to give height and width for shadows whereas textShadowColor determines the color of the shadows. The prop textShadowRadius fixes the radius of the shadows.

See the react native example below where I gave blue shadows to red-colored text.

import React from 'react';
import {View, Text, StyleSheet} from 'react-native';

const TextShadow = () => {
  return (
    <View style={styles.container}>
      <Text style={styles.text}>Red Text With Blue Shadow </Text>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  text: {
    fontSize: 48,
    fontWeight: 'bold',
    textAlign: 'center',
    color: 'red',
    textShadowOffset: {width: 2, height: 2},
    textShadowRadius: 10,
    textShadowColor: 'blue',
  },
});

export default TextShadow;

And here’s the screenshot of the output:

react native text shadow

I hope this react native tutorial helped you!

Leave a Reply

%d bloggers like this: