0

This function is used but I just can't find where it's defined. I also see a lot of tutorials using this code - so I'm not sure how people are understanding how this is being used.

I pulled this from the source code:

 20 export default function TabBarIcon({
 21   activeOpacity,
 22   inactiveOpacity,
 23   activeTintColor,
 24   inactiveTintColor,
 25   renderIcon,    <----  HERE IT IS BEING USED IN THE REACT NAVIGATION SOURCE CODE
 26   size,
 27   style,
 28 }: Props) {
 29   // We render the icon twice at the same position on top of each other:
 30   // active and inactive one, so we can fade between them.
 31   return (
 32     <View style={style}>
 33       <View style={[styles.icon, { opacity: activeOpacity }]}>
 34         {renderIcon({
 35           focused: true,
 36           size,
 37           color: activeTintColor,
 38         })}
 39       </View>
 40       <View style={[styles.icon, { opacity: inactiveOpacity }]}>
 41         {renderIcon({
 42           focused: false,
 43           size,
 44           color: inactiveTintColor,
 45         })}
 46       </View>
 47     </View>
 48   );
 49 }

Can't find where this method comes from only that it's used. There is no mention of this method anywhere in the documentation - that I can find.

What am I missing?

9_Dave_9
  • 694
  • 1
  • 7
  • 20
  • tabBarIcon is the exposed property name of it. You have to pass it in "options" of a Stack Screen in React Navigation 5. Check this - https://reactnavigation.org/docs/material-bottom-tab-navigator#options – Ashwin Mothilal Apr 18 '20 at 16:50
  • Yeh I have scoured that page. I have to pass a `route` with the args you see above in the `renderIcon` function. The documentation feels very incomplete here. So in my Screens.js file I am setting `tabBarComponent: TabBar` in a stack navigator.. Where `TabBar' renders a view and in the that view it calls `renderIcon({route, isActive, color})` ... if I remove that `route` from the args.. my app bombs with `route.key error or something `. Nowhere in the docs is there a mention of having to pass a route for in this case. – 9_Dave_9 Apr 18 '20 at 17:01
  • renderIcon is defined by us using tabBarIcon on "options". Just use the same implementation done in tabBarIcon for your custom tab Bar component. – Ashwin Mothilal Apr 18 '20 at 17:11

1 Answers1

0

You can use Navigation Actions to achieve the same behavior. I wrote up a short blog explaining why we couldn't just use conditional templates as mentioned in the upgrade guide

https://omidborjian.medium.com/switch-navigator-in-react-navigation-5-1d2bf34775b9

import { CommonActions } from '@react-navigation/native';

       navigation.dispatch(

            CommonActions.reset({
              index: 1,
              routes: [
                { name: routeName, params: params }
              ],
            })
          );
Omid Borjian
  • 1