Problems with navigator fade in gesture

[onchainguy-btc]

I am using the side menu in combination with Navigator. Everything works fine with gesturesEnabled={false} for this view but only the "swipe to go back" gesture is making trouble. During the swipe back animation the back view translates from an opacity of 0 to an opacity of 1. The thing is that in the background of the back view I can see my side menu having an opacity of 1. Did anyone of you guys ever had the same issue and has a clue how to solve this? What I basically want is the side menu not to be visible during the swipe animation.

[Neodern]

I've the same issue. ;(

[onchainguy-btc]

@Neodern This workaround works for me (but you loose the nice transparency effect 👎 )

Build up a navigator scene config like this:

import { Dimensions, Navigator, PixelRatio } from 'react-native'
import buildStyleInterpolator from 'react-native/Libraries/Utilities/buildStyleInterpolator'

const BaseNavigatorConfig = Navigator.SceneConfigs.FloatFromRight

var FadeToTheLeft = {
  // Rotate *requires* you to break out each individual component of
  // rotation (x, y, z, w)
  transformTranslate: {
    from: {x: 0, y: 0, z: 0},
    to: {x: -Math.round(Dimensions.get('window').width * 0.3), y: 0, z: 0},
    min: 0,
    max: 1,
    type: 'linear',
    extrapolate: true,
    round: PixelRatio.get()
  },
  transformScale: {
    from: {x: 1, y: 1, z: 1},
    to: {x: 0.95, y: 1, z: 1},
    min: 0,
    max: 1,
    type: 'linear',
    extrapolate: true
  },
  opacity: {
    from: 1,
    to: 1,
    min: 0,
    max: 1,
    type: 'linear',
    extrapolate: false,
    round: 100
  },
  translateX: {
    from: 0,
    to: -Math.round(Dimensions.get('window').width * 0.3),
    min: 0,
    max: 1,
    type: 'linear',
    extrapolate: true,
    round: PixelRatio.get()
  },
  scaleX: {
    from: 1,
    to: 0.95,
    min: 0,
    max: 1,
    type: 'linear',
    extrapolate: true
  },
  scaleY: {
    from: 1,
    to: 0.95,
    min: 0,
    max: 1,
    type: 'linear',
    extrapolate: true
  }
}

var FromTheRight = {
  opacity: {
    value: 1.0,
    type: 'constant',
  },

  transformTranslate: {
    from: {x: Dimensions.get('window').width, y: 0, z: 0},
    to: {x: 0, y: 0, z: 0},
    min: 0,
    max: 1,
    type: 'linear',
    extrapolate: true,
    round: PixelRatio.get()
  },

  translateX: {
    from: Dimensions.get('window').width,
    to: 0,
    min: 0,
    max: 1,
    type: 'linear',
    extrapolate: true,
    round: PixelRatio.get()
  },

  scaleX: {
    value: 1,
    type: 'constant'
  },
  scaleY: {
    value: 1,
    type: 'constant'
  }
}

const CustomLeftToRightGesture = Object.assign({}, BaseNavigatorConfig.gestures.pop, {
  // Make it so we can drag anywhere on the screen
  edgeHitWidth: Dimensions.get('window').width * 0.8
})

export default CustomSceneConfig = Object.assign({}, BaseNavigatorConfig, {
  gestures: {
    pop: CustomLeftToRightGesture
  },

  animationInterpolators: {
    into: buildStyleInterpolator(FromTheRight),
    out: buildStyleInterpolator(FadeToTheLeft)
  }
})

and then in your component where you embed the navigator:

import CustomNavigatorSceneConfig from '../navigator/CustomNavigatorSceneConfigs'

class RootComponent extends Component {
  _configureScene() {
    return CustomNavigatorSceneConfig
  }

  // ...

  <Navigator
          configureScene={this._configureScene}
          // ...

[Kureev]

Well, we can try to make a side menu transparent when gestures are disabled. wdyt?
cc @grabbou

[grabbou]

I think I have a nice workaround using style only, so will give it a go in examples. But yeah, if that does not work we will have to approach it more programmatically ;)

[MossP]

I'm interested @grabbou :)

[hehex9]

I have the same problem.
hope an official solution 😃

[train860]

same problem

[artem-russkikh]

Same problem, only on Android.
It possible to check OS, so on iOS you can preserve nice transparency effect :)

import { Platform } from 'react-native';
// ...
opacity: {
    from: 1,
    to: Platform.OS === 'ios' ? 0.3 : 1,
    min: 0,
    max: 1,
    type: 'linear',
    extrapolate: false,
    round: 100
  },
// ...

[Naoto-Ida]

I've got this too.

[dozoisch]

I'd love to have an official solution for that too! :) Something like having the whole menu hidden when the offset is 0, or at least having a callback on start/end allow us to manually show hide it.