Skip to content

React Native library to generate Google Inbox style material list icons.

License

Notifications You must be signed in to change notification settings

gaetanozappi/react-native-gradient-letter-icon

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

6 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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

GitHub package version github home platforms github home npm

github issues github closed issues Issue Stats github 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.

About

React Native library to generate Google Inbox style material list icons.

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published