Use the module together with another module: react-native-super-grid

[Angelk90]

@prscX : Hi, I would like to get the same effect that you see in the image, the number 3. Image: https://raw.githubusercontent.com/willowtreeapps/spruce-ios/master/imgs/extensibility-tests.gif

To make the grid-view, use: react-native-super-grid. But I can not get the same result.

Here is a code example: https://snack.expo.io/Sk2gfsZUM

How can I do?

P.Š. Is it possible to reset animation on command to be able to repeat it?

[prscX]

Thanks @Angelk90 for raising the query.

Coming weekend I will try to mirror the same behaviour and will update you with the solution.

Thanks Pranav

[prscX]

Hi @Angelk90, Apologies for the delay.

First I would like to thank you for creating a grid sample using react-native-super-grid.

With few changes in source provided by you, I am able to achieve the similar animation. I have updated App.js Example and created this as base example.

Can you please verify it once by downloading Example from master branch.

Please let me know in case still improvements are required. Please find below changes I have made to your source in order to achieve the similar animation:

• let sortWith = new CorneredSort(60); decreased interObjectDelay value to 60
• let animateWith = DefaultAnimations.growAnimator(1000); used growAnimator animation
• animator={{ propertyName: "translationY"}) changed property name to translationY instead of translationX

Thanks Pranav

[Angelk90]

@prscX : I try the example does not seem to work properly, the colors are not loaded. P.Š.      let sortWith = new CorneredSort (60);      let animateWith = DefaultAnimations.growAnimator (1000);

If the variables are declared in the state, should it work correctly or not?

Because in my case where I should use it the component is not found in the render but in a function.

[prscX]

Hi @Angelk90, Just now I have downloaded the latest library and example please find below result which I have received:

• Transit Images

Ideally variable accessed through state should work perfectly well. Are you referring to same example App.js class where I have achieved similar animation.

Thanks Pranav

[Angelk90]

@prscX : Link: https://snack.expo.io/H1gaYSCLM I do not understand why in this example I created, the module does not seem to work.

[prscX]

Are you trying to run the app using expo? If yes it will not work because expo is not bundling native linked libraries. Please try to run the example using xcode.

Thanks Pranav

[prscX]

This specific error I am not sure, ideally it should have worked since it is trying to load expo bundled native library only.

Thanks Pranav

[Angelk90]

@prscX : I'm not running it on Expo, that was just to show you the code. P. S. Then strange that certain modules that have a native part work on Expo.

[prscX]

Hi @Angelk90, Did you found any solution for the problem?

Thanks Pranav

[Angelk90]

@prscX : I could not find a solution. If I have defined, in the state:

    this.state = {
      sortWith: new CorneredSort(60),
      animateWith: DefaultAnimations.growAnimator(1000),
}

And use:   

<Spruce
  sortWith={this.state.sortWith}
  animateWith={this.state.animateWith}

The change in values should work, is not it?

[prscX]

Hi @Angelk90, I have never tried through state props. Ideally it should work, coming weekend I will try this using provided example.

Thanks Pranav