|
1 | 1 | # sendbird-uikit-react-native |
2 | 2 |
|
3 | | -uikit |
| 3 | +[](https://reactnative.dev/) |
| 4 | +[](https://www.typescriptlang.org/) |
4 | 5 |
|
5 | | -[](https://github.com/sendbird/sendbird-uikit-react-native/actions/workflows/status-build.yml) |
6 | | -[](https://github.com/sendbird/sendbird-uikit-react-native/actions/workflows/status-test.yml) |
| 6 | +> React-Native based UI kit based on sendbird javascript SDK |
7 | 7 |
|
8 | | ---- |
| 8 | +## Introduction |
| 9 | + |
| 10 | +Sendbird UIKit for React-Native is a development kit with an user interface that enables an easy and fast integration of standard chat features into new or existing client apps. |
| 11 | +This mono-repository the UIKit source code is consists as explained below. |
| 12 | + |
| 13 | +- [**packages/uikit-react-native**](/packages/uikit-react-native) is where you can find the open source code. Check out [UIKit Open Source Guidelines](/OPENSOURCE_GUIDELINES.md) for more information regarding our stance on open source. |
| 14 | +- [**sample**](/sample) is a chat app with UIKit’s core features in which you can see items such as push notifications, total unread message count and auto sign-in are demonstrated. When you sign in to the sample app, you will only see a list of channels rendered by the [GroupChannelListFragment](https://sendbird.com/docs/uikit/v3/react-native/key-functions/list-channels) on the screen. |
| 15 | +- [**packages/uikit-react-native-foundation**](/packages/uikit-react-native-foundation) is a UI package for `uikit-react-native`. |
| 16 | +- [**packages/uikit-chat-hooks**](/packages/uikit-chat-hooks) is a react hooks package for `uikit-react-native`. |
| 17 | +- [**packages/uikit-utils**](/packages/uikit-utils) is a utility package for `uikit-react-native`. |
| 18 | + |
| 19 | +### More about Sendbird UIKit for React-Native |
| 20 | + |
| 21 | +Find out more about Sendbird UIKit for React-Native at [UIKit for React Native doc](https://sendbird.com/docs/uikit/v3/react-native/overview). |
| 22 | +If you need any help in resolving any issues or have questions, visit [our community](https://community.sendbird.com). |
| 23 | + |
| 24 | +<br/> |
| 25 | + |
| 26 | +## Requirements |
| 27 | + |
| 28 | +- Nodejs 14 or newer |
| 29 | +- [yarn v1](https://classic.yarnpkg.com/en/docs/install) |
| 30 | +- Watchman |
| 31 | +- JDK 11 or newer |
| 32 | +- XCode |
| 33 | +- Android Studio |
| 34 | + |
| 35 | +More details, please see https://reactnative.dev/docs/environment-setup |
| 36 | + |
| 37 | +<br/> |
| 38 | + |
| 39 | +## Try the sample app |
| 40 | + |
| 41 | +We are using sample app for development, you can check the sample app [here](/sample) and also check the UI components via storybook in the sample app. |
| 42 | + |
| 43 | +### Installation |
| 44 | + |
| 45 | +> Every script should be run on the root of the project. |
| 46 | +
|
| 47 | +**Install node modules** |
| 48 | + |
| 49 | +```shell |
| 50 | +yarn install |
| 51 | +``` |
| 52 | + |
| 53 | +**Linking native modules of sample app** |
| 54 | + |
| 55 | +```shell |
| 56 | +yarn sample:pod-install |
| 57 | +``` |
| 58 | + |
| 59 | +**Running sample app** |
| 60 | + |
| 61 | +- Android |
| 62 | + |
| 63 | +```shell |
| 64 | +yarn sample:android |
| 65 | +``` |
| 66 | + |
| 67 | +- iOS |
| 68 | + |
| 69 | +```shell |
| 70 | +yarn sample:ios |
| 71 | +``` |
| 72 | + |
| 73 | +### Sample app using your data |
| 74 | + |
| 75 | +Create a file to `sample/src/env.ts` and write the code below to the file you created. |
| 76 | + |
| 77 | +```ts |
| 78 | +export const APP_ID = '2D7B4CDB-932F-4082-9B09-A1153792DC8D'; |
| 79 | +``` |
| 80 | + |
| 81 | +If you would like to try the sample app specifically fit to your usage, you can do so by replacing the default sample app ID with yours, which you can obtain by creating your [Sendbird application from the dashboard](https://dashboard.sendbird.com/). |
| 82 | + |
| 83 | +<br /> |
| 84 | + |
| 85 | +## Development |
| 86 | + |
| 87 | +We tried development on macOS / Linux systems. You might encounter problems in running sample or scripts like `yarn build` in Windows machines. |
| 88 | + |
| 89 | +### Creating a new key function files |
| 90 | + |
| 91 | +Run the script and enter the key function name as a lower camel case like `groupChannel`, and then you can see the auto generated files in the `/packages/uikit-react-native/src/domain` |
| 92 | + |
| 93 | +```shell |
| 94 | +yarn workspace @sendbird/uikit-react-native run create-domain |
| 95 | +``` |
| 96 | + |
| 97 | +### Managing repository |
| 98 | + |
| 99 | +> **Note** |
| 100 | +> We are using [yarn workspaces](https://classic.yarnpkg.com/en/docs/workspaces) and [lerna](https://github.com/lerna/lerna) to maintain this monorepo |
| 101 | +
|
| 102 | +#### Package dependencies |
| 103 | + |
| 104 | +See [yarn workspace](https://classic.yarnpkg.com/en/docs/cli/workspace) |
| 105 | + |
| 106 | +```shell |
| 107 | +# Add dependency to specific workspace package |
| 108 | +yarn workspace @sendbird/package add package-name |
| 109 | +# Remove dependency from specific workspace package |
| 110 | +yarn workspace @sendbird/package remove package-name |
| 111 | + |
| 112 | +# Add dependency to root |
| 113 | +yarn workspace -W add package-name |
| 114 | +``` |
| 115 | + |
| 116 | +> **Warning** You should better install to root if you're trying to install native view modules. |
| 117 | +> Sometimes native view module in the workspace is not hoisted, and it leads to `Tried to register two views` error on the sample app. |
| 118 | +
|
| 119 | +#### Bump version |
| 120 | + |
| 121 | +See [lerna version](https://github.com/lerna/lerna/tree/main/commands/version) |
| 122 | + |
| 123 | +```shell |
| 124 | +lerna version {major|minor|patch} [--no-git-tag-version] [--no-private] |
| 125 | + |
| 126 | +# or |
| 127 | + |
| 128 | +yarn bump:{major|minor|patch} |
| 129 | +``` |
| 130 | + |
| 131 | +#### Publish |
| 132 | + |
| 133 | +See [lerna publish](https://github.com/lerna/lerna/tree/main/commands/publish) |
| 134 | + |
| 135 | +<br/> |
9 | 136 |
|
10 | 137 | ## Scripts |
11 | 138 |
|
12 | | -### Lint & Prettier |
| 139 | +### Build |
13 | 140 |
|
14 | | -- check: `yarn lint` |
15 | | -- fix: `yarn fix` |
| 141 | +```shell |
| 142 | +yarn build |
| 143 | +``` |
16 | 144 |
|
17 | 145 | ### Test |
18 | 146 |
|
19 | | -- test: `yarn test` |
| 147 | +```shell |
| 148 | +# Unit test |
| 149 | +yarn test |
20 | 150 |
|
21 | | -### Package dependencies |
| 151 | +# Build test |
| 152 | +yarn test:build |
| 153 | +``` |
22 | 154 |
|
23 | | -- add: `yarn workspace @sendbird/package add some-package` |
24 | | -- remove: `yarn workspace @sendbird/package remove some-package` |
| 155 | +### Lint and Prettier |
25 | 156 |
|
26 | | -### Publish |
27 | | -> Bump > Build > Deploy |
| 157 | +```shell |
| 158 | +# Check formatting |
| 159 | +yarn lint |
28 | 160 |
|
29 | | -- bump script: `lerna version {major|minor|patch} [--no-git-tag-version] [--no-private]` or `yarn bump:{major|minor|patch}` |
30 | | -- build script: `yarn build` |
| 161 | +# Fix formatting |
| 162 | +yarn fix |
| 163 | +``` |
0 commit comments