React Native

Install#

npx expo install @swingback/react-native react-native-webview

Or, without Expo, npm install @swingback/react-native react-native-webview. It needs React Native 0.76 or later with the New Architecture, and react-native-webview 14 or later, which Expo Go has.

Add the provider#

Put SwingbackProvider around your app, with your portal's address and a function that gets the signed-in user's identity token from your server:

import { SwingbackProvider } from "@swingback/react-native";

export default function App() {
  return (
    <SwingbackProvider portal="https://acme.example.com" token={() => acmeApi.feedbackToken()}>
      <Navigation />
    </SwingbackProvider>
  );
}

The function returns the token your server signs, or null when nobody is signed in, and throws when it can't get one. It is called each time the widget opens. Your server signs the token with your identity secret, which never goes in your app: Signing in your users has the function.

Open it#

import { useSwingback } from "@swingback/react-native";

function Settings() {
  const swingback = useSwingback();
  return <Button title="Send feedback" onPress={() => swingback.open()} />;
}

useSwingback() gives open, close, toggle, identify, logout, on (the widget's events, as the JavaScript SDK's) and isOpen. A page is "feedback" (the default), "roadmap", "changelog", "new", { post: slug } or { board: slug }. The sheet is a page sheet on iOS and the whole screen on Android, where the back button goes back in the widget first.

The sheet's title and bar#

The sheet's title is the portal's word for the widget, in your reader's language. Give the provider your own, or null for none, or leave the bar out altogether (a swipe down closes the sheet on iOS, the back button on Android):

<SwingbackProvider portal="https://acme.example.com" token={token} title="Ideas" showsBar={false}>

The widget in a screen#

import { FeedbackWidget } from "@swingback/react-native";

export function RoadmapScreen() {
  return <FeedbackWidget page="roadmap" style={{ flex: 1 }} />;
}

It fills the place you give it, inside the provider. Give it handlesBack and Android's back button goes back in the widget first, while it can go back. Android asks the newest back handler first: one your screen adds after the widget's comes before it.

When your user signs in or out#

await swingback.identify(); // another user signed in: a widget on screen asks for a token now
await swingback.logout(); // your user signed out: the widget's session ends

Good to know#

• The widget keeps its session in the web view's storage, across launches. logout() ends it, now or when the widget next opens.
• Links that leave the widget open in the device's browser. Give the provider openUrl to open them your own way, in an in-app browser for instance.
• Your portal's address is https. Against a local stack over plain http, the iOS simulator reaches http://<slug>.localhost:3000 as your Mac does.