Add a Conversation to React-Native app

The OpenWeb SDK exposes one major flow to set up. When the PreConversation view is loaded, a user sees the following displayed below an article in the article view controller:

  • Preview of 2 comments from the conversation
  • Text box to create new comments
  • Button to show all comments

If a user clicks the button to see more comments, the SDK opens a new ViewController which displays all comments from the conversation.

If a user clicks on the text box, the creation screen appears to enable the user to type a comment. To post new comments, the user must be logged in.



Use the following steps to initialize the SDK and configure the Conversation:

    1. Import the OpenWeb modules

import { SpotIM, SpotIMEventEmitter, SpotIMAPI } from '@spot.im/react-native-spotim'

    2. Initialize OpenWeb SDK with your Spot_ID in your root component constructor

SpotIMAPI.init("<Spot_ID>")

    3.Load PreConversation View in React-Native

<SpotIM
    postId="<POST_ID>"
    url="<POST_URL>"
    title="<POST_TITLE>"
    subtitle="<POST_SUBTITLE>"
    thumbnailUrl="<POST_THUMBNAIL>"
    darkModeBackgroundColor="#<HEX_COLOR>"
    style={{flex: 1}}
/>


Dark Mode support

Android

By default, dark mode is false.
To support dark mode according to the device settings, use supportAndroidSystemDarkMode prop:

<SpotIM
    ...
    supportAndroidSystemDarkMode={true}
/>

In order to force turning on / off dark mode, use androidIsDarkMode prop:

<SpotIM
    ...
    androidIsDarkMode={true}
/>

Make sure that supportAndroidSystemDarkMode is not set to true. Otherwise, androidIsDarkMode prop won't work.


iOS

By default, dark mode will be enabled according to the device settings.
In order to force turning on / off dark mode, use the method:

SpotIMAPI.setIOSDarkMode(true);


Logout

Call the OpenWeb logout API whenever a user logs out of your system.

SpotIMAPI.logout();


Login status

The OpenWeb login status API enables you to understand the status of the current OpenWeb user.

SpotIMAPI.getUserLoginStatus()
    .then(status => {
        console.log(status);
      })
    .catch(error => {
        console.error(error);
      })
Login statusDescription
GuestUnregistered guest user

You should call startSSO / sso("<SECRET_JWT>") if your own login status is 'user is logged in'.
LoggedInRegistered OpenWeb user

You should avoid calling startSSO / sso("<SECRET_JWT>") in this case. If you own status is 'user is logged out', call the OpenWeb logout method.


Analytics event callback

You can receive the OpenWeb analytics event by subscribing to trackAnalyticsEvent event.

onTrackAnalyticsEvent(event) {
    console.log('\n', event.type, '\n', event);
}

componentDidMount() {
    ...
    const subscription = SpotIMEventEmitter.addListener('trackAnalyticsEvent', this.onTrackAnalyticsEvent);
}


Did this page help you?