Not Working with react navigation 3

[rahiljain09]

I am trying to use this drawer inside my application but i am using react-navigation version 3 and your drawer is no longer supported on v3

[DovletAmanov]

I think it is not related to react-navigation v3. I am using with v3 too, but I am not facing any problem.

[jainrahil]

This is what I'm getting while clicked on open drawer text

[jainrahil]

I think it is not related to react-navigation v3. I am using with v3 too, but I am not facing any problem.

could you please check the screenshot shared

[DovletAmanov]

Unfortunately I do not remember error like that and this screenshot is not enough to understand the error. Sharing your code would be better. Btw, I followed examples supplied in repo and used it similar to this code below.

import React, { Component } from 'react';
import { TouchableOpacity, View, Text } from 'react-native';
import ScalingDrawer from 'react-native-scaling-drawer';

let defaultScalingDrawerConfig = {
  scalingFactor: 0.6,
  minimizeFactor: 0.35,
  swipeOffset: 20
};

export default class Example extends Component {

  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);
    }
  }

  _openDrawer = () => {
    this._drawer.open()
   }

  render() {
    return (
      <ScalingDrawer
          ref={ref => this._drawer = ref}
          content={<YourCustomMenuPage />}
          {...defaultScalingDrawerConfig}
          position="right"
          frontStyle={{
            flex: 1
          }}
          >
           <View style={{ flex:1, alignContent: 'center', justifyContent: 'center' }}>
                 <TouchableOpacity onPress={() => this._openDrawer()} >
                      <Text>Open Drawer</Text>
                 </TouchableOpacity>
           </View>
       </ScalingDrawer>
    )
  }
}

[jainrahil]

import React, { Component } from 'react';
import { View, StyleSheet, TouchableOpacity, Text } from 'react-native';

import { drawer } from "../App";

class Home extends Component {
render() {
return (


<TouchableOpacity style={{flex:1}} onPress={() => drawer.current.open()}>
OPEN DRAWER



);
}
}

export default Home;

const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: 'red'
}
});

[jainrahil]

import React, { Component, createRef } from 'react';
import { createStackNavigator,createAppContainer } from 'react-navigation';
import ScalingDrawer from 'react-native-scaling-drawer';
import NavigationService from './NavigationService';
import Home from './screens/Home';import Profile from './screens/Profile';import LeftMenu from './LeftMenu';

const AppStack = createStackNavigator({
Home: {
screen: Home
},
Profile: {
screen: Profile
}
});

export const drawer = createRef();

const defaultScalingDrawerConfig = {
scalingFactor: 0.7,
minimizeFactor: 0.4,
swipeOffset: 20
};

class AppNavigation extends Component {
render() {
return (
<ScalingDrawer
ref={drawer}
content={}
{...defaultScalingDrawerConfig}
onClose={() => console.log('close')}
onOpen={() => console.log('open')}
>
<AppStack
ref={navigatorRef => {
NavigationService.setTopLevelNavigator(navigatorRef);
}}
/>

);
}
}

export default createAppContainer(AppStack);

[jainrahil]

Unfortunately I do not remember error like that and this screenshot is not enough to understand the error. Sharing your code would be better. Btw, I followed examples supplied in repo and used it similar to this code below.

import React, { Component } from 'react';
import { TouchableOpacity, View, Text } from 'react-native';
import ScalingDrawer from 'react-native-scaling-drawer';

let defaultScalingDrawerConfig = {
  scalingFactor: 0.6,
  minimizeFactor: 0.35,
  swipeOffset: 20
};

export default class Example extends Component {

  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);
    }
  }

  _openDrawer = () => {
    this._drawer.open()
   }

  render() {
    return (
      <ScalingDrawer
          ref={ref => this._drawer = ref}
          content={<YourCustomMenuPage />}
          {...defaultScalingDrawerConfig}
          position="right"
          frontStyle={{
            flex: 1
          }}
          >
           <View style={{ flex:1, alignContent: 'center', justifyContent: 'center' }}>
                 <TouchableOpacity onPress={() => this._openDrawer()} >
                      <Text>Open Drawer</Text>
                 </TouchableOpacity>
           </View>
       </ScalingDrawer>
    )
  }
}

Could you please check where I'm going wrong

[ko-devHong]

Unfortunately I do not remember error like that and this screenshot is not enough to understand the error. Sharing your code would be better. Btw, I followed examples supplied in repo and used it similar to this code below.

import React, { Component } from 'react';
import { TouchableOpacity, View, Text } from 'react-native';
import ScalingDrawer from 'react-native-scaling-drawer';

let defaultScalingDrawerConfig = {
  scalingFactor: 0.6,
  minimizeFactor: 0.35,
  swipeOffset: 20
};

export default class Example extends Component {

  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);
    }
  }

  _openDrawer = () => {
    this._drawer.open()
   }

  render() {
    return (
      <ScalingDrawer
          ref={ref => this._drawer = ref}
          content={<YourCustomMenuPage />}
          {...defaultScalingDrawerConfig}
          position="right"
          frontStyle={{
            flex: 1
          }}
          >
           <View style={{ flex:1, alignContent: 'center', justifyContent: 'center' }}>
                 <TouchableOpacity onPress={() => this._openDrawer()} >
                      <Text>Open Drawer</Text>
                 </TouchableOpacity>
           </View>
       </ScalingDrawer>
    )
  }
}

Could you please check where I'm going wrong

Your settings are good, but there is no page data you want to show. So the price is null.