Senja
Add testimonials to your code base

How to add testimonials to React Native

Adding testimonials to your React Native app is easy to do and requires only two external dependencies. Here's how to do it in just a few steps:

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

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

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

Make sure to use react-native-autoheight-webview version 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

You may need to refresh your React Native app before it'll show up

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

That's it, your testimonial widget is now embedded in your React Native app 🥳 Not working? Contact support and we'll assist you

Was this helpful?