CODEWITHSUNDEEP
react-nativereact-navigation
lwisi
lwisi

Reputation: 303

Using custom icons in React Navigation Bottom Tabs

How can I use an image as an icon in React Navigation Bottom Tabs? I have my images in a folder inside my project, but to begin with I'm not really sure if I can import images using the Import {anyComponent} from 'anyPath' method. Also, I don't know how to set those custom images as icons. If anyone could give me a hand it'd be much appreciated.

Thanks a lot!

Upvotes: 2

Views: 10604

Answers (1)

Guruparan Giritharan
Guruparan Giritharan

Reputation: 16364

You can use images like below, basically you can provide your custom component to tabbaricon which can be anything.

 <Tab.Screen
          name="Settings1"
          component={SettingsScreen}
          options={{
            title: 'My profile',
            tabBarIcon: ({size,focused,color}) => {
              return (
                <Image
                  style={{ width: size, height: size }}
                  source={{
                    uri:'image url',
                  }}
                />
              );
            },
          }}
        />

Upvotes: 12

Related Questions