Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

zIndex in FlatList #28751

Open
ShaMan123 opened this issue Apr 25, 2020 · 41 comments
Open

zIndex in FlatList #28751

ShaMan123 opened this issue Apr 25, 2020 · 41 comments
Labels
Component: FlatList Needs: Attention Issues where the author has responded to feedback.

Comments

@ShaMan123
Copy link

ShaMan123 commented Apr 25, 2020

Description

Related? #23614 #23615
Setting zIndex on items of a FlatList yields no result across different rows. However, it does work in the same row across it's columns if existing.
I have tried using CellRenderComponent without success.
This is crucial for dragging items in a list etc.
I can confirm it is cross platform. See the snack below.

React Native version:

React Native version
System:
    OS: Windows 10 10.0.18362
    CPU: (4) x64 Intel(R) Core(TM) i5-7200U CPU @ 2.50GHz
    Memory: 2.84 GB / 7.87 GB
  Binaries:
    Node: 12.14.0 - C:\Users\DELL\AppData\Local\Temp\yarn--1587809387421-0.6934667812958264\node.CMD
    Yarn: 1.22.0 - C:\Users\DELL\AppData\Local\Temp\yarn--1587809387421-0.6934667812958264\yarn.CMD
    npm: 6.13.4 - C:\Program Files (x86)\nodejs\npm.CMD
    Watchman: Not Found
  SDKs:
    Android SDK:
      API Levels: 22, 23, 25, 26, 27, 28, 29
      Build Tools: 23.0.1, 23.0.3, 24.0.1, 26.0.2, 27.0.1, 27.0.3, 28.0.0, 28.0.3, 29.0.3, 30.0.0
      System Images: android-22 | Google APIs Intel x86 Atom, android-22 | Google APIs Intel x86 Atom_64, android-23 | Intel x86 Atom_64, android-23 | Google APIs Intel x86 Atom, android-23 | Google APIs Intel x86 Atom_64, android-25 | Google APIs Intel x86 Atom, android-26 | Google APIs Intel x86 Atom_64, android-26 | Google Play Intel x86 Atom, android-27 | Google APIs Intel x86 Atom, android-27 | Google Play Intel x86 Atom, android-28 | Google APIs Intel x86 Atom, android-28 | Google APIs Intel x86 Atom_64, android-28 | Google Play Intel x86 Atom, android-28 | Google Play Intel x86 Atom_64, android-29 | Google APIs Intel x86 Atom, android-R | Google APIs Intel x86 Atom, android-R | Google Play Intel x86 Atom_64
      Android NDK: 17.2.4988734
  IDEs:
    Android Studio: Version  3.5.0.0 AI-191.8026.42.35.5791312
  Languages:
    Java: 1.8.0_172 - C:\Program Files\Java\jdk1.8.0_172\bin\javac.EXE
    Python: 3.6.5 - C:\Users\DELL\AppData\Local\Programs\Python\Python36-32\python.EXE
  npmPackages:
    @react-native-community/cli: Not Found
    react: ^16.13.0 => 16.13.1
    react-native: ^0.62.2 => 0.62.2
  npmGlobalPackages:
    *react-native*: Not Found
Done in 13.98s.

Steps To Reproduce

  1. Render a list of items with FlatList.
  2. Change items' position and zIndex so an item should render above other items placed after it in the list (descending zIndex).

Expected Results

zIndex should behave the same in FlatList items as it does in other view hierarchies. Meaning a greater value should result in rendering above other views.

Snack, code example, screenshot, or link to a repository:

https://snack.expo.io/VHjFLB_Dz

@ShaMan123
Copy link
Author

ShaMan123 commented Apr 25, 2020

Check out how it behaves across rows/columns.
zIndex works in the row but not across rows.

zindex

@seunghyun-woo
Copy link

seunghyun-woo commented May 18, 2020

I got exact same issue. Any updates?

@seunghyun-woo
Copy link

seunghyun-woo commented Jun 8, 2020

Description

Related? #23614 #23615
Setting zIndex on items of a FlatList yields no result across different rows. However, it does work in the same row across it's columns if existing.
I have tried using CellRenderComponent without success.
This is crucial for dragging items in a list etc.
I can confirm it is cross platform. See the snack below.

React Native version:

React Native version

Steps To Reproduce

  1. Render a list of items with FlatList.
  2. Change items' position and zIndex so an item should render above other items placed after it in the list (descending zIndex).

Expected Results

zIndex should behave the same in FlatList items as it does in other view hierarchies. Meaning a greater value should result in rendering above other views.

Snack, code example, screenshot, or link to a repository:

https://snack.expo.io/VHjFLB_Dz

BTW it's CellRendererComponent, not CellRenderComponent.
This may solve your problem?

@jcargilo
Copy link

jcargilo commented Jun 24, 2020

#23392 Seems to be related (issue template is just a link).

In my case, I have an AutoComplete component within each rendered item that displays a list of items which should overlap the next list item below it. The issue appears to be that z-indexing is somehow backwards (each subsequent item is layered above the one before it) within the FlatList component and there's no way to override it because the rendered item isn't the row component.

You can see this visually by setting inverse={true} which was a bandaid for me to workaround this issue temporarily, at the cost of my list items now being shown backwards. By listing them backwards, the backwards z-index was effectively corrected.

Using React Native 0.61.4 (in case that helps)

@bboure
Copy link

bboure commented Aug 22, 2020

Hi,

I am having the same issue. (I am trying to implement a drag-and-drop sort FastList)
Setting zIndex inside the renderItem function does not work.

I also tried to use CellRendererComponent and set the zIndex in the Wrapping component, but that would block my animations for some reason.

I finally made it work by making sure that CellRendererComponentis always the exact same instance of the function across re-renders.

Here is a simplified version of my code

  // make sure to use `.bind(this)` in the constructor or use auto binding. 
  renderCell = ({ index, style, ...props }) => {
	const { currentDragIndex } = this.state;
	const zIndex = {
      zIndex: index === currentDragIndex ? 2 : 0,
    };

    return <View style={[style, zIndex]} {...props} />;
  };

  render() {
    const {
      data,
    } = this.props;

    return (
      <FlatList
        data={data}
        // renderCell is always the same instance.
        CellRendererComponent={this.renderCell}
        // ...
      />
    );
  }

In a functional component, you would probably want to use useCallback.

Hope that helps

@safaiyeh
Copy link
Contributor

Thanks for the issue @ShaMan123!

Have you tried @bboure's solution? Does it solve your case?

@ShaMan123
Copy link
Author

ShaMan123 commented Aug 29, 2020

Strangely enough on iOS the solution suggested by @bboure works. On android it has no effect.
See updated snack with CellRendererComponent fix (thanks @seunghyun-woo) and useCallback.

@github-actions github-actions bot added Needs: Attention Issues where the author has responded to feedback. and removed Needs: Author Feedback labels Aug 29, 2020
@Twelvefat
Copy link

Twelvefat commented Sep 8, 2020

Hi,

I am having the same issue. (I am trying to implement a drag-and-drop sort FastList)
Setting zIndex inside the renderItem function does not work.

I also tried to use CellRendererComponent and set the zIndex in the Wrapping component, but that would block my animations for some reason.

I finally made it work by making sure that CellRendererComponentis always the exact same instance of the function across re-renders.

Here is a simplified version of my code

  // make sure to use `.bind(this)` in the constructor or use auto binding. 
  renderCell = ({ index, style, ...props }) => {
	const { currentDragIndex } = this.state;
	const zIndex = {
      zIndex: index === currentDragIndex ? 2 : 0,
    };

    return <View style={[style, zIndex]} {...props} />;
  };

  render() {
    const {
      data,
    } = this.props;

    return (
      <FlatList
        data={data}
        // renderCell is always the same instance.
        CellRendererComponent={this.renderCell}
        // ...
      />
    );
  }

In a functional component, you would probably want to use useCallback.

Hope that helps

when i was using this way to change my zIndex cause crash on android ? why ? please help, thank you
The error say 'java.lang.ArrayIndexOutOfBoundsException: length=2; index=2'

@bboure
Copy link

bboure commented Sep 8, 2020

@Twelvefat
A quick follow up on this. I too experienced crashing on Android with that solution.
I ended up using a ScrollView instead 😞 It least a a temporary workaround.

@AndreiBacescu
Copy link

Hi guys.
Maybe this will help someone: #18616 (comment)

@mmilvydas112
Copy link

Having same issue. Can we expect a new workaround or a fix this year? it's been about 2 years now.

@ChiragMDave
Copy link

ChiragMDave commented Apr 18, 2021

Just move ransform:[{translateY:200}] from greenBox style to redBox style and the result will be same in both Scroll and FlatList..
More over, there is absolutely no problem of zindex in FlashList within item and items across rows. I also have a line defined in one item stretching across items in rows.

@ChiragMDave
Copy link

Description

Related? #23614 #23615
Setting zIndex on items of a FlatList yields no result across different rows. However, it does work in the same row across it's columns if existing.
I have tried using CellRenderComponent without success.
This is crucial for dragging items in a list etc.
I can confirm it is cross platform. See the snack below.

React Native version:

React Native version

Steps To Reproduce

  1. Render a list of items with FlatList.
  2. Change items' position and zIndex so an item should render above other items placed after it in the list (descending zIndex).

Expected Results

zIndex should behave the same in FlatList items as it does in other view hierarchies. Meaning a greater value should result in rendering above other views.

Snack, code example, screenshot, or link to a repository:

https://snack.expo.io/VHjFLB_Dz

BTW it's CellRendererComponent, not CellRenderComponent.
This may solve your problem?

Just move ransform:[{translateY:200}] from greenBox style to redBox style and the result will be same in both Scroll and FlatList..
More over, there is absolutely no problem of zindex in FlashList within item and items across rows. I also have a line defined in one item stretching across items in rows.

@adamward459
Copy link

#18616 (comment)

it will block the animation because you have to wait for next render

@M-i-k-e-l
Copy link

For anyone that had a crash on Android when using CellRendererComponent:
This solution seems to be working, I hope performance won't take too big of a hit.

Couldn't make this workaround work on Android without also having removeClippedSubviews={false} explicitly set.

@zhangwen9229
Copy link

            CellRendererComponent={({ children, item, ...props }) => {
                return (
                    <View onLayout={onLayout}>
                        {children}
                    </View>
                )
            }}
            renderItem={renderItem}

@enesozturk
Copy link
Contributor

+1
It looks like this is open for a long time without a proper solution. I am having the exact same issue recorded here. It's even the same when using the ScrollView.

@yolpsoftware
Copy link

Guys, when will this be fixed?

@bolan9999
Copy link

How can I set the List Header zIndex on Android?

ListHeaderComponentStyle={{ zIndex: 9999 }} works well on iOS, but not on Andorid.

@julianjear
Copy link

julianjear commented Oct 23, 2022

Experiencing this issue as well and even though CellRendererComponent does work, it causes my memoized RenderItem component to re-render (which does not happen if I don't use CellRendererComponent).

Would appreciate a proper fix on this!

@Bayramito
Copy link

Bayramito commented Oct 29, 2022

I tried every single suggestion abouve but unfortunately didn't help me. In my case i want to have pinch zoom functionality just like @wcandillon 's video right here https://www.youtube.com/watch?v=MukiK57qwVY&t=1186s but to achieve this,
my zIndex value should be conditional. I tried hold my conditional value in component's local state or mobx state but it did not work at all. Seems like CellRendererComponent runs only once for each cell and not affecting when there is a change on the state. i dont know what to do at this point. I wonder how instagram guys achieved this on their feeds page.I am almost sure they created their own custom native component but...

@vberezkin
Copy link

Hi,

I am having the same issue. (I am trying to implement a drag-and-drop sort FastList) Setting zIndex inside the renderItem function does not work.

I also tried to use CellRendererComponent and set the zIndex in the Wrapping component, but that would block my animations for some reason.

I finally made it work by making sure that CellRendererComponentis always the exact same instance of the function across re-renders.

Here is a simplified version of my code

  // make sure to use `.bind(this)` in the constructor or use auto binding. 
  renderCell = ({ index, style, ...props }) => {
	const { currentDragIndex } = this.state;
	const zIndex = {
      zIndex: index === currentDragIndex ? 2 : 0,
    };

    return <View style={[style, zIndex]} {...props} />;
  };

  render() {
    const {
      data,
    } = this.props;

    return (
      <FlatList
        data={data}
        // renderCell is always the same instance.
        CellRendererComponent={this.renderCell}
        // ...
      />
    );
  }

In a functional component, you would probably want to use useCallback.

Hope that helps

It is important to notice that it works only with class components, not functional

@kapobajza
Copy link

How can I set the List Header zIndex on Android?

ListHeaderComponentStyle={{ zIndex: 9999 }} works well on iOS, but not on Andorid.

In order to get it working on Android, you should also use the elevation property.

ListHeaderComponentStyle={{ zIndex: 9999, elevation: 1 }}

@Bayramito
Copy link

I have solved this thanks

@Abhishek2250
Copy link

Abhishek2250 commented May 29, 2023

For me, it's working on iOS but not on Android. Also, set removeClippedSubviews={false}
I have a popup view that gets extended to 2nd item of FlatList but it's getting cut out after the separator of FlatList

code:

	const cellRenderer = (props: any) => {
		const { children, index } = props;
		return (
			<View style={{
				elevation: dataIdToRenderList.length - index,
				zIndex: dataIdToRenderList.length - index,
			}}
			>
				{children}
			</View>
		);
	};

@Bayramito
Copy link

what do you guys trying to achieve ?

@Abhishek2250
Copy link

@Bayramito
Screenshot 2023-05-29 at 6 18 29 PM
see in the above screenshot, a blue bg popup should not get cut. It should be above the item 2 of flatlist

@Bayramito
Copy link

why do you hold the popup in the row item ?

@Bayramito
Copy link

Bayramito commented May 29, 2023

Hope this helps to understand methodology correctly...

const Home = () => {
  const [activePopup, setActivePopup] = React.useState(null);
  return (
    <View style={{flex: 1}}>
      <FlashList
        disableAutoLayout={true}
        data={[0, 1, 2, 3, 4]}
        estimatedItemSize={400}
        ItemSeparatorComponent={() => {
          return <View style={{height: 10}} />;
        }}
        CellRendererComponent={props => {
          return (
            <View
              {...props}
              style={{
                zIndex: activePopup === props.index ? 10 : 2,
              }}>
              {props.children}
            </View>
          );
        }}
        renderItem={({item, index}) => {
          return (
            <View
              style={{
                width: '100%',
                height: 400,
                backgroundColor: 'red',
              }}>
              <TouchableOpacity
                onPress={() => {
                  if (activePopup === null) {
                    setActivePopup(index);
                  } else {
                    setActivePopup(null);
                  }
                }}
                style={{
                  position: 'absolute',
                  bottom: 10,
                  left: 10,
                  backgroundColor: 'blue',
                  padding: 10,
                }}>
                <Text>Click me</Text>
              </TouchableOpacity>
              {activePopup === index && (
                <View
                  style={{
                    position: 'absolute',
                    bottom: -130,
                    left: 50,
                    height: 150,
                    width: 150,
                    backgroundColor: 'yellow',
                  }}>
                  <Text>PopUp</Text>
                </View>
              )}
            </View>
          );
        }}
      />
    </View>
  );
};

Simulator Screen Shot - iPhone 14 - 2023-05-29 at 16 11 37

@Abhishek2250
Copy link

Abhishek2250 commented May 29, 2023

@Bayramito thanks for the quick reply
Screenshot 2023-05-29 at 6 51 09 PM

this is working on iOS but not Android. That's the same issue which I'm facing

@Bayramito
Copy link

@Bayramito thanks for the quick reply Screenshot 2023-05-29 at 6 51 09 PM

this is working on iOS but not Android. That's the same issue which I'm facing

Seems like there is a issue on react-native FlatList

changed the code a little bit...

use
https://shopify.github.io/flash-list/
which is 10x faster than FlatList

@carsonkrueger
Copy link

Still having issues with this Summer of 2023. Please fix.

@Maxth
Copy link

Maxth commented Aug 1, 2023

I just encountered this problem when I was making a diagram using a flatlist. Each item in the flatlist is a diagram bar and when pressing a bar a popup appears displaying the bar-data in text. You see in the pic below that the popup is on top of one of the adjacent bars but underneath the other one.

My SO-question led me here. I also made a snack for this issue.

For my use case I'll work around this issue by increasing the distance between the diagram bars.

My project is running on RN 0.70.8.

Simulator Screenshot - iPhone 14 - 2023-08-01 at 15 32 30

Copy link

This issue is stale because it has been open 180 days with no activity. Remove stale label or comment or this will be closed in 7 days.

@github-actions github-actions bot added the Stale There has been a lack of activity on this issue and it may be closed soon. label Jan 29, 2024
@willyuanxu
Copy link

any updates on this?

@github-actions github-actions bot removed the Stale There has been a lack of activity on this issue and it may be closed soon. label Feb 3, 2024
@hgezeery
Copy link

I think this is an important issue to fix.

@8KillerMuffin8
Copy link

This worked for me

CellRendererComponent={({ style, ...props }) => (
    <View style={[style, { elevation: -1 }]} {...props} />
)}

@guilhermesandi
Copy link

guilhermesandi commented Apr 16, 2024

I just added the two properties below and set the zIndex = 1

CellRendererComponent={({ children }) => children}
removeClippedSubviews={false}

facebook-github-bot pushed a commit that referenced this issue Apr 19, 2024
Summary:
This sync includes the changes from:
- D56103750
- [TODO] A shim for SECRET_INTERNALS

This sync includes the following changes:
- **[b5e5ce8e0](facebook/react@b5e5ce8e0 )**: Update ReactNativeTypes for root options (part 2) ([#28857](facebook/react#28857)) //<Ricky>//
- **[da6ba53b1](facebook/react@da6ba53b1 )**: [UMD] Remove umd builds ([#28735](facebook/react#28735)) //<Josh Story>//
- **[0c245df1d](facebook/react@0c245df1d )**: Complete the typo fix ([#28856](facebook/react#28856)) //<Sebastian Silbermann>//
- **[f82051d7a](facebook/react@f82051d7a )**: console test utils fix: match entire string, not just first letter ([#28855](facebook/react#28855)) //<Andrew Clark>//
- **[4ca20fd36](facebook/react@4ca20fd36 )**: Test top level fragment inside lazy semantics ([#28852](facebook/react#28852)) //<Sebastian Markbåge>//
- **[c0cf7c696](facebook/react@c0cf7c696 )**: Promote ASYNC_ITERATOR symbol to React Symbols ([#28851](facebook/react#28851)) //<Sebastian Markbåge>//
- **[657428a9e](facebook/react@657428a9e )**: Add ReactNativeTypes for root options ([#28850](facebook/react#28850)) //<Ricky>//
- **[7909d8eab](facebook/react@7909d8eab )**: [Flight] Encode ReadableStream and AsyncIterables ([#28847](facebook/react#28847)) //<Sebastian Markbåge>//
- **[13eb61d05](facebook/react@13eb61d05 )**: Move enableUseDeferredValueInitialArg to canary ([#28818](facebook/react#28818)) //<Andrew Clark>//
- **[8afa144bd](facebook/react@8afa144bd )**: Enable flag disableClientCache ([#28846](facebook/react#28846)) //<Jan Kassens>//
- **[734956ace](facebook/react@734956ace )**: Devtools: Add support for useFormStatus ([#28413](facebook/react#28413)) //<Sebastian Silbermann>//
- **[17e920c00](facebook/react@17e920c00 )**: [Flight Reply] Encode Typed Arrays and Blobs ([#28819](facebook/react#28819)) //<Sebastian Markbåge>//
- **[0347fcd00](facebook/react@0347fcd00 )**: Add on(Caught|Uncaught|Recoverable) opts to RN ([#28836](facebook/react#28836)) //<Ricky>//
- **[c113503ad](facebook/react@c113503ad )**: Flush direct streams in Bun ([#28837](facebook/react#28837)) //<Kenta Iwasaki>//
- **[9defcd56b](facebook/react@9defcd56b )**: Remove redundant props assign ([#28829](facebook/react#28829)) //<Sebastian Silbermann>//
- **[ed4023603](facebook/react@ed4023603 )**: Fix mistaken "react-server" condition ([#28835](facebook/react#28835)) //<Sebastian Markbåge>//
- **[c8a035036](facebook/react@c8a035036 )**: [Fizz] hoistables should never flush before the preamble ([#28802](facebook/react#28802)) //<Josh Story>//
- **[4f5c812a3](facebook/react@4f5c812a3 )**: DevTools: Rely on sourcemaps to compute hook name of built-in hooks in newer versions ([#28593](facebook/react#28593)) //<Sebastian Silbermann>//
- **[435415962](facebook/react@435415962 )**: Backwards compatibility for string refs on WWW ([#28826](facebook/react#28826)) //<Jack Pope>//
- **[608edcc90](facebook/react@608edcc90 )**: [tests] add `assertConsole<method>Dev` helpers ([#28732](facebook/react#28732)) //<Ricky>//
- **[da69b6af9](facebook/react@da69b6af9 )**: ReactDOM.requestFormReset  ([#28809](facebook/react#28809)) //<Andrew Clark>//
- **[374b5d26c](facebook/react@374b5d26c )**: Scaffolding for requestFormReset API ([#28808](facebook/react#28808)) //<Andrew Clark>//
- **[41950d14a](facebook/react@41950d14a )**: Automatically reset forms after action finishes ([#28804](facebook/react#28804)) //<Andrew Clark>//
- **[dc6a7e01e](facebook/react@dc6a7e01e )**: [Float] Don't preload images inside `<noscript>` ([#28815](facebook/react#28815)) //<Josh Story>//
- **[3f947b1b4](facebook/react@3f947b1b4 )**: [tests] Assert scheduler log empty in internalAct ([#28737](facebook/react#28737)) //<Ricky>//
- **[bf09089f6](facebook/react@bf09089f6 )**: Remove Scheduler.log from ReactSuspenseFuzz-test ([#28812](facebook/react#28812)) //<Ricky>//
- **[84cb3b4cb](facebook/react@84cb3b4cb )**: Hardcode disableIEWorkarounds for www ([#28811](facebook/react#28811)) //<Ricky>//
- **[2243b40ab](facebook/react@2243b40ab )**: [tests] assertLog before act in useEffectEvent ([#28763](facebook/react#28763)) //<Ricky>//
- **[dfc64c6e3](facebook/react@dfc64c6e3 )**: [tests] assertLog before act in ReactUse ([#28762](facebook/react#28762)) //<Ricky>//
- **[42eff4bc7](facebook/react@42eff4bc7 )**: [tests] Fix assertions not flushed before act ([#28745](facebook/react#28745)) //<Ricky>//
- **[ed3c65caf](facebook/react@ed3c65caf )**: Warn if outdated JSX transform is detected ([#28781](facebook/react#28781)) //<Andrew Clark>//
- **[3f9e237a2](facebook/react@3f9e237a2 )**: Fix: Suspend while recovering from hydration error ([#28800](facebook/react#28800)) //<Andrew Clark>//
- **[7f5d25e23](facebook/react@7f5d25e23 )**: Fix cloneElement using string ref w no owner ([#28797](facebook/react#28797)) //<Joseph Savona>//
- **[bf40b0244](facebook/react@bf40b0244 )**: [Fizz] Stop publishing external-runtime to stable channel ([#28796](facebook/react#28796)) //<Josh Story>//
- **[7f93cb41c](facebook/react@7f93cb41c )**: [DOM] Infer react-server entries bundles if not explicitly configured ([#28795](facebook/react#28795)) //<Josh Story>//
- **[f61316535](facebook/react@f61316535 )**: Rename SECRET INTERNALS to `__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE` ([#28789](facebook/react#28789)) //<Sebastian Markbåge>//
- **[9644d206e](facebook/react@9644d206e )**: Soften useFormState warning ([#28788](facebook/react#28788)) //<Ricky>//
- **[c771016e1](facebook/react@c771016e1 )**: Rename The Secret Export of Server Internals ([#28786](facebook/react#28786)) //<Sebastian Markbåge>//
- **[d50323eb8](facebook/react@d50323eb8 )**: Flatten ReactSharedInternals ([#28783](facebook/react#28783)) //<Sebastian Markbåge>//
- **[f62cf8c62](facebook/react@f62cf8c62 )**: [Float] treat `props.async` in Float consistent with the rest of react-dom ([#26760](facebook/react#26760)) //<Josh Story>//
- **[dfd3d5af8](facebook/react@dfd3d5af8 )**: Add support for transition{run,start,cancel} events ([#27345](facebook/react#27345)) //<Hugo Sales>//
- **[1f8327f83](facebook/react@1f8327f83 )**: [Fiber] Use real event priority for hydration scheduling ([#28765](facebook/react#28765)) //<Josh Story>//
- **[97c90ed88](facebook/react@97c90ed88 )**: [DOM] Shrink ReactDOMCurrentDispatcher method names ([#28770](facebook/react#28770)) //<Josh Story>//
- **[9007fdc8f](facebook/react@9007fdc8f )**: [DOM] Shrink ReactDOMSharedInternals source representation ([#28771](facebook/react#28771)) //<Josh Story>//
- **[14f50ad15](facebook/react@14f50ad15 )**: [Flight] Allow lazily resolving outlined models ([#28780](facebook/react#28780)) //<Sebastian Markbåge>//
- **[4c12339ce](facebook/react@4c12339ce )**: [DOM] move `flushSync` out of the reconciler ([#28500](facebook/react#28500)) //<Josh Story>//
- **[8e1462e8c](facebook/react@8e1462e8c )**: [Fiber] Move updatePriority tracking to renderers ([#28751](facebook/react#28751)) //<Josh Story>//
- **[0b3b8a6a3](facebook/react@0b3b8a6a3 )**: jsx: Remove unnecessary hasOwnProperty check ([#28775](facebook/react#28775)) //<Andrew Clark>//
- **[2acfb7b60](facebook/react@2acfb7b60 )**: [Flight] Support FormData from Server to Client ([#28754](facebook/react#28754)) //<Sebastian Markbåge>//
- **[d1547defe](facebook/react@d1547defe )**: Fast JSX: Don't clone props object ([#28768](facebook/react#28768)) //<Andrew Clark>//
- **[bfd8da807](facebook/react@bfd8da807 )**: Make class prop resolution faster ([#28766](facebook/react#28766)) //<Andrew Clark>//
- **[cbb6f2b54](facebook/react@cbb6f2b54 )**: [Flight] Support Blobs from Server to Client ([#28755](facebook/react#28755)) //<Sebastian Markbåge>//
- **[f33a6b69c](facebook/react@f33a6b69c )**: Track Owner for Server Components in DEV ([#28753](facebook/react#28753)) //<Sebastian Markbåge>//
- **[e3ebcd54b](facebook/react@e3ebcd54b )**: Move string ref coercion to JSX runtime ([#28473](facebook/react#28473)) //<Andrew Clark>//
- **[fd0da3eef](facebook/react@fd0da3eef )**: Remove _owner field from JSX elements in prod if string refs are disabled ([#28739](facebook/react#28739)) //<Sebastian Markbåge>//

Changelog:
[General][Changed] - React Native sync for revisions 48b4ecc...b5e5ce8

jest_e2e[run_all_tests]
bypass-github-export-checks

Reviewed By: kassens

Differential Revision: D56251607

fbshipit-source-id: e16db2fa101fc7ed1e009158c76388206beabd5f
@spicy-xili
Copy link

It is 2024, can this be fixed please!

@spicy-xili
Copy link

I tried every single suggestion abouve but unfortunately didn't help me. In my case i want to have pinch zoom functionality just like @wcandillon 's video right here https://www.youtube.com/watch?v=MukiK57qwVY&t=1186s but to achieve this, my zIndex value should be conditional. I tried hold my conditional value in component's local state or mobx state but it did not work at all. Seems like CellRendererComponent runs only once for each cell and not affecting when there is a change on the state. i dont know what to do at this point. I wonder how instagram guys achieved this on their feeds page.I am almost sure they created their own custom native component but...

Were you able to solve this?

@spicy-xili
Copy link

This worked for me

CellRendererComponent={({ style, ...props }) => (
    <View style={[style, { elevation: -1 }]} {...props} />
)}

This won't work because setting -1 to all items will keep things the same. FlatList should allow to set the zIndex in the renderItem itself. This is far from being optimal and it won't work in most scenarios.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Component: FlatList Needs: Attention Issues where the author has responded to feedback.
Projects
None yet
Development

No branches or pull requests