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 ( <View style={styles.container}> <View style={{flex:1}}> <TouchableOpacity style={{flex:1}} onPress={() => drawer.current.open()}> <Text>OPEN DRAWER</Text> </TouchableOpacity> </View> </View> ); } }

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={<LeftMenu drawer={drawer} />} {...defaultScalingDrawerConfig} onClose={() => console.log('close')} onOpen={() => console.log('open')} > <AppStack ref={navigatorRef => { NavigationService.setTopLevelNavigator(navigatorRef); }} /> </ScalingDrawer> ); } }

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.