ReactNative ReactNavigation Custom DrawerContent - Passing color and size to Icon

Question

I was referring to an online tutorial to create custom DrawerContent for my DrawerNavigator. Am using ReactNavigation v5.

Here's my minimal code:

import React from 'react';

import { View, StyleSheet, TouchableOpacity, Text  } from 'react-native';

import { DrawerContentScrollView, DrawerItem } from '@react-navigation/drawer';

import Icon from 'react-native-vector-icons/FontAwesome5';

export default function DrawerContent(props) {
    return (
        <View style={{flex:1}}>
            <DrawerContentScrollView {...props}>
                <View>
                    
                    <DrawerItem 
                        icon={({color, size}) => (
                            <Icon 
                            name="calendar-alt" 
                            color={color}
                            size={size}
                            solid
                            />
                        )}
                        label="Home"
                        onPress={() => {props.navigation.navigate('Home')}}
                    />

                </View>
            </DrawerContentScrollView>
        </View>
    )
}

Here's the actual tutorial I followed: https://github.com/itzpradip/react-navigation-v5-mix/blob/master/screens/DrawerContent.js

My doubt is, how can I set the color and size of the Icon. I didn't understood the technique used in that line. I mean in that line, the color and size variable are passed to the child Icon element from the DrawerItem ? If so, where is it defined? How can I change the values?

score 1 · Answer 1 · answered Jul 21 '20 at 16:43

According to the docs the color can be set by using the activeTintColor and inactiveTintColor props of drawerItem

activeTintColor: Color for the icon and label when the item is active.

inactiveTintColor: Color for the icon and label when the item is inactive.

So sample code would be like

<DrawerItem 
    icon={({color, size}) => (
        <Icon 
        name="calendar-alt" 
        color={color}
        size={size}
        solid
        />
    )}
    activeTintColor="red"
    inactiveTintColor="blue"
    label="Home"
    onPress={() => {props.navigation.navigate('Home')}}
/>

As per the size its hardcoded based on the source code to 24 Line 44 of source code

Still you have the option to pass the size you want or you can pass a custom react component as the icon which will be rendered as the icon, you can use it to provide your own style.

Ok thanks. So what exactly is happening in this line `icon={({color, size}) => (` Are `color` and `size` variables here? Or it's from the parent's property? Somewhat confused here. — Vpp Man, Jul 21 '20 at 18:08
Color and size passed as arguments by the parent. Think of it as a function to render the icon and the parent calls it with some argument to render the icon. — Guruparan Giritharan, Jul 21 '20 at 18:34

ReactNative ReactNavigation Custom DrawerContent - Passing color and size to Icon

1 Answers1