Conversation

The OpenWeb React Native SDK enables you to create fluent conversation experiences that fuel quality interactions with community and content.

The SDK exposes one flow to set up Conversation. When the PreConversation view loads, the user sees the following displayed in the ViewController below the article:

• 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. The user must be logged in to post new comments.

Configure the Conversation

With PreConversation

This approach displays a preview of 2 comments from the Conversation. A viewer can then click a button to load the full Conversation.

Follow these steps to initialize the SDK and configure the Conversation:

1. Initialize the OpenWeb SDK with your Spot_ID in the root component constructor.
   

   JavaScript

   import { SpotIMAPI } from '@spot.im/react-native-spotim'
   
   ...
   
   SpotIMAPI.init("<Spot_ID>")
   

2. Load the PreConversation component.

   JavaScript

   import { SpotIM } from '@spot.im/react-native-spotim'
   
   ...
   
   <SpotIM
       postId="<POST_ID>"
       url="<POST_URL>"
       title="<POST_TITLE>"
       subtitle="<POST_SUBTITLE>"
       thumbnailUrl="<POST_THUMBNAIL>"
       darkModeBackgroundColor="#<HEX_COLOR>"
       style={{flex: 1}}
   />
   

3. Open the Conversation screen.

   JavaScript

   import { SpotIMAPI } from '@spot.im/react-native-spotim'
   
   ...
   
   try {
       await SpotIMAPI.openFullConversation({
           postId: "<POST_ID>",
           url: "<POST_URL>",
           title: "<POST_TITLE>",
           subtitle: "<POST_SUBTITLE>",
           thumbnailUrl: "<POST_THUMBNAIL>"
       });
   } catch (error) {
       // handle error
   }
   

Full Conversation Only

This approach takes a viewer directly to the full Conversation.

Follow these steps to initialize the SDK and configure the Conversation:

1. Initialize the OpenWeb SDK with your Spot_ID in the root component constructor.
   

   JavaScript

   import { SpotIMAPI } from '@spot.im/react-native-spotim'
   
   ...
   
   SpotIMAPI.init("<Spot_ID>")
   

2. Open the Conversation screen.

   JavaScript

   import { SpotIMAPI } from '@spot.im/react-native-spotim'
   
   ...
   
   try {
       await SpotIMAPI.openFullConversation({
           postId: "<POST_ID>",
           url: "<POST_URL>",
           title: "<POST_TITLE>",
           subtitle: "<POST_SUBTITLE>",
           thumbnailUrl: "<POST_THUMBNAIL>"
       });
   } catch (error) {
       // handle error
   }
   

Dark Mode Support

The React Native SDK supports dark mode for both Android and iOS.

Android

By default, Android dark mode is set to false.

To support dark mode according to device settings, use the supportAndroidSystemDarkMode property:

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

In order to force turning on or off dark mode, use the androidIsDarkMode property:

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

🚧

The androidIsDarkMode property will not work if supportAndroidSystemDarkMode is set to true.

iOS

By default, iOS dark mode is enabled according to device settings.

In order to force turning on or off dark mode, use the .setIOSDarkMode() method:

SpotIMAPI.setIOSDarkMode(true);

Login Status

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

SpotIMAPI.getUserLoginStatus()
    .then(status => {
        console.log(status);
      })
    .catch(error => {
        console.error(error);
      })

Logout

To complete a logout, call the OpenWeb logout API when the user logs out of your system.

SpotIMAPI.logout();

Analytics Event Callback

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

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

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