Random UTF-8 characters

Home

20 May 2018 in react-native

Font Shadows in React-Native

A nice effect you can you in react native is text shadows. This works exactly as it does in HTML CSS but the setting names are just a little different.

const styles = StyleSheet.create({
  body: {
    flex: 1,
    backgroundColor: '#555',
  },
  shadow: {
    color: '#fff',
    textShadowOffset: { width: 2, height: 2 },
    textShadowRadius: 1,
    textShadowColor: '#000',
  },
});

const Example = ({ children }) => (
  <SafeAreaView style={styles.body}>
    <Text styles={styles.shadow}>Shadow Text</Text
  </SafeAreaView>
);