search

react-navigation / react-navigation

Routing and navigation for your React Native apps
https://reactnavigation.org
23.48k stars 5.01k forks source link

React Navigation Tabs not Clickable with absolute position #5994

Closed toeurtenh closed 4 years ago

toeurtenh commented 5 years ago

I have made navigation bottom tab background color transparent by adding 

tabBarOptions: {
  style: {
    backgroundColor: 'rgba(0, 0, 0, 0.7)', // TabBar background
    position: 'absolute',
    left: 0,
    right: 0,
    bottom: 0,
  }
}

but when I click on other tabs it doesn't work but when I remove abosolute from position it works but the background is not transparent.

and ideas? please help

mujavidb commented 5 years ago

I've having this same issue in version 3.11.0. This issue also applies if the container element is absolutely positioned.

toeurtenh commented 5 years ago

@mujavidb have you solved it?

mujavidb commented 5 years ago

@toeurtenh I reverted library back to 3.0.9 for now.

kpratik2015 commented 5 years ago

@toeurtenh I reverted library back to 3.0.9 for now.

This worked for me. I wonder what made it break but for some reason I didn't notice this until after I made the apk.

mujavidb commented 5 years ago

It seems to be android only. Navigation in iOS works fine.

toeurtenh commented 5 years ago

have still not figured it out

matthamil commented 5 years ago

Thanks for this issue @toeurtenh , and thank you for the code snippet.

Can you provide a reproducible example as a Snack or in a public repo? Something one of the maintainers can use w/o bootstrapping a new React Native app

mujavidb commented 5 years ago

@matthamil I made a snack here. Run on Android to see issue.

toeurtenh commented 5 years ago

@matthamil sorry I don't use snack. @mujavidb thank you for making the snack, hope we get a solution from maintainer.

gold2ragon commented 5 years ago

I met the same issue. Has someone solved this problem? I tried with 3.0.9, but not work.

mcmar commented 5 years ago

Not sure what's going on here or why comments are being mysteriously deleted. Does anyone know anything about when this will be fixed?

mcmar commented 5 years ago

It's not this repo. It's react-navigation/tabs and this is the commit that broke it: https://github.com/react-navigation/tabs/commit/2a1d7538d65e79b90c572cf078d0534e1cacc13d#diff-a8d6ae7794fbc09aaea535c1c7103754

mcmar commented 5 years ago

Best option is to add a containerStyle prop to react-navigation-tabs. Then add position: 'absolute', zIndex: 1 to containerStyle

mcmar commented 5 years ago

@satya164 Fix implemented in this PR https://github.com/react-navigation/tabs/pull/154

mcmar commented 5 years ago

Until this gets merged and published, feel free to use my fork https://www.npmjs.com/package/@mcmar/react-navigation-tabs

import { createBottomTabNavigator } from '@mcmar/react-navigation-tabs';
ntkzwane commented 5 years ago

Best option is to add a containerStyle prop to react-navigation-tabs. Then add position: 'absolute', zIndex: 1 to containerStyle

This worked for me! Thanks!! Just one thing to not in case someone else falls into the same trap, if you add these styles to the react-navigation-tabs, then remove the absolute rule on tabBarOptions.style.position.

matthamil commented 5 years ago

Not sure what's going on here or why comments are being mysteriously deleted. Does anyone know anything about when this will be fixed?

Comments like "+1" and "I am also experiencing this" were removed since they only add noise to GitHub issues. To answer your question @mcmar

MackHatfield commented 5 years ago

I was able to remedy this by making sure to specify width in the style object of tabBarOptions. I realized after throwing a border around the tabs that it had any empty width so it would make since that it wasn't touchable.

edit: I had to add a zIndex value for tabs to respond to touch on Android


    tabBarOptions: {
      activeTintColor: '#FFFFFF',
      inactiveTintColor: '#F8F8F8',
      style: {
        width: '100%',
        position: 'absolute',
        zIndex: 1,
        backgroundColor: 'rgba(0, 0, 0, 0.8)',
        marginTop: EStyleSheet.value('5.25rem'),
        borderWidth: 1,
        borderColor: 'red'
      },
    }
zubko commented 4 years ago

Another temporary solution would be to use https://www.npmjs.com/package/patch-package and to apply the fix in the source code of react-navigation/tabs while the PR isn't accepted.

satya164 commented 4 years ago

It's already fixed with latest tabs https://github.com/react-navigation/tabs/releases/tag/v2.5.6

ShuKTan commented 4 years ago

@satya164 Its not working.

I am using "react-navigation-tabs": "^2.6.0", "react": "16.8.6", "react-native": "0.60.5",

muzhaqi16 commented 2 years ago

I am currently facing the same issue with "react-navigation/bottom-tabs": "^6.2.0",

github-actions[bot] commented 2 years ago

Hey! This issue is closed and isn't watched by the core team. You are welcome to discuss the issue with others in this thread, but if you think this issue is still valid and needs to be tracked, please open a new issue with a repro.