microsoft / react-native-windows

A framework for building native Windows apps with React.
https://microsoft.github.io/react-native-windows/
Other
16.35k stars 1.14k forks source link

Conditional rendering of content inside a view does not change view size in all cases #3457

Open Tatious opened 5 years ago

Tatious commented 5 years ago

Environment

react-native-cli: 2.0.1 react-native: 0.60.6 -- (empty) -- react-native-windows@0.60.0-vnext.32 node: v10.16.3 npm: 6.9.0 yarn: 1.17.3

Steps to Reproduce

Here, there is text set to expand into view when my custom button is clicked. This does happen as expected, but when I change the condition to false again, such that the text no longer renders, the view still remains the same size, despite having changed before to accommodate the initial rendering of the text.

<MyCustomButton
    style={styles.button}
    onPress={() => setExpanded(!expanded)}
>
            <View style={[styles.view, {backgroundColor: '#00000066'}]}>
                <Text style={styles.text}>{"String"}</Text>
                <Text style={styles.text}>{"String"}</Text>
                {expanded && <><Text>{"Hi"}</Text><Text>{"Hi"}</Text><Text>{"Hi"}</Text><Text>{"Hi"}</Text><Text>{"Hi"}</Text></>}
            </View>
</MyCustomButton>

However, if I wrap each Text element in a view, or the entire series of Text elements, it behaves as expected.

<MyCustomButton
    style={styles.button}
    onPress={() => setExpanded(!expanded)}
>
            <View style={[styles.view, {backgroundColor: '#00000066'}]}>
                <Text style={styles.text}>{"String"}</Text>
                <Text style={styles.text}>{"String"}</Text>
                {expanded && <View><Text>{"Hi"}</Text><Text>{"Hi"}</Text><Text>{"Hi"}</Text><Text>{"Hi"}</Text><Text>{"Hi"}</Text></View>}
            </View>
</MyCustomButton>

Expected Behavior

The view would shrink as the text is no longer rendered

Actual Behavior

The view expands initially when the text is set to render, however, does not contract when the text is set to not render (the text does properly disappear though).

Additional context

Adam Gorman(adamgor) Austin Beaulieu(aubeauli)

namrog84 commented 5 years ago

Also, Confirming. Partner(Xbox).

chrisglein commented 5 years ago

We've had a number of problems resulting from Text being implemented as a XAML Run and not having the set of events and behaviors that RN would expect. This seems like it may be another case of that.