Integration with Expo and React native? #618

GuilhermeGuiuler · 2023-10-07T00:09:54Z

Any way to use it at the expo?
I need to use the onSubmit, onEndingButtonClick functions

The text was updated successfully, but these errors were encountered:

mathio · 2023-10-09T08:59:00Z

unfortunately our Embed SDK supports only web environments as it relies on use of <iframe> and postMessage for most of its functionality. My understanding is that React Native does not render web content in iframe, but rather in a WebView.

An alternative solution for you might be to embed a WebView with local HTML page that uses the Embed SDK. Then you would need to connect the static HTML page logic with code in your app - it looks like you should be able to do it via postMessage: https://medium.com/@azharuddin31/react-native-pass-data-to-webview-and-get-data-out-of-webview-792ffbe7eb75

In future, it might be interesting to extend our Embed SDK with such wrapper for React Native. However we do not have any plans like this for now.

louisiscoding · 2023-11-21T09:34:13Z

Here is my implementation for React Native using WebView and PostMessage.
However, i'm still having an issue as onEndingButtonClick is not catched like onSubmit is

If you guys have any suggestions to update this component, let's collaborate !

/* eslint-disable no-return-assign */
import React, { Component } from 'react';
import { KeyboardAvoidingView, Platform, StyleSheet } from 'react-native';
import { URL } from 'react-native-url-polyfill';
import { WebView, WebViewMessageEvent } from 'react-native-webview';

type TypeformPropType = {
    url: string;
    onSubmit: () => void;
};

type TypeformStateType = {
    isLoaded: boolean;
};

class TypeformEmbed extends Component<TypeformPropType, TypeformStateType> {
    typeformElm: any;
    constructor(props: TypeformPropType) {
        super(props);
        this.state = {
            isLoaded: false,
        };
    }

    onLoad = () => {
        const { url } = this.props;

        const typeformUrl = new URL(url);
        typeformUrl.searchParams.append('typeform-welcome', '0');

        const options = {
            hideHeaders: true,
            hideFooter: true,
            hideScrollbars: true,
            opacity: 0,
        };

        if (this.typeformElm && !this.state.isLoaded) {
            const stringifedOptions = JSON.stringify(JSON.stringify(options));
            const embedCode = `
      {
        const onSubmit = () => window.ReactNativeWebView.postMessage("onSubmit")
        const options = Object.assign({}, JSON.parse(${stringifedOptions}), {onSubmit})
        typeformEmbed.makeWidget(document.getElementById('typeform-embed'), '${typeformUrl}', options)
      }
      true
      `;

            this.typeformElm.injectJavaScript(embedCode);
            this.setState({ isLoaded: true });
        }
    };

    onMessage = (event: WebViewMessageEvent) => {
        const { onSubmit } = this.props;

        const { data } = event.nativeEvent;

        if (data === 'onSubmit') {
            onSubmit();
        }
    };

    render() {
        return (
            <KeyboardAvoidingView style={styles.container} behavior={Platform.OS === 'android' ? 'height' : undefined}>
                <WebView
                    originWhitelist={['*']}
                    ref={el => (this.typeformElm = el)}
                    source={{
                        html: '<html><head><meta name="viewport" content="width=device-width, initial-scale=1.0"><script src="https://embed.typeform.com/embed.js"></script></head><div style={{ height: \'100vh\', width: \'100%\' }} id="typeform-embed" /></html>',
                    }}
                    onLoadEnd={this.onLoad}
                    onMessage={this.onMessage}
                />
            </KeyboardAvoidingView>
        );
    }
}

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

export default TypeformEmbed;

mathio · 2023-11-21T09:53:55Z

It looks like you are using embed SDK v0 that is no longer supported. You should use current version - you can find it in this repo or at https://embed.typeform.com/next/embed.js. The method to create a widget embed is window.tf.createWidget.

This is a full example:

<div id="wrapper" style="height:400px"></div>
<script src="//embed.typeform.com/next/embed.js"></script>
<script>
  window.tf.createWidget('R0wDakKn', {
    container: document.querySelector('#wrapper'),
    onEndingButtonClick: (payload) => {
      console.log('ending button clicked:', payload)
    }
  })
</script>

Hope this helps.

Do you think a separate library with the react native wrapper would be helpful?

github-actions bot added the new Flag for new issues before someone replies label Oct 7, 2023

mathio closed this as completed Oct 9, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Integration with Expo and React native? #618

Integration with Expo and React native? #618

GuilhermeGuiuler commented Oct 7, 2023

mathio commented Oct 9, 2023

louisiscoding commented Nov 21, 2023 •

edited

Loading

mathio commented Nov 21, 2023

Integration with Expo and React native? #618

Integration with Expo and React native? #618

Comments

GuilhermeGuiuler commented Oct 7, 2023

mathio commented Oct 9, 2023

louisiscoding commented Nov 21, 2023 • edited Loading

mathio commented Nov 21, 2023

louisiscoding commented Nov 21, 2023 •

edited

Loading