Transition without a navigator

[dested]

Issue

Is it possible to use the library without any router at all? I would love to simply provide subsequent Scenes that get displayed without the use of any navigator, as in the example below. Is this a use-case you support, or even intend to support?

The library looks incredibly, I truly appreciate the work you've put into it. Keep up the good work.

I'm seeing this behaviour on

• Device: Android 9
• Routing/transition library: none
• React-native version: v58.4
• react-native-magic-move version: v0.5.0

Provide the code

import React, { Component } from 'react';
import { Platform, StyleSheet, Text, View, Button } from 'react-native';
import * as MagicMove from 'react-native-magic-move';

export default class App extends Component {
  state = { scene: 1 };
  render() {
    return (
      <View style={{
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#F5FCFF',
      }}>
        <Button onPress={() => this.setState({ scene: this.state.scene + 1 })} title={'next'}></Button>
        <MagicMove.Provider>
          {this.state.scene === 1 && <MagicMove.Scene>
            <MagicMove.View id="logo" style={{
              width: 100,
              height: 100,
              backgroundColor: "green",
              borderRadius: 50
            }} />
          </MagicMove.Scene>}
          {this.state.scene === 2 && <MagicMove.Scene>
            <MagicMove.View id="logo" style={{
              width: 300,
              height: 300,
              backgroundColor: "blue",
              borderRadius: 10
            }} />
          </MagicMove.Scene>}
          {this.state.scene === 3 && <MagicMove.Scene>
            <MagicMove.View id="logo" style={{
              width: 200,
              height: 200,
              backgroundColor: "red",
              borderRadius: 50
            }} />
          </MagicMove.Scene>}
        </MagicMove.Provider>
      </View>
    );
  }
}

[IjzerenHein]

Hi. Yes that's definitely possible. Please take a look at the 'explorer' code in examples/native/src. It showcases a kind of tab-bar that switches between scenes. In that case, all scenes are always mounted and are made invisible when not active. Whenever a scene is active, set its active prop to true and this will trigger the magic move animation.

There is however one issue with this that needs to be resolved. As you can maybe see in the explorer demo, when switching tabs, the target component is sometimes briefly visible (maybe for 1 frame). This happens because RNMM needs a little bit of time to make that component invisible when starting a transition animation. I want to get that sorted out within the next couple of weeks.

cheers