react native flexwrap with alignItems: center is not working

Question

I am working on a responsive design using flex on react-native

<View
    style={{
        flexDirection: 'row',
        alignItems: 'center',
        flexWrap: 'wrap',
        justifyContent: 'space-between',
        paddingHorizontal: 10 
    }}>
    <View style={{ flex: 0, backgroundColor: 'red'}}>
        <Text style={{ fontSize: 22 }}>
            { moment().format('LL') }                               
        </Text>
    </View>
    
    <View style={{flex: 0, backgroundColor: 'blue'}}>
        <Text style={{ fontSize: 22,flex: 1, alignSelf: 'flex-end'}}>
            # 123123123123123
        </Text>
    </View>
</View>

This is working properly on a normal scale font. The output is like this

Then, when the device uses a larger scale of font. The output is like this

The blue component overflows on the container.

But, when I removed the alignItems: center from the style. It is working fine.

Any other solution or work around for this?

score 1 · Accepted Answer · answered Jun 23 '21 at 12:48

I think you should design it like this

Working Example Here

<View style={{ width: '100%', flexDirection: 'row' }}>
  <View style={{ flex: 1 }}>
    <Text
      style={{ fontSize: 22 }}
      adjustsFontSizeToFit={true}
      numberOfLines={1}>
      June 23, 2021
    </Text>
  </View>

  <View style={{ flex: 1, alignItems: 'flex-end', justifyContent: 'center' }}>
    <Text
      style={{ fontSize: 22 }}
      adjustsFontSizeToFit={true}
      numberOfLines={1}>
      # 123123123123123
    </Text>
  </View>
</View>

Thanks! I just edited the text which should not cut off. – Riku Jun 24 '21 at 05:00 — Riku, Jun 24 '21 at 05:00

react native flexwrap with alignItems: center is not working

1 Answers1