{"_id":"@aluixgather/uikit-react-native","name":"@aluixgather/uikit-react-native","dist-tags":{"latest":"0.0.5"},"versions":{"0.0.5":{"name":"@aluixgather/uikit-react-native","version":"0.0.5","description":"Sendbird UIKit for React Native: A feature-rich and customizable chat UI kit with messaging, channel management, and user authentication.","keywords":["sendbird","uikit","react native","chat","messaging","real-time","UI components","user authentication","channel management","SDK integration","customizable","feature-rich","social app","customer support","gaming","API"],"main":"lib/commonjs/index","module":"lib/module/index","types":"lib/typescript/src/index.d.ts","react-native":"src/index","source":"src/index","sideEffects":false,"scripts":{"prepare":"yarn generate-version","test":"jest","build":"yarn generate-version && bob build","clean":"del lib","publish:next":"npm publish --tag next","publish:local":"yalc publish","generate-version":"node scripts/generate-version.js ./src/version.ts","create-domain":"node scripts/create-core-domain"},"repository":{"type":"git","url":"git+https://github.com/sendbird/sendbird-uikit-react-native.git","directory":"packages/uikit-react-native"},"author":{"name":"Sendbird","email":"support@sendbird.com"},"license":"SEE LICENSE IN LICENSE.md","bugs":{"url":"https://github.com/sendbird/sendbird-uikit-react-native.git/issues"},"homepage":"https://github.com/sendbird/sendbird-uikit-react-native.git#readme","publishConfig":{"registry":"https://registry.npmjs.org/","access":"public"},"dependencies":{"@aluixgather/uikit-chat-hooks":"0.0.5","@aluixgather/uikit-react-native-foundation":"0.0.5","@aluixgather/uikit-utils":"0.0.5","@openspacelabs/react-native-zoomable-view":"^2.1.5","@sendbird/uikit-tools":"0.0.1-alpha.66"},"devDependencies":{"@bam.tech/react-native-image-resizer":"^3.0.4","@react-native-camera-roll/camera-roll":"^5.4.0","@react-native-clipboard/clipboard":"^1.8.5","@react-native-community/netinfo":"^9.3.0","@react-native-firebase/app":"^14.4.0","@react-native-firebase/messaging":"^14.4.0","@sendbird/react-native-scrollview-enhancer":"^0.2.1","@types/react":"*","@types/react-native":"*","@types/react-native-video":"^5.0.14","date-fns":"^2.28.0","expo-av":"^13.2.1","expo-clipboard":"^4.1.2","expo-document-picker":"^11.5.3","expo-file-system":"^15.2.2","expo-image-manipulator":"^11.1.1","expo-image-picker":"^14.1.1","expo-media-library":"^15.2.3","expo-notifications":"^0.18.1","expo-video-thumbnails":"^7.2.1","glob":"^7.2.0","inquirer":"^8.2.0","js-convert-case":"^4.2.0","react":"17.0.2","react-native":"0.67.5","react-native-audio-recorder-player":"^3.6.0","react-native-builder-bob":"^0.18.0","react-native-create-thumbnail":"^1.5.1","react-native-document-picker":"^8.0.0","react-native-file-access":"^2.5.0","react-native-image-picker":"^4.7.1","react-native-permissions":"^3.6.0","react-native-safe-area-context":"^3.3.2","react-native-video":"^5.2.0","typescript":"5.2.2"},"peerDependencies":{"@bam.tech/react-native-image-resizer":">=3.0.0","@react-native-camera-roll/camera-roll":">=5.0.0","@react-native-clipboard/clipboard":">=1.8.5","@react-native-community/netinfo":">=9.3.0","@react-native-firebase/messaging":">=14.4.0","@sendbird/chat":"^4.10.7","@sendbird/react-native-scrollview-enhancer":"*","date-fns":">=2.28.0","expo-av":">=12.0.4","expo-clipboard":">=2.1.1","expo-document-picker":">=10.1.3","expo-file-system":">=13.1.4","expo-image-manipulator":">=11.0.0","expo-image-picker":">=12.0.2","expo-notifications":">=0.14.1","expo-video-thumbnails":">=6.4.0","react":">=17.0.2","react-native":">=0.65.0","react-native-audio-recorder-player":">=3.6.0","react-native-create-thumbnail":">=1.5.1","react-native-document-picker":">=8.0.0","react-native-file-access":">=2.4.3","react-native-image-picker":">=4.7.1","react-native-permissions":">=3.6.0","react-native-safe-area-context":">=3.3.2","react-native-video":">=5.2.0"},"peerDependenciesMeta":{"@bam.tech/react-native-image-resizer":{"optional":true},"@react-native-camera-roll/camera-roll":{"optional":true},"@react-native-clipboard/clipboard":{"optional":true},"@react-native-firebase/messaging":{"optional":true},"@sendbird/react-native-scrollview-enhancer":{"optional":true},"expo-av":{"optional":true},"expo-clipboard":{"optional":true},"expo-document-picker":{"optional":true},"expo-file-system":{"optional":true},"expo-image-manipulator":{"optional":true},"expo-image-picker":{"optional":true},"expo-notifications":{"optional":true},"expo-video-thumbnails":{"optional":true},"react-native-create-thumbnail":{"optional":true},"react-native-document-picker":{"optional":true},"react-native-file-access":{"optional":true},"react-native-image-picker":{"optional":true},"react-native-permissions":{"optional":true},"react-native-video":{"optional":true}},"react-native-builder-bob":{"source":"src","output":"lib","targets":["commonjs","module",["typescript",{"project":"tsconfig.build.json"}]]},"gitHead":"56fb6788ab18758b845d1250ea6499119e88977f","_id":"@aluixgather/uikit-react-native@0.0.5","_nodeVersion":"18.17.0","_npmVersion":"lerna/5.6.2/node@v18.17.0+arm64 (darwin)","dist":{"integrity":"sha512-dJE8RdMQj7gZaq3C24YDg6e6xLm1ZwfWN5GfxsyhUM9MpDvxNX9v/geOkBntmuUjBun00YwkEIyvD0H/4+BmGA==","shasum":"ad28344ecdb7c9c1627eff1e771bbcf7c9bcfd1f","tarball":"https://registry.npmjs.org/@aluixgather/uikit-react-native/-/uikit-react-native-0.0.5.tgz","fileCount":1563,"unpackedSize":4729748,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCBbjS+ty/K7Lca9Z+FvC3/yFpByRXK/iNLIzjH6aQ1WwIhAKNg9w9es3V5IbZMJX9EaQBu8BE61yjzLxpS/GlNOua+"}]},"_npmUser":{"name":"aluixgather","email":"alui@gather.town"},"directories":{},"maintainers":[{"name":"aluixgather","email":"alui@gather.town"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/uikit-react-native_0.0.5_1713405114277_0.2265846059248029"},"_hasShrinkwrap":false}},"time":{"created":"2024-04-18T01:51:54.172Z","0.0.5":"2024-04-18T01:51:54.631Z","modified":"2024-04-18T01:51:54.927Z"},"maintainers":[{"name":"aluixgather","email":"alui@gather.town"}],"description":"Sendbird UIKit for React Native: A feature-rich and customizable chat UI kit with messaging, channel management, and user authentication.","homepage":"https://github.com/sendbird/sendbird-uikit-react-native.git#readme","keywords":["sendbird","uikit","react native","chat","messaging","real-time","UI components","user authentication","channel management","SDK integration","customizable","feature-rich","social app","customer support","gaming","API"],"repository":{"type":"git","url":"git+https://github.com/sendbird/sendbird-uikit-react-native.git","directory":"packages/uikit-react-native"},"author":{"name":"Sendbird","email":"support@sendbird.com"},"bugs":{"url":"https://github.com/sendbird/sendbird-uikit-react-native.git/issues"},"license":"SEE LICENSE IN LICENSE.md","readme":"# @sendbird/uikit-react-native\n\n[](https://reactnative.dev/)\n[](https://www.typescriptlang.org/)\n\nSendbird UIKit for React Native: A feature-rich and customizable chat UI kit with messaging, channel management, and user authentication.\n\n> React-Native based UI kit based on sendbird javascript SDK\n\n## Before getting started\n\nThis section shows the prerequisites you need to check to use Sendbird UIKit for React-Native.\n\n### Requirements\n\n- Nodejs 14 or newer\n- Watchman\n- JDK 11 or newer\n- XCode\n- Android Studio\n\nMore details, please see https://reactnative.dev/docs/environment-setup\n\n
\n\n## Getting started\n\nThis section gives you information you need to get started with Sendbird UIKit for React-Native.\n\n### Try the sample app\n\nOur [sample app](/sample) has all the core features of Sendbird UIKit for React-Native.\nDownload the app from our GitHub repository to get an idea of what you can build with the actual UIKit before building your own project.\n\n### Create a project\n\nYou can get started by creating a project. (highly recommended to use typescript)\n\n```sh\nnpx react-native init ChatApp --template=react-native-template-typescript\n```\n\n### Install UIKit for React-Native\n\nUIKit for React-Native can be installed through either `yarn` or `npm`\n\n**Install dependencies**\n\n> Note: If you are using `react-native` version `0.72` or higher, you don't need to install `@sendbird/react-native-scrollview-enhancer`.\n\n```sh\nnpm install @sendbird/uikit-react-native \\\n @sendbird/chat \\\n @sendbird/react-native-scrollview-enhancer \\\n date-fns \\\n react-native-safe-area-context \\\n @react-native-community/netinfo \\\n @react-native-async-storage/async-storage\n```\n\n**Linking native modules**\n\n```sh\nnpx pod-install\n```\n\n### Getting permissions\n\nClient apps must acquire permission from users to get access to their media library and save files to their mobile storage.\nOnce the permission is granted, users can send images and videos to other users and save media files.\n\n**Android**\n\nAdd the following permissions to your `android/app/src/main/AndroidManifest.xml` file.\n\n```xml\n\n\n \n \n \n \n \n \n \n \n\n\n```\n\n**iOS**\n\nAdd the following permission usage descriptions to your `info.plist` file.\n\n| Key | Type | Value |\n| --------------------------------------------------- | ------ | --------------------------------------------------------------- |\n| Privacy - Camera Usage Description | string | $(PRODUCT_NAME) would like to use your camera |\n| Privacy - Photo Library Usage Description | string | $(PRODUCT_NAME) would like access to your photo library |\n| Privacy - Photo Library Additions Usage Description | string | $(PRODUCT_NAME) would like to save photos to your photo library |\n\n> **NOTE**: If you use [react-native-permissions](https://github.com/zoontek/react-native-permissions#ios), you must update permissions and run `pod install`\n\n
\n\n## Implementation guide\n\n### Install a native modules\n\nIn order to use the APIs and features of the native module in the UIKit for React Native, you need to implement the platform service interfaces that Sendbird provides.\nAfter implementing all the interfaces, you can set them as props of `SendbirdUIKitContainer` to use the native module features across Sendbird UIKit for React-Native.\n\n```tsx\nconst App = () => {\n return (\n \n {/* ... */}\n \n );\n};\n```\n\nIn order to implement the interfaces to your React Native app more easily, we provide various helper functions for each interface.\n\n> **NOTE**: Helper function is not required! You can implement it with native modules you're using.\n> More details about PlatformService interfaces, please see [here](https://sendbird.com/docs/chat/uikit/v3/react-native/core-components/provider/platformserviceprovider)\n\n**Using React Native CLI**\n\nYou can use `createNativeClipboardService`, `createNativeNotificationService`, `createNativeFileService` and `createNativeMediaService` helper functions with below native modules.\n\n```sh\nnpm install react-native-video \\\n react-native-permissions \\\n react-native-file-access \\\n react-native-image-picker \\\n react-native-document-picker \\\n react-native-create-thumbnail \\\n react-native-audio-recorder-player \\\n @react-native-clipboard/clipboard \\\n @react-native-camera-roll/camera-roll \\\n @react-native-firebase/app \\\n @react-native-firebase/messaging \\\n @bam.tech/react-native-image-resizer\n\nnpx pod-install\n```\n\n```ts\nimport Clipboard from '@react-native-clipboard/clipboard';\nimport { CameraRoll } from '@react-native-camera-roll/camera-roll';\nimport RNFBMessaging from '@react-native-firebase/messaging';\nimport Video from 'react-native-video';\nimport * as DocumentPicker from 'react-native-document-picker';\nimport * as FileAccess from 'react-native-file-access';\nimport * as ImagePicker from 'react-native-image-picker';\nimport * as Permissions from 'react-native-permissions';\nimport * as CreateThumbnail from 'react-native-create-thumbnail';\nimport * as ImageResizer from '@bam.tech/react-native-image-resizer';\nimport * as AudioRecorderPlayer from 'react-native-audio-recorder-player';\n\nconst nativePlatformServices = {\n clipboard: createNativeClipboardService(Clipboard),\n notification: createNativeNotificationService({\n messagingModule: RNFBMessaging,\n permissionModule: Permissions,\n }),\n file: createNativeFileService({\n imagePickerModule: ImagePicker,\n documentPickerModule: DocumentPicker,\n permissionModule: Permissions,\n fsModule: FileAccess,\n mediaLibraryModule: CameraRoll,\n }),\n media: createNativeMediaService({\n VideoComponent: Video,\n thumbnailModule: CreateThumbnail,\n imageResizerModule: ImageResizer,\n }),\n player: createNativePlayerService({\n audioRecorderModule: AudioRecorderPlayer,\n permissionModule: Permissions,\n }),\n recorder: createNativeRecorderService({\n audioRecorderModule: AudioRecorderPlayer,\n permissionModule: Permissions,\n }),\n};\n```\n\n**Using Expo CLI**\n\nYou can use `createExpoClipboardService`, `createExpoNotificationService`, `createExpoFileService` and `createExpoMediaService` helper functions with below expo modules.\n\n```sh\nexpo install expo-image-picker \\\n expo-document-picker \\\n expo-media-library \\\n expo-file-system \\\n expo-clipboard \\\n expo-notifications \\\n expo-av \\\n expo-video-thumbnails \\\n expo-image-manipulator\n```\n\n```ts\nimport * as ExpoClipboard from 'expo-clipboard';\nimport * as ExpoDocumentPicker from 'expo-document-picker';\nimport * as ExpoFS from 'expo-file-system';\nimport * as ExpoImagePicker from 'expo-image-picker';\nimport * as ExpoMediaLibrary from 'expo-media-library';\nimport * as ExpoNotifications from 'expo-notifications';\nimport * as ExpoAV from 'expo-av';\nimport * as ExpoVideoThumbnail from 'expo-video-thumbnails';\nimport * as ExpoImageManipulator from 'expo-image-manipulator';\n\nconst expoPlatformServices = {\n clipboard: createExpoClipboardService(ExpoClipboard),\n notification: createExpoNotificationService(ExpoNotifications),\n file: createExpoFileService({\n fsModule: ExpoFS,\n imagePickerModule: ExpoImagePicker,\n mediaLibraryModule: ExpoMediaLibrary,\n documentPickerModule: ExpoDocumentPicker,\n }),\n media: createExpoMediaService({\n avModule: ExpoAV,\n thumbnailModule: ExpoVideoThumbnail,\n imageManipulator: ExpoImageManipulator,\n fsModule: ExpoFS,\n }),\n player: createExpoPlayerService({\n avModule: ExpoAV,\n }),\n recorder: createExpoRecorderService({\n avModule: ExpoAV,\n }),\n};\n```\n\n### Local caching (required)\n\nYou can implement Local caching easily.\n\n```shell\nnpm i @react-native-async-storage/async-storage\nnpx pod-install\n```\n\n```tsx\nimport AsyncStorage from '@react-native-async-storage/async-storage';\n\nimport { SendbirdUIKitContainer } from '@sendbird/uikit-react-native';\n\nconst App = () => {\n return {/* ... */};\n};\n```\n\nOr you can use storage you are using instead of `AsyncStorage` (e.g. [`react-native-mmkv`](https://github.com/mrousavy/react-native-mmkv))\n\n```tsx\nimport { MMKV } from 'react-native-mmkv';\n\nimport { LocalCacheStorage, SendbirdUIKitContainer } from '@sendbird/uikit-react-native';\n\nconst mmkvStorage = new MMKV();\nconst localCacheStorage: LocalCacheStorage = {\n async getAllKeys() {\n return mmkvStorage.getAllKeys();\n },\n async setItem(key: string, value: string) {\n return mmkvStorage.set(key, value);\n },\n async getItem(key: string) {\n return mmkvStorage.getString(key) ?? null;\n },\n async removeItem(key: string) {\n return mmkvStorage.delete(key);\n },\n};\n\nconst App = () => {\n return {/* ... */};\n};\n```\n\n### Integration with navigation library\n\nNow you can create a screen and integrate it with a navigation library like [`react-navigation`](https://reactnavigation.org/).\nSee more details on [here](https://sendbird.com/docs/chat/uikit/v3/react-native/introduction/screen-navigation)\n\nThe example below shows how to integrate using `react-navigation`.\n\n**Create a fragments and screens**\n\n```tsx\nimport { useNavigation, useRoute } from '@react-navigation/native';\n\nimport { useGroupChannel } from '@sendbird/uikit-chat-hooks';\nimport {\n createGroupChannelCreateFragment,\n createGroupChannelFragment,\n createGroupChannelListFragment,\n} from '@sendbird/uikit-react-native';\n\nconst GroupChannelListFragment = createGroupChannelListFragment();\nconst GroupChannelCreateFragment = createGroupChannelCreateFragment();\nconst GroupChannelFragment = createGroupChannelFragment();\n\nconst GroupChannelListScreen = () => {\n const navigation = useNavigation();\n return (\n {\n // Navigate to GroupChannelCreate function.\n navigation.navigate('GroupChannelCreate', { channelType });\n }}\n onPressChannel={(channel) => {\n // Navigate to GroupChannel function.\n navigation.navigate('GroupChannel', { channelUrl: channel.url });\n }}\n />\n );\n};\n\nconst GroupChannelCreateScreen = () => {\n const navigation = useNavigation();\n\n return (\n {\n // Navigate to GroupChannel function.\n navigation.replace('GroupChannel', { channelUrl: channel.url });\n }}\n onPressHeaderLeft={() => {\n // Go back to the previous screen.\n navigation.goBack();\n }}\n />\n );\n};\n\nconst GroupChannelScreen = () => {\n const navigation = useNavigation();\n const { params } = useRoute();\n\n const { sdk } = useSendbirdChat();\n const { channel } = useGroupChannel(sdk, params.channelUrl);\n if (!channel) return null;\n\n return (\n {\n // Navigate to GroupChannelList function.\n navigation.navigate('GroupChannelList');\n }}\n onPressHeaderLeft={() => {\n // Go back to the previous screen.\n navigation.goBack();\n }}\n onPressHeaderRight={() => {\n // Navigate to GroupChannelSettings function.\n navigation.navigate('GroupChannelSettings', { channelUrl: params.channelUrl });\n }}\n />\n );\n};\n```\n\n**Register screens to navigator**\n\n```tsx\nimport { NavigationContainer } from '@react-navigation/native';\nimport { createNativeStackNavigator } from '@react-navigation/native-stack';\n\nimport { SendbirdUIKitContainer, useConnection, useSendbirdChat } from '@sendbird/uikit-react-native';\n\nconst RootStack = createNativeStackNavigator();\nconst SignInScreen = () => {\n const { connect } = useConnection();\n\n return (\n \n connect('USER_ID', { nickname: 'NICKNAME' })}\n >\n {'Sign in'}\n \n \n );\n};\n\nconst Navigation = () => {\n const { currentUser } = useSendbirdChat();\n\n return (\n \n \n {!currentUser ? (\n \n ) : (\n <>\n \n \n \n \n )}\n \n \n );\n};\n\nconst App = () => {\n return (\n \n \n \n );\n};\n```\n\n> You can use sendbird sdk using `useSendbirdChat()` hook, and you can connect or disconnect using `useConnection()` hook.\n> for more details about hooks, please refer to our [docs](https://sendbird.com/docs/chat/uikit/v3/react-native/core-components/hooks)\n","readmeFilename":"README.md"}