PopoverTouchable undefined

[Ashes-wzc]

[doomsower]

I need to see your jsx code where you render PopoverTouchable, otherwise I can't help

[Ashes-wzc]

also , when I try to use Popover alone , i can't see it on my device

[doomsower]

Are you sure that your imports for Popover, PopoverTouchable and Button are correct? Seems that PopoverTouchable cannot render button or popover. Maybe you're using wrong import style for button and importing module instead of component or something like it.

When you're using Popover alone, you need to set visible and fromRect props manually. Otherwise nothing is rendered. Check out PopoverTouchable source code.

[GingerBear]

I got the same issue, I think the problem is <React.Fragment> is not supported

[doomsower]

I got the same issue, I think the problem is <React.Fragment> is not supported

In this case you have to update your react and react-native versions, or downgrade the version of this module.

[Herryjoeson]

when i use this plugins in android, is ok, but i use this plugins in ios , i get the same problem

[Herryjoeson]

first, i import this plugins

next i use

only just ios appear this problem,machine iphone 5s

[doomsower]

@Herryjoeson , what versions of react, react-native, react-native-modal-popover do you have installed in your project?

[Herryjoeson]

this is my versions of react,react-native and react-native-modal-popover

[Herryjoeson]

@doomsower Do I need to update the version？

[doomsower]

Please update to 0.0.6

[Herryjoeson]

ok! i will try

[Herryjoeson]

i update the version to 0.0.6, It has not been solved this problem

[doomsower]

Ok. So the error message in the first post is pretty definitive. PopoverTouchable calls its render method, somewhere inside this method it tries to render component, but instead of a component it receives some gibberish and fails to render it. Now, PopoverTouchable is very simple and can fail in 3 places:

• React.Fragment: in case you use version of react <16.2 it will be undefined and render method should fail with exactly the same message as in the first post (in theory, haven't tried myself)
• React.cloneElement(children[0] - cloning non-component will cause the same error as in first post
• React.cloneElement(children[1] - second child must be popover, a default export from react-native-modal-popover. Error might pop in here if you use wrong import, e.g. import { Popover, PopoverTouchable } from './popover';. Your import is correct.

If the error is deeper in first or second child, the error message should complain about some deeper component's render method (in theory)

Btw, I checked the error message myself, and mine was a bit different from the one @Ashes-wzc got.
It also had a line about mixed-up imports. It was added in facebook/react#11505 , so he uses react <16.1.1 and therefore gets this error message because fragments were added in 16.2.

Your imports and stuff seems to be ok. This is especially strange because it works on android, because it you don't use nay platform-specific components at top level. I can only think of few reasons:

• Screenshot of npm does not necessary match real content of npm-modules. Maybe you have something else installed, in fact. yarn list react react-native react-native-modal-popover should tell what you really have. Also maybe you red screen is a bit different OPs one. Would like to see it too.
• Cache issues. These npm scripts should ensure you have none:

  "rc-start": "yarn start --reset-cache",
  "fresh-install": "rm -rf $TMPDIR/react-* && watchman watch-del-all && rm -rf ios/build/ModuleCache/* && rm -rf node_modules/ && rm -rf android/build && rm -rf android/app/build && rm -f yarn.lock && yarn cache clean && yarn",
  "fresh-start": "yarn run fresh-install && yarn run rc-start",

If this doesn't help, then I have no ideas and would like to get some minimal reproduction

[ggpw]

I have the same problems and have no idea how to resolve this. I use it on storybook.
here is my code, using example and modified a little

import React, {Component} from "react";
import { Dimensions, Platform, StyleSheet, StatusBar, Text, View } from 'react-native';
import Popover, { PopoverTouchable } from 'react-native-modal-popover';
import Button from 'native-base';

export default class Tooltip extends Component{

    constructor(props) {
        super(props);
        this.state = this.getState(Dimensions.get('window'));
      }
    
      componentDidMount() {
        Dimensions.addEventListener('change', this.onDimensionsChange);
      }
    
      componentWillUnmount() {
        Dimensions.removeEventListener('change', this.onDimensionsChange);
      }
    
      getState = ({ width, height }) => {
        const [dw, dh] = width > height ? [20, 40] : [40, 20];
        return {
          width: (width - dw) / 3,
          height: (height - dh) / 3,
        };
      }
      
      onDimensionsChange = ({ window }) => {
        this.setState(this.getState(window));
      }
    
      render() {
        const { width, height } = this.state;
        const { icon, text, alignItems, justifyContent, popoverStyles } = this.props;
        return (
        <View style={styles.app}>
            <PopoverTouchable onPopoverDisplayed={() => console.log('Popover displayed!')}>
              <Button onPress={() => console.log('I don\'t work')}>
                <Text>O</Text>
              </Button>
              <Popover
                contentStyle={styles.content}
                arrowStyle={styles.arrow}
                backgroundStyle={styles.background}
              >
                <Text>Hello from inside popover!</Text>
              </Popover>
            </PopoverTouchable>
          </View>
        );
    }

};

const styles = StyleSheet.create({
    app: {
      ...StyleSheet.absoluteFillObject,
      alignItems: 'center',
      justifyContent: 'center',
      backgroundColor: '#c2ffd2',
    },
    content: {
      padding: 16,
      backgroundColor: 'pink',
      borderRadius: 8,
    },
    arrow: {
      borderTopColor: 'pink',
    },
    background: {
      backgroundColor: 'rgba(0, 0, 255, 0.5)'
    },
  });