Chapter 98: Filled Icons

Core Idea

Learn how to use fills with Lucide icons in your React Native application, and the limitations of using fills with Lucide icons.

Code Examples

import React, {useState, useEffect} from 'react';
import { View, StyleSheet } from 'react-native';
import { Star, StarHalf } from "lucide-react-native";

const App = () => {
  return (
    <View style={styles.container}>
      <View style={styles.starRating}>
        <View style={styles.stars}>
          { Array.from({ length: 5 }, () => (
              <Star fill="#111" strokeWidth={0} />
          ))}
        </View>
        <View style={[styles.stars, styles.rating]}>
          <Star fill="orange" strokeWidth={0} />
          <Star fill="orange" strokeWidth={0} />
          <StarHalf fill="orange" strokeWidth={0} />
        </View>
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    height: '100%',
    alignItems: 'center',
    display: 'flex',
    justifyContent: 'center'
  },
  starRating: {
    position: 'relative',
  },
  stars: {
    display: 'flex',
    flexDirection: 'row',
    gap: 4,
  },
  rating: {
    position: 'absolute',
    top: 0,
  }
});

export default App;

• What it demonstrates: Filled Icons usage pattern from the official Lucide docs.

Key Takeaways

1. Learn how to use fills with Lucide icons in your React Native application, and the limitations of using fills with Lucide icons.

Connects To

• React Native: part of the React Native section of the Lucide docs.
• Lucide for React Native: overview page for this section.