React-Native flexWrap doesn't work with Text on Android

Question

There is a simple wrapper view, dynamic text on the left and a static green view on the right side. I'm trying to make it automatically move static green view below the Text by using flexWrap style when the Text reaches 2 lines and becomes multiline. When text fits one line - keep all at the same row.

   <View
      style={{
        flexDirection: 'row',
        flexWrap: 'wrap',
        backgroundColor: 'peach',
        justifyContent: 'space-between',
        width: 300,
      }}
    >
      <Text style={{ backgroundColor: 'powderblue', flexGrow: 1}}>{message}</Text>
      <View style={{ width: 20, height: 20, backgroundColor: 'green' }} />
    </View>

short text case

middle text case (wrong behaviour)

long text case

On Android, text-breaking logic makes the Text view width not enough to trigger flexWrap logic (see 2nd case), to move the green view bellow, it doesn't fill full width even when a lot of text inside because of line breaking.

What should I do to make it consistent for all 3 cases?

Answer 1

<View
            style={{
              flexDirection: "row",
              flexWrap: "wrap",
              backgroundColor: "peach",
              justifyContent: "space-between",
              width: 300,
            }}
          >
            <Text style={{ backgroundColor: "powderblue", width: "100%" }}>
              Multiline snacbar message and looooooooooong
            </Text>
            <View style={{ width: 20, height: 20, backgroundColor: "green" }} />
          </View>