react-navigation: disable modal animation - react-native

Question

Is it possible to disable the modal animation of React Navigation?
class HomeScreen extends React.Component {
static navigationOptions = ({ navigation }) => {
const params = navigation.state.params || {};
return {
headerLeft: (
<Button
onPress={() => navigation.navigate('MyModal')}
title="Info"
color="#fff"
/>
),
/* the rest of this config is unchanged */
};
};
/* render function, etc */
}
class ModalScreen extends React.Component {
render() {
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Text style={{ fontSize: 30 }}>This is a modal!</Text>
<Button
onPress={() => this.props.navigation.goBack()}
title="Dismiss"
/>
</View>
);
}
}
const MainStack = createStackNavigator(
{
Home: {
screen: HomeScreen,
},
Details: {
screen: DetailsScreen,
},
},
{
/* Same configuration as before */
}
);
const RootStack = createStackNavigator(
{
Main: {
screen: MainStack,
},
MyModal: {
screen: ModalScreen,
},
},
{
mode: 'modal',
headerMode: 'none',
}
);
Examples are obtained from React Native official documentation: https://reactnavigation.org/docs/en/modal.html

Answer 1

Solution
Use transitionSpec in transitionConfig for custom screen transition. And make transition duration to Zero.
Official
Example (Not tested)
const ModalNavigator = createStackNavigator(
{
Main: { screen: Main },
Login: { screen: Login },
},
{
headerMode: 'none',
mode: 'modal',
defaultNavigationOptions: {
gesturesEnabled: false,
},
transitionConfig: () => ({
transitionSpec: {
duration: 0,
},
})
...

Answer 2

It's not quite what you want, but you can use the built in Modal component rendered the screen instead. The benefit of doing this is that the Modal component has an animationtype prop that you can set to "none" to get an animation-less modal.