8000 createMaterialTopTabNavigator background transparency not working · Issue #12570 · react-navigation/react-navigation · GitHub
[go: up one dir, main page]
More Web Proxy on the site http://driver.im/
Skip to content

createMaterialTopTabNavigator background transparency not working #12570

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Open
7 of 12 tasks
godwynnn opened this issue Apr 27, 2025 · 3 comments
Open
7 of 12 tasks

createMaterialTopTabNavigator background transparency not working #12570

godwynnn opened this issue Apr 27, 2025 · 3 comments
Labels
bug package:react-native-tab-view platform:android platform:ios platform:web repro provided

Comments

@godwynnn
Copy link
godwynnn commented Apr 27, 2025 •
edited
Loading

Current behavior

I'm trying to take out the background of a view cause by toptabnavigator i'm using reactnative, now the issue here is when using stack navigator it work perfectly so i, want to customize the top tab bar, but now the background is unable to get transparent below is the image and code snippet, the background color feature on the screen option of toptab tabbarstyle not working any idea of what could be the issue?

the top close to the status bar is the pattern am trying to achieve with tab navigtion, is swaps perfectly between screens, but on the main section this this top border radius which is meant to lay on the default background but currently overlaying on a opace white background

` return (

<SafeAreaView style={styles.container}>
  <StatusBar barStyle={'light-content'}  translucent backgroundColor="transparent" />
  
  <View style={[tw` flex-0.06 p-1 pt-5 `, { zIndex: 10, backgroundColor:'transparent'}]}>
        
                
        
        </View>


  <View style={[tw`flex-1 `, { backgroundColor:'transparent'  }]}>
    <EventsDriveStack PickUpRef={PickUpRef} />
  </View>





</SafeAreaView>

)
}
export default IndexView

styles = StyleSheet.create({
container: {
backgroundColor: '#191C25',
flex: 1,
paddingTop: Platform.OS === 'android' ? '0' : '0',
// justifyContent: 'space-between',

},

})

function CustomTabBar({ state, descriptors, navigation }) {

return (
<View

style={{
  flexDirection: 'row',
    backgroundColor: 'rgba(0,0,0,1)',
  borderRadius: 10,
  marginHorizontal: 100,
  marginBottom: 10,
  overflow: 'hidden',


}}>
  {state.routes.map((route, index) => {
    const isFocused = state.index === index;

    return (
      <TouchableOpacity
        key={route.key}
         => navigation.navigate(route.name)}
        style={{
          flex: 1,
          paddingVertical: 8,
          backgroundColor: isFocused ? 'white' : 'transparent',
          alignItems: 'center',
          borderRadius: 10,
        }}

      >
        <Text style={{ color: isFocused ? '#000' : '#666', fontWeight: '600' }}>
          {descriptors[route.key].options.title || route.name}
        </Text>
      </TouchableOpacity>
    );
  })}
</View>

);
}

export default function EventsDriveStack(props) {

return (
<Tab.Navigator initialRouteName='Today'

tabBar={(props) => <CustomTabBar {...props}/>}
screenOptions={{ swipeEnabled: true,
   tabBarStyle:{
    elevation:0,
    backgroundColor: 'rgba(0,0,0,0)',
    shadowColor:'transparent',
    borderTopRightRadius:20
   },
   
   
   
   
  }}

>
    <Tab.Screen name='Drive' component={Drive} initialParams={{PickUpRef:props.PickUpRef}} />
    <Tab.Screen name='Events' component={Events} />
    {/* <Tab.Screen name='22nd' component={NextTomorrow} /> */}
    {/* <Tab.Screen name='Others' component={Others} /> */}
</Tab.Navigator>

)
}`

Expected behavior

was expecting to share a image for more clarity on this but the whole issue is i want to be able to the backgroudcolor:transparent feature on the main content of the tab bar navigator(the tab.screen component background to be transparent) this actually works with stack navigator but somehow on toptab navigator this a white background that still persists even when backgroudcolor:transparent is set on the screenoption(tabbar style property)

Reproduction

https://github.com/godwynnn/rida.git

Platform

  • Android
  • iOS
  • Web
  • Windows
  • MacOS

Packages

  • @react-navigation/bottom-tabs
  • @react-navigation/drawer
  • @react-navigation/material-top-tabs
  • @react-navigation/stack
  • @react-navigation/native-stack
  • react-native-drawer-layout
  • react-native-tab-view

Environment

  • [] I've removed the packages that I don't use
package version
@react-navigation/native "^6.1.17"
@react-navigation/bottom-tabs "^6.6.1"
@react-navigation/drawer "^6.7.2"
@react-navigation/material-top-tabs "^6.6.14"
@react-navigation/stack "^6.3.29"
@react-navigation/native-stack "^6.9.26"
react-native-tab-view "^3.5.2"
react-native-screens "^3.31.1"
react-native-safe-area-context "4.10.5"
react-native-pager-view "6.3.0"
react-native "0.74.5"
@godwynnn godwynnn added the bug label Apr 27, 2025
@github-actions GitHub Actions
Copy link

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

  • @react-navigation/native
  • @react-navigation/material-top-tabs
  • @react-navigation/stack
  • react-native-tab-view
  • @react-navigation/bottom-tabs
  • @react-navigation/drawer
  • react-native-drawer-layout

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

@github-actions GitHub Actions
Copy link

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

  • @react-navigation/native (found: 6.1.17, latest: 7.1.6)
  • @react-navigation/bottom-tabs (found: 6.6.1, latest: 7.3.10)
  • @react-navigation/drawer (found: 6.7.2, latest: 7.3.9)
  • @react-navigation/material-top-tabs (found: 6.6.14, latest: 7.2.10)
  • @react-navigation/stack (found: 6.3.29, latest: 7.2.10)
  • react-native-tab-view (found: 3.5.2, latest: 4.0.10)

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

@godwynnn
Copy link
Author

i'm currently using expo "~51.0.39" and all dependencies installed are compatible

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
bug package:react-native-tab-view platform:android platform:ios platform:web repro provided
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
1 participant
@godwynnn
0