Skip to content

FluidNavigator.md

Latest commit

 

History

History
55 lines (42 loc) · 1.53 KB

FluidNavigator.md

File metadata and controls

55 lines (42 loc) · 1.53 KB

FluidNavigator API

The Fluid Navigator supports almost the same API as the StackNavigator in React Navigation.

Configuring screens

To set up and configure the different screens available in the navigator, use the regular route config API from StackNavigator:

const Navigator = FluidNavigator({
  home: { screen: HomeScreen },
  register: { screen: RegisterScreen },
  finish: { screen: FinishScreen },
});

Where each screen is a component to render.

Configuring Transitions

You can configure transitions for the navigator similar to StackNavigator.

const transitionConfig = {
  duration: 1500,
  timing: Animated.timing,
  easing: Easing.easing
};

const Navigator = FluidNavigator({ Screens }, { transitionConfig });

However, a custom transition (using screenInterpolator) will not work, as Fluid Navigator uses its own transition to the shared element and appear/disappear transitions.

Gesture Support

FluidNavigator supports gestures. To configure gesture support, add defaultNavigationOptions to the navigator or navigationOptions to individual screens:

const Navigator = FluidNavigator({
  screen1: { screen: Screen1 },
  screen2: { screen: Screen2, navigationOptions: { gesturesEnabled: false } },
  screen3: { screen: Screen3 },
}, {
  defaultNavigationOptions: { gesturesEnabled: true },
});

To change the direction (default is vertical), set the mode to card | modal:

const Navigator = FluidNavigator({
  ...
}, {
  mode: 'card' // Horizontal gestures
});