prscX / react-native-popover-menu

React Native: Native Popover Menu
Apache License 2.0
483 stars 54 forks source link

[Android] com.facebook.react.views.text.ReactTextView cannot be cast to android.view.ViewGroup #20

Closed RomaricDel closed 6 years ago

RomaricDel commented 6 years ago

Hi, I'm getting an error while trying to display the menu on android. com.facebook.react.views.text.ReactTextView cannot be cast to android.view.ViewGroup

I'm running the app on Android 8.0. react-native 0.56.0 react 16.4.1

My build.gradle is

allprojects {
    repositories {
        mavenLocal()
        jcenter()
        maven {
            // All of React Native (JS, Obj-C sources, Android binaries) is installed from npm
            url "$rootDir/../node_modules/react-native/android"
        }
        maven {
            url 'https://maven.google.com/'
            name 'Google'
        }
    }
}

subprojects {
    afterEvaluate {project ->
        if (project.hasProperty("android")) {
            android {
                compileSdkVersion 26
                buildToolsVersion '26.0.3'
            }
        }
    }
}

ext {
    buildToolsVersion = "26.0.3"
    minSdkVersion = 19
    compileSdkVersion = 26
    targetSdkVersion = 26
    supportLibVersion = "26.1.0"
}

Here is a look at my code

  displayMenu(touchable) {
    let menus = [
      {
        label: "Editing",
        menus: [
          { label: "Copy"},
          { label: "Paste"}
        ]
      },
      {
        label: "Other",
        menus: [
          { label: "Share"}
        ]
      },
      {
        label: "",
        menus: [
          { label: "Share me please" }
        ]
      }
    ]

    RNPopover.Show(touchable, {
      title: "Hello",
      menus: menus,
    });
  }

  render() {
    const { touchable } = this.props;
    return (
      <Button onPress={() => {this.displayMenu(touchable)}} title="Menu"/>
    );
  }

Any leads ?

[EDIT] I also try using sdk 27 in my build.gradle, still not working.

RomaricDel commented 6 years ago

I found the problem. On android I was using a TouchableNativeFeedback element as ref for the popover menu, as follow:

<TouchableNativeFeedback
      style={style}
      onPress={onPress}
      background={TouchableNativeFeedback.SelectableBackground()}
      ref={this.setRef}
>
      <Icon size={size || 35} name={icon} color={color} />
</TouchableNativeFeedback>

On IOS I have no problem, but i'm using a TouchableOpacity element

<TouchableOpacity
  style={style}
  onPress={onPress}
  ref={this.setRef}
>
  <Icon size={size || 35} name={icon} color={color} />
</TouchableOpacity>

If I replace TouchableNativeFeedback by TouchableOpacity on Android the popover works !

So in conclusion TouchableOpacity has a ref compatible with the java ViewGroup class, but ref of a TouchableNativeFeedback is an instance of ReactTextView so cannot be cast to a ViewGroup (see RNPopoverMenuModule.java:69)

For now I will just also use a TouchableOpacity on Android, but I might be nice to find a way of using the popover with TouchableNativeFeedback.

prscX commented 6 years ago

Thanks @RomaricDel for raising the issue.

I have fixed the root cause and pushed a release with V0.0.18. Can you please install latest version and verify the same. Let me know incase you still face the same issue.

Thanks </ Pranav >