satya164/react-native-tab-view

Support blurred tab bar

Gregoirevda opened this issue · 7 comments

Gregoirevda commented

Description

adding a something similar to "bottom-tabs" to support rendering a blurred tab bar: tabBarBackground

This could be achieved with a custom tabBar, but as mentioned here the BlurView needs to be rendered after the ScrollView/FlatList/...

The idea is to have a specific "tabBarBackground" for blur prop: "blurTabBarBackground"?
eg

blurTabBarBackground={<BlurView tint="light" intensity={100} style={StyleSheet.absoluteFill} />}

Which would render at the end of each the tab view, so that we can define it one it the screen params and not in every tab View.

PS: rendering the BlurView after the "Tab.Navigator doesn't work neither", it really needs to be just after the content you want it to blur over

Alternatives

No response

Inspirations & examples

No response

Versions

react-native: 0.66.4
react-native-tab-view: 3.1.1
react-native-pager-view: 5.4.9
github-actions commented

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

  • react-native
  • react-native-tab-view
  • react-native-pager-view

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

github-actions commented

Hey! Thanks for opening the issue. The issue doesn't seem to contain a link to a repro (a snack.expo.dev link or link to a GitHub repo under your username).

Can you provide a minimal repro which demonstrates the issue? A repro will help us debug the issue faster. Please try to keep the repro as small as possible and make sure that we can run it without additional setup.

github-actions commented

The versions mentioned in the issue for the following packages differ from the latest versions on npm:

  • react-native (found: 0.666.4, latest: 0.67.2)

Can you verify that the issue still exists after upgrading to the latest versions of these packages?

github-actions commented

The versions mentioned in the issue for the following packages differ from the latest versions on npm:

  • react-native (found: 0.66.4, latest: 0.67.2)

Can you verify that the issue still exists after upgrading to the latest versions of these packages?

Gregoirevda commented

Ideally I would want to do

export default function BlurredTabView() {
    return (
      <>
        {children}
        <BlurView
          tint="dark"
          intensity={100}
          style={tw('absolute top-0 left-0 right-0 h-40')}
        />
      </>
    );
  }

But I can't pass a component in material-top-tabs, just a reference to the component, so I cannot pass children

github-actions commented

Hello 👋, this issue has been open for more than a month without a repro or any activity. If the issue is still present in the latest version, please provide a repro or leave a comment within 7 days to keep it open, otherwise it will be closed automatically. If you found a solution or workaround for the issue, please comment here for others to find. If this issue is critical for you, please consider sending a pull request to fix it.

Gregoirevda commented

To be clear on how this can be solved, each Screen can be enhanced with BlurredTabView with the definition above.