Skip to content

Remove wrapper around ListEmptyComponent#24339

Closed
AntoineDoubovetzky wants to merge 2 commits into
react:masterfrom
AntoineDoubovetzky:master
Closed

Remove wrapper around ListEmptyComponent#24339
AntoineDoubovetzky wants to merge 2 commits into
react:masterfrom
AntoineDoubovetzky:master

Conversation

@AntoineDoubovetzky

Copy link
Copy Markdown

Summary

This pull request fixes #24257.

The wrapper around ListEmptyComponent doesn't allow to use flex on the ListEmptyComponent.
The wrapper was removed in this commit, and then put back in this commit but I think the relevant part was removing the condition on itemCount !== 0 to apply the inversionStyle on the ScrollView and everything is still working without the wrapper.

Changelog

[GENERAL] [FIXED] - Remove wrapper around ListEmptyComponent

Test Plan

Here is the code I used to test:

<FlatList
  data={[]}
  keyExtractor={item => item}
  contentContainerStyle={{ flex: 1 }}
  ListEmptyComponent={
    <View
      style={{
        flex: 1,
        backgroundColor: 'red',
      }}
    >
      <Text>Empty</Text>
    </View>
  }
  ListFooterComponent={
    <View
      style={{
        backgroundColor: '#D6D6D6',
        paddingVertical: 6,
        marginVertical: 6,
        borderRadius: 20,
        alignItems: 'center',
        paddingHorizontal: 15,
      }}
    >
      <Text>FOOTER</Text>
    </View>
  }
  ListHeaderComponent={
    <View
      style={{
        backgroundColor: '#D6D6D6',
        paddingVertical: 6,
        marginVertical: 6,
        borderRadius: 20,
        alignItems: 'center',
        paddingHorizontal: 15,
      }}
    >
      <Text>HEADER</Text>
    </View>
  }
  renderItem={({item}) => <Text>{item}</Text>}
/>

The ListEmptyComponent is taking the full height (or full width in horizontal mode) as expected. And it is not rendered upside down when the FlatList is inverted:

Vertical, not inverted:
image

Vertical, inverted:
image

Horizontal, not inverted:
image

Horizontal, inverted:
image

@facebook-github-bot facebook-github-bot added the CLA Signed This label is managed by the Facebook bot. Authors need to sign the CLA before a PR can be reviewed. label Apr 7, 2019

@cpojer cpojer left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for sending a PR! It seems like that is the better solution.

@facebook-github-bot facebook-github-bot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@cpojer is landing this pull request. If you are a Facebook employee, you can view this diff on Phabricator.

@react-native-bot

Copy link
Copy Markdown
Collaborator

This pull request was successfully merged by @AntoineDoubovetzky in 4627644.

When will my fix make it into a release? | Upcoming Releases

@react-native-bot react-native-bot added the Merged This PR has been merged. label Apr 8, 2019
dsyang pushed a commit to dsyang/react-native that referenced this pull request Apr 12, 2019
Summary:
This pull request fixes react#24257.

The wrapper around ListEmptyComponent doesn't allow to use flex on the ListEmptyComponent.
The wrapper was removed in this [commit](react@db061ea), and then put back in this [commit](react@e94d344) but I think the relevant part was removing the condition on `itemCount !== 0` to apply the inversionStyle on the ScrollView and everything is still working without the wrapper.

[GENERAL] [FIXED] - Remove wrapper around ListEmptyComponent
Pull Request resolved: react#24339

Differential Revision: D14822221

Pulled By: cpojer

fbshipit-source-id: 623e1ab3f228e9b75b92cdcd568683232a403c1a
@elyalvarado

Copy link
Copy Markdown
Contributor

This should also fix issue #17944

grabbou pushed a commit that referenced this pull request Apr 17, 2019
Summary:
This pull request fixes #24257.

The wrapper around ListEmptyComponent doesn't allow to use flex on the ListEmptyComponent.
The wrapper was removed in this [commit](db061ea), and then put back in this [commit](e94d344) but I think the relevant part was removing the condition on `itemCount !== 0` to apply the inversionStyle on the ScrollView and everything is still working without the wrapper.

[GENERAL] [FIXED] - Remove wrapper around ListEmptyComponent
Pull Request resolved: #24339

Differential Revision: D14822221

Pulled By: cpojer

fbshipit-source-id: 623e1ab3f228e9b75b92cdcd568683232a403c1a
facebook-github-bot pushed a commit that referenced this pull request Apr 26, 2022
Summary:
This sync includes the following changes:
- **[bd4784c](react/react@bd4784c8f )**: Revert #24236 (Don't recreate the same fallback on the client if hydrating suspends) ([#24434](react/react#24434)) //<dan>//
- **[6d3b6d0](react/react@6d3b6d0f4 )**: forwardRef et al shouldn't affect if props reused ([#24421](react/react#24421)) //<Andrew Clark>//
- **[bd08137](react/react@bd0813766 )**: Fix: useDeferredValue should reuse previous value ([#24413](react/react#24413)) //<Andrew Clark>//
- **[9ae80d6](react/react@9ae80d6a2 )**: Suppress hydration warnings when a preceding sibling suspends ([#24404](react/react#24404)) //<Josh Story>//
- **[0dc4e66](react/react@0dc4e6663 )**: Land enableClientRenderFallbackOnHydrationMismatch ([#24410](react/react#24410)) //<Andrew Clark>//
- **[3547729](react/react@354772952 )**: Land enableSelectiveHydration flag ([#24406](react/react#24406)) //<Andrew Clark>//
- **[392808a](react/react@392808a1f )**: Land enableClientRenderFallbackOnTextMismatch flag ([#24405](react/react#24405)) //<Andrew Clark>//
- **[1e748b4](react/react@1e748b452 )**: Land enableLazyElements flag ([#24407](react/react#24407)) //<Andrew Clark>//
- **[4175f05](react/react@4175f0593 )**: Temporarily feature flag numeric fallback for symbols ([#24401](react/react#24401)) //<Ricky>//
- **[a6d53f3](react/react@a6d53f346 )**: Revert "Clean up Selective Hydration / Event Replay flag ([#24156](react/react#24156))" ([#24402](react/react#24402)) //<Ricky>//
- **[ab9cdd3](react/react@ab9cdd34f )**: Bugfix: In legacy mode, call suspended tree's unmount effects when it is deleted ([#24400](react/react#24400)) //<Andrew Clark>//
- **[168da8d](react/react@168da8d55 )**: Fix typo that happened during rebasing //<Andrew Clark>//
- **[8bc527a](react/react@8bc527a4c )**: Bugfix: Fix race condition between interleaved and non-interleaved updates ([#24353](react/react#24353)) //<Andrew Clark>//
- **[f7cf077](react/react@f7cf077cc )**: [Transition Tracing] Add Offscreen Queue ([#24341](react/react#24341)) //<Luna Ruan>//
- **[4fc394b](react/react@4fc394bbe )**: Fix suspense fallback throttling ([#24253](react/react#24253)) //<sunderls>//
- **[80170a0](react/react@80170a068 )**: Match bundle.name and match upper case entry points ([#24346](react/react#24346)) //<Sebastian Markbåge>//
- **[fea6f8d](react/react@fea6f8da6 )**: [Transition Tracing] Add transition to OffscreenState and pendingSuspenseBoundaries to RootState ([#24340](react/react#24340)) //<Luna Ruan>//
- **[8e2f9b0](react/react@8e2f9b086 )**: move passive flag ([#24339](react/react#24339)) //<Luna Ruan>//
- **[55a21ef](react/react@55a21ef7e )**: fix pushTransition for transition tracing ([#24338](react/react#24338)) //<Luna Ruan>//
- **[069d23b](react/react@069d23bb7 )**:  [eslint-plugin-exhaustive-deps] Fix exhaustive deps check for unstable vars ([#24343](react/react#24343)) //<Afzal Sayed>//
- **[4997515](react/react@4997515b9 )**: Point useSubscription to useSyncExternalStore shim ([#24289](react/react#24289)) //<dan>//
- **[01e2bff](react/react@01e2bff1d )**: Remove unnecessary check ([#24332](react/react#24332)) //<zhoulixiang>//
- **[d9a0f9e](react/react@d9a0f9e20 )**: Delete create-subscription folder ([#24288](react/react#24288)) //<dan>//
- **[f993ffc](react/react@f993ffc51 )**: Fix infinite update loop that happens when an unmemoized value is passed to useDeferredValue ([#24247](react/react#24247)) //<Andrew Clark>//
- **[fa58002](react/react@fa5800226 )**: [Fizz] Pipeable Stream Perf ([#24291](react/react#24291)) //<Josh Story>//
- **[0568c0f](react/react@0568c0f8c )**: Replace zero with NoLanes for consistency in FiberLane ([#24327](react/react#24327)) //<Leo>//
- **[e0160d5](react/react@e0160d50c )**: add transition tracing transitions stack ([#24321](react/react#24321)) //<Luna Ruan>//
- **[b0f13e5](react/react@b0f13e5d3 )**: add pendingPassiveTransitions ([#24320](react/react#24320)) //<Luna Ruan>//

Changelog:
[General][Changed] - React Native sync for revisions 60e63b9...bd4784c

jest_e2e[run_all_tests]

Reviewed By: kacieb

Differential Revision: D35899012

fbshipit-source-id: 86a885e336fca9f0efa80cd2b8ca040f2cb53853
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

CLA Signed This label is managed by the Facebook bot. Authors need to sign the CLA before a PR can be reviewed. Merged This PR has been merged.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Regression(SectionList): Unable to add style like { flex: 1 } to the ListEmptyComponent

5 participants