status-im/react-navigation
2
0
Fork 0
mirror of https://github.com/status-im/react-navigation.git synced 2025-02-24 17:18:09 +00:00
Code Issues Projects Releases Wiki Activity

Fix TabBarBottom item layout (#499)

Browse Source 
Instead of `flexGrow`, `TabBarBottom` should use `flex` in order to match iOS HIG for UITabBar. Otherwise, if labels with different length are set, the layout of the tab bar isn't consistent with what iOS users expect (tab highlighted with red border):

![screen shot 2017-02-27 at 11 23 27](https://cloud.githubusercontent.com/assets/289640/23364131/07103c5a-fcfe-11e6-8b7a-d7bc28ca3080.png)

After the change, this is how the tab bar looks:

<img width="429" alt="screen shot 2017-02-27 at 15 14 35" src="https://cloud.githubusercontent.com/assets/289640/23364470/7f652e76-fcff-11e6-9e84-8a0efa7d9c5d.png">
This commit is contained in:
Álvaro Medina Ballester 2017-02-27 15:22:47 +01:00 committed by Satyajit Sahoo
parent fa8370b378
commit 420450c31a
1 changed files with 1 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/views/TabView/TabBarBottom.js
View File

@ -166,7 +166,7 @@ const styles = StyleSheet.create({
backgroundColor: '#f4f4f4', // Default background color in iOS 10
},
tab: {
flexGrow: 1,
flex: 1,
alignItems: 'stretch',
justifyContent: 'flex-end',
},