Introduction

The chat-uikit package provides a set of components and providers for building chat user interfaces in React Native applications. It includes features such as theme management, header styling, socket communication, and user context.

Installation

To use chat-uikit in your project, follow these steps:

1. Clone the repository from Git:bash

   Copy code
   git clone <repository_url>

2. Install dependencies:
   Copy code
   npm install

Usage

To integrate chat-uikit into your React Native application, follow these steps:

1. Start the example React Native application:

   Copy code
   npx nx run sample:start

2. To build the package, run:

   Copy code
   nx run chat-uikit:build

3. To publish the package for local testing:

   Copy code
   nx run chat-uikit:publish:local

4. Add the package locally using Yalc:

   Copy code
   yalc add [email protected]

Components and Providers

• UIKitThemeProvider: Context provider for passing theme (light, dark) to components.

• HeaderStyleProvider: Provider for styling headers with customizable options such as default title alignment and translucent status bar.

• SocketProvider: Provider for socket communication, providing properties for managing socket status.

• UserProvider: Context provider for accessing the current connected user status.

Example

Copy code

import React from 'react';

import {

UIKitThemeProvider,

Header,

LightUIKitTheme,

HeaderStyleProvider,

SocketProvider,

UserProvider,

} from 'rn-sample-ui-kit';

import { SafeAreaProvider } from 'react-native-safe-area-context';

import RootNavigation from './navigation/RootNavigation';

const App = () => {

return (

<HeaderStyleProvider

HeaderComponent={Header}

defaultTitleAlign={'right'}

statusBarTranslucent={true}

);

};

export default App;

Customization

• UIKitThemeProvider: Customize the theme by providing your own theme object.

• HeaderStyleProvider: Customize header styling by providing your custom header component and other styling options.

• SocketProvider: Configure socket communication properties as per your application requirements.

• UserProvider: Implement user context management as needed.

Additional Information

• useSocketContext: Hook for accessing socket status within components.

• SocketUiContainer: Component for rendering chat UI. Use it with provided props for chat functionality.

Example usage:

Copy code

const { isConnected } = useSocketContext();

<SocketUiContainer

chatPress={onChatPress}

payload={route.params.payload}

roleId={route.params.roleId}

authenticationToken={route.params.authenticationToken}

backButton={backButton}

sendButton={sendButton}

/>