npm package: @nuedesk/nuechat-react-native
Description: Nuedesk live chat sdk for react-native application
Author: Nuedesk
Latest version: 0.1.2

# @nuedesk/nuechat-react-native

Nuedesk Live Chat SDK for React Native applications. This SDK allows you to integrate a live chat widget into your React Native app, enabling real-time communication with your users.

---

## Features

- **Real-Time Messaging**: Seamlessly communicate with your users in real-time.
- **Customizable Widget**: Easily configure the widget's appearance and behavior.
- **User Management**: Register and manage users for personalized chat experiences.
- **Cross-Platform Support**: Works on both iOS and Android platforms.
- **Lightweight and Easy to Use**: Simple API for quick integration.

---

## Installation

Install the SDK using npm:

```sh
npm install @nuedesk/nuechat-react-native react-native-webview
```

Or using yarn:

```sh
yarn add @nuedesk/nuechat-react-native react-native-webview
```

---

## Usage

### 1. Initialize the SDK

The `NueChatSDK` must be initialized globally in your app. This is typically done in the root component (`App.tsx`).

```tsx
import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import { NueChatSDK } from '@nuedesk/nuechat-react-native';
import HomeScreen from './HomeScreen';
import SupportScreen from './SupportScreen';

const Stack = createStackNavigator();

function RootStack() {
  return (
    <Stack.Navigator
      screenOptions={{
        headerShown: false,
      }}
    >
      <Stack.Screen name="Home" component={HomeScreen} />
      <Stack.Screen name="Support" component={SupportScreen} />
    </Stack.Navigator>
  );
}

export default function App() {
  // Initialize the SDK with your API key
  NueChatSDK.initialize({
    apiKey: 'YOUR_API_KEY',
  });

  return (
    <NavigationContainer>
      <RootStack />
    </NavigationContainer>
  );
}
```

---

### 2. Render the Chat Page

You can use `NueChatSDK.Page` to render the chat widget in a specific screen, such as a `SupportScreen`.

```tsx
import React from 'react';
import { View, StyleSheet } from 'react-native';
import { NueChatSDK } from '@nuedesk/nuechat-react-native';

export default function SupportScreen() {
  return (
    <View style={styles.container}>
      {/* Render the chat widget */}
      <NueChatSDK.Page />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: 'cornflowerblue',
  },
});
```

---

## Configuration

### SDK Initialization

The `initialize` method is used to configure the SDK globally.

#### Example:
```tsx
NueChatSDK.initialize({
  apiKey: 'YOUR_API_KEY',
});
```

#### Parameters:
- `apiKey` (string, required): Your API key for authenticating with the Nuedesk server.
- `user`  (optional): An object containing user information.

#### Example:
```tsx
NueChatSDK.initialize({
  apiKey: 'YOUR_API_KEY',
  user: {
    id: 'user-123',
    email: 'user@example.com',
    firstName: 'John',
    lastName: 'Doe',
  },
});
```

#### User Object:
- `id` (string, required): A unique identifier for the user.
- `email` (string, required): The user's email address.
- `firstName` (string, optional): The user's first name.
- `lastName` (string, optional): The user's last name.

---

## Contributing

We welcome contributions! Please follow the guidelines below:

- [Development workflow](CONTRIBUTING.md#development-workflow)
- [Sending a pull request](CONTRIBUTING.md#sending-a-pull-request)
- [Code of conduct](CODE_OF_CONDUCT.md)

---

## License

This project is licensed under the [MIT License](LICENSE).

---

## Support

If you encounter any issues or have questions, feel free to open an issue on the [GitHub repository](https://github.com/your-org/nuechat-react-native/issues).

---

## Acknowledgments

Special thanks to the Nuedesk team for their support and contributions to this project.