0

I have a scenario where I can't use scrollview or flatlist.
UI is kind of wizard when press next I move user to next screen or previous on back. In render function I have:

<View style={{flex: 1}}>
   <WizardItem data={this.props.currentStep} />
</View>

Component WizardItem has button inside which update this.props.currentStep and when it is updated in reducer it is naturally updated here.

But I need to animate transition like current step goes left and new come from right and vice versa.

As you can see step is completely dynamic so I can't load it in lists as I don't know until user press next button what is next item.
But I need that animation.

Can somebody guide me on how to do this effect or I should stop thinking about it if it is not possible?



UPDATE

Bellow is example of something similar just no rotation simple move left right.
But I can't use views where I have list of items predefined as next and previous step in wizard are dynamic.

enter link description here

1110
  • 7,829
  • 55
  • 176
  • 334
  • you can add a spinner __onClick()__, but I would not recommend. Else you can do is check if `nextProps != this.props` do spinner. – roottraveller Feb 13 '19 at 18:05
  • No. I need to make it look same as when you have items in a flat list and when you scroll to next item. – 1110 Feb 13 '19 at 18:06

1 Answers1

1

If I understand it correctly you want that to transition to a different screen. To do this I suggest you use LayoutAnimation in React Native. LayoutAnimation lets you animate state changes instead of things simply disappearing and appearing. You can save the currentStep in state instead of props and every time the state changes use LayoutAnimation to transition in the way you want.

This article uses layout animation for screen transitions

If changing to state from props is something that you cannot do or don't want to do, you could also detect prop changes in your Wizard and then use Animated to move your layouts around.

It's tricky to suggest a best way without knowing how Wizard is setup or at the least its general layout. If it is possible to share some code for Wizard it would be easier to help you.

Nemi Shah
  • 856
  • 1
  • 7
  • 11
  • I updated question with example. There is other code really. When current step in reducer is updated based on it's type component that is step in wizard looks very different. Problem is that when I update current step screen just got updated no transition or animation and I need to make it look like user move forward or backward. Is this possible to implement with just updating reducer? – 1110 Feb 13 '19 at 18:45
  • How are displaying the dynamic steps right now? Simple replacing the entire view? Also even when its dynamic do you know the order of the steps or can that change too? Sorry for all the questions just want to help the best I can – Nemi Shah Feb 13 '19 at 18:49
  • Yes exactly like in example it’s just replace in that view when reducer update. Yes when I click next I calculate next item it is dynamic – 1110 Feb 13 '19 at 18:51
  • One thing I can think of is to have 3 views at one time instead of just one. Basically it will be current step in screen, previous step to the left of the screen and next step on the right of the screen. When your state changes with the step value you simply use Animated to move in the direction you need to and then rerender the off screen steps accordingly. – Nemi Shah Feb 13 '19 at 19:16