yarikpwnzer / react-native-survey-monkey

React Native lib for Survey Monkey
22 stars 17 forks source link

Survey not showing up #10

Closed lguardado closed 3 years ago

lguardado commented 3 years ago

Hi, I'm trying a very simple example and the survey just doesn't open in iOS nor android I'm logging the ref.current and the object seems to be fine any ideas? I'm using "react-native": "0.62.2" and iOS 14.4 (iPhone 11 simulator / android simulator pixel 4 API30) btw.

Also for opening I'm just using a hash, no extra params

Thanks!

yarikpwnzer commented 3 years ago

Hi, @lguardado, can You post Your code here?

lguardado commented 3 years ago

Hi @yarikpwnzer, thank you! here is my code. (I was trying within another component and my last try was when navigating to this component just in case it was some other element conflicting with the survey).

Here's my code.

import { Text, TouchableOpacity, View } from 'react-native';
import SurveyMonkey from 'react-native-survey-monkey';

const SurveyMonkeyScreen = () => {
  // I tried createRef as well just in case
  const surveyMonkeyRef = useRef();

  const initSurvey = () => {
    surveyMonkeyRef.current.showSurveyMonkey('QC55B5M');
  }
  return (
    <>
      <TouchableOpacity onPress={initSurvey}>
        <Text>TAKE SURVEY</Text>
      </TouchableOpacity>
      {/* I`ve also tried without this view */}
      <View style={{ flex: 1 }}>
        <SurveyMonkey ref={surveyMonkeyRef} />
      </View>
    </>
  );
};

export default SurveyMonkeyScreen;

As I said before, when inspecting, the surveyMonkeyRef.current object is correct, it has a lot of content and showSurveyMonkey is there.

yarikpwnzer commented 3 years ago

@lguardado sorry for long response, can You please try this code in PureComponent or Component. Your code seems OK, also object is there and function is visible.

lguardado commented 3 years ago

@yarikpwnzer no worries! thanks for the help, I've tried a component exactly as the one in the example and it didn't work either.... here's the code in case there is something else I could be missing.

import React, { PureComponent, createRef } from 'react';
import SurveyMonkey from 'react-native-survey-monkey';
import {
  View,
  Text,
  TouchableOpacity,
  StyleSheet
} from 'react-native';

const styles = StyleSheet.create({
  container: { 
    flex: 1,
  },
})

export default class Survey extends PureComponent {
  constructor(props) {
    super(props);

    this.onTouch = this.onTouch.bind(this);
    this.surveyMonkeyRef = createRef();
  }

  onTouch() {
    this.surveyMonkeyRef.current.showSurveyMonkey('QC55B5M');
  }

  render() {
    return (
      <View style={styles.container}>
        <SurveyMonkey ref={ this.surveyMonkeyRef } />
        <TouchableOpacity
          style={ styles.button }
          onPress={ this.onTouch }
        >
           <Text styles={ styles.buttonText }>
             Show survey
           </Text>
        </TouchableOpacity>
      </View>
    );
  }
}

I'm using cocoapods btw... maybe that also helps. I'm having the same problem in Android though.

yarikpwnzer commented 3 years ago

@lguardado try this hash 'RP3MG28', Your hash seems not for mobile SDK. You should now have paid plan to have mobile SDK hash.

yarikpwnzer commented 3 years ago

@lguardado update: actually I see error on your hash, from onRespondentDidEndSurvey:

        <SurveyMonkey
          ref={ this.surveyMonkeyRef }
          onRespondentDidEndSurvey={ (data) => {
           console.log('Respondent', data.respondent);
           console.log('Error', data.error);
        } } />

key description: "The collector for this survey has been closed."

lguardado commented 3 years ago

Awesome, man. that worked even with the previous function component!! thank you so much, I didn't realize that hash was wrong since it was working on web.

lguardado commented 3 years ago

Closing the issue. The survey wasn't triggering because the hash was not mobile compatible.

ilhammhdd commented 3 years ago

i also run to similar problem on android, i'm using expo though the hash is mobile SDK compatible

env: "expo": "^40.0.0" "react-native-survey-monkey": "^1.2.2" pixel 4 emlator API 24

code:

import React, { PureComponent, createRef } from 'react';
import SurveyMonkey from 'react-native-survey-monkey';
import {
    View,
    Text,
    TouchableOpacity,
    AppRegistry,
} from 'react-native';

export default class SurveyMonkeyScreen extends PureComponent {
    constructor(props) {
        super(props);

        this.onTouch = this.onTouch.bind(this);
        this.surveyMonkeyRef = createRef();
    }

    onTouch() {
        this.surveyMonkeyRef.current.showSurveyMonkey('MW3YBYX');
    }

    render() {
        return (
            <View>
                <SurveyMonkey
                    ref={this.surveyMonkeyRef}
                    onRespondentDidEndSurvey={(data) => {
                        console.log('Respondent', data.respondent);
                        console.log('Error', data.error);
                    }}
                />
                <TouchableOpacity onPress={this.onTouch}>
                    <Text>Show survey</Text>
                </TouchableOpacity>
            </View>
        );
    }
}

AppRegistry.registerComponent('SurveyMonkeyScreen', () => SurveyMonkeyScreen);

error:

[bugsnag] Sending report TypeError: null is not an object (evaluating '_reactNative.NativeModules.RNSurveyMonkey.presentSurveyMonkey')
[bugsnag] Sending report TypeError: null is not an object (evaluating '_reactNative.NativeModules.RNSurveyMonkey.presentSurveyMonkey')

TypeError: null is not an object (evaluating '_reactNative.NativeModules.RNSurveyMonkey.presentSurveyMonkey')
- node_modules\react-native\Libraries\LogBox\LogBox.js:148:8 in registerError
- node_modules\react-native\Libraries\LogBox\LogBox.js:59:8 in errorImpl
- node_modules\react-native\Libraries\LogBox\LogBox.js:33:4 in console.error
- node_modules\expo\build\environment\react-native-logs.fx.js:27:4 in error
- node_modules\@bugsnag\plugin-console-breadcrumbs\console-breadcrumbs.js:16:6 in console.method
- node_modules\@bugsnag\plugin-console-breadcrumbs\console-breadcrumbs.js:16:6 in console.method
- node_modules\react-native\Libraries\Core\ExceptionsManager.js:104:6 in reportException
- node_modules\react-native\Libraries\Core\ExceptionsManager.js:171:19 in handleException
- node_modules\react-native\Libraries\Core\setUpErrorHandling.js:24:6 in handleError
- node_modules\expo-error-recovery\build\ErrorRecovery.fx.js:9:32 in ErrorUtils.setGlobalHandler$argument_0
- node_modules\regenerator-runtime\runtime.js:63:36 in tryCatch
- node_modules\regenerator-runtime\runtime.js:293:29 in invoke
- node_modules\regenerator-runtime\runtime.js:63:36 in tryCatch
- node_modules\regenerator-runtime\runtime.js:154:27 in invoke
- node_modules\regenerator-runtime\runtime.js:164:18 in PromiseImpl.resolve.then$argument_0
- node_modules\react-native\node_modules\promise\setimmediate\core.js:37:13 in tryCallOne
- node_modules\react-native\node_modules\promise\setimmediate\core.js:123:24 in setImmediate$argument_0
- node_modules\react-native\Libraries\Core\Timers\JSTimers.js:130:14 in _callTimer
- node_modules\react-native\Libraries\Core\Timers\JSTimers.js:181:14 in _callImmediatesPass
- node_modules\react-native\Libraries\Core\Timers\JSTimers.js:441:30 in callImmediates
- node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:387:6 in __callImmediates
- node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:135:6 in __guard$argument_0
- node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:364:10 in __guard
- node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:134:4 in flushedQueue
* [native code]:null in flushedQueue
* [native code]:null in invokeCallbackAndReturnFlushedQueue

checked the this.surveyMonkeyRef and this.surveyMonkeyRef.current they're not null

yarikpwnzer commented 3 years ago

@ilhammhdd hi, this SDK is for 'vanilla' react-native. I think expo is not supporting Native Modules.

ilhammhdd commented 3 years ago

thanks for confirming @yarikpwnzer