CODEWITHSUNDEEP
react-nativeheaderreact-native-iosnavigationbar
developer
developer

Reputation: 229

Change icon color in react-navigation header bar

I just started developing in React-Native and also seems to move on smoothly just that when I try changing the color of an icon in the header bar, it still remains it's default color which is black. any help will be appreciated.

import {Platform, StyleSheet, Text, View, TouchableOpacity, Image, Dimensions} from 'react-native';
import {Container, Content, List, ListItem, Left, Body, Icon, Button, Thumbnail, Form, Item, Label, Input, Right} from 'native-base';

static navigationOptions = ({ navigation }) => {
    return {
        title: '',
        headerStyle: {backgroundColor: 'purple'},
        headerTintColor: '#fff',
        headerTitleStyle: {fontWeight: 'bold'},
        headerLeft:(
            <TouchableOpacity onPress={() => navigation.toggleDrawer()} 
                style={{padding:10}}>
                <Icon color="#fff" size={27} name='ios-menu'/>
            </TouchableOpacity>
        )
    };
}

Upvotes: 1

Views: 4207

Answers (2)

kishan verma
kishan verma

Reputation: 1000

You Need To Define Color In Style

<Icon name='pencil' type='MaterialCommunityIcons'

              style={ color:'#0041C3'} />

This will work !

Upvotes: 3

mediaguru
mediaguru

Reputation: 1917

Use style instead of color:

<Icon style={{color: '#FFF'}} size={27} name='ios-menu'/>

Upvotes: 2

Related Questions