Perspective Animation Drawer with React Native? - react-native

Question

I want to create perspective animation like following -
I am using react-native-scaling-drawer & have currently done -
My App.js is the root file which is as follows -
App.js
const AppNavigator = StackNavigator(
{
walkthroughStack: {
screen: WalkthroughStack,
},
drawerStack: {
screen: DrawerStack,
},
},
{
initialRouteName: 'walkthroughStack',
headerMode: 'none',
},
);
export default AppNavigator;
My Walkthrough.js file is the file which shows the Walkthrough of the app & is as follows -
WalkthroughStack.js
const WalkthroughStack = StackNavigator(
{
Walkthrough: {
screen: Walkthrough,
},
},
{
headerMode: 'none',
navigationOptions: {
headerVisible: false,
},
initialRouteName: 'Walkthrough',
},
);
export default WalkthroughStack;
My DrawerStack.js is the file which has the animation shown in the repo -
DrawerStack.js
let defaultScalingDrawerConfig = {
scalingFactor: 0.6,
minimizeFactor: 0.6,
swipeOffset: 20
};
class CustomDrawerView extends Component {
constructor(props) {
super(props);
}
componentWillReceiveProps(nextProps) {
/** Active Drawer Swipe **/
if (nextProps.navigation.state.index === 0)
this._drawer.blockSwipeAbleDrawer(false);
if (nextProps.navigation.state.index === 0 && this.props.navigation.state.index === 0) {
this._drawer.blockSwipeAbleDrawer(false);
this._drawer.close();
}
/** Block Drawer Swipe **/
if (nextProps.navigation.state.index > 0) {
this._drawer.blockSwipeAbleDrawer(true);
}
}
setDynamicDrawerValue = (type, value) => {
defaultScalingDrawerConfig[type] = value;
/** forceUpdate show drawer dynamic scaling example **/
this.forceUpdate();
};
render() {
const {routes, index} = this.props.navigation.state;
const ActiveScreen = this.props.router.getComponentForState(this.props.navigation.state);
return (
<ScalingDrawer
ref={ref => this._drawer = ref}
content={<LeftMenu navigation={this.props.navigation}/>}
{...defaultScalingDrawerConfig}
onClose={() => console.log('close')}
onOpen={() => console.log('open')}
>
<ActiveScreen
navigation={addNavigationHelpers({
...this.props.navigation,
state: routes[index],
openDrawer: () => this._drawer.open(),
})}
dynamicDrawerValue={ (type, val) => this.setDynamicDrawerValue(type, val) }
/>
</ScalingDrawer>
)
}
}
const AppNavigator = StackRouter({
{
Main: {
screen: Main,
},
Walkthrough: {
screen: Walkthrough,
},
Typography: {
screen: Typography,
},
},
{
headerMode: 'none',
gesturesEnabled: false,
navigationOptions: {
headerVisible: false,
},
initialRouteName: 'Main',
},
);
const CustomDrawer = createNavigationContainer(createNavigator(AppNavigator)(CustomDrawerView));
export default CustomDrawer;
But this isn't working as shown in the README of the repo. How to do it ?

Answer 1

Example given works with React-Navigation's v1. Make sure you are using v1 for react-navigation