The Menu does not open

[Malkom]

Hi,

I'm working on an app build last year by others devs.

Here my package.json :

    "@firebase/component": "~0.1.12",
    "@react-native-community/blur": "~3.3.1",
    "@react-native-community/picker": "~1.0.0",
    "add-subtract-date": "~1.0.14",
    "braces": "~2.3.2",
    "expo": "~34.0.4",
    "expo-camera": "~6.0.0",
    "expo-cli": "~3.20.1",
    "expo-facebook": "~6.0.0",
    "expo-google-app-auth": "~8.1.0",
    "expo-google-sign-in": "~6.0.0",
    "expo-image-manipulator": "~6.0.0",
    "expo-image-picker": "~6.0.0",
    "expo-linear-gradient": "~6.0.0",
    "expo-location": "~6.0.0",
    "expokit": "~34.0.2",
    "firebase": "~6.6.2",
    "firebase-tools": "~7.5.0",
    "https-proxy-agent": "~3.0.0",
    "native-base": "~2.13.8",
    "nativescript": "~6.5.0",
    "npm": "~6.14.4",
    "quick-picker": "~1.5.0",
    "react": "16.8.3",
    "react-dom": "~16.9.0",
    "react-geocode": "~0.1.2",
    "react-headroom": "~2.2.8",
    "react-native": "https://github.com/expo/react-native/archive/sdk-34.0.2.tar.gz",
    "react-native-24h-timepicker": "~1.0.0",
    "react-native-checkbox-form": "~1.1.5",
    "react-native-deprecated-custom-components": "~0.1.2",
    "react-native-gesture-handler": "~1.3.0",
    "react-native-linear-gradient": "~2.5.6",
    "react-native-map-clustering": "~2.0.2",
    "react-native-maps": "~0.24.2",
    "react-native-navigation": "~2.27.9",
    "react-native-ratings": "~6.5.0",
    "react-native-slider": "~0.11.0",
    "react-native-swipe-gestures": "~1.0.4",
    "react-native-unimodules": "~0.5.2",
    "react-native-web": "~0.11.7",
    "react-navigation": "~3.13.0",
    "react-redux": "~7.1.1",
    "redux": "~4.0.4",
    "request": "~2.88.0"

Unfortunately, the quickpicker menus do not open.

Here is an example of the code:

_opener = () => {
        var sport = [];
        if (this.state.activeZone) {
            for (let i = 0; i < this.props.Sports.length; i++) {
                if (this.props.Sports[i].team) {
                    sport.push(this.props.Sports[i].sport);
                }
            }
        } else {
            for (let i = 0; i < this.props.Sports.length; i++) {
                sport.push(this.props.Sports[i].sport);
            }
        }
        QuickPicker.open({
            pickerType: "normal",
            items: sport,
            selectedValue : this.state.sport,
            onValueChange: (value) => this._update_selection(value)
        });
    }

Any idea ?

[Valiums]

hey @Malkom !

just to be sure, did you also at the top level of your app, used my picker this way?

You must also do that in order to get the "menu" to open

import React, { Component } from 'react';
import { View } from 'react-native';
import QuickPicker from 'quick-picker';

class App extends Component {
  render() {
    return (
      <View style={styles.fill}>
        <StatusBar />
        <SideMenu>
          <OtherFancyStuff />
        </SideMenu>
        <QuickPicker />
      </View>
    );
  }
}

[Valiums]

@Malkom oh also I just realized, there seems to be some web packages in your packages.json? Is this also a web project? This picker will only work on mobile react native app and currently has no web support * :)

Also make sure to use 2.x.x if your using RN > 60

[Malkom]

Hey @Valiums

Thanks for your answer ;)

I'm using RN 59 and this is a mobile react native app, build with expo.

Do you think that uninstall react-native-web fix the problem ?

Of course, I import Quickpicker on the top of my page ;)

And for the render view, I have this type of code :

<TouchableOpacity style={{marginTop: 20, alignSelf: 'center', borderWidth: 1, borderRadius: 15, height: 30, width: (screenWidth / 1.2 <= 400 ? screenWidth / 1.6 : 300 ), alignItems: 'center', justifyContent: 'center'}} onPress={() => this._opener()}>
    <Text style={{fontSize: 15, fontStyle: 'italic', color: (this.state.sport == "Sport" ? '#A4A4A4' : 'black')}}>{this.state.sport}</Text>
</TouchableOpacity>

Seems to be correct ?

[Valiums]

@Malkom sorry, what I meant to say is that you need to make sure that somewhere very high in your project (lets say in your App.ts/App.js) you render this component <QuickPicker /> afterward you should be able to call QuickPicker.open(..) anywhere deeper into your project and the menu should then open.

And nah I don't think having react-native-web will cause any issue :)

And yup that seems to be okay!

[Malkom]

Hi @Valiums,

So you have right a <QuickPicker /> is missing from the code !! Everything works fine now ;)

Thank you !!

[Valiums]

@Malkom no problem good luck with the project :)