react-native-material-letter-icon

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

Usage no npm install needed!

<script type="module">
  import reactNativeMaterialLetterIcon from 'https://cdn.skypack.dev/react-native-material-letter-icon';
</script>

README

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

GitHub package version github home platforms github home npm

github issues github closed issues Issue Stats github license

Library Lollipop

Variations

Library_countries Library_countries_rect Library_round_rect Library_triangle

📖 Getting started

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

$ react-native link react-native-material-letter-icon

Android

  1. Open up android/app/src/main/java/[...]/MainActivity.java
  • Add import com.zappi.ui.material.letter.icon.RNMaterialLetterIconPackage; to the imports at the top of the file
  • Add new RNMaterialLetterIconPackage() to the list returned by the getPackages() method
  1. Append the following lines to android/settings.gradle:
    include ':react-native-material-letter-icon'
    project(':react-native-material-letter-icon').projectDir = new File(rootProject.projectDir, 	'../node_modules/react-native-material-letter-icon/android')
    
  2. Insert the following lines inside the dependencies block in android/app/build.gradle:
      compile project(':react-native-material-letter-icon')
    

💻 Usage

import React, { Component } from 'react';
import {
  Platform,
  StyleSheet,
  Text,
  View
} from 'react-native';
import RNMaterialLetterIcon from 'react-native-material-letter-icon';

type Props = {};
export default class App extends Component<Props> {
  render() {
    return (
      <View style={styles.container}>
      <RNMaterialLetterIcon
      size={80}
      border={true}
      borderColor={"#dd2c00"}
      borderSize={2}
      />
      <RNMaterialLetterIcon
      size={80}
      shapeColor={"#ff5722"}
      shapeType={"round"}
      />
      <RNMaterialLetterIcon
      size={80}
      shapeColor={"#4caf50"}
      shapeType={"triangle"}
      />
      <RNMaterialLetterIcon
      size={80}
      shapeColor={"#303f9f"}
      shapeType={"rect"}
      />
      </View>
    );
  }
}

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

💡 Props

Prop Type Default Note
shapeColor string #1e95cc Shape color resource
shapeType string circle Shape type (circle,rectangle,rect,round)
letter string Leonardo Wilhelm DiCaprio Letter, string or initials to get letters from
letterColor string #ffffff Letter color
letterSize number 26 Letter size
lettersNumber number Letter number
initials bool true Initials enabled
initialsNumber number 3 Initials number
border bool Border enabled
borderColor string Border color
borderSize string Border size

✨ Credits

💫 Contribute

  • Pranav Raj Singh Chauhan: prscx

📜 License

This library is provided under the Apache License.