React Native : textShadow not rendering well on sides

Question

I have troubles to use textShadow propriety as expected. Here is my code :

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

class Test extends React.Component {
  
  render() {
    return (
      <View style={styles.main_container}>
         <Text style={}>Some textooo</Text>
      </View>
    )
  }
}

const styles = StyleSheet.create({
  main_container: {
    flex: 1,
    justifyContent:'center',
    alignItems:'center',
  },
  text: {
    fontSize: 30, 
    fontWeight: '900', 
    textShadowColor: 'rgba(0, 0, 0, 0.8)', 
    textShadowOffset: { width: 0, height: 0 },
    textShadowRadius: 10,
}

 
})

export default Test

Here is how it renders :

Text with shadow

As you can notice, shadow is cut at the beginning and at the end of the text...

Does anyone knows how to avoid this? (Without adding " " in the string to render)

Thank you very much for your help.

Answer 1

Here is a working example of your code https://snack.expo.io/@jsfit/text-shadow seems good to me

Answer 2

Adding empty space at the end seems to fix it for me.

Answer 3

give Text component width and height then align the text

textAlign: 'center',
textAlignVertical: 'center'

  text: {
    fontSize: 30, 
    fontWeight: '900', 
    textShadowColor: 'rgba(0, 0, 0, 0.8)', 
    textShadowOffset: { width: 0, height: 0 },
    textShadowRadius: 10,

    //add this styles
    width:100,
    height: 100,
    textAlign: 'center',
    textAlignVertical: 'center'
}