How to add testimonials to React Native

Adding testimonials to your React Native app is easy to do and requires only two external dependencies.

Create your widget

First, you'll need to create a widget in Senja. Learn how to turn your testimonials into a widget

Add the embed code to your React Native

• Copy the widget link, see How do I share a link to a testimonial? to check the widget ID

• Install react-native-autoheight-webview and react-native-webview

  Make sure to use react-native-autoheight-webview version 1.6.5

  • Yarn/NPM:

    yarn add react-native-autoheight-webview@^1.6.5 react-native-webview@^13.6.4

  • Expo:

    expo install react-native-webview
    yarn add react-native-autoheight-webview@^1.6.5

• Paste this Senja component:

  import { StyleSheet, View } from 'react-native';
  import AutoHeightWebView from "react-native-autoheight-webview";
  import { useState } from "react";
  import { Dimensions } from "react-native";
  
  export const SenjaEmbed = (props: { id: string }) => {
    const [webViewHeight, setWebViewHeight] = useState(
      Dimensions.get("window").height
    );
  
    return (
      <AutoHeightWebView
        style={{ width: Dimensions.get("window").width, height: webViewHeight }}
        onSizeUpdated={(size) => {
          setWebViewHeight(size.height);
        }}
        showsVerticalScrollIndicator={false}
        scrollEnabled={false}
        source={{
          html: `
            <div
              class="senja-embed"
              data-id="${props.id}"
              data-lazyload="false"
              data-mode="shadow"
            ></div>
            <script
              async
              type="text/javascript"
              src="https://static.senja.io/dist/platform.js"
            ></script>
          `,
        }}
      />
    );
  };
  
  // Use the widget like this
  export default function App() {
    return (
      <View style={styles.container}>
        <SenjaEmbed id="4ac65b64-922c-4daf-af40-5cf71ade893f" />
      </View>
    );
  }
  
  const styles = StyleSheet.create({
    container: {
      flex: 1,
      backgroundColor: '#fff',
      alignItems: 'center',
      justifyContent: 'center',
    },
  });

• Make sure to replace id with your Senja widget id

• Once you do this, your Senja widget will be rendered in your React Native app