[Android] – top padding on text (5px)

[movie4]

React Native 0.29 / Mac / Android

Hello, i'am use Roboto font, and get strange 5px padding from top

Here styles for this item

tabBarItem: {
  flex: 1,
  alignItems: 'center',
  justifyContent: 'center',
  paddingBottom: 10
},
tabBarText: {
  color: 'white',
  fontFamily: 'Roboto-Medium',
  fontSize: 14,
  lineHeight: 16,
  backgroundColor: 'black',
},

Thanks!

[jbrodriguez]

I'd guess it has to do with the changes to the flex logic in 0.28.

Try and remove flex: 1 and see if that solves it

https://github.com/facebook/react-native/releases/tag/v0.28.0

Updates to css-layout leading to many fixes but requiring some breaking changes: flex styling property behavior now behaves slightly differently. If you previously used flex: 1 where not necessary this change will likely break your layout as the measuring behavior is slightly different than before due to performance optimizations. Removing that unnecessary flex: 1 will solve your layout in most cases. Due to performance tweaks flexWrap: wrap no longer works together with alignItems: 'stretch' (the default). If you use flexWrap: wrap you probably will want to add the alignItems: 'flex-start' style as well.

[movie4]

Thank for your answer. Removing flex: 1 from tabBarItem did not resolve problem.

[ChangeSomeCode]

+1

[jbrodriguez]

Now I've seen this too :)

Hopefully this change in RN 0.31 will solve it

https://github.com/facebook/react-native/commit/c3f2bba834a5ffcc42352bb738132baceafce76d

[grabbou]

Anyone was able to check if it's still the case with 0.31-rc?

[movie4]

1. Sketch: Font-size: 14, line-height: 16 (right part of image)
2. React-native - like before (left part of image)

tabBarText: {
  color: 'white',
  fontFamily: 'Roboto-Medium',
  fontSize: 14,
  lineHeight: 16,
  backgroundColor: 'black',
}

Line height between sketch and react-native is different: 16 and 19.