Open-source React Native Chat UI Kit to build your own chat experience.
This is react native redux UI Kit using Channelize.io Javascript SDKs. https://docs.channelize.io/react-native-redux
git clone https://github.com/ChannelizeIO/Channelize-React-Native-Redux-Chat
npm install -g react-native-cli
npm install
For Android: (Please see all the steps in detail in React native doc) a) Install Android Studio (https://developer.android.com/studio/index.html) b) Install Android SDK c) Configure the ANDROID_HOME environment variable d) Connect Android device or Virtual device to Android Studio
Run the react native application by following commands:
npm run start
npm run android
npm run ios
This is the application component which combines all the components and takes Javascript SDK client object as prop and pass this object to all all children components as props.
This component is for listing of all the conversations with a better UI. Moreover when you select a conversation, you will be navigated to ConversationWindow
component.
This component is for displaying, conversation header, message listing and message input box with a better UI. The conversation window supports conversation
and userId
props.
If you pass userId
prop, the component get conversation from userId and render message list.
If you pass conversation
prop, the component will render the message list of the input conversation.
This component renders the image and background color with initials.
This is a context provider which stores the Javascript SDk client
object in provider's value
prop and pass client object to all children components.
This is a higher order function which takes component in input, merge the context data with the input component props and return the component. This function is used to access the context data in component.
To add the components, you need channelize public key and access token which can explore more here
To add the components, you need channelize public key and access token which can explore more here
import { App, ConversationList, ConversationWindow, store } from './src';
// You can use your store file also
import { Channelize } from 'channelize-chat';
import { Provider } from 'react-redux';
export default = (props) => {
var client = new Channelize.client({publicKey: PUBLIC_KEY});
return (
<Provider store={store}>
<App client={client} userId={LOGGEDIN_USER_ID} accessToken={CH_ACCESS_TOKEN}>
<ConversationList />
<ConversationWindow />
</App>
</Provider>
)
}
userId
propimport { App, ConversationWindow, store } from './src';
// You can use your store file also
import { Channelize } from 'channelize-chat';
import { Provider } from 'react-redux';
export default (props) => {
var client = new Channelize.client({publicKey: PUBLIC_KEY});
return (
<Provider store={store}>
<App client={client} userId={LOGGEDIN_USER_ID} accessToken={CH_ACCESS_TOKEN}>
<ConversationWindow userId={USER_ID}/>
</App>
</Provider>
)
}
conversation
propimport React, { useEffect, useState } from 'react';
import { App, ConversationWindow, store } from './src';
// You can use your store file also
import { Channelize } from 'channelize-chat';
import { Provider } from 'react-redux';
export default (props) => {
const [conversation, setConversation] = useState('');
const client = new Channelize.client({publicKey: PUBLIC_KEY});
useEffect(() => {
getConversation();
}, []);
const getConversation = async () => {
const res = await client.connect(USER_ID, ACCESS_TOKEN);
const conversation = await client.Conversation.getConversation(CONVERSATION_ID)
setConversation(conversation);
};
if (!conversation) {
return null;
}
return (
<Provider store={store}>
<App client={client} userId={LOGGEDIN_USER_ID} accessToken={CH_ACCESS_TOKEN}>
<ConversationWindow conversation={conversation}/>
</App>
</Provider>
)
}
Please follow the below steps to add UI kit into your existing app:
store
from UI kit in your application and pass store
in Redux Provider
before using App
component of UI Kit as you can see in the above examples.