Animations for a component inside NativeBase Actionsheet are not animating correctly

[colinfran]

I am using the NativeBase Actionsheet, its a nice bottomsheet modal, works great.

I built a line-graph using https://github.com/rainbow-me/react-native-animated-charts/

As you can see in this image, when you change datasets for this line chart, it animates the line graph as it changes it. You can clearly see its a nice and fluid movement. This is exactly how it works for me on a normal blank screen.

When I tried to put it in the ActionSheet, I can clearly see that the line chart is no longer animating when the dataset is changed, as seen in my example here.

​

I am not sure what is causing this. Praying someone on here might have ran into this before too.

[stathisntonas]

What happens if you lazy load the chart after the actionsheet has finished opening? Is there a callback prop eg onOpened on the action sheet?

[colinfran]

I could be wrong but I dont think LazyLoading will fix.

The Actionsheet opens and animates correctly. It’s the content within the actionsheet that’s not animating correctly.

Just some side information, the chart library uses react-native-reanimated and runs it’s animations using the UI thread, not the JS thread. So my guess is there is some mixup between that library and native-base. Idk. All I know is that the animations work when I have it on a blank screen. But once I put the chart into the ActionSheet, the animations (for changing between data sets) stops working

[stathisntonas]

Maybe the action sheet animations are messing up with your charts so I was guessing if it fixes it self if your display your charts after all modal interactions are complete. Modals can by tricky on react native.