microsoft / microsoft/react-native-windows
Conditional rendering of content inside a view does not change view size in all cases
Nobody has claimed this yet.
- Dominant language
- C++
- Stars
- 17.3k
- Forks
- 1.2k
- Avg merge
- 1d 13h
- Merged PRs (30d)
- 33
Description
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
-
SDK Version(s):
10.0.18362.0 -
Target Device(s):
Desktop -
Visual Studio Version:
Visual Studio 2017 -
Build Configuration:
Debug
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)
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start by reproducing the conditional Text rendering example on React Native Windows with the listed versions, comparing it with the View-wrapped variant. Trace how the parent view recalculates its size when the fragment disappears. Done means the view contracts after expanded changes back to false without requiring wrapper Views.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react-native
- Domain
- desktop
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 32/100