Navigatorでネイティブ風なモーダルアニメーションが使いたい

Navigator.SceneConfigs.FloatFromBottom だと、元いたviewの縮小アニメーションがついてくる。
あくまでもiOSネイティブのようなモーダルアニメーションが使いたかったので、SceneConfigを作成してみた。

const floatFromBottomLikeNative = {
  ...Navigator.SceneConfigs.FloatFromBottom,
  defaultTransitionVelocity: 8,
  animationInterpolators: {
    into: buildStyleInterpolator({
      opacity: {
        value: 1.0,
        type: 'constant'
      },
      transformTranslate: {
        from: { x: 0, y: Dimensions.get('window').height, z: 0 },
        to: { x: 0, y: 0, z: 0 },
        min: 0,
        max: 1,
        type: 'linear',
        extrapolate: true,
        round: PixelRatio.get()
      }
    }),
    out: buildStyleInterpolator({
      opacity: {
        value: 1.0,
        type: 'constant'
      }
    })
  }
};

ついでにアニメーション無しのsceneConfigも欲しかったので作成してみた。

const noAnimation = {
  ...Navigator.SceneConfigs.PushFromRight,
  defaultTransitionVelocity: 100,
  gestures: null,
  animationInterpolators: {
    into: buildStyleInterpolator({
      opacity: {
        value: 1.0,
        type: 'constant'
      }
    }),
    out: buildStyleInterpolator({
      opacity: {
        value: 1.0,
        type: 'constant'
      }
    })
  }
};

まとめると

custom-scene-config.js

import { Navigator } from 'react-native';
import Dimensions from 'Dimensions';
import PixelRatio from 'PixelRatio';
import buildStyleInterpolator from 'buildStyleInterpolator';

const noAnimation = {
  ...Navigator.SceneConfigs.PushFromRight,
  defaultTransitionVelocity: 100,
  gestures: null,
  animationInterpolators: {
    into: buildStyleInterpolator({
      opacity: {
        value: 1.0,
        type: 'constant'
      }
    }),
    out: buildStyleInterpolator({
      opacity: {
        value: 1.0,
        type: 'constant'
      }
    })
  }
};

const floatFromBottomLikeNative = {
  ...Navigator.SceneConfigs.FloatFromBottom,
  defaultTransitionVelocity: 8,
  animationInterpolators: {
    into: buildStyleInterpolator({
      opacity: {
        value: 1.0,
        type: 'constant'
      },
      transformTranslate: {
        from: { x: 0, y: Dimensions.get('window').height, z: 0 },
        to: { x: 0, y: 0, z: 0 },
        min: 0,
        max: 1,
        type: 'linear',
        extrapolate: true,
        round: PixelRatio.get()
      },
    }),
    out: buildStyleInterpolator({
      opacity: {
        value: 1.0,
        type: 'constant'
      }
    })
  }
};

export const CustomSceneConfigs = {
  NoAnimation: noAnimation,
  FloatFromBottomLikeNative: floatFromBottomLikeNative
};

後は適当にimportして Navigator.SceneConfigs.FloatFromBottom 等を使っている箇所で CustomSceneConfigs.FloatFromBottomLikeNative を代わりに使えばok。