Skip to main content

Embedding the Poll in your Mobile App

Navigation is a core part of your app, so our SDK aims to be flexible and allows you to control the navigation.

You will want to consider the following when planning navigation:

  1. Opening the poll after creating it
  2. Navigation to the Details screen of a Poll Option
  3. Opening a poll from a deeplink (for voters)
  4. Closing/Dismissing the poll

React Navigation example​

The following example assumes we are using React Navigation and we have set up the following routes:

type RootStackParamList = {  Home: {};  Poll: { pollSource: string; flow: OpenPollFlow };  Details: { resourceId?: string };};

Creating the Poll Screen​

The React Native SDK provides a PollView component that takes care of all of the functionality of a poll, so your poll screen can be a simple wrapper. This component can be used to display the poll after creating it, or for displaying a poll when a user opens it or deep links into it.

In the example below, we are creating a new route and screen in our navigation that renders a poll based on the poll source (either Poll ID or Poll URL) and flow which are passed as route parameters.

We have also setup a callback that fires when the user presses the "View Details" button on an option in the poll. In this callback we are navigating into our Details screen and passing the Resource ID of the Poll Option.

import React from "react";import { RouteProp, useNavigation, useRoute } from "@react-navigation/native";import { NativeStackNavigationProp } from "@react-navigation/native-stack";import {  OpenPollFlow,  OptionResponse,  PollView,  Theme,} from "@polls-platform/react-native";const PollScreen = () => {  const route = useRoute<RouteProp<RootStackParamList, "Poll">>();  const navigation =    useNavigation<NativeStackNavigationProp<RootStackParamList>>();  const didPressViewDetails = (option: OptionResponse) => {    navigation.push("Details", { resourceId: option.resourceId });  };  return (    <PollView      pollSource={route.params.pollSource}      openPollFlow={route.params.flow}      theme={Theme.light}      didPressViewDetails={didPressViewDetails}    />  );};export default PollScreen;

Putting it all together​

At this point we have learned how to:

  1. Intialize the SDK
  2. Create a poll by mapping our data into the poll fields
  3. Render a poll using the PollView
  4. Handle navigating to the Details Screen of an Option

Let's see it all together below

// initialize the SDK on app launchinitializePolls({  apiKey: "YOUR API KEY",  domainConfig: {    type: DomainConfigType.subdomain,    subdomain: "YOUR SUBDOMAIN",  },  environment: Environment.production,});// creating a poll is synchronous and instantaneousconst poll: PollResponse = createPoll({  title,  ownerId,  settings,  options,});// after creating the poll, open it by navigating to our poll screen using the Poll URLnavigation.push("Poll", {  pollSource: poll.url,  flow: OpenPollFlow.createPoll,});// FOR VOTING// render an existing poll by navigating to our poll screen using the Poll IDconst handleDeeplink = (url: URL) => {  if (url.pathname.startsWith("/poll/")) {    // this is a poll url, extract the pollId    navigation.push("Poll", {      pollSource: pollId,      flow: OpenPollFlow.openPoll,    });  } else {    // handle other deeplinks  }};