React Native: react-native-gradient-letter-icon

• Usage
• License

📖 Getting started

$ npm install react-native-gradient-letter-icon --save

$ react-native link react-native-linear-gradient

💻 Usage

import * as React from 'react';
import { StyleSheet, View, Text } from 'react-native';
import MaterialLetter from 'react-native-gradient-letter-icon';

export default class App extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <MaterialLetter style={{ alignSelf: 'center' }} size={80} single />
        <MaterialLetter
          style={{ alignSelf: 'center' }}
          shapeColor={'#ffdf9e'}
          letterColor={'#000'}
          size={80}
        />
        <MaterialLetter
          style={{ alignSelf: 'center' }}
          shapeColor={'#e56969'}
          size={80}
          shapeType={'round'}
        />
        <MaterialLetter
          style={{ alignSelf: 'center' }}
          shapeColor={'#ffc273'}
          letterColor={'#000'}
          size={80}
          shapeType={'rect'}
        />
        <MaterialLetter
          style={{ alignSelf: 'center' }}
          shapeColor={['#8a49a1', '#c1558b', '#e56969', '#ffc273', '#ffdf9e']}
          size={80}
          bold
        />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    backgroundColor: '#ecf0f1',
  },
});

💡 Props

Prop	Type	Default	Note
shapeColor	string	#1e95cc	Shape color resource
shapeType	string	circle	Shape type (circle,round,rect)
letter	string	Leonardo Wilhelm DiCaprio	Letter, string or initials to get letters from
letterColor	string	#ffffff	Letter color
size	number	30	Size MaterialLetter
single	bool	false	If you take only one letter
bold	bool	false	If the text must have the bold feature

📜 License

This library is provided under the Apache License.