React Navigation with Tab.Navigator and Switch in custom header results in strange animation when toggling the Switch

2
open
roxlu
roxlu
Posted 1 month ago

React Navigation with Tab.Navigator and Switch in custom header results in strange animation when toggling the Switch #10047

Current behavior

I've created a bare bone application to debug an issueI was running into using a bottom tab bar navigator with a header that contains a toggle.

The tab bar has 3 tabs. When you switch one by one and then click the toggle, the toggle quickly jumps to its final state w/o the smooth animation it normally uses (on Android).

The smooth toggle animation is only removed when you've switched between each tab and then go back to the first one. So to reproduce you can do:

  • Click "screena" tab button
  • Click "screenb" tab button
  • Click "screenc" tab button
  • Click "screena" tab button again
  • Toggle the switch; you'll notice that it the once smooth animation is gone.

GIF that demonstrates the issue:

Higher res video that demonstrates the issue:
https://imgur.com/a/j6YaY9W

Someone on Discord was so kind to test this on iOS and said it was working fine on iOS.

Expected behavior

A Switch that uses the standard smooth animation.

Reproduction

https://github.com/roxlu/react-native-tabbar-with-switches-issue

Platform

  • Android
  • iOS
  • Web
  • Windows
  • MacOS

Packages

Environment

package version
@react-navigation/native 6.06
@react-navigation/bottom-tabs 6.0.9
@react-navigation/stack 6.0.11
react-native-safe-area-context 3.3.2
react-native-screens 3.8.0
react-native-gesture-handler 1.10.3
react-native 0.66.0
node v.6.9.1
yarn 1.22.11
github-actions[bot]
github-actions[bot]
Created 1 month ago

Couldn't find version numbers for the following packages in the issue:

  • @react-navigation/native
  • @react-navigation/drawer
  • @react-navigation/material-bottom-tabs
  • @react-navigation/material-top-tabs

Can you update the issue to include version numbers for those packages? The version numbers must match the format 1.2.3.

roxlu
roxlu
Created 1 month ago

Why is the github-actions bot asking for the version of @react-navigation/{native, drawer, material-bottom-tabs, material-top-tabs} ?