V9. useTransition in react native FlatList

[willroyMyles]

Is there anyway to implement useTransition with a flatlist in react native?

[willroyMyles]

or anyway to get the back an array similar to v8

[lukebrandonfarrell]

This is a great questions. +1 we can't use the new transitions format in FlatList anymore.

[joshuaellis]

If you're able to provide a repro I can look into, perhaps a small codesandbox, I can look into it ⭐

[lukebrandonfarrell]

@joshuaellis

I mean I think this discussion is more to ask for guidance on V9, and it's compatibility with React Native, more than a bug.

In V9 of react-spring the const transitions = useTransition(..) hook returns a function which can be used as such transitions(...render) which is incompatible with FlatList which requires a data property. In V8, useTransition would return an Array of items, which could be used with FlatList as such:

<FlatList
  date={transitions}
/> 

Does that make sense?

[joshuaellis]

It does make sense yes, in this case no react-spring as it currently is would not work with FlatList... Interesting problem to solve certainly!

[lukebrandonfarrell]

I have actually came up with a solution for this. You can do the following:

const array = []
transitions((style, item, t, i) => array.push({ style, item, t, i }))

<FlatList
   data={array}
   renderItem={({ item }) => ...}
/>

You can then write item.style, item.item, item.t etc to get the transition variables.

@joshuaellis Do you see any issues with this approach? Ideally we'd probably want to include some sort of helper in @react-spring/native, if you could advise me, I could PR?

[joshuaellis]

So this is from the useTransition hook:

const renderTransitions: TransitionFn = render => (
    <>
      {transitions.map((t, i) => {
        const { springs } = changes.get(t) || t.ctrl
        const elem: any = render({ ...springs }, t.item, t, i)
        return elem && elem.type ? (
          <elem.type
            {...elem.props}
            key={is.str(t.key) || is.num(t.key) ? t.key : t.ctrl.id}
            ref={elem.ref}
          />
        ) : (
          elem
        )
      })}
    </>
  )

We just spread the springs into a a new object, so I suggest that could "just" work?

[lukebrandonfarrell]

You mean doing this should work? <AnimatedView style={springs}>

[lukebrandonfarrell]

@joshuaellis ?

[joshuaellis]

Sorry @lukebrandonfarrell I missed this.

In theory it should work. If you're able to make a small codebox repo, I can have a look at the solution myself too.

[bassasaurus]

I just stumbled along this thread while trying to implement with RN FlatList. Is there any progress, or a useable workaround?