Create Poll Screen

Overview

The CreatePollScreen component is responsible for rendering the UI that allows users to create a poll within a chatroom or conversation. It provides input fields for entering poll options, a question, and other related configurations. This component manages the state of the poll creation process and ensures that the input data is validated before submission. It also supports customization of styles and integrates with the broader chat system for submission and interaction.

UI Components

• LMChatroomHeader
• LMChatroomCreatePollUI
• LMChatIcon
• LMChatTextView

Data Variables

• memberData: Stores the chat logged in member data.

Callbacks

• onPollExpiryTimeClicked: Triggered when the poll expiry time is clicked.
• onAddOptionClicked: Triggered when the option to add a new poll option is clicked.
• onPollOptionCleared: Triggered when a poll option is cleared. Provides the index of the cleared option.
• onPollCompleteClicked: Triggered when the complete poll button is clicked.

Customisation

The CreatePollScreen can be customised using the pollStyles.

Usage Example

Step 1: Create Custom Screen and Wrapper

• In your app, create a CreatePollScreenWrapper file which will wrap the CreatePollScreen within the CreatePollContextProvider so that the callbacks becomes accessible inside of the CreatePollScreen.
• Create createPollStyle for customisation and call the setCreatePollStyles to set the customisation.

CreatePollScreen

import {
  CreatePollScreen,
  useCreatePollContext,
  STYLES,
} from "@likeminds.community/chat-rn-core";
import React from "react";

const CreatePollScreen = () => {
  const { showDatePicker, addNewOption, removeAnOption, postPoll } =
    useCreatePollContext();

  // customised showDatePicker callback
  const onPollExpiryTimeClicked = () => {
    console.log("do something before onPollExpiryTimeClicked");
    showDatePicker();
    console.log("do something after onPollExpiryTimeClicked");
  };

  // customised addNewOption callback
  const onAddOptionClicked = () => {
    console.log("do something before onAddOptionClicked");
    addNewOption();
    console.log("do something after onAddOptionClicked");
  };

  const createPollStyle = {
    pollQuestionsStyle: {
      fontSize: 16,
      color: "black",
      borderBottomWidth: 1,
      borderBottomColor: "gray",
      marginBottom: 10,
    },
    pollOptionsStyle: {
      fontSize: 16,
      color: "black",
      borderBottomWidth: 1,
      borderBottomColor: "gray",
      marginBottom: 10,
    },
    pollExpiryTimeStyle: {
      fontSize: 16,
      color: "black",
      marginBottom: 10,
    },
    pollAdvancedOptionTextStyle: {
      fontSize: 16,
      color: "blue",
      marginBottom: 10,
    },
    pollAdvanceOptionsSwitchThumbColor: "green",
    pollAdvanceOptionsSwitchTrackColor: "lightgreen",
  };

  // create poll screen customisation
  if (createPollStyle) {
    STYLES.setCreatePollStyles(createPollStyle);
  }

  return (
    <CreatePollScreen
      onPollExpiryTimeClicked={onPollExpiryTimeClicked}
      onAddOptionClicked={onAddOptionClicked}
    />
  );
};

export default CreatePollScreen;

CreatePollScreenWrapper

import { CreatePollContextProvider } from "@likeminds.community/chat-rn-core";
import CreatePollScreen from "<<path_to_CreatePollScreen.tsx>>";

const CreatePollScreenWrapper = ({ navigation, route }) => {
  return (
    <CreatePollContextProvider navigation={navigation} route={route}>
      <CreatePollScreen />
    </CreatePollContextProvider>
  );
};

export default CreatePollScreenWrapper;

Step 2: Add the Custom Screen in App.tsx

• In your App.tsx, create a Stack.Navigatorin the NavigationContainer wrapped by LMOverlayProvider.
• Add CreatePollScreenWrapper as a Stack screen in your NavigationContainer.

App.tsx

import { LMOverlayProvider, STYLES } from "@likeminds.community/chat-rn-core";
import { CREATE_POLL_SCREEN } from "@likeminds.community/chat-rn-core/constants/screenNames";
import CreatePollScreenWrapper from "<<path_to_CreatePollScreenWrapper.tsx>>";
import { NavigationContainer } from "@react-navigation/native";
import { createNativeStackNavigator } from "@react-navigation/native-stack";

export const App = () => {
  const Stack = createNativeStackNavigator();

  return (
    <LMOverlayProvider
      myClient={myClient} // pass in the LMChatClient created
      apiKey={apiKey} // pass in the API Key generated
      userName={userName} // pass in the logged-in user's name
      userUniqueId={userUniqueID} // pass in the logged-in user's uuid
    >
      <NavigationContainer ref={navigationRef} independent={true}>
        <Stack.Navigator screenOptions={{ headerShown: false }}>
          <Stack.Screen
            name={CREATE_POLL_SCREEN}
            component={CreatePollScreenWrapper}
          />
        </Stack.Navigator>
      </NavigationContainer>
    </LMOverlayProvider>
  );
};