tabBarOnPress inside static 'navigationOptions' not working

waquidvp commented 7 years ago

What kind of Issue is this?

() Bug Report
() Question / Problem
(x) Discussion / Feature Request

How are you using the Bottom Navigation?

(x) I use the Bottom Navigation together with react-navigation; the Issue is not appearing when I'm using react-navigation's TabBar instead.
() I use the standalone version.

Expected behavior

I have added a tabBarOnPress callback function in the static navigationOptions, this function should run when the Tab is pressed. I would like to use the callback to scroll to top when the tab bar is pressed.

Actual behavior

The function is not called.

Additional description and resources

The tabBarOnPress was a new feature added to react-navigation so this might need a custom implementation in the bottom navigation component.

static navigationOptions = ({ screenProps }) => ({
        tabBarLabel: 'Feed',
        tabBarIcon: (
            <Icon
                size={24}
                color={screenProps.theme.bottomNav.inactiveIcon}
                name="view-agenda"
            />
        ),
        tabBarOnPress: (scene, jumpToIndex) => {
            console.warn(scene)
        }
    });

What did you do to find a solution?

I have read this whole issue in the react-navigation repo. https://github.com/react-community/react-navigation/pull/1335

Environment

React Native versions: 0.50.0
react-native-material-bottom-navigation version: 0.5.3
react-navigation version: 1.0.0-beta.17
I tested this with: Android

timomeh commented 7 years ago

Thanks for reporting this issue and pointing that out! You're right, that needs to be implemented. I'll add and release that approx. this weekend.

Do you maybe know if there are similar new features that need to be implemented? I'm not actively following the changes in react-navigation.

waquidvp commented 7 years ago

That's great to hear. I don't know of any other big features that needs to be implemented for the bottom nav.

timomeh commented 7 years ago

I published this feature as v0.6.0 🎉

Please let me know if there should be any more issues with this

waquidvp commented 7 years ago

I have now tested it in my app for the scroll to top feature. I have noticed that there is no ripple effect for the tabBarOnPress. The ripple effect does however work for all the other tab touches, it's only the second touch on the tab that has a tabBarOnPress specified that doesn't have the ripple.

Preview: bottom nav

timomeh commented 7 years ago

Yeah, you're right. Totally forgot that. I'll check right now if there's a simple fix.

timomeh commented 7 years ago

I published the fix as v0.6.1. 🎉

I'm getting to a point where a few features conflict each other, and it's a bit tricky to implement it in a way so they don't conflict each other. To my surprise, I couldn't reproduce any errors or weird behaviors.

Let me know if something seems wrong.

timomeh / react-native-material-bottom-navigation