zIndex in FlatList #28751

ShaMan123 · 2020-04-25T10:23:31Z

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

Render a list of items with FlatList.
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

The text was updated successfully, but these errors were encountered:

ShaMan123 · 2020-04-25T10:47:54Z

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

seunghyun-woo · 2020-05-18T09:21:15Z

I got exact same issue. Any updates?

seunghyun-woo · 2020-06-08T08:23:21Z

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

Render a list of items with FlatList.

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 · 2020-06-24T17:12:13Z

#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 · 2020-08-22T13:50:47Z

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 · 2020-08-23T22:31:24Z

Thanks for the issue @ShaMan123!

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

ShaMan123 · 2020-08-29T07:39:18Z

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.

Twelvefat · 2020-09-08T04:49:14Z

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 · 2020-09-08T06:11:46Z

@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 · 2020-11-04T09:12:09Z

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

mmilvydas112 · 2021-01-08T16:18:55Z

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

ChiragMDave · 2021-04-18T06:40:19Z

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 · 2021-04-18T06:45:52Z

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

Render a list of items with FlatList.

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 · 2021-12-19T05:38:51Z

#18616 (comment)

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

M-i-k-e-l · 2022-03-10T11:03:22Z

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 · 2022-04-13T03:00:34Z

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

enesozturk · 2022-07-03T12:07:58Z

+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 · 2022-09-29T21:39:50Z

Guys, when will this be fixed?

bolan9999 · 2022-10-17T16:04:03Z

How can I set the List Header zIndex on Android?

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

julianjear · 2022-10-23T23:03:49Z

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 · 2022-10-29T05:40:32Z

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 · 2022-12-14T13:40:57Z

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 · 2023-05-11T14:21:16Z

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 · 2023-05-11T15:13:50Z

I have solved this thanks

Abhishek2250 · 2023-05-29T12:35:38Z

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 · 2023-05-29T12:44:35Z

what do you guys trying to achieve ?

Abhishek2250 · 2023-05-29T12:54:24Z

@Bayramito

see in the above screenshot, a blue bg popup should not get cut. It should be above the item 2 of flatlist

Bayramito · 2023-05-29T13:04:05Z

why do you hold the popup in the row item ?

Bayramito · 2023-05-29T13:09:26Z

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>
  );
};

Abhishek2250 · 2023-05-29T13:22:41Z

@Bayramito thanks for the quick reply

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

Bayramito · 2023-05-29T13:56:36Z

@Bayramito thanks for the quick reply

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 · 2023-06-29T01:58:28Z

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

Maxth · 2023-08-01T13:47:13Z

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.

github-actions · 2024-01-29T05:01:05Z

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.

willyuanxu · 2024-02-02T21:32:49Z

any updates on this?

hgezeery · 2024-03-22T07:01:23Z

I think this is an important issue to fix.

8KillerMuffin8 · 2024-04-01T08:32:38Z

This worked for me

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

guilhermesandi · 2024-04-16T14:50:00Z

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

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

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 · 2024-08-03T13:48:58Z

It is 2024, can this be fixed please!

spicy-xili · 2024-08-03T15:17:09Z

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 · 2024-08-03T15:43:20Z

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.

ShaMan123 added the Needs: Triage 🔍 label Apr 25, 2020

react-native-bot added the Component: FlatList label Apr 25, 2020

safaiyeh added Needs: Author Feedback and removed Needs: Triage 🔍 labels Aug 23, 2020

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

rectified95 mentioned this issue Mar 2, 2021

Flatlist zIndex not working when using onRefresh prop #31083

Open

kyl-dc mentioned this issue Apr 8, 2022

Bug for Quantity Change Modal AaronSalo/Pantry-Pal-HCI2#46

Open

Uros787 mentioned this issue Oct 19, 2022

[$2000] Investigate: 💥 Crash 💥 com.facebook.react.uimanager.ViewManagersPropertyCache$FloatPropSetter.getValueOrDefault Expensify/App#11394

Closed

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

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

zIndex in FlatList #28751

zIndex in FlatList #28751

Comments

ShaMan123 commented Apr 25, 2020 • edited Loading

Description

React Native version:

Steps To Reproduce

Expected Results

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

ShaMan123 commented Apr 25, 2020 • edited Loading

seunghyun-woo commented May 18, 2020 • edited Loading

seunghyun-woo commented Jun 8, 2020 • edited Loading

Description

React Native version:

Steps To Reproduce

Expected Results

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

jcargilo commented Jun 24, 2020 • edited Loading

bboure commented Aug 22, 2020 • edited Loading

safaiyeh commented Aug 23, 2020

ShaMan123 commented Aug 29, 2020 • edited Loading

Twelvefat commented Sep 8, 2020 • edited Loading

bboure commented Sep 8, 2020

AndreiBacescu commented Nov 4, 2020

mmilvydas112 commented Jan 8, 2021

ChiragMDave commented Apr 18, 2021 • edited Loading

ChiragMDave commented Apr 18, 2021

Description

React Native version:

Steps To Reproduce

Expected Results

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

adamward459 commented Dec 19, 2021

M-i-k-e-l commented Mar 10, 2022

zhangwen9229 commented Apr 13, 2022

enesozturk commented Jul 3, 2022

yolpsoftware commented Sep 29, 2022

bolan9999 commented Oct 17, 2022

julianjear commented Oct 23, 2022 • edited Loading

Bayramito commented Oct 29, 2022 • edited Loading

vberezkin commented Dec 14, 2022

kapobajza commented May 11, 2023

Bayramito commented May 11, 2023

Abhishek2250 commented May 29, 2023 • edited Loading

Bayramito commented May 29, 2023

Abhishek2250 commented May 29, 2023

Bayramito commented May 29, 2023

Bayramito commented May 29, 2023 • edited Loading

Abhishek2250 commented May 29, 2023 • edited Loading

Bayramito commented May 29, 2023

carsonkrueger commented Jun 29, 2023

Maxth commented Aug 1, 2023

github-actions bot commented Jan 29, 2024

willyuanxu commented Feb 2, 2024

hgezeery commented Mar 22, 2024

8KillerMuffin8 commented Apr 1, 2024

guilhermesandi commented Apr 16, 2024 • edited Loading

spicy-xili commented Aug 3, 2024

spicy-xili commented Aug 3, 2024

spicy-xili commented Aug 3, 2024

ShaMan123 commented Apr 25, 2020 •

edited

Loading

ShaMan123 commented Apr 25, 2020 •

edited

Loading

seunghyun-woo commented May 18, 2020 •

edited

Loading

seunghyun-woo commented Jun 8, 2020 •

edited

Loading

jcargilo commented Jun 24, 2020 •

edited

Loading

bboure commented Aug 22, 2020 •

edited

Loading

ShaMan123 commented Aug 29, 2020 •

edited

Loading

Twelvefat commented Sep 8, 2020 •

edited

Loading

ChiragMDave commented Apr 18, 2021 •

edited

Loading

julianjear commented Oct 23, 2022 •

edited

Loading

Bayramito commented Oct 29, 2022 •

edited

Loading

Abhishek2250 commented May 29, 2023 •

edited

Loading

Bayramito commented May 29, 2023 •

edited

Loading

Abhishek2250 commented May 29, 2023 •

edited

Loading

guilhermesandi commented Apr 16, 2024 •

edited

Loading