React-native-router-flux: Navbar accessibility - bigger text

Created on 30 Oct 2017  ·  6Comments  ·  Source: aksonov/react-native-router-flux

I'm testing our app with bigger text set to maximum. As far as I can observe - the default behavior in iOS is to leave the NavBar as is and only increase the content of the app. That is not the case for RN-router-flux

Leftbutton, rightbutton, title are all being increased which often leads to text overlapping.

I'm proposing that we add the following to our text elements in the Navbar:
allowFontScaling={false}

this way the text won't increase.

Most helpful comment

I had a look at this again today and it is achievable without modifications to rn-router-flux
The stacknavigator https://reactnavigation.org/docs/stack-navigator.html#navigationoptions-used-by-stacknavigator has a property: headerTitleAllowFontScaling - if this is set to false, then the title is not scaled. And then depending on how you define your scene you can either use your won renderBack and renderRight components. Or if you are providing a function for rightTitle you can pass your own text element and set the allowFontScaling to false

All 6 comments

Could you submit PR?

30 окт. 2017 г., в 7:59, Daniel Dimitrov notifications@github.com написал(а):

I'm testing our app with bigger text set to maximum. As far as I can observe - the default behavior in iOS is to leave the NavBar as is and only increase the content of the app. That is not the case for RN-router-flux

Leftbutton, rightbutton, title are all being increased which often leads to text overlapping.

I'm proposing that we add the following to our text elements in the Navbar:
allowFontScaling={false}

this way the text won't increase.


You are receiving this because you are subscribed to this thread.
Reply to this email directly, view it on GitHub, or mute the thread.

Yep, I'll do it in few hours

Closing this ticket for now.

Was this PR ever submitted?

@hjylewis - no, I never got it.

I had a look at this again today and it is achievable without modifications to rn-router-flux
The stacknavigator https://reactnavigation.org/docs/stack-navigator.html#navigationoptions-used-by-stacknavigator has a property: headerTitleAllowFontScaling - if this is set to false, then the title is not scaled. And then depending on how you define your scene you can either use your won renderBack and renderRight components. Or if you are providing a function for rightTitle you can pass your own text element and set the allowFontScaling to false

Was this page helpful?
0 / 5 - 0 ratings