React-native-tab-view: Switching between normal and bold text leads to text break

[mschipperheyn]

Current behaviour

When you have tabs where the default text is not regular and the active tab is bold, you can get unnecessary line breaks. I assume that this has to do with box width calculation. If the box width is fixed and calculated on the non bold version, making it bold will lead to the box being too small.

*Start bold and set to regular when not active numerOfLines *

const styles = StyleSheet.create({
    label: {
        textAlign: 'center',
        fontSize: 14,
        fontWeight: '700',
        margin: 0,
        backgroundColor: 'transparent',
    },
});
[...]
renderLabel={({ route, focused, color }) => {
    const weight =
        focused && props.hideIcon
            ? {}
            : {
                fontWeight: '400',
                };
    return (
        <Text
            style={[
                styles.label,
                {
                    color,
                    textTransform: props.hideIcon ? 'uppercase' : undefined,
                    ...weight,
                },
            ]}
            numberOfLines={1}
            allowFontScaling
        >
            {route.options.tabBarLabel}
        </Text>
    );
}}

*Start bold and set to regular when not active *

const styles = StyleSheet.create({
    label: {
        textAlign: 'center',
        fontSize: 14,
        fontWeight: '700',
        margin: 0,
        backgroundColor: 'transparent',
    },
});
[...]
renderLabel={({ route, focused, color }) => {
    const weight =
        focused && props.hideIcon
            ? {}
            : {
                fontWeight: '400',
                };
    return (
        <Text
            style={[
                styles.label,
                {
                    color,
                    textTransform: props.hideIcon ? 'uppercase' : undefined,
                    ...weight,
                },
            ]}
            allowFontScaling
        >
            {route.options.tabBarLabel}
        </Text>
    );
}}

* Make everything bold *

const styles = StyleSheet.create({
    label: {
        textAlign: 'center',
        fontSize: 14,
        fontWeight: '700',
        margin: 0,
        backgroundColor: 'transparent',
    },
});
[...]
renderLabel={({ route, focused, color }) => {
    return (
        <Text
            style={[
                styles.label,
                {
                    color,
                    textTransform: props.hideIcon ? 'uppercase' : undefined,
                },
            ]}
            allowFontScaling
        >
            {route.options.tabBarLabel}
        </Text>
    );
}}

Expected behaviour

There should be normal display if there is enough space

Code sample

See above.

Screenshots (if applicable)

See above

What have you tried

• start regular and go bold
• start bold and go regular
• wrap with view

Your Environment

| software | version
| ---------------------------- | -------
| ios or android | Android
| react-native | 61.4
| react-native-tab-view | 2.13.0, 2.14.0
| react-native-gesture-handler | 1.6.1
| react-native-reanimated | 1.8.0
| node | 12.16.4
| npm or yarn | yarn

[thanhluantl2304]

I faced the same, anybody has solution for that?

[tcK1]

Also facing the same behavior.

[GleidsonDaniel]

The dumb solution to this problem is to put a space after the text. 💩
Original: {key: 'home', title: 'Home'}
Solution: {key: 'home', title: 'Home '}
Not the best thing, but here it worked 👌

[adakerja-ali2]

The dumb solution to this problem is to put a space after the text. 💩
Original: {key: 'home', title: 'Home'}
Solution: {key: 'home', title: 'Home '}
Not the best thing, but here it worked 👌

seems it depends on text length sometime you have to add 2 space LOL

[hengkx]

Can you tell me when it can be solved? Thanks.

[GleidsonDaniel]

This solution I posted earlier works on some devices, on others it doesn't.
So I found a better solution, leaving the bold text rendered on the screen from the start, along with the main text, however transparent and with a small size.
The problem I see is that the lib does not render again when changing the font size, which causes a mismatch with the layout, some memoization or pure components.

My solution:

renderLabel={({route, focused}) => {
  return (
    <View>
      <Text style={{fontWeight: focused ? 'bold' : 'normal'}}>
        {route.title}
      </Text>
      <View style={{height: 1}}>
        <Text
          style={{
            fontWeight: 'bold',
            color: 'transparent',
          }}>
          {route.title}
        </Text>
      </View>
    </View>
  );
}}