microsoft / microsoft/react-native-windows

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

Open
#3,457 2 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Area: Layout Area: Text bug Partner: Xbox Workstream: Component Parity
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

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.