Documentation
Go to openweb.com
Start typing to search…

UI Components

The OpenWeb React Native SDK provides two main UI components for displaying conversations:

  1. OpenWebPreConversation - A compact preview component that shows a summary of the conversation activity. This component is ideal for article listings, feeds, or anywhere you want to display conversation metrics before users navigate to the full conversation view.
  2. OpenWebConversation - A full-featured conversation component that displays the complete commenting experience, including the article header, comment threads, reactions, and user interactions. Use this component when you want to show the entire conversation interface.

OpenWebPreConversation

import React from 'react';
import { View, StyleSheet } from 'react-native';
import { 
  OpenWebPreConversation,
  type OWConversationRoute 
} from 'react-native-openweb-sdk';

const ArticleScreen = ({ navigation }) => {
  const handleOpenConversation = (route: OWConversationRoute) => {
    navigation.navigate('ConversationScreen', { route });
  };

  return (
    <View style={styles.container}>
      <OpenWebPreConversation
        postId="article-123"
        onOpenConversationFlow={handleOpenConversation}
      />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
  },
});

export default ArticleScreen;

Component Properties (Props)

The following table outlines the available props for the OpenWebPreConversation component:

Prop

Description

postId (String)

Unique article identifier that is specific to the article page. The ideal postId has the following characteristics:•

  • Aligns with the URL slug (an-article-title) or article ID (14325).
  • Is less than 50 characters ideally 15 characters.
  • Uses a combination of letters, number, dashes (-), or hyphens (_).
  • Except for the regex [^\w\s-:.$~], does not include special characters.

articleSettings (OWArticleSettings?)

Information about the article associated with the flow.

additionalSettings (OWAdditionalSettings?)

Allows you to customize the appearance and behavior of the conversation components .

onOpenConversationFlow?

(route: OWConversationRoute) => void

Callback invoked when the user taps to open the full conversation.
route - The conversation route to open. This can be any valid OWConversationRoute.

onError?

(error: OWError) => void

Callback invoked when the component encounters an error during initialization or rendering. Returns type (error identifier) and message (error description). See OWError.

OpenWebConversation

import React from 'react';
import { View } from 'react-native';
import { 
  OpenWebConversation,
  OWArticleInformationStrategyType,
  type OWUserProfileType
} from 'react-native-openweb-sdk';

const ConversationScreen = ({ navigation }) => {
  return (
    <View style={{ flex: 1 }}>
      <OpenWebConversation
        postId="article-123"
        style={{ flex: 1 }}
      />
    </View>
  );
};

export default ConversationScreen;

Component Properties (Props)

The following table outlines the available props for the OpenWebPreConversation component:

Prop

Description

postId (String)

Unique article identifier that is specific to the article page. The ideal postId has the following characteristics:

  • Aligns with the URL slug (an-article-title) or article ID (14325).
  • Is less than 50 characters ideally 15 characters.
  • Uses a combination of letters, number, dashes, (-) or hyphens (_).
  • Except for the regex [^\w\s-:.$~], does not include special characters.

articleSettings (OWArticleSettings?)

Configuration for the article associated with the conversation. Defines how article metadata is provided and displayed.

additionalSettings (OWAdditionalSettings?)

Customization settings for conversation components. Configure appearance and behavior of:

  • conversationSettings - Main conversation view settings
  • commentThreadSettings - Comment thread display settings
  • commentCreationSettings - Comment composition settings
  • preConversationSettings - Preview component settings

route (OWConversationRoute?)

Specifies which view to open within the conversation. Use this to deep-link to specific parts of the conversation experience.

onOpenPublisherProfile

onOpenPublisherProfile?:  (ssoPublisherId: string, profileType: OWUserProfileType) => void

Callback invoked when a user taps on a publisher profile. Use this to navigate to your custom profile screen or handle profile views.
Parameters:

  • ssoPublisherId - The unique identifier for the user in your SSO system
  • profileType - Indicates if this is the current user or another user.

onConversationDismissed

onConversationDismissed?: () => void

Callback invoked when the user dismisses or closes the conversation view.

onError?

(error: OWError) => void

Callback invoked when the component encounters an error during initialization or rendering. Returns type (error identifier) and message (error description). See OWError.

Code Recipes

Type Definition

OWConversationRoute

The route prop allows you to deep-link to specific views within the conversation. This is useful when navigating from the PreConversationView or when you want to open the conversation to a specific state.

export const OWConversationRouteType = {
  None: 'none',
  CommentCreation: 'commentCreation',
  CommentThread: 'commentThread',
  ReportReason: 'reportReason',
  ClarityDetails: 'clarityDetails',
  Notifications: 'notifications',
  Profile: 'profile',
  PublisherProfile: 'publisherProfile',
} as const;

export type OWConversationRoute =
  | { type: typeof OWConversationRouteType.None }
  | {
      type: typeof OWConversationRouteType.CommentCreation;
      commentCreation: OWCommentCreationType;
    }
  | {
      type: typeof OWConversationRouteType.CommentThread;
      commentId: string;
    }
  | {
      type: typeof OWConversationRouteType.ReportReason;
      commentId: string;
    }
  | {
      type: typeof OWConversationRouteType.ClarityDetails;
      commentId: string;
      clarityDetails: OWClarityDetailsType;
    }
  | { type: typeof OWConversationRouteType.Notifications }
  | {
      type: typeof OWConversationRouteType.Profile;
      userId: string;
    }
  | {
      type: typeof OWConversationRouteType.PublisherProfile;
      ssoPublisherId: string;
      userProfile: OWUserProfileType;
    };

Route Type

Description

none

Opens the default conversation view without navigating to a specific section.

CommentCreation

Opens the comment composition screen to create a new comment, edit an existing comment, or reply to a comment.
OWCommentCreationType specifies the creation mode:

  • { type: 'comment' } creates a new top-level comment
  • { type: 'edit', commentId: string } edits an existing comment
  • { type: 'replyTo', commentId: string } replies to a specific comment

CommentThread

Opens and focuses on a specific comment thread by comment ID.

ReportReason

Opens the report dialog for a specific comment, allowing users to report inappropriate content.

ClarityDetails

Opens the clarity or moderation details view for a specific comment, showing transparency information about comment moderation status.
OWClarityDetailsType specifies the moderation state:

  • { type: 'rejected' } for rejected/removed comments.
  • { type: 'pending' } for comments awaiting moderation approval.

Notifications

Opens the notifications view where users can see activity and updates related to their comments.

Profile

Opens a user profile page by user ID.

PublisherProfile

Opens a publisher profile page with SSO publisher ID and user profile type. OWUserProfileType indicates the profile owner:

  • { type: 'currentUser' } for the currently authenticated user's profile.
  • { type: 'otherUser' } for another user's profile.

OWAdditionalSettings

OWAdditionalSettings is a configuration object that allows you to customize the appearance and behavior of the conversation components (pre-conversation preview, main conversation view, comment threads, and comment creation screens).

export type OWAdditionalSettings = {
  preConversationSettings?: OWPreConversationSettings;
  conversationSettings?: OWConversationSettings;
  commentThreadSettings?: OWCommentThreadSettings;
  commentCreationSettings?: OWCommentCreationSettings;
};

Settings

Description

preConversationSettings ? (OWPreConversationSettings)

Sets the initial preConversation flow settings.

OWConversationSettings?(OWConversationSettings)

Sets the initial Conversation flow settings.

OWCommentThreadSettings? (OWCommentThreadSettings)

Sets the initial comment thread settings.

commentCreationSettings ? (OWCommentCreationSettings)

Sets the initial comment creation flow settings.

OWPreConversationSettings

export const OWPreConversationStyleType = {
  Regular: 'regular',
  Compact: 'compact',
  CtaButtonOnly: 'ctaButtonOnly',
  CtaWithSummary: 'ctaWithSummary',
  Custom: 'custom',
} as const;

export type OWPreConversationStyle =
  | { type: typeof OWPreConversationStyleType.Regular }
  | { type: typeof OWPreConversationStyleType.Compact }
  | { type: typeof OWPreConversationStyleType.CtaButtonOnly }
  | { type: typeof OWPreConversationStyleType.CtaWithSummary }
  | {
      type: typeof OWPreConversationStyleType.Custom;
      numberOfComments?: number;
      collapsableTextLineLimit?: number;
      preConversationSummaryStyle?: OWPreConversationSummaryStyle;
      communityGuidelinesStyle?: OWCommunityGuidelinesStyle;
      communityQuestionStyle?: OWCommunityQuestionsStyle;
    };

OWPreConversationSummaryStyle

export const OWPreConversationSummaryStyleType = {
  None: 'none',
  Regular: 'regular',
  Compact: 'compact',
} as const;

export type OWPreConversationSummaryStyle =
  | { type: typeof OWPreConversationSummaryStyleType.None }
  | { type: typeof OWPreConversationSummaryStyleType.Regular }
  | { type: typeof OWPreConversationSummaryStyleType.Compact };

OWCommunityGuidelinesStyle

export const OWCommunityGuidelinesStyleType = {
  None: 'none',
  Regular: 'regular',
  Compact: 'compact',
} as const;

export type OWCommunityGuidelinesStyle =
  | { type: typeof OWCommunityGuidelinesStyleType.None }
  | { type: typeof OWCommunityGuidelinesStyleType.Regular }
  | { type: typeof OWCommunityGuidelinesStyleType.Compact };

OWConversationStyle

Allows you to customize the visual appearance and styling of the conversation component, including elements like community guidelines, comment styling, and other UI elements within the conversation view.

export const OWConversationStyleType = {
  Regular: 'regular',
  Compact: 'compact',
  Custom: 'custom',
} as const;

export type OWConversationStyle =
  | { type: typeof OWConversationStyleType.Regular }
  | { type: typeof OWConversationStyleType.Compact }
  | {
      type: typeof OWConversationStyleType.Custom;
      communityGuidelinesStyle: OWCommunityGuidelinesStyle;
      communityQuestionsStyle: OWCommunityQuestionsStyle;
      spacing: OWConversationSpacing;
    };

OWCommunityGuidelinesStyle

Controls the display style of community guidelines.

export const OWCommunityGuidelinesStyleType = {
  None: 'none',
  Regular: 'regular',
  Compact: 'compact',
} as const;

export type OWCommunityGuidelinesStyle =
  | { type: typeof OWCommunityGuidelinesStyleType.None }
  | { type: typeof OWCommunityGuidelinesStyleType.Regular }
  | { type: typeof OWCommunityGuidelinesStyleType.Compact };

OWCommunityQuestionsStyle

Controls the display style of community questions.

export const OWCommunityQuestionsStyleType = {
  None: 'none',
  Regular: 'regular',
  Compact: 'compact',
} as const;

export type OWCommunityQuestionsStyle =
  | { type: typeof OWCommunityQuestionsStyleType.None }
  | { type: typeof OWCommunityQuestionsStyleType.Regular }
  | { type: typeof OWCommunityQuestionsStyleType.Compact };

OWConversationSpacing

Controls the vertical spacing in conversations.

export const OWConversationSpacingType = {
  Regular: 'regular',
  Compact: 'compact',
  Custom: 'custom',
} as const;

export type OWConversationSpacing =
  | { type: typeof OWConversationSpacingType.Regular }
  | { type: typeof OWConversationSpacingType.Compact }
  | {
      type: typeof OWConversationSpacingType.Custom;
      betweenComments?: number;
      belowCommunityGuidelines?: number;
      belowCommunityQuestions?: number;
    };

OWConversationSettings

export type OWConversationSettings = {
  style?: OWConversationStyle;
  allowPullToRefresh?: boolean;
};

OWCommentThreadSettings

export type OWCommentThreadSettings = {
  allowPullToRefresh?: boolean;
};

OWCommentCreationSettings

export type OWCommentCreationSettings = {
  style?: OWCommentCreationStyle;
};

OWCommentCreationStyle

export const OWCommentCreationStyleType = {
  Regular: 'regular',
  Light: 'light',
  FloatingKeyboard: 'floatingKeyboard',
} as const;

export type OWCommentCreationStyle =
  | { type: typeof OWCommentCreationStyleType.Regular }
  | { type: typeof OWCommentCreationStyleType.Light }
  | { type: typeof OWCommentCreationStyleType.FloatingKeyboard };

OWError

export const OWErrorType = {
  MissingSpotId: 'missingSpotId',
  SSOStart: 'ssoStart',
  SSOComplete: 'ssoComplete',
  SSOProvider: 'ssoProvider',
  AlreadyLoggedIn: 'alreadyLoggedIn',
  InvalidSpotId: 'invalidSpotId',
  Logout: 'logout',
  UserStatus: 'userStatus',
  Custom: 'custom',
} as const;

export type OWError =
  | { type: typeof OWErrorType.MissingSpotId; message: string }
  | { type: typeof OWErrorType.SSOStart; message: string }
  | { type: typeof OWErrorType.SSOComplete; message: string }
  | { type: typeof OWErrorType.SSOProvider; message: string }
  | { type: typeof OWErrorType.AlreadyLoggedIn; message: string }
  | { type: typeof OWErrorType.InvalidSpotId; message: string }
  | { type: typeof OWErrorType.Logout; message: string }
  | { type: typeof OWErrorType.UserStatus; message: string }
  | { type: typeof OWErrorType.Custom; message: string };

Updated about 3 hours ago