# CreatePoll

A component used to render the entirety of the poll creation form. It encapsulates the `CreatePollContent` component within a [`CreatePollContentContext`](https://getstream.io/chat/docs/sdk/react-native/contexts/create-poll-context/). Needs to be structured inside a [`Channel` component](https://getstream.io/chat/docs/sdk/react-native/core-components/channel/).

The default behaviour of this component is it opening in a [React Native Modal](https://reactnative.dev/docs/modal). Integrators are highly encouraged to write their own UI for the dialog with the specific options and flexibility they require.

## Best Practices

- Render `CreatePoll` inside `Channel` so context and send hooks are available.
- Provide a custom dialog UI if you need full control over UX.
- Call `closePollCreationDialog` to cleanly dismiss the modal.
- Validate poll options before calling `sendMessage`.
- Keep poll creation UI lightweight to avoid input lag.

## General Usage

```tsx
import {
  OverlayProvider,
  Chat,
  Channel,
  CreatePoll,
} from "stream-chat-react-native";

const App = () => {
  return (
    <OverlayProvider>
      <Chat client={client}>
        <Channel channel={channel}>
          <CreatePoll sendMessage={sendMessage} {...otherOptionalProps} />
        </Channel>
      </Chat>
    </OverlayProvider>
  );
};
```

## Props

| Prop                      | Description                                                                                                                                                                                                                                                    | Type         |
| ------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------ |
| `sendMessage`             | Sends a composed message within `MessageComposer` component to channel. The message optimistically gets added to the message list UI first, before making the API call. The function takes an object with `localMessage`, `message`, and `options` properties. | `function`   |
| `closePollCreationDialog` | A callback invoked when the default `CreatePoll` component back button is pressed in the header. Has no effect if the default `CreatePollContent` is overridden.                                                                                               | `() => void` |
| `createPollOptionGap`     | The gap between poll options in the `CreatePollContent` draggable list. Only needed if custom theming changes the static height of items. Has no effect if a custom `CreatePollContent` is provided. Defaults to `8`.                                          | `number`     |

## UI Component Overrides

The `CreatePollContent` UI component is not passed as a prop on `CreatePoll`. Instead, override it through the [`WithComponents`](https://getstream.io/chat/docs/sdk/react-native/customization/custom-components/) provider higher in the tree; the component reads it from `useComponentsContext()`.

```tsx
import { WithComponents, Channel, CreatePoll } from "stream-chat-react-native";

<WithComponents overrides={{ CreatePollContent: MyCreatePollContent }}>
  <Channel channel={channel}>
    <CreatePoll sendMessage={sendMessage} />
  </Channel>
</WithComponents>;
```

| Override            | Description                                                                                                                                                                                                                                                                                                                                                                 | Type            |
| ------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------- |
| `CreatePollContent` | Custom UI component to render the entire poll creation form. Has access to [`CreatePollContentContext`](https://getstream.io/chat/docs/sdk/react-native/contexts/create-poll-context/) values via the `useCreatePollContentContext` hook. Defaults to [`CreatePollContent`](https://github.com/GetStream/stream-chat-react-native/blob/main/package/src/components/Poll/CreatePollContent.tsx). | `ComponentType` |

---

For the most recent version of this documentation, visit [https://getstream.io/chat/docs/sdk/react-native/ui-components/create-poll/](https://getstream.io/chat/docs/sdk/react-native/ui-components/create-poll/).