Question 33125 in React native Question posted in
The official React Native documentation can be found here.

React Native bottom tab navigator – Android screen reader only selects tab label and not tab icon as well

I have a bottom tab navigator from react navigation.

Previously, when you had the screen reader on, both the text and the icon of each tab could be selected as one container.
Here we see both the icon and label being selected as one container for the screen reader

After upgrading to RN 0.69 from 0.68, only the text in the tab bar is selectable. How can I make both the icon and text selectable as one container? If I add an accessibility label to the tab bar icon, the whole container can be selected again, but that requires that we add a label.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Thank you guys for responding. Really appreciate it!

    I hadn't done the correct research. In the documentation , it says that theres is a prop which you can add to the whole tab bar. https://reactnavigation.org/docs/bottom-tab-navigator/#tabbaraccessibilitylabel

    After adding this, the container (both the tab icon and text) was selectable as one container. It is just strange that this behaviour worked before without adding that prop.


  2. 0

    You can make a custom tab bar and add accessibility as you wish in each tab bar item like this:

    <Tab.Navigator tabBar={(props) => <CustomTabBar/>}>
    <Tab.Screen .../>
</Tab.Navigator>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search