react-navigation from react-community is triggering transition with delay - react-native

Question

Below is the c/p of the code I'm using.
I'm using react-community/react-navigation and redux store to dispatch actions. One of actions is navigate from NavigationActions which is part of the react-navigations package.
As you can see, I've defined a custom transition (simple fade) from one
screen to another.
The problem is that transition starts with a little bit of delay. Even if I specify transitionSpec in the TransitionConfiguration with Animated.timing and duration of 100ms it makes no difference.
Also, when navigating back using back action from NavigationActions it needs about half a second to a second for the scene to become responsive.
Please see attached gif.
Note #1 - same is happening on a real iPhone6,7.
Note #2 - same think if I remove transitionConfig: TransitionConfiguration
It works, but it doesn't feel anything that you can experience in native apps.
// Transition definition
const FadeTransition = (index, position) => {
const inputRange = [index - 1, index, index + 1];
const opacity = position.interpolate({
inputRange,
outputRange: [0, 1, 1],
});
return {
opacity
};
};
// Transition configurator
const TransitionConfiguration = () => {
return {
screenInterpolator: (sceneProps) => {
const {position, scene} = sceneProps;
const {index, route} = scene;
return FadeTransition(index, position);
}
}
};
// Active scenes
const appScenes = {
Demo: {
screen: Demo
},
Foo: {
screen: Foo
}
};
// Basic stack navigator
import { StackNavigator } from 'react-navigation';
const AppNavigator = StackNavigator(appScenes, {
headerMode: 'none',
transitionConfig: TransitionConfiguration
});
import { NavigationActions } from 'react-navigation';
this.props.navigate({
routeName: 'Foo',
params: {
transition: 'fade'
}
})
]1
I would appreciate any advice given.

Answer 1

const MyTransitionSpec = ({
duration: 200,
});
// Transition configurator
const TransitionConfiguration = () => {
return {
transitionSpec: MyTransitionSpec,
screenInterpolator: (sceneProps) => {
const {position, scene} = sceneProps;
const {index, route} = scene;
return FadeTransition(index, position);
}
}
};