React Native component not rendering correctly when some children are removed

Issue

I want to allow a user to toggle Text components present or not present by setting a boolean state which I called pinyinMode.

return (
    <View style={{ backgroundColor: 'red' }}>
      <Pressable style={{ alignItems: 'center', justifyContent: 'center', backgroundColor: 'green' }}>
        <Text style={{ fontSize: 20, backgroundColor: 'blue' }}>{hanzi}</Text>
        {pinyinMode && <Text style={{ backgroundColor: 'yellow' }}>{pinyin}</Text>}
      </Pressable>
    </View>
);

Referring to the screenshots below, the View does not resize around its children when pinyinMode is false. (I also decreased the fontSize: 32 to fontSize: 20 for the ( and ) characters.)

pinyinMode == true:

pinyinMode == false:

If remove the {pinyinMode && <Text style={{ backgroundColor: 'green' }}>{pinyin}</Text>} line, the View renders correctly:

return (
    <View style={{ backgroundColor: 'red' }}>
      <Pressable style={{ alignItems: 'center', justifyContent: 'center', backgroundColor: 'green' }}>
        <Text style={{ fontSize: 20, backgroundColor: 'blue' }}>{hanzi}</Text>
      </Pressable>
    </View>
);

How can I get the View to resize correctly around its children?

Solution

The solution I went with was to create 2 separate components, 1 with the pinyin Text component, and the other without the pinyin Text components. I return the first component when pinyinMode is true, and return the 2nd component when pinyinMode is false.

Answered By - Zhiyong