├── .editorconfig ├── .gitattributes ├── .github ├── actions │ └── setup │ │ └── action.yml └── workflows │ └── ci.yml ├── .gitignore ├── .husky └── prepare-commit-msg ├── .nvmrc ├── .watchmanconfig ├── .yarn ├── plugins │ └── @yarnpkg │ │ ├── plugin-interactive-tools.cjs │ │ └── plugin-workspace-tools.cjs └── releases │ └── yarn-3.6.1.cjs ├── .yarnrc.yml ├── CODE_OF_CONDUCT.md ├── CONTRIBUTING.md ├── LICENSE ├── README.md ├── amityco-react-native-social-ui-kit-0.5.6.tgz ├── amityco-react-native-social-ui-kit-4.0.0.beta-1.tgz ├── assets ├── fonts │ ├── SFProText-Regular.ttf │ └── SFProText-Semibold.ttf └── icon │ ├── BackIcon.png │ ├── GroupChat.png │ ├── GroupChat.svg │ ├── Option.svg │ ├── Placeholder.png │ ├── Private.svg │ ├── Public.svg │ ├── addChat.png │ ├── arrowRight-2.png │ ├── arrowRight.png │ ├── back.svg │ ├── camera.png │ ├── cameraIcon.png │ ├── comment.svg │ ├── communityAvatar.png │ ├── editPencil-not-filled.png │ ├── editPencil.png │ ├── followPlus.png │ ├── gallery.png │ ├── groupMember.png │ ├── keyboard.png │ ├── mic.png │ ├── person.svg │ ├── plus.png │ ├── report.png │ ├── send.png │ ├── setting.png │ ├── threeDot.png │ ├── unfollow.png │ └── voice.png ├── babel.config.js ├── example ├── App.js ├── app.json ├── assets │ ├── adaptive-icon.png │ ├── favicon.png │ ├── icon.png │ └── splash.png ├── babel.config.js ├── eas.json ├── metro.config.js ├── package.json ├── src │ └── App.tsx ├── tsconfig.json ├── uikit.config.json └── webpack.config.js ├── lefthook.yml ├── package.json ├── src ├── Elements │ ├── BackButtonIconElement │ │ └── BackButtonIconElement.tsx │ ├── CloseButtonIconElement │ │ └── CloseButtonIconElement.tsx │ ├── CommentButtonIconElement │ │ └── CommentButtonIconElement.tsx │ ├── CommonElements │ │ ├── AvatarElement.tsx │ │ ├── CategoryElement.tsx │ │ ├── ImageElement.tsx │ │ └── TextElement.tsx │ ├── ImageKeyElement │ │ └── ImageKeyElement.tsx │ ├── LikeButtonIconElement │ │ └── LikeButtonIconElement.tsx │ ├── MenuButtonIconElement │ │ └── MenuButtonIconElement.tsx │ ├── ModeratorBadgeElement │ │ ├── ModeratorBadgeElement.tsx │ │ └── styles.ts │ ├── ShareButtonIconElement │ │ └── ShareButtonIconElement.tsx │ ├── TextKeyElement │ │ └── TextKeyElement.tsx │ └── TimestampElement │ │ └── TimestampElement.tsx ├── __tests__ │ └── index.test.tsx ├── assets │ ├── fonts │ │ ├── SFProText-Regular.ttf │ │ └── SFProText-Semibold.ttf │ ├── icon │ │ ├── BackIcon.png │ │ ├── GroupChat.png │ │ ├── GroupChat.svg │ │ ├── Option.svg │ │ ├── Placeholder.png │ │ ├── Private.svg │ │ ├── Public.svg │ │ ├── addChat.png │ │ ├── arrowRight-2.png │ │ ├── arrowRight.png │ │ ├── back.svg │ │ ├── camera.png │ │ ├── cameraIcon.png │ │ ├── comment.svg │ │ ├── communityAvatar.png │ │ ├── editPencil-not-filled.png │ │ ├── editPencil.png │ │ ├── emptyFeedIcon_dark.png │ │ ├── emptyFeedIcon_light.png │ │ ├── followPlus.png │ │ ├── gallery.png │ │ ├── groupMember.png │ │ ├── keyboard.png │ │ ├── mic.png │ │ ├── person.svg │ │ ├── plus.png │ │ ├── previewLinkDefaultBackground.png │ │ ├── report.png │ │ ├── send.png │ │ ├── setting.png │ │ ├── threeDot.png │ │ ├── unfollow.png │ │ └── voice.png │ └── index.ts ├── components │ ├── AddMembersModal │ │ ├── index.tsx │ │ └── styles.ts │ ├── AmityCommunitySearchResultComponent │ │ └── AmityCommunitySearchResultComponent.tsx │ ├── AmityDetailedMediaAttachmentComponent │ │ ├── AmityDetailedMediaAttachmentComponent.tsx │ │ └── styles.ts │ ├── AmityEmptyNewsFeedComponent │ │ ├── AmityEmptyNewsFeedComponent.tsx │ │ ├── Elements │ │ │ ├── CreateCommunityButton.tsx │ │ │ ├── Description.tsx │ │ │ ├── ExploreCommunityButton.tsx │ │ │ ├── Illustration.tsx │ │ │ ├── Title.tsx │ │ │ ├── index.ts │ │ │ └── styles │ │ │ │ └── styles.ts │ │ └── styles.ts │ ├── AmityGlobalFeedComponent │ │ ├── AmityGlobalFeedComponent.tsx │ │ └── styles.ts │ ├── AmityMediaAttachmentComponent │ │ ├── AmityMediaAttachmentComponent.tsx │ │ └── styles.ts │ ├── AmityMyCommunitiesComponent │ │ ├── AmityMyCommunitiesComponent.tsx │ │ └── styles.ts │ ├── AmityNewsFeedComponent │ │ └── AmityNewsFeedComponent.tsx │ ├── AmityPostCommentComponent │ │ ├── AmityPostCommentComponent.tsx │ │ ├── CommentListItem │ │ │ ├── CommentListItem.tsx │ │ │ └── styles.ts │ │ ├── ReplyCommentList │ │ │ ├── index.tsx │ │ │ └── styles.ts │ │ └── styles.ts │ ├── AmityPostContentComponent │ │ ├── AmityPostContentComponent.tsx │ │ └── styles.ts │ ├── AmityPostEngagementActionsComponent │ │ ├── AmityPostEngagementActionsComponent.tsx │ │ └── Components │ │ │ ├── DetailStyle.tsx │ │ │ ├── FeedStyle.tsx │ │ │ ├── index.ts │ │ │ ├── styles.tsx │ │ │ └── type.ts │ ├── AmityReactionListComponent │ │ ├── AmityReactionListComponent.tsx │ │ └── styles.ts │ ├── AmitySocialHomeTopNavigationComponent │ │ └── AmitySocialHomeTopNavigationComponent.tsx │ ├── AmityTopSearchBarComponent │ │ ├── AmityTopSearchBarComponent.tsx │ │ └── styles.ts │ ├── BackButton │ │ ├── index.tsx │ │ └── styles.ts │ ├── ChooseCategoryModal │ │ ├── Components │ │ │ └── Categories.tsx │ │ ├── index.tsx │ │ └── styles.ts │ ├── CloseButton │ │ ├── index.tsx │ │ └── styles.ts │ ├── CreatePostChooseTargetModal │ │ ├── CreatePostChooseTargetModal.tsx │ │ └── styles.ts │ ├── CustomSocialTab │ │ ├── CustomSocialTab.tsx │ │ └── styles.ts │ ├── CustomTab │ │ ├── index.tsx │ │ └── styles.ts │ ├── CustomTabV3 │ │ ├── index.tsx │ │ └── styles.ts │ ├── CustomText │ │ ├── index.tsx │ │ └── styles.ts │ ├── DoneButton │ │ ├── index.tsx │ │ └── styles.ts │ ├── EditCommentModal │ │ ├── index.tsx │ │ └── styles.ts │ ├── EditPostModal │ │ ├── index.tsx │ │ └── styles.ts │ ├── FloatingButton │ │ ├── index.tsx │ │ └── styles.ts │ ├── Gallery │ │ ├── GalleryComponent.tsx │ │ ├── GalleryTab.tsx │ │ └── styles.ts │ ├── ListSectionHeader │ │ ├── index.tsx │ │ └── styles.ts │ ├── LoadingImage │ │ ├── index.tsx │ │ └── styles.ts │ ├── LoadingImageV4 │ │ ├── index.tsx │ │ └── styles.ts │ ├── LoadingIndicator │ │ ├── index.tsx │ │ └── styles.ts │ ├── LoadingOverlay │ │ ├── index.tsx │ │ └── styles.ts │ ├── LoadingVideo │ │ ├── index.tsx │ │ └── styles.ts │ ├── LoadingVideoV4 │ │ ├── index.tsx │ │ └── styles.ts │ ├── MediaSection │ │ ├── index.tsx │ │ └── styles.ts │ ├── MentionInput │ │ ├── AmityMentionInput.tsx │ │ └── styles.ts │ ├── MentionPopup │ │ ├── index.tsx │ │ └── styles.ts │ ├── MyAvatar │ │ └── MyAvatar.tsx │ ├── MyCommunity │ │ ├── Components │ │ │ └── CommunityList.tsx │ │ ├── index.tsx │ │ └── styles.ts │ ├── MyStories │ │ ├── index.tsx │ │ └── styles.ts │ ├── NewsFeedLoadingComponent │ │ ├── NewsFeedLoadingComponent.tsx │ │ └── styles.ts │ ├── PollSection │ │ ├── Components │ │ │ ├── PollBar.tsx │ │ │ └── PollOptionList.tsx │ │ ├── PollSection.tsx │ │ ├── style.ts │ │ └── usePoll.ts │ ├── PostTypeChoiceModal │ │ ├── PostTypeChoiceModal.tsx │ │ └── style.ts │ ├── PreviewLink │ │ ├── LinkPreview.tsx │ │ ├── index.ts │ │ ├── styles.ts │ │ ├── types.ts │ │ └── utils.ts │ ├── RenderTextWithMention │ │ ├── RenderTextWithMention.tsx │ │ └── styles.ts │ ├── RoundCheckbox │ │ ├── index.tsx │ │ └── styles.ts │ ├── SearchBar │ │ ├── index.tsx │ │ └── styles.ts │ ├── SearchItem │ │ ├── index.tsx │ │ └── styles.ts │ ├── SearchResultItem │ │ ├── SearchResultItem.tsx │ │ └── styles.ts │ ├── SelectedUserHorizontal │ │ ├── index.tsx │ │ └── styles.ts │ ├── Social │ │ ├── CommentList │ │ │ ├── index.tsx │ │ │ └── styles.ts │ │ ├── PendingPostList │ │ │ ├── index.tsx │ │ │ └── styles.ts │ │ ├── PostList │ │ │ ├── Components │ │ │ │ └── RenderTextWithMention.tsx │ │ │ ├── index.tsx │ │ │ └── styles.ts │ │ └── ReplyCommentList │ │ │ ├── index.tsx │ │ │ └── styles.ts │ ├── Toast │ │ └── Toast.tsx │ ├── UserItem │ │ ├── index.tsx │ │ └── styles.ts │ └── react-native-image-viewing │ │ ├── LICENSE │ │ ├── README.md │ │ └── dist │ │ ├── @types │ │ ├── index.d.ts │ │ └── index.js │ │ ├── ImageViewing.d.ts │ │ ├── ImageViewing.js │ │ ├── components │ │ ├── ImageDefaultHeader.d.ts │ │ ├── ImageDefaultHeader.js │ │ ├── ImageItem │ │ │ ├── ImageItem.android.d.ts │ │ │ ├── ImageItem.android.js │ │ │ ├── ImageItem.ios.d.ts │ │ │ ├── ImageItem.ios.js │ │ │ ├── ImageLoading.d.ts │ │ │ └── ImageLoading.js │ │ ├── Modal │ │ │ ├── Modal.android.d.ts │ │ │ ├── Modal.android.js │ │ │ ├── Modal.d.ts │ │ │ ├── Modal.ios.d.ts │ │ │ ├── Modal.ios.js │ │ │ └── Modal.js │ │ ├── StatusBarManager.d.ts │ │ └── StatusBarManager.js │ │ ├── hooks │ │ ├── useAnimatedComponents.d.ts │ │ ├── useAnimatedComponents.js │ │ ├── useDoubleTapToZoom.d.ts │ │ ├── useDoubleTapToZoom.js │ │ ├── useImageDimensions.d.ts │ │ ├── useImageDimensions.js │ │ ├── useImageIndexChange.d.ts │ │ ├── useImageIndexChange.js │ │ ├── useImagePrefetch.d.ts │ │ ├── useImagePrefetch.js │ │ ├── usePanResponder.d.ts │ │ ├── usePanResponder.js │ │ ├── useRequestClose.d.ts │ │ ├── useRequestClose.js │ │ ├── useZoomPanResponder.d.ts │ │ └── useZoomPanResponder.js │ │ ├── index.d.ts │ │ ├── index.js │ │ ├── utils.d.ts │ │ └── utils.js ├── configAssets │ └── icons │ │ ├── aspect_ratio.png │ │ ├── backButtonIcon.png │ │ ├── badgeIcon.png │ │ ├── clear.png │ │ ├── commentButtonIcon.png │ │ ├── emptyFeedIcon_dark.png │ │ ├── emptyFeedIcon_light.png │ │ ├── exploreCommunityIcon.png │ │ ├── hyperlink_button.png │ │ ├── likeButtonIcon.png │ │ ├── lockIcon.png │ │ ├── menuIcon.png │ │ ├── mute.png │ │ ├── officialBadgeIcon.png │ │ ├── plus.png │ │ ├── search.png │ │ ├── shareButtonIcon.png │ │ └── unmute.png ├── enum │ ├── AmityPostContentComponentStyle.ts │ ├── enumTheme.ts │ ├── enumUIKitID.ts │ ├── imageSizeState copy.ts │ ├── imageSizeState.ts │ ├── index.ts │ ├── mediaAttachmentEnum.ts │ ├── post.ts │ ├── postTargetType.ts │ ├── privacyState.ts │ ├── sessionState.ts │ ├── storyType.ts │ └── tabNameState.ts ├── hooks │ ├── index.ts │ ├── useAmityGlobalSearchViewModel.ts │ ├── useAuth.ts │ ├── useCategory.ts │ ├── useCommunities.ts │ ├── useCommunity.ts │ ├── useConfig.ts │ ├── useConfigImageUri.ts │ ├── useDarkMode.ts │ ├── useFile.ts │ ├── useFilev4.ts │ ├── useGallery.ts │ ├── useGalleryV3.ts │ ├── useGenerateThemeStyles.ts │ ├── useIsCommunityModerator.ts │ ├── useKeyboardStatus.ts │ ├── usePostImpression.ts │ ├── useReaction.ts │ ├── useSearch.ts │ ├── useTimeDifference.ts │ ├── useUiKitConfig.ts │ ├── useUiKitReference.ts │ ├── useUser.ts │ └── useValidateConfig.ts ├── index.tsx ├── providers │ ├── BehaviourProvider.tsx │ ├── Social │ │ ├── comment-sdk.ts │ │ ├── communities-sdk.ts │ │ └── feed-sdk.ts │ ├── amity-ui-kit-provider.tsx │ ├── auth-provider.tsx │ ├── config-provider.tsx │ ├── file-provider.tsx │ └── user-provider.tsx ├── redux │ ├── slices │ │ ├── feedSlice.ts │ │ ├── globalfeedSlice.ts │ │ ├── postDetailSlice.ts │ │ └── uiSlice.ts │ └── store │ │ └── index.ts ├── routes │ ├── RouteParamList.tsx │ ├── SocialNavigator.tsx │ └── style.ts ├── screens │ ├── AllMyCommunity │ │ ├── index.tsx │ │ └── styles.ts │ ├── AmityPostComposerPage │ │ ├── AmityPostComposerPage.tsx │ │ └── styles.ts │ ├── AmityPostDetailPage │ │ ├── AmityPostDetailPage.tsx │ │ └── styles.ts │ ├── AmitySocialGlobalSearchPage │ │ ├── AmitySocialGlobalSearchPage.tsx │ │ └── styles.ts │ ├── CategorytList │ │ ├── index.tsx │ │ └── styles.ts │ ├── CommunityHome │ │ ├── index.tsx │ │ └── styles.ts │ ├── CommunityList │ │ ├── index.tsx │ │ └── styles.ts │ ├── CommunityMemberDetail │ │ ├── CommunityMemberDetail.tsx │ │ ├── Components │ │ │ ├── CommunityMembersTab.tsx │ │ │ └── MemberActionModal.tsx │ │ └── styles.ts │ ├── CommunitySearch │ │ ├── index.tsx │ │ └── styles.ts │ ├── CommunitySetting │ │ ├── index.tsx │ │ └── styles.ts │ ├── CreateCommunity │ │ ├── index.tsx │ │ └── styles.ts │ ├── CreatePoll │ │ ├── Components │ │ │ └── Header.tsx │ │ ├── CreatePoll.tsx │ │ └── styles.tsx │ ├── CreatePost │ │ ├── index.tsx │ │ └── styles.ts │ ├── EditCommunity │ │ ├── EditCommunity.tsx │ │ └── styles.ts │ ├── EditPost │ │ └── EditPost.tsx │ ├── EditProfile │ │ ├── EditProfile.tsx │ │ └── styles.ts │ ├── Explore │ │ ├── index.tsx │ │ └── styles.ts │ ├── Feed │ │ ├── index.tsx │ │ └── styles.ts │ ├── FollowerList │ │ ├── Components │ │ │ └── FollowerListItem.tsx │ │ ├── FollowerList.tsx │ │ └── styles.ts │ ├── GlobalFeed │ │ ├── index.tsx │ │ └── styles.ts │ ├── Home │ │ ├── index.tsx │ │ └── styles.ts │ ├── MyUserProfile │ │ ├── index.tsx │ │ └── styles.ts │ ├── PendingPosts │ │ ├── index.tsx │ │ └── styles.ts │ ├── PostDetail │ │ ├── index.tsx │ │ └── styles.ts │ ├── PreloadCommunityHome │ │ ├── index.tsx │ │ └── styles.ts │ ├── UserPendingRequest │ │ ├── Components │ │ │ └── PendingFollowerListItem.tsx │ │ ├── UserPendingRequest.tsx │ │ └── styles.ts │ ├── UserProfile │ │ ├── Components │ │ │ ├── GalleryTab.tsx │ │ │ └── UserProfileGallery.tsx │ │ ├── UserProfile.tsx │ │ └── styles.ts │ └── UserProfileSetting │ │ ├── UserProfileSetting.tsx │ │ └── styles.ts ├── svg │ ├── ArrowBackIcon.tsx │ ├── ArrowDownIcon.tsx │ ├── ArrowForwardIcon.tsx │ ├── ArrowOutlinedIcon.tsx │ ├── AvatarIcon.tsx │ ├── BlockOrUnBlockIcon.tsx │ ├── CameraIcon.tsx │ ├── CategoryIcon.tsx │ ├── ChevronLeftcon.tsx │ ├── ChevronRightIcon.tsx │ ├── CircleCloseIcon.tsx │ ├── CloseIcon.tsx │ ├── CommentIcon.tsx │ ├── CommunityIcon.tsx │ ├── EditIcon.tsx │ ├── ExpandIcon.tsx │ ├── GalleryIcon.tsx │ ├── Icon name.svg │ ├── Icon.svg │ ├── LikeIcon.tsx │ ├── LikeReactionIcon.tsx │ ├── LikedIcon.tsx │ ├── OfficialIcon.tsx │ ├── PersonIcon.tsx │ ├── PhotoIcon.tsx │ ├── PlayIcon.tsx │ ├── PlayVideoIcon.tsx │ ├── PlusIcon.tsx │ ├── PlusIconV4.tsx │ ├── PollIcon.tsx │ ├── PostArrowIcon.tsx │ ├── PostIcon.tsx │ ├── PostIconOutlined.tsx │ ├── PrimaryDotIcon.tsx │ ├── PrivateIcon.tsx │ ├── PublicIcon.tsx │ ├── RadioOffIcon.tsx │ ├── RadioOnIcon.tsx │ ├── Reactions.svg │ ├── ReplyIcon.tsx │ ├── ReportIcon.tsx │ ├── SearchIcon.tsx │ ├── SearchIconV4.tsx │ ├── ShareIcon.tsx │ ├── ShieldIcon.tsx │ ├── StoryRing.tsx │ ├── ThreeDotsIcon.tsx │ ├── UnfollowIcon.tsx │ ├── UserIcon.tsx │ ├── VideoIcon.tsx │ ├── circle.svg │ └── svg-xml-list.ts ├── types │ ├── auth.interface.ts │ ├── behaviour.interface.ts │ ├── config.interface.ts │ ├── constants.ts │ ├── global.interface.ts │ ├── type.d.ts │ └── user.interface.ts └── util │ ├── apiUtil.ts │ ├── colorUtil.ts │ ├── constants.ts │ ├── enumUIKitID.ts │ ├── numberUtil.ts │ ├── permission.ts │ └── postDataFormatter.ts ├── tsconfig.build.json ├── tsconfig.json ├── uikit.config.json └── yarn.lock /.editorconfig: -------------------------------------------------------------------------------- 1 | # EditorConfig helps developers define and maintain consistent 2 | # coding styles between different editors and IDEs 3 | # editorconfig.org 4 | 5 | root = true 6 | 7 | [*] 8 | 9 | indent_style = space 10 | indent_size = 2 11 | 12 | end_of_line = lf 13 | charset = utf-8 14 | trim_trailing_whitespace = true 15 | insert_final_newline = true 16 | -------------------------------------------------------------------------------- /.gitattributes: -------------------------------------------------------------------------------- 1 | *.pbxproj -text 2 | # specific for windows script files 3 | *.bat text eol=crlf -------------------------------------------------------------------------------- /.github/actions/setup/action.yml: -------------------------------------------------------------------------------- 1 | name: Setup 2 | description: Setup Node.js and install dependencies 3 | 4 | runs: 5 | using: composite 6 | steps: 7 | - name: Setup Node.js 8 | uses: actions/setup-node@v3 9 | with: 10 | node-version-file: .nvmrc 11 | 12 | - name: Cache dependencies 13 | id: yarn-cache 14 | uses: actions/cache@v3 15 | with: 16 | path: | 17 | **/node_modules 18 | .yarn/install-state.gz 19 | key: ${{ runner.os }}-yarn-${{ hashFiles('yarn.lock') }}-${{ hashFiles('**/package.json', '!node_modules/**') }} 20 | restore-keys: | 21 | ${{ runner.os }}-yarn-${{ hashFiles('yarn.lock') }} 22 | ${{ runner.os }}-yarn- 23 | 24 | - name: Install dependencies 25 | if: steps.yarn-cache.outputs.cache-hit != 'true' 26 | run: yarn install --immutable 27 | shell: bash 28 | -------------------------------------------------------------------------------- /.github/workflows/ci.yml: -------------------------------------------------------------------------------- 1 | name: CI 2 | on: 3 | push: 4 | branches: 5 | - main 6 | pull_request: 7 | branches: 8 | - main 9 | 10 | jobs: 11 | lint: 12 | runs-on: ubuntu-latest 13 | steps: 14 | - name: Checkout 15 | uses: actions/checkout@v3 16 | 17 | - name: Setup 18 | uses: ./.github/actions/setup 19 | 20 | - name: Lint files 21 | run: yarn lint 22 | 23 | - name: Typecheck files 24 | run: yarn typecheck 25 | 26 | test: 27 | runs-on: ubuntu-latest 28 | steps: 29 | - name: Checkout 30 | uses: actions/checkout@v3 31 | 32 | - name: Setup 33 | uses: ./.github/actions/setup 34 | 35 | - name: Run unit tests 36 | run: yarn test --maxWorkers=2 --coverage 37 | 38 | build-library: 39 | runs-on: ubuntu-latest 40 | steps: 41 | - name: Checkout 42 | uses: actions/checkout@v3 43 | 44 | - name: Setup 45 | uses: ./.github/actions/setup 46 | 47 | - name: Build package 48 | run: yarn prepare 49 | 50 | build-web: 51 | runs-on: ubuntu-latest 52 | steps: 53 | - name: Checkout 54 | uses: actions/checkout@v3 55 | 56 | - name: Setup 57 | uses: ./.github/actions/setup 58 | 59 | - name: Build example for Web 60 | run: | 61 | yarn example expo export:web 62 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # OSX 2 | # 3 | .DS_Store 4 | .yarn 5 | # XDE 6 | .expo/ 7 | 8 | # VSCode 9 | .vscode/ 10 | jsconfig.json 11 | 12 | # Xcode 13 | # 14 | build/ 15 | *.pbxuser 16 | !default.pbxuser 17 | *.mode1v3 18 | !default.mode1v3 19 | *.mode2v3 20 | !default.mode2v3 21 | *.perspectivev3 22 | !default.perspectivev3 23 | xcuserdata 24 | *.xccheckout 25 | *.moved-aside 26 | DerivedData 27 | *.hmap 28 | *.ipa 29 | *.xcuserstate 30 | project.xcworkspace 31 | 32 | # Android/IJ 33 | # 34 | .classpath 35 | .cxx 36 | .gradle 37 | .idea 38 | .project 39 | .settings 40 | local.properties 41 | android.iml 42 | 43 | # Cocoapods 44 | # 45 | example/ios/Pods 46 | 47 | # Ruby 48 | example/vendor/ 49 | 50 | # node.js 51 | # 52 | node_modules/ 53 | npm-debug.log 54 | yarn-debug.log 55 | yarn-error.log 56 | 57 | # BUCK 58 | buck-out/ 59 | \.buckd/ 60 | android/app/libs 61 | android/keystores/debug.keystore 62 | 63 | # Yarn 64 | .yarn/* 65 | !.yarn/patches 66 | !.yarn/plugins 67 | !.yarn/releases 68 | !.yarn/sdks 69 | !.yarn/versions 70 | 71 | # Expo 72 | .expo/ 73 | 74 | # Turborepo 75 | .turbo/ 76 | 77 | # generated by bob 78 | lib/ 79 | /example/android 80 | /example/ios -------------------------------------------------------------------------------- /.husky/prepare-commit-msg: -------------------------------------------------------------------------------- 1 | #!/bin/sh 2 | 3 | if [ "$LEFTHOOK" = "0" ]; then 4 | exit 0 5 | fi 6 | 7 | call_lefthook() 8 | { 9 | dir="$(git rev-parse --show-toplevel)" 10 | osArch=$(uname | tr '[:upper:]' '[:lower:]') 11 | cpuArch=$(uname -m | sed 's/aarch64/arm64/') 12 | 13 | if lefthook -h >/dev/null 2>&1 14 | then 15 | lefthook "$@" 16 | elif test -f "$dir/node_modules/lefthook/bin/index.js" 17 | then 18 | "$dir/node_modules/lefthook/bin/index.js" "$@" 19 | elif test -f "$dir/node_modules/@evilmartians/lefthook/bin/lefthook_${osArch}_${cpuArch}/lefthook" 20 | then 21 | "$dir/node_modules/@evilmartians/lefthook/bin/lefthook_${osArch}_${cpuArch}/lefthook" "$@" 22 | elif test -f "$dir/node_modules/@evilmartians/lefthook-installer/bin/lefthook_${osArch}_${cpuArch}/lefthook" 23 | then 24 | "$dir/node_modules/@evilmartians/lefthook-installer/bin/lefthook_${osArch}_${cpuArch}/lefthook" "$@" 25 | 26 | elif bundle exec lefthook -h >/dev/null 2>&1 27 | then 28 | bundle exec lefthook "$@" 29 | elif yarn lefthook -h >/dev/null 2>&1 30 | then 31 | yarn lefthook "$@" 32 | elif pnpm lefthook -h >/dev/null 2>&1 33 | then 34 | pnpm lefthook "$@" 35 | elif command -v npx >/dev/null 2>&1 36 | then 37 | npx lefthook "$@" 38 | elif swift package plugin lefthook >/dev/null 2>&1 39 | then 40 | swift package --disable-sandbox plugin lefthook "$@" 41 | else 42 | echo "Can't find lefthook in PATH" 43 | fi 44 | } 45 | 46 | call_lefthook run "prepare-commit-msg" "$@" 47 | -------------------------------------------------------------------------------- /.nvmrc: -------------------------------------------------------------------------------- 1 | v18 2 | -------------------------------------------------------------------------------- /.watchmanconfig: -------------------------------------------------------------------------------- 1 | {} -------------------------------------------------------------------------------- /.yarnrc.yml: -------------------------------------------------------------------------------- 1 | nodeLinker: node-modules 2 | nmHoistingLimits: workspaces 3 | 4 | plugins: 5 | - path: .yarn/plugins/@yarnpkg/plugin-interactive-tools.cjs 6 | spec: "@yarnpkg/plugin-interactive-tools" 7 | - path: .yarn/plugins/@yarnpkg/plugin-workspace-tools.cjs 8 | spec: "@yarnpkg/plugin-workspace-tools" 9 | 10 | yarnPath: .yarn/releases/yarn-3.6.1.cjs 11 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2024 topAmity 4 | Permission is hereby granted, free of charge, to any person obtaining a copy 5 | of this software and associated documentation files (the "Software"), to deal 6 | in the Software without restriction, including without limitation the rights 7 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 8 | copies of the Software, and to permit persons to whom the Software is 9 | furnished to do so, subject to the following conditions: 10 | 11 | The above copyright notice and this permission notice shall be included in all 12 | copies or substantial portions of the Software. 13 | 14 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 15 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 16 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 17 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 18 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 19 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 20 | SOFTWARE. 21 | -------------------------------------------------------------------------------- /amityco-react-native-social-ui-kit-0.5.6.tgz: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AmityCo/Amity-Social-UIKit-React-Native-OpenSource/d16277236611a047ce3f0e69d0ba7f611a885f84/amityco-react-native-social-ui-kit-0.5.6.tgz -------------------------------------------------------------------------------- /amityco-react-native-social-ui-kit-4.0.0.beta-1.tgz: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AmityCo/Amity-Social-UIKit-React-Native-OpenSource/d16277236611a047ce3f0e69d0ba7f611a885f84/amityco-react-native-social-ui-kit-4.0.0.beta-1.tgz -------------------------------------------------------------------------------- /assets/fonts/SFProText-Regular.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AmityCo/Amity-Social-UIKit-React-Native-OpenSource/d16277236611a047ce3f0e69d0ba7f611a885f84/assets/fonts/SFProText-Regular.ttf -------------------------------------------------------------------------------- /assets/fonts/SFProText-Semibold.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AmityCo/Amity-Social-UIKit-React-Native-OpenSource/d16277236611a047ce3f0e69d0ba7f611a885f84/assets/fonts/SFProText-Semibold.ttf -------------------------------------------------------------------------------- /assets/icon/BackIcon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AmityCo/Amity-Social-UIKit-React-Native-OpenSource/d16277236611a047ce3f0e69d0ba7f611a885f84/assets/icon/BackIcon.png -------------------------------------------------------------------------------- /assets/icon/GroupChat.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AmityCo/Amity-Social-UIKit-React-Native-OpenSource/d16277236611a047ce3f0e69d0ba7f611a885f84/assets/icon/GroupChat.png -------------------------------------------------------------------------------- /assets/icon/GroupChat.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /assets/icon/Option.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /assets/icon/Placeholder.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AmityCo/Amity-Social-UIKit-React-Native-OpenSource/d16277236611a047ce3f0e69d0ba7f611a885f84/assets/icon/Placeholder.png -------------------------------------------------------------------------------- /assets/icon/Private.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /assets/icon/addChat.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AmityCo/Amity-Social-UIKit-React-Native-OpenSource/d16277236611a047ce3f0e69d0ba7f611a885f84/assets/icon/addChat.png -------------------------------------------------------------------------------- /assets/icon/arrowRight-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AmityCo/Amity-Social-UIKit-React-Native-OpenSource/d16277236611a047ce3f0e69d0ba7f611a885f84/assets/icon/arrowRight-2.png -------------------------------------------------------------------------------- /assets/icon/arrowRight.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AmityCo/Amity-Social-UIKit-React-Native-OpenSource/d16277236611a047ce3f0e69d0ba7f611a885f84/assets/icon/arrowRight.png -------------------------------------------------------------------------------- /assets/icon/back.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /assets/icon/camera.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AmityCo/Amity-Social-UIKit-React-Native-OpenSource/d16277236611a047ce3f0e69d0ba7f611a885f84/assets/icon/camera.png -------------------------------------------------------------------------------- /assets/icon/cameraIcon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AmityCo/Amity-Social-UIKit-React-Native-OpenSource/d16277236611a047ce3f0e69d0ba7f611a885f84/assets/icon/cameraIcon.png -------------------------------------------------------------------------------- /assets/icon/comment.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /assets/icon/communityAvatar.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AmityCo/Amity-Social-UIKit-React-Native-OpenSource/d16277236611a047ce3f0e69d0ba7f611a885f84/assets/icon/communityAvatar.png -------------------------------------------------------------------------------- /assets/icon/editPencil-not-filled.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AmityCo/Amity-Social-UIKit-React-Native-OpenSource/d16277236611a047ce3f0e69d0ba7f611a885f84/assets/icon/editPencil-not-filled.png -------------------------------------------------------------------------------- /assets/icon/editPencil.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AmityCo/Amity-Social-UIKit-React-Native-OpenSource/d16277236611a047ce3f0e69d0ba7f611a885f84/assets/icon/editPencil.png -------------------------------------------------------------------------------- /assets/icon/followPlus.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AmityCo/Amity-Social-UIKit-React-Native-OpenSource/d16277236611a047ce3f0e69d0ba7f611a885f84/assets/icon/followPlus.png -------------------------------------------------------------------------------- /assets/icon/gallery.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AmityCo/Amity-Social-UIKit-React-Native-OpenSource/d16277236611a047ce3f0e69d0ba7f611a885f84/assets/icon/gallery.png -------------------------------------------------------------------------------- /assets/icon/groupMember.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AmityCo/Amity-Social-UIKit-React-Native-OpenSource/d16277236611a047ce3f0e69d0ba7f611a885f84/assets/icon/groupMember.png -------------------------------------------------------------------------------- /assets/icon/keyboard.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AmityCo/Amity-Social-UIKit-React-Native-OpenSource/d16277236611a047ce3f0e69d0ba7f611a885f84/assets/icon/keyboard.png -------------------------------------------------------------------------------- /assets/icon/mic.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AmityCo/Amity-Social-UIKit-React-Native-OpenSource/d16277236611a047ce3f0e69d0ba7f611a885f84/assets/icon/mic.png -------------------------------------------------------------------------------- /assets/icon/person.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /assets/icon/plus.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AmityCo/Amity-Social-UIKit-React-Native-OpenSource/d16277236611a047ce3f0e69d0ba7f611a885f84/assets/icon/plus.png -------------------------------------------------------------------------------- /assets/icon/report.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AmityCo/Amity-Social-UIKit-React-Native-OpenSource/d16277236611a047ce3f0e69d0ba7f611a885f84/assets/icon/report.png -------------------------------------------------------------------------------- /assets/icon/send.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AmityCo/Amity-Social-UIKit-React-Native-OpenSource/d16277236611a047ce3f0e69d0ba7f611a885f84/assets/icon/send.png -------------------------------------------------------------------------------- /assets/icon/setting.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AmityCo/Amity-Social-UIKit-React-Native-OpenSource/d16277236611a047ce3f0e69d0ba7f611a885f84/assets/icon/setting.png -------------------------------------------------------------------------------- /assets/icon/threeDot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AmityCo/Amity-Social-UIKit-React-Native-OpenSource/d16277236611a047ce3f0e69d0ba7f611a885f84/assets/icon/threeDot.png -------------------------------------------------------------------------------- /assets/icon/unfollow.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AmityCo/Amity-Social-UIKit-React-Native-OpenSource/d16277236611a047ce3f0e69d0ba7f611a885f84/assets/icon/unfollow.png -------------------------------------------------------------------------------- /assets/icon/voice.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AmityCo/Amity-Social-UIKit-React-Native-OpenSource/d16277236611a047ce3f0e69d0ba7f611a885f84/assets/icon/voice.png -------------------------------------------------------------------------------- /babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: ['module:@react-native/babel-preset'], 3 | }; 4 | -------------------------------------------------------------------------------- /example/App.js: -------------------------------------------------------------------------------- 1 | export { default } from './src/App'; 2 | -------------------------------------------------------------------------------- /example/app.json: -------------------------------------------------------------------------------- 1 | { 2 | "expo": { 3 | "name": "example", 4 | "slug": "example", 5 | "version": "1.0.0", 6 | "orientation": "portrait", 7 | "icon": "./assets/icon.png", 8 | "userInterfaceStyle": "light", 9 | "splash": { 10 | "image": "./assets/splash.png", 11 | "resizeMode": "contain", 12 | "backgroundColor": "#ffffff" 13 | }, 14 | "assetBundlePatterns": [ 15 | "**/*" 16 | ], 17 | "ios": { 18 | "supportsTablet": true, 19 | "bundleIdentifier": "com.topsocialplus.example", 20 | "infoPlist": { 21 | "ITSAppUsesNonExemptEncryption": false 22 | } 23 | }, 24 | "android": { 25 | "adaptiveIcon": { 26 | "foregroundImage": "./assets/adaptive-icon.png", 27 | "backgroundColor": "#ffffff" 28 | }, 29 | "package": "com.topsocialplus.example" 30 | }, 31 | "web": { 32 | "favicon": "./assets/favicon.png" 33 | }, 34 | "extra": { 35 | "eas": { 36 | "projectId": "14459b8a-0e50-4e54-964f-dc81765a08a0" 37 | } 38 | }, 39 | "plugins": [ 40 | "expo-asset" 41 | ] 42 | } 43 | } 44 | -------------------------------------------------------------------------------- /example/assets/adaptive-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AmityCo/Amity-Social-UIKit-React-Native-OpenSource/d16277236611a047ce3f0e69d0ba7f611a885f84/example/assets/adaptive-icon.png -------------------------------------------------------------------------------- /example/assets/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AmityCo/Amity-Social-UIKit-React-Native-OpenSource/d16277236611a047ce3f0e69d0ba7f611a885f84/example/assets/favicon.png -------------------------------------------------------------------------------- /example/assets/icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AmityCo/Amity-Social-UIKit-React-Native-OpenSource/d16277236611a047ce3f0e69d0ba7f611a885f84/example/assets/icon.png -------------------------------------------------------------------------------- /example/assets/splash.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AmityCo/Amity-Social-UIKit-React-Native-OpenSource/d16277236611a047ce3f0e69d0ba7f611a885f84/example/assets/splash.png -------------------------------------------------------------------------------- /example/babel.config.js: -------------------------------------------------------------------------------- 1 | const path = require('path'); 2 | const pak = require('../package.json'); 3 | 4 | module.exports = function (api) { 5 | api.cache(true); 6 | 7 | return { 8 | presets: ['babel-preset-expo'], 9 | plugins: [ 10 | [ 11 | 'module-resolver', 12 | { 13 | extensions: ['.tsx', '.ts', '.js', '.json'], 14 | alias: { 15 | // For development, we want to alias the library to the source 16 | [pak.name]: path.join(__dirname, '..', pak.source), 17 | }, 18 | }, 19 | ], 20 | ], 21 | }; 22 | }; 23 | -------------------------------------------------------------------------------- /example/eas.json: -------------------------------------------------------------------------------- 1 | { 2 | "cli": { 3 | "version": ">= 15.0.9", 4 | "appVersionSource": "remote" 5 | }, 6 | "build": { 7 | "development": { 8 | "developmentClient": true, 9 | "distribution": "internal" 10 | }, 11 | "preview": { 12 | "distribution": "internal" 13 | }, 14 | "production": { 15 | "autoIncrement": true 16 | } 17 | }, 18 | "submit": { 19 | "production": {} 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /example/metro.config.js: -------------------------------------------------------------------------------- 1 | const path = require('path'); 2 | const escape = require('escape-string-regexp'); 3 | const { getDefaultConfig } = require('@expo/metro-config'); 4 | const exclusionList = require('metro-config/src/defaults/exclusionList'); 5 | const pak = require('../package.json'); 6 | 7 | const root = path.resolve(__dirname, '..'); 8 | const modules = Object.keys({ ...pak.peerDependencies }); 9 | 10 | const defaultConfig = getDefaultConfig(__dirname); 11 | 12 | /** 13 | * Metro configuration 14 | * https://facebook.github.io/metro/docs/configuration 15 | * 16 | * @type {import('metro-config').MetroConfig} 17 | */ 18 | const config = { 19 | ...defaultConfig, 20 | 21 | projectRoot: __dirname, 22 | watchFolders: [root], 23 | 24 | // We need to make sure that only one version is loaded for peerDependencies 25 | // So we block them at the root, and alias them to the versions in example's node_modules 26 | resolver: { 27 | ...defaultConfig.resolver, 28 | 29 | blacklistRE: exclusionList( 30 | modules.map( 31 | (m) => 32 | new RegExp(`^${escape(path.join(root, 'node_modules', m))}\\/.*$`) 33 | ) 34 | ), 35 | 36 | extraNodeModules: modules.reduce((acc, name) => { 37 | acc[name] = path.join(__dirname, 'node_modules', name); 38 | return acc; 39 | }, {}), 40 | }, 41 | }; 42 | 43 | module.exports = config; 44 | -------------------------------------------------------------------------------- /example/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@amityco/react-native-social-ui-kit-example", 3 | "version": "1.0.0", 4 | "main": "node_modules/expo/AppEntry.js", 5 | "scripts": { 6 | "start": "expo start", 7 | "android": "expo run:android", 8 | "ios": "expo run:ios", 9 | "web": "expo start --web" 10 | }, 11 | "dependencies": { 12 | "@react-native-async-storage/async-storage": "^2.1.1", 13 | "@react-native-community/netinfo": "^11.4.1", 14 | "@react-navigation/native": "^6.1.10", 15 | "@react-navigation/native-stack": "^6.9.18", 16 | "@react-navigation/stack": "^6.3.21", 17 | "expo": "~51.0.39", 18 | "expo-asset": "~10.0.10", 19 | "expo-dev-client": "~4.0.29", 20 | "expo-image-picker": "~15.1.0", 21 | "expo-status-bar": "~1.12.1", 22 | "expo-video": "1.2.7", 23 | "expo-video-thumbnails": "~8.0.0", 24 | "react": "18.2.0", 25 | "react-dom": "18.2.0", 26 | "react-native": "0.74.5", 27 | "react-native-safe-area-context": "4.10.5", 28 | "react-native-screens": "3.31.1", 29 | "react-native-svg": "^15.11.1", 30 | "react-native-web": "~0.19.6" 31 | }, 32 | "devDependencies": { 33 | "@babel/core": "^7.20.0", 34 | "@expo/webpack-config": "~19.0.1", 35 | "@types/react-native": "^0.73.0", 36 | "babel-loader": "^8.1.0", 37 | "babel-plugin-module-resolver": "^5.0.0" 38 | }, 39 | "private": true 40 | } 41 | -------------------------------------------------------------------------------- /example/src/App.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | 3 | 4 | import { AmityUiKitProvider, AmityUiKitSocial } from '@amityco/react-native-social-ui-kit'; 5 | 6 | import config from '../uikit.config.json'; 7 | 8 | 9 | export default function App() { 10 | 11 | return ( 12 | 20 | 21 | 22 | ); 23 | } 24 | -------------------------------------------------------------------------------- /example/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../tsconfig", 3 | "compilerOptions": { 4 | // Avoid expo-cli auto-generating a tsconfig 5 | } 6 | } 7 | -------------------------------------------------------------------------------- /example/webpack.config.js: -------------------------------------------------------------------------------- 1 | const path = require('path'); 2 | const createExpoWebpackConfigAsync = require('@expo/webpack-config'); 3 | const { resolver } = require('./metro.config'); 4 | 5 | const root = path.resolve(__dirname, '..'); 6 | const node_modules = path.join(__dirname, 'node_modules'); 7 | 8 | module.exports = async function (env, argv) { 9 | const config = await createExpoWebpackConfigAsync(env, argv); 10 | 11 | config.module.rules.push({ 12 | test: /\.(js|jsx|ts|tsx)$/, 13 | include: path.resolve(root, 'src'), 14 | use: 'babel-loader', 15 | }); 16 | 17 | // We need to make sure that only one version is loaded for peerDependencies 18 | // So we alias them to the versions in example's node_modules 19 | Object.assign(config.resolve.alias, { 20 | ...resolver.extraNodeModules, 21 | 'react-native-web': path.join(node_modules, 'react-native-web'), 22 | }); 23 | 24 | return config; 25 | }; 26 | -------------------------------------------------------------------------------- /lefthook.yml: -------------------------------------------------------------------------------- 1 | # pre-commit: 2 | # parallel: true 3 | # commands: 4 | # lint: 5 | # glob: "*.{js,ts,jsx,tsx}" 6 | # run: npx eslint {staged_files} 7 | # types: 8 | # glob: "*.{js,ts, jsx, tsx}" 9 | # run: npx tsc --noEmit 10 | # commit-msg: 11 | # parallel: true 12 | # commands: 13 | # commitlint: 14 | # run: npx commitlint --edit 15 | -------------------------------------------------------------------------------- /src/Elements/CloseButtonIconElement/CloseButtonIconElement.tsx: -------------------------------------------------------------------------------- 1 | import { ImageProps } from 'react-native'; 2 | import React, { FC, memo } from 'react'; 3 | import { 4 | ComponentID, 5 | ElementID, 6 | PageID, 7 | 8 | } from '../../enum/enumUIKitID'; 9 | import { useAmityElement } from '../../hooks'; 10 | import BackButton from '../../components/BackButton'; 11 | 12 | type CloseButtonIconElementType = Partial & { 13 | pageID?: PageID; 14 | componentID?: ComponentID; 15 | }; 16 | 17 | const CloseButtonIconElement: FC = ({ 18 | pageID = PageID.WildCardPage, 19 | componentID = ComponentID.WildCardComponent, 20 | ...props 21 | }) => { 22 | const elementID = ElementID.close_button; 23 | const { isExcluded } = useAmityElement({ 24 | pageId: pageID, 25 | componentId: componentID, 26 | elementId: elementID, 27 | }); 28 | 29 | if (isExcluded) return null; 30 | 31 | return ( 32 | 33 | ); 34 | }; 35 | 36 | export default memo(CloseButtonIconElement); 37 | -------------------------------------------------------------------------------- /src/Elements/CommentButtonIconElement/CommentButtonIconElement.tsx: -------------------------------------------------------------------------------- 1 | import { ImageProps } from 'react-native'; 2 | import React, { FC, memo } from 'react'; 3 | import { 4 | ComponentID, 5 | ElementID, 6 | PageID, 7 | } from '../../enum'; 8 | 9 | 10 | import useConfig from '../../hooks/useConfig'; 11 | import CommentIcon from '../../svg/CommentIcon'; 12 | 13 | type CommentButtonIconElementType = Partial & { 14 | pageID?: PageID; 15 | componentID?: ComponentID; 16 | }; 17 | 18 | const CommentButtonIconElement: FC = ({ 19 | pageID = '*', 20 | componentID = '*', 21 | ...props 22 | }) => { 23 | const { excludes } = useConfig(); 24 | const elementID = ElementID.comment_button; 25 | const configId = `${pageID}/${componentID}/${elementID}`; 26 | 27 | if (excludes.includes(configId)) return null; 28 | 29 | return ( 30 | // 36 | 37 | ); 38 | }; 39 | 40 | export default memo(CommentButtonIconElement); 41 | -------------------------------------------------------------------------------- /src/Elements/CommonElements/CategoryElement.tsx: -------------------------------------------------------------------------------- 1 | import { TextProps, Text } from 'react-native'; 2 | import React, { FC, memo, useLayoutEffect, useState } from 'react'; 3 | import { ComponentID, ElementID, PageID } from '../../enum'; 4 | import { CategoryRepository } from '@amityco/ts-sdk-react-native'; 5 | import useConfig from '../../hooks/useConfig'; 6 | 7 | type CategoryElementType = Partial & { 8 | pageID: PageID; 9 | componentID: ComponentID; 10 | elementID: ElementID; 11 | categoryId: Amity.Category['categoryId']; 12 | }; 13 | 14 | const CategoryElement: FC = ({ 15 | pageID = '*', 16 | componentID = '*', 17 | elementID, 18 | categoryId, 19 | ...props 20 | }) => { 21 | const { excludes } = useConfig(); 22 | const [categoryData, setCategoryData] = useState(null); 23 | useLayoutEffect(() => { 24 | CategoryRepository.getCategory(categoryId).then(({ data }) => 25 | setCategoryData(data) 26 | ); 27 | }, [categoryId]); 28 | 29 | const configId = `${pageID}/${componentID}/${elementID}`; 30 | 31 | if (excludes.includes(configId)) return null; 32 | return ( 33 | 34 | {categoryData?.name} 35 | 36 | ); 37 | }; 38 | 39 | export default memo(CategoryElement); 40 | -------------------------------------------------------------------------------- /src/Elements/CommonElements/ImageElement.tsx: -------------------------------------------------------------------------------- 1 | import { ImageProps, Image } from 'react-native'; 2 | import React, { FC, memo } from 'react'; 3 | import { 4 | ComponentID, 5 | ElementID, 6 | PageID, 7 | UiKitConfigKeys, 8 | } from '../../enum'; 9 | import useConfig from '../../hooks/useConfig'; 10 | import { useConfigImageUri } from '../../hooks/useConfigImageUri'; 11 | 12 | 13 | type ImageElementType = Partial & { 14 | pageID?: PageID; 15 | componentID?: ComponentID; 16 | elementID: ElementID; 17 | configKey?: keyof UiKitConfigKeys; 18 | }; 19 | 20 | const ImageElement: FC = ({ 21 | pageID = '*', 22 | componentID = '*', 23 | elementID, 24 | configKey, 25 | ...props 26 | }) => { 27 | const { excludes } = useConfig(); 28 | const configId = `${pageID}/${componentID}/${elementID}`; 29 | const imageSource = useConfigImageUri({ 30 | configPath: { 31 | page: pageID, 32 | component: componentID, 33 | element: elementID, 34 | }, 35 | configKey: configKey, 36 | }); 37 | if (excludes.includes(configId)) return null; 38 | 39 | return ( 40 | 46 | ); 47 | }; 48 | 49 | export default memo(ImageElement); 50 | -------------------------------------------------------------------------------- /src/Elements/CommonElements/TextElement.tsx: -------------------------------------------------------------------------------- 1 | import { TextProps, Text } from 'react-native'; 2 | import React, { FC, memo } from 'react'; 3 | import { ComponentID, ElementID, PageID } from '../../enum'; 4 | import useConfig from '../../hooks/useConfig'; 5 | 6 | type TextElementType = Partial & { 7 | pageID: PageID; 8 | componentID: ComponentID; 9 | elementID: ElementID; 10 | text: string; 11 | }; 12 | 13 | const TextElement: FC = ({ 14 | pageID = '*', 15 | componentID = '*', 16 | elementID, 17 | text, 18 | ...props 19 | }) => { 20 | const { excludes } = useConfig(); 21 | const configId = `${pageID}/${componentID}/${elementID}`; 22 | if (excludes.includes(configId)) return null; 23 | return ( 24 | 25 | {text} 26 | 27 | ); 28 | }; 29 | 30 | export default memo(TextElement); 31 | -------------------------------------------------------------------------------- /src/Elements/ImageKeyElement/ImageKeyElement.tsx: -------------------------------------------------------------------------------- 1 | import { ImageProps, Image } from 'react-native'; 2 | import React, { FC, memo } from 'react'; 3 | import { 4 | ComponentID, 5 | ElementID, 6 | PageID, 7 | UiKitConfigKeys, 8 | } from '../../enum/enumUIKitID'; 9 | import { useAmityElement, useConfigImageUri } from '../../hooks'; 10 | 11 | type ImageKeyElementType = Partial & { 12 | pageID?: PageID; 13 | componentID?: ComponentID; 14 | elementID?: ElementID; 15 | }; 16 | 17 | const ImageKeyElement: FC = ({ 18 | pageID = PageID.WildCardPage, 19 | componentID = ComponentID.WildCardComponent, 20 | elementID = ElementID.WildCardElement, 21 | ...props 22 | }) => { 23 | const configKey: keyof UiKitConfigKeys = 'image'; 24 | const { accessibilityId, isExcluded } = useAmityElement({ 25 | pageId: pageID, 26 | componentId: componentID, 27 | elementId: elementID, 28 | }); 29 | const imageSource = useConfigImageUri({ 30 | configPath: { 31 | page: pageID, 32 | component: componentID, 33 | element: elementID, 34 | }, 35 | configKey: configKey, 36 | }); 37 | if (isExcluded) return null; 38 | 39 | return ( 40 | 46 | ); 47 | }; 48 | 49 | export default memo(ImageKeyElement); 50 | -------------------------------------------------------------------------------- /src/Elements/LikeButtonIconElement/LikeButtonIconElement.tsx: -------------------------------------------------------------------------------- 1 | import { ImageProps } from 'react-native'; 2 | import React, { FC, memo } from 'react'; 3 | import { 4 | ComponentID, 5 | ElementID, 6 | PageID, 7 | } from '../../enum'; 8 | 9 | 10 | import useConfig from '../../hooks/useConfig'; 11 | import { LikeIcon } from '../../svg/LikeIcon'; 12 | 13 | type LikeButtonIconElementType = Partial & { 14 | pageID?: PageID; 15 | componentID?: ComponentID; 16 | }; 17 | 18 | const LikeButtonIconElement: FC = ({ 19 | pageID = '*', 20 | componentID = '*', 21 | 22 | }) => { 23 | const { excludes } = useConfig(); 24 | const elementID = ElementID.reaction_button; 25 | const configId = `${pageID}/${componentID}/${elementID}`; 26 | 27 | if (excludes.includes(configId)) return null; 28 | return ( 29 | // 35 | 36 | ); 37 | }; 38 | 39 | export default memo(LikeButtonIconElement); 40 | -------------------------------------------------------------------------------- /src/Elements/MenuButtonIconElement/MenuButtonIconElement.tsx: -------------------------------------------------------------------------------- 1 | import { ImageProps } from 'react-native'; 2 | import React, { FC, memo } from 'react'; 3 | import { 4 | ComponentID, 5 | ElementID, 6 | PageID, 7 | } from '../../enum'; 8 | import useConfig from '../../hooks/useConfig'; 9 | import { ThreeDotsIcon } from '../../svg/ThreeDotsIcon'; 10 | 11 | 12 | type MenuButtonIconElementType = Partial & { 13 | pageID?: PageID; 14 | componentID?: ComponentID; 15 | }; 16 | 17 | const MenuButtonIconElement: FC = ({ 18 | pageID = '*', 19 | componentID = '*', 20 | ...props 21 | }) => { 22 | const { excludes } = useConfig(); 23 | const elementID = ElementID.menu_button; 24 | const configId = `${pageID}/${componentID}/${elementID}`; 25 | 26 | if (excludes.includes(configId)) return null; 27 | 28 | return ( 29 | 30 | ); 31 | }; 32 | 33 | export default memo(MenuButtonIconElement); 34 | -------------------------------------------------------------------------------- /src/Elements/ModeratorBadgeElement/styles.ts: -------------------------------------------------------------------------------- 1 | import { StyleSheet } from 'react-native'; 2 | import type { MyMD3Theme } from '../../providers/amity-ui-kit-provider'; 3 | 4 | export const useStyles = (theme: MyMD3Theme) => { 5 | const styles = StyleSheet.create({ 6 | moderatorTitle: { 7 | fontSize: 10, 8 | color: theme.colors.primary, 9 | }, 10 | moderatorRow: { 11 | alignSelf: 'flex-start', 12 | flexDirection: 'row', 13 | padding: 4, 14 | paddingHorizontal: 8, 15 | backgroundColor: theme.colors.primaryShade3, 16 | borderRadius: 10, 17 | alignItems: 'center', 18 | justifyContent: 'center', 19 | }, 20 | moderatorBadge: { 21 | marginRight: 1, 22 | }, 23 | }); 24 | 25 | return styles; 26 | }; 27 | -------------------------------------------------------------------------------- /src/Elements/ShareButtonIconElement/ShareButtonIconElement.tsx: -------------------------------------------------------------------------------- 1 | import { ImageProps } from 'react-native'; 2 | import React, { FC, memo } from 'react'; 3 | import { 4 | ComponentID, 5 | ElementID, 6 | PageID, 7 | } from '../../enum'; 8 | import useConfig from '../../hooks/useConfig'; 9 | // import { useConfigImageUri } from '../../hooks/useConfigImageUri'; 10 | import ShareIcon from '../../svg/ShareIcon'; 11 | 12 | 13 | type ShareButtonIconElementType = Partial & { 14 | pageID?: PageID; 15 | componentID?: ComponentID; 16 | }; 17 | 18 | const ShareButtonIconElement: FC = ({ 19 | pageID = '*', 20 | componentID = '*', 21 | ...props 22 | }) => { 23 | const { excludes } = useConfig(); 24 | const elementID = ElementID.share_button; 25 | 26 | const configId = `${pageID}/${componentID}/${elementID}`; 27 | 28 | if (excludes.includes(configId)) return null; 29 | 30 | return ( 31 | // 37 | 38 | ); 39 | }; 40 | 41 | export default memo(ShareButtonIconElement); 42 | -------------------------------------------------------------------------------- /src/Elements/TextKeyElement/TextKeyElement.tsx: -------------------------------------------------------------------------------- 1 | import { TextProps, Text } from 'react-native'; 2 | import React, { FC, memo } from 'react'; 3 | import { ComponentID, ElementID, PageID } from '../../enum/enumUIKitID'; 4 | import { useAmityElement, useUiKitConfig } from '../../hooks'; 5 | 6 | type TextElementType = Partial & { 7 | pageID: PageID; 8 | componentID: ComponentID; 9 | elementID: ElementID; 10 | }; 11 | 12 | const TextKeyElement: FC = ({ 13 | pageID = PageID.WildCardPage, 14 | componentID = ComponentID.WildCardComponent, 15 | elementID, 16 | ...props 17 | }) => { 18 | const { isExcluded, accessibilityId } = useAmityElement({ 19 | pageId: pageID, 20 | componentId: componentID, 21 | elementId: elementID, 22 | }); 23 | 24 | const [configText] = useUiKitConfig({ 25 | page: pageID, 26 | component: componentID, 27 | element: elementID, 28 | keys: ['text'], 29 | }) as string[]; 30 | if (isExcluded) return null; 31 | return ( 32 | 37 | {configText} 38 | 39 | ); 40 | }; 41 | 42 | export default memo(TextKeyElement); 43 | -------------------------------------------------------------------------------- /src/Elements/TimestampElement/TimestampElement.tsx: -------------------------------------------------------------------------------- 1 | import { TextProps, Text } from 'react-native'; 2 | import React, { FC, memo } from 'react'; 3 | 4 | import useConfig from '../../hooks/useConfig'; 5 | 6 | import { ComponentID, ElementID, PageID } from '../../enum'; 7 | import { useTimeDifference } from '../../hooks/useTimeDifference'; 8 | 9 | type TimeStampElementType = Partial & { 10 | pageID?: PageID; 11 | componentID?: ComponentID; 12 | createdAt: string; 13 | }; 14 | 15 | const TimeStampElement: FC = ({ 16 | pageID = '*', 17 | componentID = '*', 18 | createdAt, 19 | ...props 20 | }) => { 21 | const { excludes } = useConfig(); 22 | const elementID = ElementID.timestamp; 23 | const configId = `${pageID}/${componentID}/${elementID}`; 24 | const text = useTimeDifference(createdAt); 25 | if (excludes.includes(configId)) return null; 26 | return ( 27 | 28 | {text} 29 | 30 | ); 31 | }; 32 | 33 | export default memo(TimeStampElement); 34 | -------------------------------------------------------------------------------- /src/__tests__/index.test.tsx: -------------------------------------------------------------------------------- 1 | it.todo('write a test'); 2 | -------------------------------------------------------------------------------- /src/assets/fonts/SFProText-Regular.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AmityCo/Amity-Social-UIKit-React-Native-OpenSource/d16277236611a047ce3f0e69d0ba7f611a885f84/src/assets/fonts/SFProText-Regular.ttf -------------------------------------------------------------------------------- /src/assets/fonts/SFProText-Semibold.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AmityCo/Amity-Social-UIKit-React-Native-OpenSource/d16277236611a047ce3f0e69d0ba7f611a885f84/src/assets/fonts/SFProText-Semibold.ttf -------------------------------------------------------------------------------- /src/assets/icon/BackIcon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AmityCo/Amity-Social-UIKit-React-Native-OpenSource/d16277236611a047ce3f0e69d0ba7f611a885f84/src/assets/icon/BackIcon.png -------------------------------------------------------------------------------- /src/assets/icon/GroupChat.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AmityCo/Amity-Social-UIKit-React-Native-OpenSource/d16277236611a047ce3f0e69d0ba7f611a885f84/src/assets/icon/GroupChat.png -------------------------------------------------------------------------------- /src/assets/icon/GroupChat.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /src/assets/icon/Option.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/assets/icon/Placeholder.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AmityCo/Amity-Social-UIKit-React-Native-OpenSource/d16277236611a047ce3f0e69d0ba7f611a885f84/src/assets/icon/Placeholder.png -------------------------------------------------------------------------------- /src/assets/icon/Private.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/assets/icon/addChat.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AmityCo/Amity-Social-UIKit-React-Native-OpenSource/d16277236611a047ce3f0e69d0ba7f611a885f84/src/assets/icon/addChat.png -------------------------------------------------------------------------------- /src/assets/icon/arrowRight-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AmityCo/Amity-Social-UIKit-React-Native-OpenSource/d16277236611a047ce3f0e69d0ba7f611a885f84/src/assets/icon/arrowRight-2.png -------------------------------------------------------------------------------- /src/assets/icon/arrowRight.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AmityCo/Amity-Social-UIKit-React-Native-OpenSource/d16277236611a047ce3f0e69d0ba7f611a885f84/src/assets/icon/arrowRight.png -------------------------------------------------------------------------------- /src/assets/icon/back.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/assets/icon/camera.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AmityCo/Amity-Social-UIKit-React-Native-OpenSource/d16277236611a047ce3f0e69d0ba7f611a885f84/src/assets/icon/camera.png -------------------------------------------------------------------------------- /src/assets/icon/cameraIcon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AmityCo/Amity-Social-UIKit-React-Native-OpenSource/d16277236611a047ce3f0e69d0ba7f611a885f84/src/assets/icon/cameraIcon.png -------------------------------------------------------------------------------- /src/assets/icon/comment.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/assets/icon/communityAvatar.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AmityCo/Amity-Social-UIKit-React-Native-OpenSource/d16277236611a047ce3f0e69d0ba7f611a885f84/src/assets/icon/communityAvatar.png -------------------------------------------------------------------------------- /src/assets/icon/editPencil-not-filled.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AmityCo/Amity-Social-UIKit-React-Native-OpenSource/d16277236611a047ce3f0e69d0ba7f611a885f84/src/assets/icon/editPencil-not-filled.png -------------------------------------------------------------------------------- /src/assets/icon/editPencil.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AmityCo/Amity-Social-UIKit-React-Native-OpenSource/d16277236611a047ce3f0e69d0ba7f611a885f84/src/assets/icon/editPencil.png -------------------------------------------------------------------------------- /src/assets/icon/emptyFeedIcon_dark.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AmityCo/Amity-Social-UIKit-React-Native-OpenSource/d16277236611a047ce3f0e69d0ba7f611a885f84/src/assets/icon/emptyFeedIcon_dark.png -------------------------------------------------------------------------------- /src/assets/icon/emptyFeedIcon_light.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AmityCo/Amity-Social-UIKit-React-Native-OpenSource/d16277236611a047ce3f0e69d0ba7f611a885f84/src/assets/icon/emptyFeedIcon_light.png -------------------------------------------------------------------------------- /src/assets/icon/followPlus.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AmityCo/Amity-Social-UIKit-React-Native-OpenSource/d16277236611a047ce3f0e69d0ba7f611a885f84/src/assets/icon/followPlus.png -------------------------------------------------------------------------------- /src/assets/icon/gallery.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AmityCo/Amity-Social-UIKit-React-Native-OpenSource/d16277236611a047ce3f0e69d0ba7f611a885f84/src/assets/icon/gallery.png -------------------------------------------------------------------------------- /src/assets/icon/groupMember.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AmityCo/Amity-Social-UIKit-React-Native-OpenSource/d16277236611a047ce3f0e69d0ba7f611a885f84/src/assets/icon/groupMember.png -------------------------------------------------------------------------------- /src/assets/icon/keyboard.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AmityCo/Amity-Social-UIKit-React-Native-OpenSource/d16277236611a047ce3f0e69d0ba7f611a885f84/src/assets/icon/keyboard.png -------------------------------------------------------------------------------- /src/assets/icon/mic.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AmityCo/Amity-Social-UIKit-React-Native-OpenSource/d16277236611a047ce3f0e69d0ba7f611a885f84/src/assets/icon/mic.png -------------------------------------------------------------------------------- /src/assets/icon/person.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /src/assets/icon/plus.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AmityCo/Amity-Social-UIKit-React-Native-OpenSource/d16277236611a047ce3f0e69d0ba7f611a885f84/src/assets/icon/plus.png -------------------------------------------------------------------------------- /src/assets/icon/previewLinkDefaultBackground.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AmityCo/Amity-Social-UIKit-React-Native-OpenSource/d16277236611a047ce3f0e69d0ba7f611a885f84/src/assets/icon/previewLinkDefaultBackground.png -------------------------------------------------------------------------------- /src/assets/icon/report.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AmityCo/Amity-Social-UIKit-React-Native-OpenSource/d16277236611a047ce3f0e69d0ba7f611a885f84/src/assets/icon/report.png -------------------------------------------------------------------------------- /src/assets/icon/send.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AmityCo/Amity-Social-UIKit-React-Native-OpenSource/d16277236611a047ce3f0e69d0ba7f611a885f84/src/assets/icon/send.png -------------------------------------------------------------------------------- /src/assets/icon/setting.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AmityCo/Amity-Social-UIKit-React-Native-OpenSource/d16277236611a047ce3f0e69d0ba7f611a885f84/src/assets/icon/setting.png -------------------------------------------------------------------------------- /src/assets/icon/threeDot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AmityCo/Amity-Social-UIKit-React-Native-OpenSource/d16277236611a047ce3f0e69d0ba7f611a885f84/src/assets/icon/threeDot.png -------------------------------------------------------------------------------- /src/assets/icon/unfollow.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AmityCo/Amity-Social-UIKit-React-Native-OpenSource/d16277236611a047ce3f0e69d0ba7f611a885f84/src/assets/icon/unfollow.png -------------------------------------------------------------------------------- /src/assets/icon/voice.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AmityCo/Amity-Social-UIKit-React-Native-OpenSource/d16277236611a047ce3f0e69d0ba7f611a885f84/src/assets/icon/voice.png -------------------------------------------------------------------------------- /src/assets/index.ts: -------------------------------------------------------------------------------- 1 | 2 | 3 | const defaultAvatar = require('./icon/Placeholder.png'); 4 | const defaultCommunityAvatar = require('./icon/communityAvatar.png'); 5 | 6 | 7 | export const defaultAvatarUri = defaultAvatar; 8 | export const defaultCommunityAvatarUri = defaultCommunityAvatar; 9 | -------------------------------------------------------------------------------- /src/components/AmityEmptyNewsFeedComponent/AmityEmptyNewsFeedComponent.tsx: -------------------------------------------------------------------------------- 1 | import { View } from 'react-native'; 2 | import React, { FC, memo } from 'react'; 3 | import { useStyles } from './styles'; 4 | import { 5 | Illustration, 6 | Title, 7 | Description, 8 | ExploreCommunityButton, 9 | CreateCommunityButton, 10 | } from './Elements'; 11 | 12 | 13 | import useConfig from '../../hooks/useConfig'; 14 | import { ComponentID, PageID } from '../../enum'; 15 | 16 | type AmityEmptyNewsFeedComponentType = { 17 | pageId?: PageID; 18 | onPressExploreCommunity?: () => void; 19 | }; 20 | 21 | const AmityEmptyNewsFeedComponent: FC = ({ 22 | onPressExploreCommunity, 23 | pageId = '*', 24 | }) => { 25 | const { excludes } = useConfig(); 26 | const styles = useStyles(); 27 | const componentId = ComponentID.empty_newsfeed; 28 | const uiReference = `${pageId}/${componentId}/*}`; 29 | if (excludes.includes(uiReference)) return null; 30 | return ( 31 | 36 | 37 | 38 | <Description /> 39 | <ExploreCommunityButton 40 | onPressExploreCommunity={onPressExploreCommunity} 41 | /> 42 | <CreateCommunityButton /> 43 | </View> 44 | ); 45 | }; 46 | 47 | export default memo(AmityEmptyNewsFeedComponent); 48 | -------------------------------------------------------------------------------- /src/components/AmityEmptyNewsFeedComponent/Elements/Description.tsx: -------------------------------------------------------------------------------- 1 | import { Text } from 'react-native'; 2 | import React, { memo } from 'react'; 3 | 4 | 5 | import { useStyles } from './styles/styles'; 6 | import { useUiKitConfig } from '../../../hooks/useUiKitConfig'; 7 | import { ComponentID, ElementID, PageID } from '../../../enum'; 8 | import useConfig from '../../../hooks/useConfig'; 9 | 10 | const Description = () => { 11 | const { excludes } = useConfig(); 12 | const styles = useStyles(); 13 | const title = useUiKitConfig({ 14 | keys: ['text'], 15 | page: PageID.social_home_page, 16 | component: ComponentID.empty_newsfeed, 17 | element: ElementID.description, 18 | }) as string[]; 19 | 20 | if (excludes.includes('social_home_page/empty_newsfeed/description')) 21 | return null; 22 | return <Text style={styles.description}>{title[0]}</Text>; 23 | }; 24 | 25 | export default memo(Description); 26 | -------------------------------------------------------------------------------- /src/components/AmityEmptyNewsFeedComponent/Elements/ExploreCommunityButton.tsx: -------------------------------------------------------------------------------- 1 | import { Text, TouchableOpacity } from 'react-native'; 2 | import React, { FC, memo } from 'react'; 3 | import { useUiKitConfig } from '../../../hooks/useUiKitConfig'; 4 | import { ComponentID, ElementID, PageID } from '../../../enum'; 5 | import useConfig from '../../../hooks/useConfig'; 6 | import { useStyles } from './styles/styles'; 7 | 8 | type ExploreCommunityButtonType = { 9 | onPressExploreCommunity?: () => void; 10 | }; 11 | 12 | const ExploreCommunityButton: FC<ExploreCommunityButtonType> = ({ 13 | onPressExploreCommunity, 14 | }) => { 15 | const { excludes } = useConfig(); 16 | const styles = useStyles(); 17 | 18 | const [text] = useUiKitConfig({ 19 | keys: ['text'], 20 | page: PageID.social_home_page, 21 | component: ComponentID.empty_newsfeed, 22 | element: ElementID.explore_communities_button, 23 | }) as string[]; 24 | 25 | 26 | if ( 27 | excludes.includes( 28 | 'social_home_page/empty_newsfeed/explore_communitties_button' 29 | ) 30 | ) 31 | return null; 32 | 33 | return ( 34 | <TouchableOpacity 35 | style={styles.exploreBtn} 36 | onPress={() => onPressExploreCommunity && onPressExploreCommunity()} 37 | > 38 | 39 | <Text style={styles.exploreText}>{text}</Text> 40 | </TouchableOpacity> 41 | ); 42 | }; 43 | 44 | export default memo(ExploreCommunityButton); 45 | -------------------------------------------------------------------------------- /src/components/AmityEmptyNewsFeedComponent/Elements/Illustration.tsx: -------------------------------------------------------------------------------- 1 | 2 | import React, { memo } from 'react'; 3 | import useConfig from '../../../hooks/useConfig'; 4 | import { SvgXml } from 'react-native-svg'; 5 | import { emptyFeedIcon } from '../../../svg/svg-xml-list'; 6 | const Illustration = () => { 7 | const { excludes } = useConfig(); 8 | 9 | 10 | 11 | if (excludes.includes('social_home_page/empty_newsfeed/illustration')) 12 | return null; 13 | 14 | return ( 15 | 16 | <SvgXml xml={emptyFeedIcon()}/> 17 | ); 18 | }; 19 | 20 | export default memo(Illustration); -------------------------------------------------------------------------------- /src/components/AmityEmptyNewsFeedComponent/Elements/Title.tsx: -------------------------------------------------------------------------------- 1 | import { Text } from 'react-native'; 2 | import React, { memo } from 'react'; 3 | import { useUiKitConfig } from '../../../hooks/useUiKitConfig'; 4 | import { ComponentID, ElementID, PageID } from '../../../enum'; 5 | import useConfig from '../../../hooks/useConfig'; 6 | import { useStyles } from './styles/styles'; 7 | 8 | const Title = () => { 9 | const { excludes } = useConfig(); 10 | const styles = useStyles(); 11 | const title = useUiKitConfig({ 12 | keys: ['text'], 13 | page: PageID.social_home_page, 14 | component: ComponentID.empty_newsfeed, 15 | element: ElementID.title, 16 | }) as string[]; 17 | 18 | if (excludes.includes('social_home_page/empty_newsfeed/title')) return null; 19 | return <Text style={styles.title}>{title[0]}</Text>; 20 | }; 21 | 22 | export default memo(Title); 23 | -------------------------------------------------------------------------------- /src/components/AmityEmptyNewsFeedComponent/Elements/index.ts: -------------------------------------------------------------------------------- 1 | export { default as Illustration } from './Illustration'; 2 | export { default as Title } from './Title'; 3 | export { default as Description } from './Description'; 4 | export { default as ExploreCommunityButton } from './ExploreCommunityButton'; 5 | export { default as CreateCommunityButton } from './CreateCommunityButton'; 6 | -------------------------------------------------------------------------------- /src/components/AmityEmptyNewsFeedComponent/Elements/styles/styles.ts: -------------------------------------------------------------------------------- 1 | import { StyleSheet } from 'react-native'; 2 | import { useTheme } from 'react-native-paper'; 3 | import { MyMD3Theme } from '../../../../providers/amity-ui-kit-provider'; 4 | 5 | 6 | export const useStyles = () => { 7 | const theme = useTheme() as MyMD3Theme; 8 | const styles = StyleSheet.create({ 9 | icon: { 10 | width: 160, 11 | height: 160, 12 | }, 13 | title: { 14 | fontSize: 17, 15 | fontWeight: '600', 16 | color: theme.colors.baseShade3, 17 | marginVertical: 5, 18 | }, 19 | description: { 20 | fontSize: 13, 21 | fontWeight: '400', 22 | color: theme.colors.baseShade3, 23 | }, 24 | exploreBtn: { 25 | width: '60%', 26 | paddingHorizontal: 16, 27 | paddingVertical: 10, 28 | backgroundColor: theme.colors.primary, 29 | borderRadius: 4, 30 | marginVertical: 17, 31 | justifyContent: 'center', 32 | alignItems: 'center', 33 | flexDirection: 'row', 34 | }, 35 | exploreIcon: { 36 | width: 20, 37 | height: 20, 38 | }, 39 | exploreText: { 40 | color: '#ffffff', 41 | fontSize: 15, 42 | marginLeft: 8, 43 | }, 44 | createCommunityBtnText: { 45 | color: theme.colors.primary, 46 | fontSize: 15, 47 | lineHeight: 20, 48 | fontWeight: '400', 49 | }, 50 | }); 51 | 52 | return styles; 53 | }; 54 | -------------------------------------------------------------------------------- /src/components/AmityEmptyNewsFeedComponent/styles.ts: -------------------------------------------------------------------------------- 1 | import { StyleSheet } from 'react-native'; 2 | import { useTheme } from 'react-native-paper'; 3 | import type { MyMD3Theme } from '../../providers/amity-ui-kit-provider'; 4 | 5 | export const useStyles = () => { 6 | const theme = useTheme() as MyMD3Theme; 7 | const styles = StyleSheet.create({ 8 | container: { 9 | flex: 1, 10 | backgroundColor: theme.colors.background, 11 | justifyContent: 'center', 12 | alignItems: 'center', 13 | }, 14 | }); 15 | 16 | return styles; 17 | }; 18 | -------------------------------------------------------------------------------- /src/components/AmityGlobalFeedComponent/styles.ts: -------------------------------------------------------------------------------- 1 | import { StyleSheet } from 'react-native'; 2 | import type { MyMD3Theme } from '../../providers/amity-ui-kit-provider'; 3 | 4 | export const useStyle = (themeStyle: MyMD3Theme) => { 5 | const styles = StyleSheet.create({ 6 | feedWrap: { 7 | backgroundColor: themeStyle.colors.baseShade4, 8 | height: '100%', 9 | }, 10 | }); 11 | return styles; 12 | }; 13 | -------------------------------------------------------------------------------- /src/components/AmityMediaAttachmentComponent/styles.ts: -------------------------------------------------------------------------------- 1 | import { StyleSheet, useWindowDimensions } from 'react-native'; 2 | import type { MyMD3Theme } from '../../providers/amity-ui-kit-provider'; 3 | 4 | export const useStyles = (theme: MyMD3Theme) => { 5 | const { width } = useWindowDimensions(); 6 | const styles = StyleSheet.create({ 7 | container: { 8 | alignSelf: 'center', 9 | width, 10 | borderTopWidth: 3, 11 | borderLeftWidth: 1, 12 | borderRightWidth: 1, 13 | borderTopLeftRadius: 20, 14 | borderTopRightRadius: 20, 15 | backgroundColor: theme.colors.background, 16 | borderColor: theme.colors.baseShade4, 17 | position: 'absolute', 18 | bottom: 0, 19 | paddingBottom: 14, 20 | }, 21 | handleBar: { 22 | alignSelf: 'center', 23 | width: 36, 24 | backgroundColor: theme.colors.baseShade4, 25 | height: 5, 26 | marginVertical: 10, 27 | borderRadius: 10, 28 | }, 29 | buttonsContainer: { 30 | flexDirection: 'row', 31 | paddingTop: 16, 32 | paddingHorizontal: 24, 33 | width: '100%', 34 | justifyContent: 'space-around', 35 | }, 36 | iconBtn: { 37 | width: 24, 38 | height: 24, 39 | tintColor: theme.colors.base, 40 | }, 41 | }); 42 | 43 | return styles; 44 | }; 45 | -------------------------------------------------------------------------------- /src/components/AmityNewsFeedComponent/AmityNewsFeedComponent.tsx: -------------------------------------------------------------------------------- 1 | import React, { FC, memo } from 'react'; 2 | import { View } from 'react-native'; 3 | import useConfig from '../../hooks/useConfig'; 4 | import { ComponentID, PageID } from '../../enum/enumUIKitID'; 5 | import AmityGlobalFeedComponent from '../AmityGlobalFeedComponent/AmityGlobalFeedComponent'; 6 | 7 | type AmityNewsFeedComponentType = { 8 | pageId?: PageID; 9 | }; 10 | 11 | const AmityNewsFeedComponent: FC<AmityNewsFeedComponentType> = ({ 12 | pageId = PageID.WildCardPage, 13 | }) => { 14 | const { excludes } = useConfig(); 15 | const componentId = ComponentID.newsfeed_component; 16 | const uiReference = `${pageId}/${componentId}/*`; 17 | 18 | if (excludes.includes(uiReference)) return null; 19 | 20 | return ( 21 | <View testID={uiReference} accessibilityLabel={uiReference}> 22 | <AmityGlobalFeedComponent pageId={pageId} /> 23 | </View> 24 | ); 25 | }; 26 | 27 | export default memo(AmityNewsFeedComponent); 28 | -------------------------------------------------------------------------------- /src/components/AmityPostEngagementActionsComponent/Components/index.ts: -------------------------------------------------------------------------------- 1 | import DetailStyle from './DetailStyle'; 2 | import FeedStyle from './FeedStyle'; 3 | 4 | export const AmityPostEngagementActionsSubComponent = { 5 | DetailStyle, 6 | FeedStyle, 7 | }; 8 | -------------------------------------------------------------------------------- /src/components/AmityPostEngagementActionsComponent/Components/type.ts: -------------------------------------------------------------------------------- 1 | import { ComponentID, PageID } from '../../../enum'; 2 | 3 | export type AmityPostEngagementActionsSubComponentType = { 4 | community?: Amity.Community; 5 | postId: string; 6 | pageId?: PageID; 7 | componentId?: ComponentID; 8 | }; 9 | -------------------------------------------------------------------------------- /src/components/AmityTopSearchBarComponent/styles.ts: -------------------------------------------------------------------------------- 1 | import { StyleSheet } from 'react-native'; 2 | import { useTheme } from 'react-native-paper'; 3 | import type { MyMD3Theme } from '../../providers/amity-ui-kit-provider'; 4 | 5 | export const useStyles = () => { 6 | const theme = useTheme() as MyMD3Theme; 7 | const styles = StyleSheet.create({ 8 | headerWrap: { 9 | flexDirection: 'row', 10 | justifyContent: 'space-between', 11 | alignItems: 'center', 12 | backgroundColor: theme.colors.background, 13 | }, 14 | inputWrap: { 15 | marginHorizontal: 16, 16 | backgroundColor: theme.colors.baseShade4, 17 | paddingHorizontal: 10, 18 | paddingVertical: 10, 19 | borderRadius: 8, 20 | flexDirection: 'row', 21 | justifyContent: 'space-between', 22 | marginVertical: 10, 23 | flex: 2, 24 | alignItems: 'center', 25 | }, 26 | input: { flex: 1, marginHorizontal: 6, color: theme.colors.base }, 27 | cancelBtn: { 28 | marginRight: 16, 29 | color: theme.colors.base, 30 | }, 31 | searchIcon: { width: 20, height: 20, tintColor: theme.colors.base }, 32 | }); 33 | 34 | return styles; 35 | }; 36 | -------------------------------------------------------------------------------- /src/components/BackButton/index.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { TouchableOpacity } from 'react-native'; 3 | 4 | import { StackActions, useNavigation } from '@react-navigation/native'; 5 | import type { NativeStackNavigationProp } from '@react-navigation/native-stack'; 6 | 7 | import { useTheme } from 'react-native-paper'; 8 | import type { MyMD3Theme } from '../../providers/amity-ui-kit-provider'; 9 | import ArrowBackIcon from '../../svg/ArrowBackIcon'; 10 | 11 | interface IBackBtn { 12 | onPress?: () => any; 13 | goBack?: boolean; 14 | backTwice?: boolean 15 | } 16 | export default function BackButton({ onPress, goBack = true, backTwice = false }: IBackBtn) { 17 | const theme = useTheme() as MyMD3Theme; 18 | const navigation = useNavigation<NativeStackNavigationProp<any>>(); 19 | return ( 20 | <TouchableOpacity 21 | onPress={() => { 22 | if(backTwice){ 23 | navigation.dispatch(StackActions.pop(2)); 24 | }else if(goBack){ 25 | navigation.goBack(); 26 | } 27 | 28 | 29 | onPress && onPress(); 30 | }} 31 | > 32 | <ArrowBackIcon color={theme.colors.base} width={24} height={20}/> 33 | 34 | </TouchableOpacity> 35 | ); 36 | } 37 | -------------------------------------------------------------------------------- /src/components/BackButton/styles.ts: -------------------------------------------------------------------------------- 1 | import { StyleSheet } from 'react-native'; 2 | 3 | export const styles = StyleSheet.create({ 4 | icon: { 5 | backgroundColor: '#fff', 6 | color: '#000', 7 | width: 24, 8 | height: 20, 9 | display: 'flex', 10 | justifyContent: 'center', 11 | alignItems: 'center', 12 | }, 13 | cancelText: { 14 | fontSize: 18, 15 | color: 'black', 16 | }, 17 | }); 18 | -------------------------------------------------------------------------------- /src/components/ChooseCategoryModal/Components/Categories.tsx: -------------------------------------------------------------------------------- 1 | import { Image, Text, TouchableOpacity } from 'react-native'; 2 | import React, { memo } from 'react'; 3 | import useFile from '../../../hooks/useFile'; 4 | import { useStyle } from '../styles'; 5 | import CategoryIcon from '../../../svg/CategoryIcon'; 6 | 7 | const Categories = ({ 8 | item, 9 | onSelectCategory, 10 | }: { 11 | item: Amity.Category; 12 | onSelectCategory: (id: string, name: string) => void; 13 | }) => { 14 | const avatarURL = useFile({ fileId: item.avatarFileId }); 15 | const styles = useStyle(); 16 | return ( 17 | <TouchableOpacity 18 | onPress={() => onSelectCategory(item.categoryId, item.name)} 19 | style={styles.rowContainer} 20 | > 21 | {item.avatarFileId ? ( 22 | <Image 23 | style={styles.avatar} 24 | source={{ 25 | uri: avatarURL, 26 | }} 27 | /> 28 | ) : ( 29 | <CategoryIcon width={40} height={40}/> 30 | )} 31 | 32 | <Text style={styles.communityText}>{item.name}</Text> 33 | </TouchableOpacity> 34 | ); 35 | }; 36 | 37 | export default memo(Categories); 38 | -------------------------------------------------------------------------------- /src/components/CloseButton/index.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { TouchableOpacity, View, Text } from 'react-native'; 3 | import { styles } from './styles'; 4 | export default function CloseButton({ navigation }: { navigation: any }) { 5 | return ( 6 | <TouchableOpacity onPress={() => navigation.goBack()}> 7 | <View style={styles.icon}> 8 | <Text style={styles.cancelText}>Cancel</Text> 9 | </View> 10 | </TouchableOpacity> 11 | ); 12 | } 13 | -------------------------------------------------------------------------------- /src/components/CloseButton/styles.ts: -------------------------------------------------------------------------------- 1 | import { StyleSheet } from 'react-native'; 2 | 3 | export const styles = StyleSheet.create({ 4 | icon: { 5 | backgroundColor: '#fff', 6 | color: '#000', 7 | 8 | height: 20, 9 | display: 'flex', 10 | justifyContent: 'center', 11 | alignItems: 'center', 12 | }, 13 | cancelText: { 14 | fontSize: 18, 15 | color: 'black', 16 | }, 17 | }); 18 | -------------------------------------------------------------------------------- /src/components/CustomSocialTab/styles.ts: -------------------------------------------------------------------------------- 1 | import { StyleSheet } from 'react-native'; 2 | import { useTheme } from 'react-native-paper'; 3 | import type { MyMD3Theme } from '../../providers/amity-ui-kit-provider'; 4 | 5 | export const useStyles = () => { 6 | const theme = useTheme() as MyMD3Theme; 7 | 8 | const styles = StyleSheet.create({ 9 | tabContainer: { 10 | flexDirection: 'row', 11 | alignItems: 'center', 12 | backgroundColor: theme.colors.background, 13 | padding: 12, 14 | }, 15 | tabBtn: { 16 | borderRadius: 24, 17 | paddingHorizontal: 12, 18 | paddingVertical: 8, 19 | marginHorizontal: 4, 20 | borderWidth: 1, 21 | borderColor: theme.colors.baseShade4, 22 | backgroundColor: theme.colors.background, 23 | }, 24 | tabName: { 25 | fontSize: 17, 26 | lineHeight: 22, 27 | color: theme.colors.baseShade1, 28 | }, 29 | }); 30 | return styles; 31 | }; 32 | -------------------------------------------------------------------------------- /src/components/CustomTab/styles.ts: -------------------------------------------------------------------------------- 1 | import { StyleSheet } from 'react-native'; 2 | import { useTheme } from 'react-native-paper'; 3 | import type { MyMD3Theme } from '../../providers/amity-ui-kit-provider'; 4 | 5 | export const useStyles = () => { 6 | const theme = useTheme() as MyMD3Theme; 7 | 8 | const styles = StyleSheet.create({ 9 | container: { 10 | flexDirection: 'row', 11 | alignItems: 'center', 12 | height: 50, 13 | backgroundColor: theme.colors.background, 14 | borderBottomWidth: 1, 15 | borderBottomColor: theme.colors.baseShade4, 16 | }, 17 | activeTab: { 18 | borderBottomWidth: 2, 19 | borderBottomColor: theme.colors.baseShade4, 20 | }, 21 | tabText: { 22 | fontSize: 17, 23 | fontWeight: 'bold', 24 | color: theme.colors.base, 25 | marginHorizontal: 15, 26 | textAlign: 'center', 27 | }, 28 | activeTabText: { 29 | color: theme.colors.primary, 30 | }, 31 | indicator: { 32 | position: 'absolute', 33 | bottom: 0, 34 | height: 2, 35 | backgroundColor: theme.colors.primary, 36 | }, 37 | }); 38 | return styles; 39 | }; 40 | -------------------------------------------------------------------------------- /src/components/CustomTabV3/styles.ts: -------------------------------------------------------------------------------- 1 | import { StyleSheet } from 'react-native'; 2 | import { useTheme } from 'react-native-paper'; 3 | import type { MyMD3Theme } from '../../providers/amity-ui-kit-provider'; 4 | 5 | export const useStyles = () => { 6 | const theme = useTheme() as MyMD3Theme; 7 | 8 | const styles = StyleSheet.create({ 9 | container: { 10 | flexDirection: 'row', 11 | alignItems: 'center', 12 | height: 50, 13 | backgroundColor: theme.colors.background, 14 | borderBottomWidth: 1, 15 | borderBottomColor: theme.colors.baseShade4, 16 | }, 17 | activeTab: { 18 | borderBottomWidth: 2, 19 | borderBottomColor: theme.colors.baseShade4, 20 | }, 21 | tabText: { 22 | fontSize: 17, 23 | fontWeight: 'bold', 24 | color: theme.colors.base, 25 | marginHorizontal: 15, 26 | textAlign: 'center', 27 | }, 28 | activeTabText: { 29 | color: theme.colors.primary, 30 | }, 31 | indicator: { 32 | position: 'absolute', 33 | bottom: 0, 34 | height: 2, 35 | backgroundColor: theme.colors.primary, 36 | }, 37 | }); 38 | return styles; 39 | }; 40 | -------------------------------------------------------------------------------- /src/components/CustomText/index.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Text } from 'react-native'; 3 | import styles from './styles'; 4 | 5 | interface CustomTextProps { 6 | children: React.ReactNode; 7 | style?: any; 8 | numberOfLines?: number; 9 | ellipsizeMode?: 'tail' | 'head' | 'middle' | 'clip' | undefined; 10 | } 11 | 12 | const CustomText: React.FC<CustomTextProps> = ( 13 | { children, style, numberOfLines, ellipsizeMode = 'tail' }: CustomTextProps, 14 | props 15 | ) => { 16 | return ( 17 | <Text 18 | {...props} 19 | style={[styles.text, style]} 20 | numberOfLines={numberOfLines} 21 | ellipsizeMode={ellipsizeMode} 22 | > 23 | {children} 24 | </Text> 25 | ); 26 | }; 27 | export default CustomText; 28 | -------------------------------------------------------------------------------- /src/components/CustomText/styles.ts: -------------------------------------------------------------------------------- 1 | import { StyleSheet } from 'react-native'; 2 | 3 | const styles = StyleSheet.create({ 4 | text: { 5 | // fontFamily: 'SFProText-Regular', 6 | color: 'black', 7 | }, 8 | }); 9 | 10 | export default styles; 11 | -------------------------------------------------------------------------------- /src/components/DoneButton/index.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { 3 | TouchableOpacity, 4 | View, 5 | Text, 6 | type GestureResponderEvent, 7 | } from 'react-native'; 8 | import { styles } from './styles'; 9 | export default function DoneButton({ 10 | onDonePressed, 11 | buttonTxt, 12 | }: { 13 | navigation: any; 14 | buttonTxt?: string; 15 | onDonePressed: { (event: GestureResponderEvent): void }; 16 | }) { 17 | const buttonText = buttonTxt ?? 'Done'; 18 | return ( 19 | <TouchableOpacity onPress={onDonePressed}> 20 | <View style={styles.icon}> 21 | <Text style={styles.doneText}>{buttonText}</Text> 22 | </View> 23 | </TouchableOpacity> 24 | ); 25 | } 26 | -------------------------------------------------------------------------------- /src/components/DoneButton/styles.ts: -------------------------------------------------------------------------------- 1 | import { StyleSheet } from 'react-native'; 2 | 3 | export const styles = StyleSheet.create({ 4 | icon: { 5 | backgroundColor: '#fff', 6 | color: '#000', 7 | 8 | height: 20, 9 | display: 'flex', 10 | justifyContent: 'center', 11 | alignItems: 'center', 12 | }, 13 | doneText: { 14 | fontSize: 18, 15 | color: '#1054DE', 16 | }, 17 | }); 18 | -------------------------------------------------------------------------------- /src/components/FloatingButton/index.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Pressable, View } from 'react-native'; 3 | import { useStyles } from './styles'; 4 | import PostIcon from '../../svg/PostIcon'; 5 | 6 | interface IBackBtn { 7 | onPress: () => any; 8 | isGlobalFeed?: boolean; 9 | } 10 | export default function FloatingButton({ 11 | onPress, 12 | isGlobalFeed = true, 13 | }: IBackBtn) { 14 | const styles = useStyles() 15 | return ( 16 | <View style={!isGlobalFeed ? styles.otherFeedContainer : styles.container}> 17 | <Pressable 18 | onPress={() => { 19 | onPress && onPress(); 20 | }} 21 | style={styles.button} 22 | > 23 | <PostIcon color='#fff' /> 24 | </Pressable> 25 | </View> 26 | ); 27 | } 28 | -------------------------------------------------------------------------------- /src/components/FloatingButton/styles.ts: -------------------------------------------------------------------------------- 1 | 2 | import { StyleSheet } from 'react-native'; 3 | import { useTheme } from 'react-native-paper'; 4 | import type { MyMD3Theme } from '../../providers/amity-ui-kit-provider'; 5 | 6 | export const useStyles = () => { 7 | const theme = useTheme() as MyMD3Theme; 8 | 9 | const styles = StyleSheet.create({ 10 | container: { 11 | position: 'absolute', 12 | bottom: 35, 13 | right: 10, 14 | flex: 1 15 | }, 16 | otherFeedContainer: { 17 | position: 'absolute', 18 | bottom: 35, 19 | right: 10, 20 | }, 21 | button: { 22 | width: 64, 23 | height: 64, 24 | borderRadius: 35, 25 | backgroundColor: theme.colors.primary, 26 | justifyContent: 'center', 27 | alignItems: 'center', 28 | paddingVertical: 12, 29 | paddingHorizontal: 20, 30 | shadowColor: '#000', 31 | shadowOffset: { 32 | width: 0, 33 | height: 2, 34 | }, 35 | shadowOpacity: 0.5, 36 | shadowRadius: 3.84, 37 | }, 38 | }); 39 | 40 | return styles; 41 | }; 42 | -------------------------------------------------------------------------------- /src/components/Gallery/GalleryTab.tsx: -------------------------------------------------------------------------------- 1 | import { 2 | Text, 3 | View, 4 | TouchableOpacity, 5 | ViewStyle, 6 | TextStyle, 7 | } from 'react-native'; 8 | import React, { FC, memo, useCallback } from 'react'; 9 | import { TabName } from '../../enum/tabNameState'; 10 | import { useStyles } from './styles'; 11 | 12 | interface IGalleryTab { 13 | onTabChange: (tabName: TabName) => void; 14 | tabName: TabName[]; 15 | curerntTab: TabName; 16 | } 17 | 18 | const GalleryTab: FC<IGalleryTab> = ({ tabName, onTabChange, curerntTab }) => { 19 | const styles = useStyles(); 20 | 21 | const onChangeTab = useCallback( 22 | (tab: TabName) => { 23 | onTabChange(tab); 24 | }, 25 | [onTabChange] 26 | ); 27 | 28 | return ( 29 | <View style={styles.tabContainer}> 30 | {tabName.map((tab) => { 31 | const isFocused = curerntTab === tab; 32 | const focusedTabStyle: ViewStyle = isFocused && styles.focusedTab; 33 | const focusedTabTextStyle: TextStyle = 34 | isFocused && styles.focusedTabText; 35 | return ( 36 | <TouchableOpacity 37 | key={tab} 38 | onPress={() => onChangeTab(tab)} 39 | style={[styles.tab, focusedTabStyle]} 40 | > 41 | <Text style={[styles.tabText, focusedTabTextStyle]}>{tab}</Text> 42 | </TouchableOpacity> 43 | ); 44 | })} 45 | </View> 46 | ); 47 | }; 48 | 49 | export default memo(GalleryTab); 50 | -------------------------------------------------------------------------------- /src/components/ListSectionHeader/index.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Text, View } from 'react-native'; 3 | import { styles } from './styles'; 4 | 5 | export default function SectionHeader({ title }: { title: string }) { 6 | return ( 7 | <View style={styles.sectionHeader}> 8 | <Text style={styles.sectionHeaderText}>{title}</Text> 9 | </View> 10 | ); 11 | } 12 | -------------------------------------------------------------------------------- /src/components/ListSectionHeader/styles.ts: -------------------------------------------------------------------------------- 1 | import { StyleSheet } from 'react-native'; 2 | 3 | export const styles = StyleSheet.create({ 4 | sectionHeader: { 5 | backgroundColor: '#EBECEF', 6 | paddingVertical: 10, 7 | paddingHorizontal: 10, 8 | }, 9 | sectionHeaderText: { 10 | fontWeight: '600', 11 | fontSize: 15, 12 | color: '#898E9E', 13 | }, 14 | }); 15 | -------------------------------------------------------------------------------- /src/components/LoadingImage /styles.ts: -------------------------------------------------------------------------------- 1 | import { Dimensions, StyleSheet } from 'react-native'; 2 | 3 | export const createStyles = () => { 4 | return StyleSheet.create({ 5 | container: { 6 | flex: 1, 7 | position: 'relative', 8 | maxWidth: Dimensions.get('window').height / 4, 9 | height: Dimensions.get('window').height / 5, 10 | margin: 3, 11 | }, 12 | image: { 13 | flex: 1, 14 | width: '100%', 15 | height: '100%', 16 | resizeMode: 'cover', 17 | borderRadius: 5, 18 | }, 19 | overlay: { 20 | ...StyleSheet.absoluteFillObject, 21 | justifyContent: 'center', 22 | alignItems: 'center', 23 | }, 24 | progressBar: { 25 | marginVertical: 10, 26 | }, 27 | loadingImage: { 28 | opacity: 0.5, 29 | }, 30 | loadedImage: { 31 | opacity: 1, 32 | }, 33 | closeButton: { 34 | position: 'absolute', 35 | top: 7, 36 | right: 7, 37 | padding: 7, 38 | backgroundColor: 'rgba(255, 255, 255, 0.4)', 39 | borderRadius: 72, 40 | }, 41 | }); 42 | }; 43 | -------------------------------------------------------------------------------- /src/components/LoadingImageV4/styles.ts: -------------------------------------------------------------------------------- 1 | import { useWindowDimensions, StyleSheet } from 'react-native'; 2 | 3 | export const useStyles = () => { 4 | const { width } = useWindowDimensions(); 5 | return StyleSheet.create({ 6 | container: { 7 | flex: 1, 8 | height: width - 24, 9 | margin: 3, 10 | }, 11 | image3XContainer: { 12 | width: width / 3 - 16, 13 | height: width / 3 - 16, 14 | margin: 3, 15 | }, 16 | image: { 17 | width: '100%', 18 | height: '100%', 19 | resizeMode: 'cover', 20 | borderRadius: 5, 21 | }, 22 | overlay: { 23 | ...StyleSheet.absoluteFillObject, 24 | justifyContent: 'center', 25 | alignItems: 'center', 26 | }, 27 | progressBar: { 28 | marginVertical: 10, 29 | }, 30 | loadingImage: { 31 | opacity: 0.5, 32 | }, 33 | loadedImage: { 34 | opacity: 1, 35 | }, 36 | closeButton: { 37 | position: 'absolute', 38 | top: 7, 39 | right: 7, 40 | padding: 7, 41 | backgroundColor: 'rgba(0, 0, 0, 0.4)', 42 | borderRadius: 72, 43 | }, 44 | }); 45 | }; 46 | -------------------------------------------------------------------------------- /src/components/LoadingIndicator/index.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { 3 | ActivityIndicator, 4 | type StyleProp, 5 | View, 6 | type ViewStyle, 7 | } from 'react-native'; 8 | import { styles } from './styles'; 9 | 10 | export default function LoadingIndicator({ 11 | propStyle, 12 | size = 20, 13 | color = 'gray', 14 | }: { 15 | propStyle?: StyleProp<ViewStyle>; 16 | size?: number; 17 | color?: string; 18 | }) { 19 | let style: StyleProp<ViewStyle> = styles.container; 20 | if (propStyle !== undefined) { 21 | style = [styles.container, propStyle]; 22 | } 23 | return ( 24 | <View style={style}> 25 | <ActivityIndicator size={size} color={color} /> 26 | </View> 27 | ); 28 | } 29 | -------------------------------------------------------------------------------- /src/components/LoadingIndicator/styles.ts: -------------------------------------------------------------------------------- 1 | import { StyleSheet } from 'react-native'; 2 | 3 | export const styles = StyleSheet.create({ 4 | container: { 5 | flex: 1, 6 | justifyContent: 'center', 7 | alignItems: 'center', 8 | }, 9 | }); 10 | -------------------------------------------------------------------------------- /src/components/LoadingOverlay/index.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { ActivityIndicator, Text, View } from 'react-native'; 3 | import { styles } from './styles'; 4 | 5 | interface LoadingOverlayProps { 6 | isLoading: boolean; 7 | loadingText?: string; 8 | } 9 | 10 | export const LoadingOverlay: React.FC<LoadingOverlayProps> = ({ 11 | isLoading, 12 | loadingText, 13 | }) => { 14 | if (!isLoading) { 15 | return null; 16 | } 17 | 18 | return ( 19 | <View style={styles.overlay}> 20 | <View style={styles.indicatorContainer}> 21 | <ActivityIndicator size="large" color="#fff" /> 22 | {loadingText && <Text style={styles.loadingText}>{loadingText}</Text>} 23 | </View> 24 | </View> 25 | ); 26 | }; 27 | -------------------------------------------------------------------------------- /src/components/LoadingOverlay/styles.ts: -------------------------------------------------------------------------------- 1 | import { StyleSheet } from 'react-native'; 2 | 3 | export const styles = StyleSheet.create({ 4 | overlay: { 5 | ...StyleSheet.absoluteFillObject, 6 | backgroundColor: '#fff', 7 | zIndex: 1, 8 | alignItems: 'center', 9 | justifyContent: 'center', 10 | }, 11 | indicatorContainer: { 12 | backgroundColor: 'rgba(0,0,0,0.7)', 13 | padding: 20, 14 | borderRadius: 8, 15 | alignItems: 'center', 16 | }, 17 | loadingText: { 18 | marginTop: 10, 19 | fontSize: 16, 20 | fontWeight: '600', 21 | color: '#fff', 22 | }, 23 | }); 24 | -------------------------------------------------------------------------------- /src/components/LoadingVideoV4/styles.ts: -------------------------------------------------------------------------------- 1 | import { useWindowDimensions, StyleSheet } from 'react-native'; 2 | 3 | export const useStyles = () => { 4 | const { width } = useWindowDimensions(); 5 | return StyleSheet.create({ 6 | container: { 7 | flex: 1, 8 | height: width - 24, 9 | margin: 3, 10 | }, 11 | image3XContainer: { 12 | width: width / 3 - 16, 13 | height: width / 3 - 16, 14 | margin: 3, 15 | }, 16 | image: { 17 | width: '100%', 18 | height: '100%', 19 | resizeMode: 'cover', 20 | borderRadius: 5, 21 | backgroundColor: '#bcbcbc', 22 | }, 23 | overlay: { 24 | position: 'absolute', 25 | top: '50%', 26 | left: '50%', 27 | transform: [{ translateX: -25 }, { translateY: -25 }], 28 | }, 29 | progressBar: { 30 | marginVertical: 10, 31 | }, 32 | loadingImage: { 33 | opacity: 0.5, 34 | }, 35 | loadedImage: { 36 | opacity: 1, 37 | }, 38 | closeButton: { 39 | position: 'absolute', 40 | top: 7, 41 | right: 7, 42 | padding: 7, 43 | backgroundColor: 'rgba(255, 255, 255, 0.4)', 44 | borderRadius: 72, 45 | }, 46 | playButton: { 47 | width: 100, 48 | height: 100, 49 | borderRadius: 50, 50 | position: 'absolute', 51 | top: '50%', 52 | left: '50%', 53 | transform: [{ translateX: -25 }, { translateY: -25 }], 54 | zIndex: 1, 55 | }, 56 | }); 57 | }; 58 | -------------------------------------------------------------------------------- /src/components/MentionPopup/styles.ts: -------------------------------------------------------------------------------- 1 | import { StyleSheet } from 'react-native'; 2 | import { useTheme } from 'react-native-paper'; 3 | import { MyMD3Theme } from '../../providers/amity-ui-kit-provider'; 4 | 5 | export const useStyles = () => { 6 | const theme = useTheme() as MyMD3Theme; 7 | 8 | const styles = StyleSheet.create({ 9 | mentionContainer: { 10 | borderTopColor: theme.colors.baseShade4, 11 | borderTopWidth: 1, 12 | paddingHorizontal: 0, 13 | maxHeight: 240, 14 | }, 15 | }); 16 | 17 | return styles; 18 | }; 19 | -------------------------------------------------------------------------------- /src/components/NewsFeedLoadingComponent/NewsFeedLoadingComponent.tsx: -------------------------------------------------------------------------------- 1 | import { View, useWindowDimensions } from 'react-native'; 2 | import React from 'react'; 3 | import { useStyles } from './styles'; 4 | import { 5 | Facebook, 6 | } from 'react-content-loader/native'; 7 | import { Divider, useTheme } from 'react-native-paper'; 8 | 9 | import type { MyMD3Theme } from '../../providers/amity-ui-kit-provider'; 10 | 11 | const NewsFeedLoadingComponent = () => { 12 | const styles = useStyles(); 13 | const theme = useTheme() as MyMD3Theme; 14 | const { width } = useWindowDimensions(); 15 | return ( 16 | <View style={styles.container} > 17 | {Array.from({ length: 6 }, (_, i) => ( 18 | <View style={styles.postCard} key={i}> 19 | <Facebook 20 | width={width} 21 | foregroundColor={theme.colors.baseShade4} 22 | speed={0.5} 23 | /> 24 | <Divider /> 25 | </View> 26 | ))} 27 | </View> 28 | ); 29 | }; 30 | 31 | export default NewsFeedLoadingComponent; 32 | -------------------------------------------------------------------------------- /src/components/NewsFeedLoadingComponent/styles.ts: -------------------------------------------------------------------------------- 1 | import { StyleSheet } from 'react-native'; 2 | import { useTheme } from 'react-native-paper'; 3 | import type { MyMD3Theme } from '../../providers/amity-ui-kit-provider'; 4 | export const useStyles = () => { 5 | const theme = useTheme() as MyMD3Theme; 6 | const styles = StyleSheet.create({ 7 | container: { 8 | paddingVertical: 16, 9 | flex: 1, 10 | gap: 8, 11 | 12 | }, 13 | postCard:{ 14 | backgroundColor: theme.colors.background, 15 | paddingHorizontal: 16 16 | }, 17 | storiesContainer: { 18 | flexDirection: 'row', 19 | }, 20 | }); 21 | 22 | return styles; 23 | }; 24 | -------------------------------------------------------------------------------- /src/components/PollSection/Components/PollBar.tsx: -------------------------------------------------------------------------------- 1 | import { View, ViewStyle } from 'react-native'; 2 | import React, { FC, memo } from 'react'; 3 | import { useStyles } from '../style'; 4 | 5 | interface IPollBar { 6 | myVote: boolean; 7 | length: number; 8 | } 9 | 10 | const PollBar: FC<IPollBar> = ({ myVote, length }) => { 11 | const styles = useStyles(); 12 | const myVoteBarStyle: ViewStyle = myVote && styles.myVoteBar; 13 | const barLengthStyle: ViewStyle = { width: `${length}%` }; 14 | return ( 15 | <View style={styles.backgroundBar}> 16 | <View style={[styles.innerBar, myVoteBarStyle, barLengthStyle]} /> 17 | </View> 18 | ); 19 | }; 20 | 21 | export default memo(PollBar); 22 | -------------------------------------------------------------------------------- /src/components/PreviewLink/index.ts: -------------------------------------------------------------------------------- 1 | export * from './LinkPreview'; 2 | export * from './types'; 3 | export * from './utils'; 4 | -------------------------------------------------------------------------------- /src/components/PreviewLink/styles.ts: -------------------------------------------------------------------------------- 1 | import { StyleSheet, useWindowDimensions } from 'react-native'; 2 | import { useTheme } from 'react-native-paper'; 3 | import type { MyMD3Theme } from '../../providers/amity-ui-kit-provider'; 4 | export const useStyles = () => { 5 | const theme = useTheme() as MyMD3Theme; 6 | const { height } = useWindowDimensions(); 7 | const styles = StyleSheet.create({ 8 | image: { 9 | width: '100%', 10 | height: height * 0.2, 11 | alignSelf: 'center', 12 | backgroundColor: theme.colors.baseShade4, 13 | }, 14 | metadataContainer: { 15 | marginTop: 16, 16 | borderRadius: 12, 17 | borderWidth: 1, 18 | borderColor: theme.colors.baseShade4, 19 | overflow: 'hidden', 20 | }, 21 | metadataTextContainer: { 22 | padding: 12, 23 | }, 24 | title: { 25 | fontWeight: 'bold', 26 | fontSize: 15, 27 | color: theme.colors.base, 28 | }, 29 | shortUrl: { 30 | fontSize: 13, 31 | color: theme.colors.baseShade1, 32 | marginBottom: 4, 33 | }, 34 | }); 35 | 36 | return styles; 37 | }; 38 | -------------------------------------------------------------------------------- /src/components/PreviewLink/types.ts: -------------------------------------------------------------------------------- 1 | export interface PreviewData { 2 | description?: string; 3 | image?: PreviewDataImage; 4 | link?: string; 5 | title?: string; 6 | } 7 | 8 | export interface PreviewDataImage { 9 | height: number; 10 | url: string; 11 | width: number; 12 | } 13 | 14 | export interface Size { 15 | height: number; 16 | width: number; 17 | } 18 | -------------------------------------------------------------------------------- /src/components/RenderTextWithMention /styles.ts: -------------------------------------------------------------------------------- 1 | import { StyleSheet } from 'react-native'; 2 | import { useTheme } from 'react-native-paper'; 3 | import type { MyMD3Theme } from '../../providers/amity-ui-kit-provider'; 4 | 5 | export const useStyles = () => { 6 | const theme = useTheme() as MyMD3Theme; 7 | 8 | const styles = StyleSheet.create({ 9 | mentionText: { 10 | color: theme.colors.primary, 11 | fontSize: 15, 12 | }, 13 | inputText: { 14 | color: theme.colors.base, 15 | fontSize: 15, 16 | }, 17 | moreLessButton: { 18 | fontWeight: 'normal', 19 | color: theme.colors.primary, 20 | fontSize: 15, 21 | }, 22 | }); 23 | 24 | return styles; 25 | }; 26 | -------------------------------------------------------------------------------- /src/components/RoundCheckbox/index.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Text, View } from 'react-native'; 3 | import { styles } from './styles'; 4 | 5 | export default function RoundCheckbox({ isChecked }: { isChecked: boolean }) { 6 | return ( 7 | <View style={[styles.roundCheckbox, isChecked && styles.checked]}> 8 | {isChecked && <Text style={styles.checkmark}>✓</Text>} 9 | </View> 10 | ); 11 | } 12 | -------------------------------------------------------------------------------- /src/components/RoundCheckbox/styles.ts: -------------------------------------------------------------------------------- 1 | import { StyleSheet } from 'react-native'; 2 | 3 | export const styles = StyleSheet.create({ 4 | roundCheckbox: { 5 | width: 20, 6 | height: 20, 7 | borderRadius: 10, 8 | borderWidth: 1, 9 | borderColor: '#A5A9B5', 10 | backgroundColor: '#fff', 11 | justifyContent: 'center', 12 | alignItems: 'center', 13 | }, 14 | checked: { 15 | backgroundColor: '#1054DE', 16 | borderWidth: 0, 17 | }, 18 | checkmark: { 19 | fontSize: 14, 20 | fontWeight: '700', 21 | color: '#fff', 22 | }, 23 | }); 24 | -------------------------------------------------------------------------------- /src/components/SearchBar/index.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { TextInput } from 'react-native'; 3 | import { styles } from './styles'; 4 | 5 | export default function SearchBar({ 6 | handleSearch, 7 | }: { 8 | handleSearch: (text: string) => void; 9 | }) { 10 | return ( 11 | <TextInput 12 | style={styles.searchBar} 13 | // value={searchText} 14 | placeholder="Search" 15 | onChangeText={handleSearch} 16 | /> 17 | ); 18 | } 19 | -------------------------------------------------------------------------------- /src/components/SearchBar/styles.ts: -------------------------------------------------------------------------------- 1 | import { StyleSheet } from 'react-native'; 2 | 3 | export const styles = StyleSheet.create({ 4 | searchBar: { 5 | height: 40, 6 | backgroundColor: '#EBECEF', 7 | borderWidth: 0, 8 | paddingHorizontal: 10, 9 | marginVertical: 10, 10 | marginHorizontal: 10, 11 | }, 12 | }); 13 | -------------------------------------------------------------------------------- /src/components/SearchItem/styles.ts: -------------------------------------------------------------------------------- 1 | import { StyleSheet } from 'react-native'; 2 | import { useTheme } from 'react-native-paper'; 3 | import type { MyMD3Theme } from '../../providers/amity-ui-kit-provider'; 4 | 5 | export const useStyles = () => { 6 | const theme = useTheme() as MyMD3Theme; 7 | const styles = StyleSheet.create({ 8 | listItem: { 9 | flexDirection: 'row', 10 | alignItems: 'center', 11 | justifyContent: 'space-between', 12 | paddingVertical: 8, 13 | paddingHorizontal: 16, 14 | backgroundColor: theme.colors.background, 15 | }, 16 | avatar: { 17 | width: 40, 18 | height: 40, 19 | borderRadius: 72, 20 | marginRight: 15, 21 | }, 22 | itemText: { 23 | fontSize: 15, 24 | fontWeight: '600', 25 | color: theme.colors.base, 26 | }, 27 | leftContainer: { 28 | flexDirection: 'row', 29 | alignItems: 'center', 30 | }, 31 | dotIcon: { 32 | width: 16, 33 | height: 12, 34 | }, 35 | categoryText: { 36 | fontSize: 13, 37 | color: theme.colors.baseShade1, 38 | marginTop: 4, 39 | }, 40 | }); 41 | return styles; 42 | }; 43 | -------------------------------------------------------------------------------- /src/components/UserItem/styles.ts: -------------------------------------------------------------------------------- 1 | import { StyleSheet } from 'react-native'; 2 | import { useTheme } from 'react-native-paper'; 3 | import type { MyMD3Theme } from '../../providers/amity-ui-kit-provider'; 4 | 5 | export const useStyles = () => { 6 | const theme = useTheme() as MyMD3Theme; 7 | const styles = StyleSheet.create({ 8 | listItem: { 9 | flexDirection: 'row', 10 | alignItems: 'center', 11 | justifyContent: 'space-between', 12 | paddingVertical: 8, 13 | paddingHorizontal: 16, 14 | }, 15 | avatar: { 16 | width: 40, 17 | height: 40, 18 | borderRadius: 72, 19 | marginRight: 10, 20 | }, 21 | itemText: { 22 | fontSize: 15, 23 | fontWeight: '600', 24 | color: theme.colors.base, 25 | }, 26 | leftContainer: { 27 | flexDirection: 'row', 28 | alignItems: 'center', 29 | }, 30 | dotIcon: { 31 | width: 16, 32 | height: 12, 33 | 34 | }, 35 | btnContainer: { 36 | padding: 10, 37 | } 38 | }); 39 | return styles; 40 | }; 41 | -------------------------------------------------------------------------------- /src/components/react-native-image-viewing/LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2019 JOB TODAY S.A. 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. -------------------------------------------------------------------------------- /src/components/react-native-image-viewing/dist/@types/index.d.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * Copyright (c) JOB TODAY S.A. and its affiliates. 3 | * 4 | * This source code is licensed under the MIT license found in the 5 | * LICENSE file in the root directory of this source tree. 6 | * 7 | */ 8 | import { ImageURISource, ImageRequireSource } from 'react-native'; 9 | export declare type Dimensions = { 10 | width: number; 11 | height: number; 12 | }; 13 | export declare type Position = { 14 | x: number; 15 | y: number; 16 | }; 17 | export declare type ImageSource = ImageURISource | ImageRequireSource; 18 | -------------------------------------------------------------------------------- /src/components/react-native-image-viewing/dist/@types/index.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Copyright (c) JOB TODAY S.A. and its affiliates. 3 | * 4 | * This source code is licensed under the MIT license found in the 5 | * LICENSE file in the root directory of this source tree. 6 | * 7 | */ 8 | -------------------------------------------------------------------------------- /src/components/react-native-image-viewing/dist/ImageViewing.d.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * Copyright (c) JOB TODAY S.A. and its affiliates. 3 | * 4 | * This source code is licensed under the MIT license found in the 5 | * LICENSE file in the root directory of this source tree. 6 | * 7 | */ 8 | import { ComponentType } from 'react'; 9 | import { ModalProps } from 'react-native'; 10 | import type { IVideoPost } from 'src/components/Social/PostList'; 11 | import { ImageSource } from './@types'; 12 | declare type Props = { 13 | images: ImageSource[]; 14 | keyExtractor?: (imageSrc: ImageSource, index: number) => string; 15 | imageIndex: number; 16 | visible: boolean; 17 | onRequestClose: () => void; 18 | onLongPress?: (image: ImageSource) => void; 19 | onImageIndexChange?: (imageIndex: number) => void; 20 | presentationStyle?: ModalProps['presentationStyle']; 21 | animationType?: ModalProps['animationType']; 22 | backgroundColor?: string; 23 | swipeToCloseEnabled?: boolean; 24 | doubleTapToZoomEnabled?: boolean; 25 | delayLongPress?: number; 26 | HeaderComponent?: ComponentType<{ 27 | imageIndex: number; 28 | }>; 29 | FooterComponent?: ComponentType<{ 30 | imageIndex: number; 31 | }>; 32 | isVideoButton: boolean; 33 | onClickPlayButton?: (index: number) => void; 34 | videoPosts?: IVideoPost[]; 35 | }; 36 | declare const EnhancedImageViewing: (props: Props) => JSX.Element; 37 | export default EnhancedImageViewing; 38 | -------------------------------------------------------------------------------- /src/components/react-native-image-viewing/dist/components/ImageDefaultHeader.d.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * Copyright (c) JOB TODAY S.A. and its affiliates. 3 | * 4 | * This source code is licensed under the MIT license found in the 5 | * LICENSE file in the root directory of this source tree. 6 | * 7 | */ 8 | /// <reference types="react" /> 9 | declare type Props = { 10 | onRequestClose: () => void; 11 | }; 12 | declare const ImageDefaultHeader: ({ onRequestClose }: Props) => JSX.Element; 13 | export default ImageDefaultHeader; 14 | -------------------------------------------------------------------------------- /src/components/react-native-image-viewing/dist/components/ImageDefaultHeader.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Copyright (c) JOB TODAY S.A. and its affiliates. 3 | * 4 | * This source code is licensed under the MIT license found in the 5 | * LICENSE file in the root directory of this source tree. 6 | * 7 | */ 8 | import React from 'react'; 9 | import { SafeAreaView, Text, TouchableOpacity, StyleSheet } from 'react-native'; 10 | const HIT_SLOP = { top: 16, left: 16, bottom: 16, right: 16 }; 11 | const ImageDefaultHeader = ({ onRequestClose }) => ( 12 | <SafeAreaView style={styles.root}> 13 | <TouchableOpacity 14 | style={styles.closeButton} 15 | onPress={onRequestClose} 16 | hitSlop={HIT_SLOP} 17 | > 18 | <Text style={styles.closeText}>✕</Text> 19 | </TouchableOpacity> 20 | </SafeAreaView> 21 | ); 22 | const styles = StyleSheet.create({ 23 | root: { 24 | alignItems: 'flex-start', 25 | }, 26 | closeButton: { 27 | marginLeft: 8, 28 | marginTop: 8, 29 | width: 44, 30 | height: 44, 31 | alignItems: 'center', 32 | justifyContent: 'center', 33 | borderRadius: 22, 34 | backgroundColor: '#00000077', 35 | }, 36 | closeText: { 37 | lineHeight: 22, 38 | fontSize: 19, 39 | textAlign: 'center', 40 | color: '#FFF', 41 | includeFontPadding: false, 42 | }, 43 | }); 44 | export default ImageDefaultHeader; 45 | -------------------------------------------------------------------------------- /src/components/react-native-image-viewing/dist/components/ImageItem/ImageItem.android.d.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * Copyright (c) JOB TODAY S.A. and its affiliates. 3 | * 4 | * This source code is licensed under the MIT license found in the 5 | * LICENSE file in the root directory of this source tree. 6 | * 7 | */ 8 | import React from 'react'; 9 | import { ImageSource } from '../../@types'; 10 | declare type Props = { 11 | imageSrc: ImageSource; 12 | onRequestClose: () => void; 13 | onZoom: (isZoomed: boolean) => void; 14 | onLongPress: (image: ImageSource) => void; 15 | delayLongPress: number; 16 | swipeToCloseEnabled?: boolean; 17 | doubleTapToZoomEnabled?: boolean; 18 | }; 19 | declare const _default: React.MemoExoticComponent< 20 | ({ 21 | imageSrc, 22 | onZoom, 23 | onRequestClose, 24 | onLongPress, 25 | delayLongPress, 26 | swipeToCloseEnabled, 27 | doubleTapToZoomEnabled, 28 | }: Props) => JSX.Element 29 | >; 30 | export default _default; 31 | -------------------------------------------------------------------------------- /src/components/react-native-image-viewing/dist/components/ImageItem/ImageItem.ios.d.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * Copyright (c) JOB TODAY S.A. and its affiliates. 3 | * 4 | * This source code is licensed under the MIT license found in the 5 | * LICENSE file in the root directory of this source tree. 6 | * 7 | */ 8 | import React from 'react'; 9 | import { ImageSource } from '../../@types'; 10 | declare type Props = { 11 | imageSrc: ImageSource; 12 | onRequestClose: () => void; 13 | onZoom: (scaled: boolean) => void; 14 | onLongPress: (image: ImageSource) => void; 15 | delayLongPress: number; 16 | swipeToCloseEnabled?: boolean; 17 | doubleTapToZoomEnabled?: boolean; 18 | }; 19 | declare const _default: React.MemoExoticComponent< 20 | ({ 21 | imageSrc, 22 | onZoom, 23 | onRequestClose, 24 | onLongPress, 25 | delayLongPress, 26 | swipeToCloseEnabled, 27 | doubleTapToZoomEnabled, 28 | }: Props) => JSX.Element 29 | >; 30 | export default _default; 31 | -------------------------------------------------------------------------------- /src/components/react-native-image-viewing/dist/components/ImageItem/ImageLoading.d.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * Copyright (c) JOB TODAY S.A. and its affiliates. 3 | * 4 | * This source code is licensed under the MIT license found in the 5 | * LICENSE file in the root directory of this source tree. 6 | * 7 | */ 8 | /// <reference types="react" /> 9 | export declare const ImageLoading: () => JSX.Element; 10 | -------------------------------------------------------------------------------- /src/components/react-native-image-viewing/dist/components/ImageItem/ImageLoading.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Copyright (c) JOB TODAY S.A. and its affiliates. 3 | * 4 | * This source code is licensed under the MIT license found in the 5 | * LICENSE file in the root directory of this source tree. 6 | * 7 | */ 8 | import React from 'react'; 9 | import { ActivityIndicator, Dimensions, StyleSheet, View } from 'react-native'; 10 | const SCREEN = Dimensions.get('screen'); 11 | const SCREEN_WIDTH = SCREEN.width; 12 | const SCREEN_HEIGHT = SCREEN.height; 13 | export const ImageLoading = () => ( 14 | <View style={styles.loading}> 15 | <ActivityIndicator size="small" color="#FFF" /> 16 | </View> 17 | ); 18 | const styles = StyleSheet.create({ 19 | listItem: { 20 | width: SCREEN_WIDTH, 21 | height: SCREEN_HEIGHT, 22 | }, 23 | loading: { 24 | width: SCREEN_WIDTH, 25 | height: SCREEN_HEIGHT, 26 | alignItems: 'center', 27 | justifyContent: 'center', 28 | }, 29 | imageScrollContainer: { 30 | height: SCREEN_HEIGHT, 31 | }, 32 | }); 33 | -------------------------------------------------------------------------------- /src/components/react-native-image-viewing/dist/components/Modal/Modal.android.d.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * Copyright (c) JOB TODAY S.A. and its affiliates. 3 | * 4 | * This source code is licensed under the MIT license found in the 5 | * LICENSE file in the root directory of this source tree. 6 | * 7 | */ 8 | /// <reference types="react" /> 9 | import { ModalProps } from 'react-native'; 10 | declare type Props = ModalProps & { 11 | children: JSX.Element; 12 | }; 13 | declare const Modal: ({ 14 | visible, 15 | children, 16 | presentationStyle, 17 | onRequestClose, 18 | }: Props) => JSX.Element | null; 19 | export default Modal; 20 | -------------------------------------------------------------------------------- /src/components/react-native-image-viewing/dist/components/Modal/Modal.d.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * Copyright (c) JOB TODAY S.A. and its affiliates. 3 | * 4 | * This source code is licensed under the MIT license found in the 5 | * LICENSE file in the root directory of this source tree. 6 | * 7 | */ 8 | import { Modal } from 'react-native'; 9 | export default Modal; 10 | -------------------------------------------------------------------------------- /src/components/react-native-image-viewing/dist/components/Modal/Modal.ios.d.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * Copyright (c) JOB TODAY S.A. and its affiliates. 3 | * 4 | * This source code is licensed under the MIT license found in the 5 | * LICENSE file in the root directory of this source tree. 6 | * 7 | */ 8 | import { Modal } from 'react-native'; 9 | export default Modal; 10 | -------------------------------------------------------------------------------- /src/components/react-native-image-viewing/dist/components/Modal/Modal.ios.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Copyright (c) JOB TODAY S.A. and its affiliates. 3 | * 4 | * This source code is licensed under the MIT license found in the 5 | * LICENSE file in the root directory of this source tree. 6 | * 7 | */ 8 | import { Modal } from 'react-native'; 9 | export default Modal; 10 | -------------------------------------------------------------------------------- /src/components/react-native-image-viewing/dist/components/Modal/Modal.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Copyright (c) JOB TODAY S.A. and its affiliates. 3 | * 4 | * This source code is licensed under the MIT license found in the 5 | * LICENSE file in the root directory of this source tree. 6 | * 7 | */ 8 | import { Modal } from 'react-native'; 9 | export default Modal; 10 | -------------------------------------------------------------------------------- /src/components/react-native-image-viewing/dist/components/StatusBarManager.d.ts: -------------------------------------------------------------------------------- 1 | declare const StatusBarManager: ({ 2 | presentationStyle, 3 | }: { 4 | presentationStyle?: 5 | | 'fullScreen' 6 | | 'pageSheet' 7 | | 'formSheet' 8 | | 'overFullScreen' 9 | | undefined; 10 | }) => null; 11 | export default StatusBarManager; 12 | -------------------------------------------------------------------------------- /src/components/react-native-image-viewing/dist/components/StatusBarManager.js: -------------------------------------------------------------------------------- 1 | import { useEffect } from 'react'; 2 | import { Platform, StatusBar } from 'react-native'; 3 | const StatusBarManager = ({ presentationStyle }) => { 4 | if (Platform.OS === 'ios' || presentationStyle !== 'overFullScreen') { 5 | return null; 6 | } 7 | //Can't get an actual state of app status bar with default RN. Gonna rely on "presentationStyle === overFullScreen" prop and guess application status bar state to be visible in this case. 8 | StatusBar.setHidden(true); 9 | useEffect(() => { 10 | return () => StatusBar.setHidden(false); 11 | }, []); 12 | return null; 13 | }; 14 | export default StatusBarManager; 15 | -------------------------------------------------------------------------------- /src/components/react-native-image-viewing/dist/hooks/useAnimatedComponents.d.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * Copyright (c) JOB TODAY S.A. and its affiliates. 3 | * 4 | * This source code is licensed under the MIT license found in the 5 | * LICENSE file in the root directory of this source tree. 6 | * 7 | */ 8 | import { Animated } from 'react-native'; 9 | declare const useAnimatedComponents: () => readonly [ 10 | { 11 | [key: string]: Animated.Value; 12 | }[], 13 | { 14 | [key: string]: Animated.Value; 15 | }[], 16 | (isVisible: boolean) => void 17 | ]; 18 | export default useAnimatedComponents; 19 | -------------------------------------------------------------------------------- /src/components/react-native-image-viewing/dist/hooks/useDoubleTapToZoom.d.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * Copyright (c) JOB TODAY S.A. and its affiliates. 3 | * 4 | * This source code is licensed under the MIT license found in the 5 | * LICENSE file in the root directory of this source tree. 6 | * 7 | */ 8 | import React from 'react'; 9 | import { 10 | ScrollView, 11 | NativeTouchEvent, 12 | NativeSyntheticEvent, 13 | } from 'react-native'; 14 | import { Dimensions } from '../@types'; 15 | /** 16 | * This is iOS only. 17 | * Same functionality for Android implemented inside usePanResponder hook. 18 | */ 19 | declare function useDoubleTapToZoom( 20 | scrollViewRef: React.RefObject<ScrollView>, 21 | scaled: boolean, 22 | screen: Dimensions 23 | ): (event: NativeSyntheticEvent<NativeTouchEvent>) => void; 24 | export default useDoubleTapToZoom; 25 | -------------------------------------------------------------------------------- /src/components/react-native-image-viewing/dist/hooks/useImageDimensions.d.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * Copyright (c) JOB TODAY S.A. and its affiliates. 3 | * 4 | * This source code is licensed under the MIT license found in the 5 | * LICENSE file in the root directory of this source tree. 6 | * 7 | */ 8 | import { Dimensions, ImageSource } from '../@types'; 9 | declare const useImageDimensions: (image: ImageSource) => Dimensions | null; 10 | export default useImageDimensions; 11 | -------------------------------------------------------------------------------- /src/components/react-native-image-viewing/dist/hooks/useImageIndexChange.d.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * Copyright (c) JOB TODAY S.A. and its affiliates. 3 | * 4 | * This source code is licensed under the MIT license found in the 5 | * LICENSE file in the root directory of this source tree. 6 | * 7 | */ 8 | import { NativeSyntheticEvent, NativeScrollEvent } from 'react-native'; 9 | import { Dimensions } from '../@types'; 10 | declare const useImageIndexChange: ( 11 | imageIndex: number, 12 | screen: Dimensions 13 | ) => readonly [ 14 | number, 15 | (event: NativeSyntheticEvent<NativeScrollEvent>) => void 16 | ]; 17 | export default useImageIndexChange; 18 | -------------------------------------------------------------------------------- /src/components/react-native-image-viewing/dist/hooks/useImageIndexChange.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Copyright (c) JOB TODAY S.A. and its affiliates. 3 | * 4 | * This source code is licensed under the MIT license found in the 5 | * LICENSE file in the root directory of this source tree. 6 | * 7 | */ 8 | import { useState } from 'react'; 9 | const useImageIndexChange = (imageIndex, screen) => { 10 | const [currentImageIndex, setImageIndex] = useState(imageIndex); 11 | const onScroll = (event) => { 12 | const { 13 | nativeEvent: { 14 | contentOffset: { x: scrollX }, 15 | }, 16 | } = event; 17 | if (screen.width) { 18 | const nextIndex = Math.round(scrollX / screen.width); 19 | setImageIndex(nextIndex < 0 ? 0 : nextIndex); 20 | } 21 | }; 22 | return [currentImageIndex, onScroll]; 23 | }; 24 | export default useImageIndexChange; 25 | -------------------------------------------------------------------------------- /src/components/react-native-image-viewing/dist/hooks/useImagePrefetch.d.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * Copyright (c) JOB TODAY S.A. and its affiliates. 3 | * 4 | * This source code is licensed under the MIT license found in the 5 | * LICENSE file in the root directory of this source tree. 6 | * 7 | */ 8 | import { ImageSource } from '../@types'; 9 | declare const useImagePrefetch: (images: ImageSource[]) => void; 10 | export default useImagePrefetch; 11 | -------------------------------------------------------------------------------- /src/components/react-native-image-viewing/dist/hooks/useImagePrefetch.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Copyright (c) JOB TODAY S.A. and its affiliates. 3 | * 4 | * This source code is licensed under the MIT license found in the 5 | * LICENSE file in the root directory of this source tree. 6 | * 7 | */ 8 | import { useEffect } from 'react'; 9 | import { Image } from 'react-native'; 10 | const useImagePrefetch = (images) => { 11 | useEffect(() => { 12 | images.forEach((image) => { 13 | //@ts-ignore 14 | if (image.uri) { 15 | //@ts-ignore 16 | return Image.prefetch(image.uri); 17 | } 18 | }); 19 | }, []); 20 | }; 21 | export default useImagePrefetch; 22 | -------------------------------------------------------------------------------- /src/components/react-native-image-viewing/dist/hooks/usePanResponder.d.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * Copyright (c) JOB TODAY S.A. and its affiliates. 3 | * 4 | * This source code is licensed under the MIT license found in the 5 | * LICENSE file in the root directory of this source tree. 6 | * 7 | */ 8 | import { Animated, GestureResponderHandlers } from 'react-native'; 9 | import { Position } from '../@types'; 10 | declare type Props = { 11 | initialScale: number; 12 | initialTranslate: Position; 13 | onZoom: (isZoomed: boolean) => void; 14 | doubleTapToZoomEnabled: boolean; 15 | onLongPress: () => void; 16 | delayLongPress: number; 17 | }; 18 | declare const usePanResponder: ({ 19 | initialScale, 20 | initialTranslate, 21 | onZoom, 22 | doubleTapToZoomEnabled, 23 | onLongPress, 24 | delayLongPress, 25 | }: Props) => readonly [ 26 | GestureResponderHandlers, 27 | Animated.Value, 28 | Animated.ValueXY 29 | ]; 30 | export default usePanResponder; 31 | -------------------------------------------------------------------------------- /src/components/react-native-image-viewing/dist/hooks/useRequestClose.d.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * Copyright (c) JOB TODAY S.A. and its affiliates. 3 | * 4 | * This source code is licensed under the MIT license found in the 5 | * LICENSE file in the root directory of this source tree. 6 | * 7 | */ 8 | declare const useRequestClose: ( 9 | onRequestClose: () => void 10 | ) => readonly [number, () => void]; 11 | export default useRequestClose; 12 | -------------------------------------------------------------------------------- /src/components/react-native-image-viewing/dist/hooks/useRequestClose.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Copyright (c) JOB TODAY S.A. and its affiliates. 3 | * 4 | * This source code is licensed under the MIT license found in the 5 | * LICENSE file in the root directory of this source tree. 6 | * 7 | */ 8 | import { useState } from 'react'; 9 | const useRequestClose = (onRequestClose) => { 10 | const [opacity, setOpacity] = useState(1); 11 | return [ 12 | opacity, 13 | () => { 14 | setOpacity(0); 15 | onRequestClose(); 16 | setTimeout(() => setOpacity(1), 0); 17 | }, 18 | ]; 19 | }; 20 | export default useRequestClose; 21 | -------------------------------------------------------------------------------- /src/components/react-native-image-viewing/dist/hooks/useZoomPanResponder.d.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * Copyright (c) JOB TODAY S.A. and its affiliates. 3 | * 4 | * This source code is licensed under the MIT license found in the 5 | * LICENSE file in the root directory of this source tree. 6 | * 7 | */ 8 | import { Animated, GestureResponderHandlers } from 'react-native'; 9 | import { Position } from '../@types'; 10 | declare type Props = { 11 | initialScale: number; 12 | initialTranslate: Position; 13 | onZoom: (isZoomed: boolean) => void; 14 | doubleTapToZoomEnabled: boolean; 15 | }; 16 | declare const useZoomPanResponder: ({ 17 | initialScale, 18 | initialTranslate, 19 | onZoom, 20 | doubleTapToZoomEnabled, 21 | }: Props) => readonly [ 22 | GestureResponderHandlers, 23 | Animated.Value, 24 | Animated.ValueXY 25 | ]; 26 | export default useZoomPanResponder; 27 | -------------------------------------------------------------------------------- /src/components/react-native-image-viewing/dist/index.d.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * Copyright (c) JOB TODAY S.A. and its affiliates. 3 | * 4 | * This source code is licensed under the MIT license found in the 5 | * LICENSE file in the root directory of this source tree. 6 | * 7 | */ 8 | export { default } from './ImageViewing'; 9 | -------------------------------------------------------------------------------- /src/components/react-native-image-viewing/dist/index.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Copyright (c) JOB TODAY S.A. and its affiliates. 3 | * 4 | * This source code is licensed under the MIT license found in the 5 | * LICENSE file in the root directory of this source tree. 6 | * 7 | */ 8 | export { default } from './ImageViewing'; 9 | -------------------------------------------------------------------------------- /src/configAssets/icons/aspect_ratio.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AmityCo/Amity-Social-UIKit-React-Native-OpenSource/d16277236611a047ce3f0e69d0ba7f611a885f84/src/configAssets/icons/aspect_ratio.png -------------------------------------------------------------------------------- /src/configAssets/icons/backButtonIcon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AmityCo/Amity-Social-UIKit-React-Native-OpenSource/d16277236611a047ce3f0e69d0ba7f611a885f84/src/configAssets/icons/backButtonIcon.png -------------------------------------------------------------------------------- /src/configAssets/icons/badgeIcon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AmityCo/Amity-Social-UIKit-React-Native-OpenSource/d16277236611a047ce3f0e69d0ba7f611a885f84/src/configAssets/icons/badgeIcon.png -------------------------------------------------------------------------------- /src/configAssets/icons/clear.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AmityCo/Amity-Social-UIKit-React-Native-OpenSource/d16277236611a047ce3f0e69d0ba7f611a885f84/src/configAssets/icons/clear.png -------------------------------------------------------------------------------- /src/configAssets/icons/commentButtonIcon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AmityCo/Amity-Social-UIKit-React-Native-OpenSource/d16277236611a047ce3f0e69d0ba7f611a885f84/src/configAssets/icons/commentButtonIcon.png -------------------------------------------------------------------------------- /src/configAssets/icons/emptyFeedIcon_dark.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AmityCo/Amity-Social-UIKit-React-Native-OpenSource/d16277236611a047ce3f0e69d0ba7f611a885f84/src/configAssets/icons/emptyFeedIcon_dark.png -------------------------------------------------------------------------------- /src/configAssets/icons/emptyFeedIcon_light.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AmityCo/Amity-Social-UIKit-React-Native-OpenSource/d16277236611a047ce3f0e69d0ba7f611a885f84/src/configAssets/icons/emptyFeedIcon_light.png -------------------------------------------------------------------------------- /src/configAssets/icons/exploreCommunityIcon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AmityCo/Amity-Social-UIKit-React-Native-OpenSource/d16277236611a047ce3f0e69d0ba7f611a885f84/src/configAssets/icons/exploreCommunityIcon.png -------------------------------------------------------------------------------- /src/configAssets/icons/hyperlink_button.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AmityCo/Amity-Social-UIKit-React-Native-OpenSource/d16277236611a047ce3f0e69d0ba7f611a885f84/src/configAssets/icons/hyperlink_button.png -------------------------------------------------------------------------------- /src/configAssets/icons/likeButtonIcon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AmityCo/Amity-Social-UIKit-React-Native-OpenSource/d16277236611a047ce3f0e69d0ba7f611a885f84/src/configAssets/icons/likeButtonIcon.png -------------------------------------------------------------------------------- /src/configAssets/icons/lockIcon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AmityCo/Amity-Social-UIKit-React-Native-OpenSource/d16277236611a047ce3f0e69d0ba7f611a885f84/src/configAssets/icons/lockIcon.png -------------------------------------------------------------------------------- /src/configAssets/icons/menuIcon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AmityCo/Amity-Social-UIKit-React-Native-OpenSource/d16277236611a047ce3f0e69d0ba7f611a885f84/src/configAssets/icons/menuIcon.png -------------------------------------------------------------------------------- /src/configAssets/icons/mute.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AmityCo/Amity-Social-UIKit-React-Native-OpenSource/d16277236611a047ce3f0e69d0ba7f611a885f84/src/configAssets/icons/mute.png -------------------------------------------------------------------------------- /src/configAssets/icons/officialBadgeIcon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AmityCo/Amity-Social-UIKit-React-Native-OpenSource/d16277236611a047ce3f0e69d0ba7f611a885f84/src/configAssets/icons/officialBadgeIcon.png -------------------------------------------------------------------------------- /src/configAssets/icons/plus.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AmityCo/Amity-Social-UIKit-React-Native-OpenSource/d16277236611a047ce3f0e69d0ba7f611a885f84/src/configAssets/icons/plus.png -------------------------------------------------------------------------------- /src/configAssets/icons/search.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AmityCo/Amity-Social-UIKit-React-Native-OpenSource/d16277236611a047ce3f0e69d0ba7f611a885f84/src/configAssets/icons/search.png -------------------------------------------------------------------------------- /src/configAssets/icons/shareButtonIcon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AmityCo/Amity-Social-UIKit-React-Native-OpenSource/d16277236611a047ce3f0e69d0ba7f611a885f84/src/configAssets/icons/shareButtonIcon.png -------------------------------------------------------------------------------- /src/configAssets/icons/unmute.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AmityCo/Amity-Social-UIKit-React-Native-OpenSource/d16277236611a047ce3f0e69d0ba7f611a885f84/src/configAssets/icons/unmute.png -------------------------------------------------------------------------------- /src/enum/AmityPostContentComponentStyle.ts: -------------------------------------------------------------------------------- 1 | export enum AmityPostContentComponentStyleEnum { 2 | feed = 'feed', 3 | detail = 'detail', 4 | } 5 | -------------------------------------------------------------------------------- /src/enum/enumTheme.ts: -------------------------------------------------------------------------------- 1 | export enum PREFERRED_THEME { 2 | dark = 'dark', 3 | light = 'light', 4 | default = 'default', 5 | } 6 | 7 | export enum THEME_COLORS { 8 | primary_color = 'primary_color', 9 | secondary_color = 'secondary_color', 10 | base_color = 'base_color', 11 | base_shade1_color = 'base_shade1_color', 12 | base_shade2_color = 'base_shade2_color', 13 | base_shade3_color = 'base_shade3_color', 14 | base_shade4_color = 'base_shade4_color', 15 | alert_color = 'alert_color', 16 | background_color = 'background_color', 17 | } 18 | -------------------------------------------------------------------------------- /src/enum/imageSizeState copy.ts: -------------------------------------------------------------------------------- 1 | export enum ImageSizeState { 2 | small = 'small', 3 | medium = 'medium', 4 | large = 'large', 5 | full = 'full', 6 | } 7 | 8 | export type ImageSizeSubset = 9 | | ImageSizeState.small 10 | | ImageSizeState.medium 11 | | ImageSizeState.large 12 | | ImageSizeState.full; 13 | -------------------------------------------------------------------------------- /src/enum/imageSizeState.ts: -------------------------------------------------------------------------------- 1 | export enum ImageSizeState { 2 | small = 'small', 3 | medium = 'medium', 4 | large = 'large', 5 | full = 'full', 6 | } 7 | 8 | export type ImageSizeSubset = 9 | | ImageSizeState.small 10 | | ImageSizeState.medium 11 | | ImageSizeState.large 12 | | ImageSizeState.full; 13 | -------------------------------------------------------------------------------- /src/enum/index.ts: -------------------------------------------------------------------------------- 1 | export * from './storyType'; 2 | export * from './enumUIKitID'; 3 | export * from './imageSizeState'; 4 | export * from './enumTheme'; 5 | export * from './tabNameState'; 6 | export * from './post'; 7 | export * from './mediaAttachmentEnum'; 8 | -------------------------------------------------------------------------------- /src/enum/mediaAttachmentEnum.ts: -------------------------------------------------------------------------------- 1 | export enum mediaAttachment { 2 | image = 'image', 3 | video = 'video', 4 | file = 'file', 5 | } 6 | -------------------------------------------------------------------------------- /src/enum/post.ts: -------------------------------------------------------------------------------- 1 | export const enum AmityPostTargetSelectionPageType { 2 | post = 'post', 3 | poll = 'poll', 4 | livestream = 'livestream', 5 | story = 'story', 6 | } 7 | -------------------------------------------------------------------------------- /src/enum/postTargetType.ts: -------------------------------------------------------------------------------- 1 | export enum PostTargetType { 2 | user = 'user', 3 | community = 'community', 4 | content = 'content', 5 | } 6 | -------------------------------------------------------------------------------- /src/enum/privacyState.ts: -------------------------------------------------------------------------------- 1 | export enum PrivacyState { 2 | private = 'private', 3 | public = 'public', 4 | } 5 | -------------------------------------------------------------------------------- /src/enum/sessionState.ts: -------------------------------------------------------------------------------- 1 | export enum SessionState { 2 | established = 'established', 3 | notLoggedIn = 'notLoggedIn', 4 | establishing = 'establishing', 5 | tokenExpired = 'tokenExpired', 6 | terminated = 'terminated', 7 | } 8 | -------------------------------------------------------------------------------- /src/enum/storyType.ts: -------------------------------------------------------------------------------- 1 | export enum StoryType { 2 | image = 'image', 3 | video = 'video', 4 | } 5 | -------------------------------------------------------------------------------- /src/enum/tabNameState.ts: -------------------------------------------------------------------------------- 1 | export enum TabName { 2 | NewsFeed = 'NewsFeed', 3 | Explore = 'Explore', 4 | Timeline = 'Timeline', 5 | Gallery = 'Gallery', 6 | Communities = 'Communities', 7 | Accounts = 'Accounts', 8 | Members = 'Members', 9 | Moderators = 'Moderators', 10 | MyCommunities = 'My Communities', 11 | Videos = 'Videos', 12 | Photos = 'Photos', 13 | Following = 'Following', 14 | Followers = 'Followers', 15 | Users = 'Users', 16 | } 17 | -------------------------------------------------------------------------------- /src/hooks/index.ts: -------------------------------------------------------------------------------- 1 | 2 | export * from './useConfig'; 3 | export * from './useConfigImageUri'; 4 | export * from './useFile'; 5 | 6 | export * from './useUser'; 7 | export * from './useValidateConfig'; 8 | export * from './useUiKitConfig'; 9 | export * from './useAmityGlobalSearchViewModel'; 10 | export * from './useCommunities'; 11 | export * from './useCommunity'; 12 | export * from './useCategory'; 13 | export * from './useUiKitReference'; 14 | export * from './useIsCommunityModerator'; 15 | export * from './useSearch'; 16 | export * from './useTimeDifference'; 17 | export * from './useReaction'; 18 | export * from './useKeyboardStatus'; 19 | -------------------------------------------------------------------------------- /src/hooks/useAuth.ts: -------------------------------------------------------------------------------- 1 | import { useContext } from 'react'; 2 | 3 | import { AuthContext } from '../providers/auth-provider'; 4 | import type { AuthContextInterface } from '../types/auth.interface'; 5 | 6 | const useAuth = (): AuthContextInterface => { 7 | const { 8 | login, 9 | logout, 10 | client, 11 | isConnecting, 12 | isConnected, 13 | error, 14 | sessionState, 15 | apiRegion, 16 | } = useContext(AuthContext); 17 | 18 | return { 19 | error, 20 | login, 21 | client, 22 | logout, 23 | isConnecting, 24 | isConnected, 25 | sessionState, 26 | apiRegion, 27 | }; 28 | }; 29 | 30 | export default useAuth; 31 | -------------------------------------------------------------------------------- /src/hooks/useCategory.ts: -------------------------------------------------------------------------------- 1 | import { useCallback } from 'react'; 2 | import { CategoryRepository } from '@amityco/ts-sdk-react-native'; 3 | 4 | export const useCategory = () => { 5 | const getCategory = useCallback( 6 | async (categoryId: Amity.Category['categoryId']) => { 7 | const { data } = await CategoryRepository.getCategory(categoryId); 8 | return data; 9 | }, 10 | [] 11 | ); 12 | 13 | return { getCategory }; 14 | }; 15 | -------------------------------------------------------------------------------- /src/hooks/useCommunities.ts: -------------------------------------------------------------------------------- 1 | import { useEffect, useState } from 'react'; 2 | import { CommunityRepository } from '@amityco/ts-sdk-react-native'; 3 | 4 | export const useCommunities = () => { 5 | const [communities, setCommunities] = useState<Amity.Community[]>(); 6 | const [onNextCommunityPage, setOnNextCommunityPage] = 7 | useState<() => void | null>(null); 8 | useEffect(() => { 9 | const unsubscribe = CommunityRepository.getCommunities( 10 | { membership: 'member', limit: 20 }, 11 | ({ error, loading, data, hasNextPage, onNextPage }) => { 12 | if (error) return; 13 | if (!loading) { 14 | setCommunities(data); 15 | setOnNextCommunityPage(() => { 16 | if (hasNextPage) return onNextPage; 17 | return null; 18 | }); 19 | } 20 | } 21 | ); 22 | return unsubscribe; 23 | }, []); 24 | return { communities, onNextCommunityPage }; 25 | }; 26 | -------------------------------------------------------------------------------- /src/hooks/useCommunity.ts: -------------------------------------------------------------------------------- 1 | import { useEffect, useState } from 'react'; 2 | import { CommunityRepository } from '@amityco/ts-sdk-react-native'; 3 | 4 | export const useCommunity = (communityId: Amity.Community['communityId']) => { 5 | const [community, setCommunity] = useState<Amity.Community>(); 6 | 7 | useEffect(() => { 8 | const unsubscribe = CommunityRepository.getCommunity( 9 | communityId, 10 | ({ error, loading, data }) => { 11 | if (error) return; 12 | if (!loading) { 13 | setCommunity(data); 14 | } 15 | } 16 | ); 17 | unsubscribe(); 18 | }, [communityId]); 19 | return { community }; 20 | }; 21 | -------------------------------------------------------------------------------- /src/hooks/useConfig.ts: -------------------------------------------------------------------------------- 1 | import { useContext } from 'react'; 2 | 3 | import { IUIKitConfigOptions } from '../types/config.interface'; 4 | import { ConfigContext } from '../providers/config-provider'; 5 | 6 | interface IUIKitConfig { 7 | preferred_theme: 'light' | 'dark' | 'default'; 8 | globalTheme: Record<string, any>; 9 | excludes: string[]; 10 | getConfig: (key: string) => any; 11 | getDefaultConfig: (key: string) => any; 12 | getUiKitConfig: ( 13 | arg: IUIKitConfigOptions 14 | ) => Record<string, string | string[] | Record<string, string>> | null; 15 | } 16 | const useConfig = (): IUIKitConfig => { 17 | const { 18 | preferred_theme, 19 | globalTheme, 20 | excludes, 21 | getConfig, 22 | getUiKitConfig, 23 | getDefaultConfig, 24 | } = useContext(ConfigContext); 25 | 26 | return { 27 | preferred_theme, 28 | globalTheme, 29 | excludes, 30 | getConfig, 31 | getUiKitConfig, 32 | getDefaultConfig, 33 | }; 34 | }; 35 | 36 | export default useConfig; 37 | -------------------------------------------------------------------------------- /src/hooks/useDarkMode.ts: -------------------------------------------------------------------------------- 1 | import { useColorScheme } from 'react-native'; 2 | import useConfig from './useConfig'; 3 | import { useMemo } from 'react'; 4 | export const useDarkMode = () => { 5 | const { preferred_theme } = useConfig(); 6 | const colorScheme = useColorScheme(); 7 | const isDarkTheme = useMemo(() => { 8 | return ( 9 | preferred_theme === 'dark' || 10 | (preferred_theme === 'default' && colorScheme === 'dark') 11 | ); 12 | }, [colorScheme, preferred_theme]); 13 | return { isDarkTheme }; 14 | }; 15 | -------------------------------------------------------------------------------- /src/hooks/useFile.ts: -------------------------------------------------------------------------------- 1 | import { useEffect, useState } from 'react'; 2 | import { FileRepository } from '@amityco/ts-sdk-react-native'; 3 | import { ImageSizeState, ImageSizeSubset } from '../enum/imageSizeState'; 4 | 5 | interface useFileProps { 6 | fileId: string; 7 | imageSize?: ImageSizeSubset; 8 | } 9 | 10 | const useFile = ({ 11 | fileId, 12 | imageSize = ImageSizeState.medium, 13 | }: useFileProps) => { 14 | const [imageUrl, setImageUrl] = useState<string | undefined>(undefined); 15 | 16 | useEffect(() => { 17 | async function run() { 18 | if (!fileId) return; 19 | const file = await FileRepository.getFile(fileId); 20 | if (!file) return; 21 | const newImageUrl = await FileRepository.fileUrlWithSize( 22 | file.data.fileUrl, 23 | imageSize 24 | ); 25 | setImageUrl(newImageUrl); 26 | } 27 | run(); 28 | }, [fileId, imageSize]); 29 | 30 | return imageUrl; 31 | }; 32 | 33 | export default useFile; 34 | -------------------------------------------------------------------------------- /src/hooks/useFilev4.ts: -------------------------------------------------------------------------------- 1 | import { useCallback } from 'react'; 2 | import { FileRepository } from '@amityco/ts-sdk-react-native'; 3 | import { ImageSizeState, ImageSizeSubset } from '../enum/imageSizeState'; 4 | import { defaultAvatarUri } from '../assets/index'; 5 | 6 | interface useFileProps { 7 | fileId: string; 8 | imageSize?: ImageSizeSubset; 9 | } 10 | 11 | export const useFileV4 = () => { 12 | const getImage = useCallback( 13 | async ({ fileId, imageSize = ImageSizeState.medium }: useFileProps) => { 14 | if (!fileId) return defaultAvatarUri; 15 | const file = await FileRepository.getFile(fileId); 16 | if (!file) return defaultAvatarUri; 17 | const newImageUrl = 18 | FileRepository.fileUrlWithSize(file.data.fileUrl, imageSize) ?? 19 | defaultAvatarUri; 20 | return newImageUrl; 21 | }, 22 | [] 23 | ); 24 | return { getImage }; 25 | }; 26 | -------------------------------------------------------------------------------- /src/hooks/useGenerateThemeStyles.ts: -------------------------------------------------------------------------------- 1 | import { MyMD3Theme } from '../providers/amity-ui-kit-provider'; 2 | import { IConfigRaw } from '../types/config.interface'; 3 | import { useDarkMode } from './useDarkMode'; 4 | import { useTheme } from 'react-native-paper'; 5 | 6 | export const mergeTheme = (obj1: any, obj2: Object) => { 7 | for (let key in obj2) { 8 | if (obj2.hasOwnProperty(key) && obj1.hasOwnProperty(key)) { 9 | obj1[key] = obj2[key]; 10 | } 11 | } 12 | return obj1; 13 | }; 14 | 15 | export const useGenerateThemeStyles = (config: IConfigRaw): MyMD3Theme => { 16 | const theme = useTheme() as MyMD3Theme; 17 | const { isDarkTheme } = useDarkMode(); 18 | if (!config?.theme?.dark || !config?.theme.light) return theme; 19 | let themeColor: typeof config.theme.dark; 20 | if (isDarkTheme) { 21 | themeColor = config.theme.dark; 22 | } else { 23 | themeColor = config.theme.light; 24 | } 25 | const mergedTheme = mergeTheme(theme.colors, themeColor); 26 | return { colors: mergedTheme } as MyMD3Theme; 27 | }; 28 | -------------------------------------------------------------------------------- /src/hooks/useIsCommunityModerator.ts: -------------------------------------------------------------------------------- 1 | import { CommunityRepository } from '@amityco/ts-sdk-react-native'; 2 | import { isModerator } from '../util/permission'; 3 | import { useEffect, useState } from 'react'; 4 | 5 | export const useIsCommunityModerator = ({ 6 | userId, 7 | communityId, 8 | }: { 9 | userId: string; 10 | communityId: string; 11 | }) => { 12 | const [isCommunityModerator, setisCommunityModerator] = useState(false); 13 | useEffect(() => { 14 | if (!userId || !communityId) return setisCommunityModerator(false); 15 | const unsub = CommunityRepository.Membership.searchMembers( 16 | { 17 | communityId: communityId, 18 | search: userId, 19 | limit: 1, 20 | sortBy: 'firstCreated', 21 | memberships: ['member'], 22 | }, 23 | async ({ error, loading, data }) => { 24 | if (error) return setisCommunityModerator(false); 25 | if (!loading) { 26 | const userRoles = data[0]?.roles ?? []; 27 | return setisCommunityModerator(() => isModerator(userRoles)); 28 | } 29 | return setisCommunityModerator(false); 30 | } 31 | ); 32 | return () => unsub(); 33 | }, [communityId, userId]); 34 | return { isCommunityModerator: isCommunityModerator }; 35 | }; 36 | -------------------------------------------------------------------------------- /src/hooks/useKeyboardStatus.ts: -------------------------------------------------------------------------------- 1 | import { useEffect, useState } from 'react'; 2 | import { Keyboard } from 'react-native'; 3 | 4 | export const useKeyboardStatus = () => { 5 | const [isKeyboardShowing, setIsKeyboardShowing] = useState(false); 6 | const [keyboardHeight, setKeyboardHeight] = useState(0); 7 | 8 | useEffect(() => { 9 | const showSubscription = Keyboard.addListener( 10 | 'keyboardDidShow', 11 | (event) => { 12 | setIsKeyboardShowing(true); 13 | setKeyboardHeight(event.endCoordinates.height); 14 | } 15 | ); 16 | const hideSubscription = Keyboard.addListener('keyboardDidHide', () => { 17 | setIsKeyboardShowing(false); 18 | setKeyboardHeight(0); 19 | }); 20 | return () => { 21 | showSubscription.remove(); 22 | hideSubscription.remove(); 23 | }; 24 | }, []); 25 | return { isKeyboardShowing, keyboardHeight }; 26 | }; 27 | -------------------------------------------------------------------------------- /src/hooks/usePostImpression.ts: -------------------------------------------------------------------------------- 1 | import { useCallback, useEffect, useState } from 'react'; 2 | import { ViewToken } from 'react-native'; 3 | import { IPost } from '../components/AmityPostContentComponent/AmityPostContentComponent'; 4 | 5 | 6 | export const usePostImpression = (postList: IPost[]) => { 7 | const [postViews, setPostViews] = useState<ViewToken[]>([]); 8 | 9 | const handleViewChange = useCallback(({ viewableItems }) => { 10 | setPostViews([...viewableItems]); 11 | }, []); 12 | 13 | useEffect(() => { 14 | if (postViews.length > 0) { 15 | for (const viewablePost of postViews) { 16 | if (viewablePost) { 17 | const post = postList.find( 18 | (post) => post.postId === viewablePost.item.postId 19 | ); 20 | if (post) { 21 | post.analytics?.markAsViewed(); 22 | } 23 | } 24 | } 25 | } 26 | }, [postViews, postList]); 27 | 28 | return { 29 | handleViewChange, 30 | }; 31 | }; 32 | -------------------------------------------------------------------------------- /src/hooks/useTimeDifference.ts: -------------------------------------------------------------------------------- 1 | import dayjs from 'dayjs'; 2 | import relativeTime from 'dayjs/plugin/relativeTime'; 3 | import { useMemo } from 'react'; 4 | 5 | dayjs.extend(relativeTime); 6 | 7 | export const useTimeDifference = (timestamp: string): string => { 8 | const timeDifference = useMemo(() => { 9 | const timestampDate = dayjs(timestamp); 10 | const currentDate = dayjs(); 11 | const differenceSec = currentDate.diff(timestampDate, 'second'); 12 | const differenceMinutes = currentDate.diff(timestampDate, 'minute'); 13 | const differenceHour = currentDate.diff(timestampDate, 'hour'); 14 | const differenceDay = currentDate.diff(timestampDate, 'day'); 15 | const differenceYear = currentDate.diff(timestampDate, 'year'); 16 | 17 | if (differenceSec < 60) return 'Just now'; 18 | if (differenceMinutes < 60) 19 | return `${differenceMinutes} ${ 20 | differenceMinutes === 1 ? 'min ago' : 'mins ago' 21 | }`; 22 | if (differenceHour < 24) 23 | return `${differenceHour} ${ 24 | differenceHour === 1 ? 'hour ago' : 'hours ago' 25 | }`; 26 | if (differenceDay < 365) 27 | return `${differenceDay} ${differenceDay === 1 ? 'day ago' : 'days ago'}`; 28 | return `${differenceYear} ${ 29 | differenceYear === 1 ? 'year ago' : 'years ago' 30 | }`; 31 | }, [timestamp]); 32 | return timeDifference; 33 | }; 34 | -------------------------------------------------------------------------------- /src/hooks/useUiKitConfig.ts: -------------------------------------------------------------------------------- 1 | import { useMemo } from 'react'; 2 | 3 | import useConfig from './useConfig'; 4 | import { UiKitConfigKeys } from '../enum/enumUIKitID'; 5 | import { IUIKitConfigOptions } from '../types/config.interface'; 6 | 7 | type UIKitConfigT = IUIKitConfigOptions & { keys: (keyof UiKitConfigKeys)[] }; 8 | 9 | export const useUiKitConfig = ({ keys, ...rest }: UIKitConfigT) => { 10 | const { getUiKitConfig } = useConfig(); 11 | const config = useMemo(() => { 12 | return keys.map((key) => { 13 | return getUiKitConfig(rest)?.[key]; 14 | }); 15 | }, [getUiKitConfig, keys, rest]); 16 | return config; 17 | }; 18 | -------------------------------------------------------------------------------- /src/hooks/useUser.ts: -------------------------------------------------------------------------------- 1 | import { UserRepository } from '@amityco/ts-sdk-react-native'; 2 | import { useEffect, useState } from 'react'; 3 | 4 | export const useUser = (userId: string) => { 5 | const [user, setUser] = useState<Amity.User>(null); 6 | useEffect(() => { 7 | if (!userId) return; 8 | UserRepository.getUser(userId, ({ data, loading, error }) => { 9 | if (error) return undefined; 10 | if (!loading) { 11 | setUser(data); 12 | } 13 | }); 14 | }, [userId]); 15 | return user; 16 | }; 17 | -------------------------------------------------------------------------------- /src/index.tsx: -------------------------------------------------------------------------------- 1 | 2 | import React from 'react'; 3 | import AmityUiKitProvider from './providers/amity-ui-kit-provider'; 4 | import AmityUiKitSocial from './routes/SocialNavigator'; 5 | 6 | 7 | const exploreScreen = () => { 8 | return <AmityUiKitSocial screen='Explore' /> 9 | } 10 | const MyCommunityScreen = () => { 11 | return <AmityUiKitSocial screen='MyCommunity' /> 12 | } 13 | const NewsfeedScreen = () => { 14 | return <AmityUiKitSocial screen='Newsfeed' /> 15 | } 16 | 17 | const UserProfile = () => { 18 | return <AmityUiKitSocial screen='UserProfile' /> 19 | } 20 | const PreloadCommunityHome = () => { 21 | return <AmityUiKitSocial screen='PreloadCommunityHome' /> 22 | } 23 | const MyUserProfile = () => { 24 | return <AmityUiKitSocial screen='MyUserProfile' /> 25 | } 26 | 27 | 28 | 29 | export { 30 | AmityUiKitProvider, 31 | AmityUiKitSocial, 32 | exploreScreen as ExplorePage, 33 | MyCommunityScreen as MyCommunityPage, 34 | NewsfeedScreen as Newsfeed, 35 | UserProfile, 36 | PreloadCommunityHome as CommunityHome, 37 | MyUserProfile 38 | 39 | }; 40 | -------------------------------------------------------------------------------- /src/redux/slices/postDetailSlice.ts: -------------------------------------------------------------------------------- 1 | import { PayloadAction, createSlice } from '@reduxjs/toolkit'; 2 | import { IPost } from '../../components/Social/PostList'; 3 | 4 | interface PostDetailState { 5 | currentIndex: number; 6 | currentPostdetail: IPost | {}; 7 | } 8 | const initialState: PostDetailState = { 9 | currentIndex: 0, 10 | currentPostdetail: {}, 11 | }; 12 | 13 | const postDetailSlice = createSlice({ 14 | name: 'postDetail', 15 | initialState, 16 | reducers: { 17 | updateCurrentIndex: (state, action: PayloadAction<number>) => { 18 | state.currentIndex = action.payload; 19 | }, 20 | updatePostDetail: (state, action: PayloadAction<IPost>) => { 21 | state.currentPostdetail = action.payload; 22 | }, 23 | }, 24 | }); 25 | 26 | export default postDetailSlice; 27 | -------------------------------------------------------------------------------- /src/redux/store/index.ts: -------------------------------------------------------------------------------- 1 | import { Store, configureStore } from '@reduxjs/toolkit'; 2 | 3 | import globalFeedSlice from '../slices/globalfeedSlice'; 4 | import feedSlice from '../slices/feedSlice'; 5 | import postDetailSlice from '../slices/postDetailSlice'; 6 | import uiSlice from '../slices/uiSlice'; 7 | 8 | export const store: Store = configureStore({ 9 | reducer: { 10 | globalFeed: globalFeedSlice.reducer, 11 | postDetail: postDetailSlice.reducer, 12 | feed: feedSlice.reducer, 13 | ui: uiSlice.reducer, 14 | }, 15 | }); 16 | 17 | // Infer the `RootState` and `AppDispatch` types from the store itself 18 | export type RootState = ReturnType<typeof store.getState>; 19 | // Inferred type: {posts: PostsState, comments: CommentsState, users: UsersState} 20 | export type AppDispatch = typeof store.dispatch; 21 | -------------------------------------------------------------------------------- /src/routes/style.ts: -------------------------------------------------------------------------------- 1 | import { StyleSheet } from 'react-native'; 2 | 3 | export const useStyles = () => { 4 | const styles = StyleSheet.create({ 5 | btnWrap: { 6 | padding: 5, 7 | marginLeft: 8 8 | }, 9 | dotIcon: { 10 | width: 16, 11 | height: 12, 12 | marginRight: 8 13 | }, 14 | }); 15 | return styles; 16 | }; 17 | -------------------------------------------------------------------------------- /src/screens/AmitySocialGlobalSearchPage/styles.ts: -------------------------------------------------------------------------------- 1 | import { StyleSheet } from 'react-native'; 2 | import type { MyMD3Theme } from '../../providers/amity-ui-kit-provider'; 3 | 4 | export const useStyles = (theme: MyMD3Theme) => { 5 | const styles = StyleSheet.create({ 6 | container: { 7 | backgroundColor: theme.colors.background, 8 | flex: 1, 9 | }, 10 | searchScrollList: { 11 | paddingBottom: 110, 12 | marginTop: 10, 13 | }, 14 | notFoundText: { 15 | marginTop: 40, 16 | fontSize: 16, 17 | alignSelf: 'center', 18 | textAlign: 'center', 19 | color: theme.colors.baseShade3, 20 | }, 21 | }); 22 | 23 | return styles; 24 | }; 25 | -------------------------------------------------------------------------------- /src/screens/CategorytList/styles.ts: -------------------------------------------------------------------------------- 1 | import { StyleSheet } from 'react-native'; 2 | import { useTheme } from 'react-native-paper'; 3 | import type { MyMD3Theme } from '../../providers/amity-ui-kit-provider'; 4 | 5 | export const useStyles = () => { 6 | const theme = useTheme() as MyMD3Theme; 7 | const styles = StyleSheet.create({ 8 | container: { 9 | flex: 1, 10 | backgroundColor: theme.colors.background, 11 | }, 12 | categoryText: { 13 | marginLeft: 10, 14 | marginBottom: 10, 15 | fontSize: 15, 16 | color: theme.colors.base, 17 | }, 18 | LoadingIndicator: { 19 | paddingVertical: 20, 20 | }, 21 | rowContainer: { 22 | flexDirection: 'row', 23 | alignItems: 'center', 24 | padding: 10, 25 | }, 26 | avatar: { 27 | width: 40, 28 | height: 40, 29 | borderRadius: 20, 30 | marginBottom: 10, 31 | backgroundColor: '#D9E5FC', 32 | }, 33 | }); 34 | 35 | return styles; 36 | }; 37 | -------------------------------------------------------------------------------- /src/screens/CommunityList/styles.ts: -------------------------------------------------------------------------------- 1 | import { StyleSheet } from 'react-native'; 2 | import { useTheme } from 'react-native-paper'; 3 | import type { MyMD3Theme } from '../../providers/amity-ui-kit-provider'; 4 | 5 | export const useStyles = () => { 6 | const theme = useTheme() as MyMD3Theme; 7 | const styles = StyleSheet.create({ 8 | container: { 9 | flex: 1, 10 | backgroundColor: theme.colors.background, 11 | }, 12 | categoryText: { 13 | marginLeft: 10, 14 | marginBottom: 10, 15 | fontSize: 15, 16 | color: theme.colors.base, 17 | }, 18 | LoadingIndicator: { 19 | paddingVertical: 20, 20 | }, 21 | rowContainer: { 22 | flexDirection: 'row', 23 | alignItems: 'center', 24 | padding: 10, 25 | }, 26 | avatar: { 27 | width: 40, 28 | height: 40, 29 | borderRadius: 20, 30 | marginBottom: 10, 31 | backgroundColor: '#D9E5FC', 32 | }, 33 | }); 34 | 35 | return styles; 36 | }; 37 | -------------------------------------------------------------------------------- /src/screens/CommunitySearch/styles.ts: -------------------------------------------------------------------------------- 1 | import { Platform, StyleSheet } from 'react-native'; 2 | import { useTheme } from 'react-native-paper'; 3 | import type { MyMD3Theme } from '../../providers/amity-ui-kit-provider'; 4 | 5 | export const useStyles = () => { 6 | const theme = useTheme() as MyMD3Theme; 7 | const styles = StyleSheet.create({ 8 | container: { 9 | backgroundColor: theme.colors.background, 10 | height: '100%', 11 | }, 12 | headerWrap: { 13 | flexDirection: 'row', 14 | justifyContent: 'space-between', 15 | alignItems: 'center', 16 | backgroundColor: theme.colors.background, 17 | }, 18 | inputWrap: { 19 | marginHorizontal: 16, 20 | backgroundColor: theme.colors.secondary, 21 | paddingHorizontal: 10, 22 | paddingVertical: Platform.OS === 'android' ? 0 : 8, 23 | borderRadius: 4, 24 | flexDirection: 'row', 25 | justifyContent: 'space-between', 26 | marginVertical: 10, 27 | flex: 2, 28 | alignItems: 'center', 29 | }, 30 | input: { flex: 1, marginHorizontal: 6, color: theme.colors.base }, 31 | cancelBtn: { 32 | marginRight: 16, 33 | color: theme.colors.base, 34 | }, 35 | searchScrollList: { 36 | paddingBottom: 110, 37 | marginTop: 10, 38 | }, 39 | }); 40 | 41 | return styles; 42 | }; 43 | -------------------------------------------------------------------------------- /src/screens/CreatePoll/Components/Header.tsx: -------------------------------------------------------------------------------- 1 | import { Text, TouchableOpacity, View } from 'react-native'; 2 | import React, { FC, memo } from 'react'; 3 | import { useStyles } from '../styles'; 4 | import type { MyMD3Theme } from '../../../providers/amity-ui-kit-provider'; 5 | import { useTheme } from 'react-native-paper'; 6 | import CloseIcon from '../../../svg/CloseIcon'; 7 | 8 | interface IHeader { 9 | targetName: string; 10 | goBack: () => void; 11 | isBtnDisable: boolean; 12 | handleCreatePost: () => void; 13 | } 14 | 15 | const Header: FC<IHeader> = ({ 16 | targetName, 17 | goBack, 18 | isBtnDisable, 19 | handleCreatePost, 20 | }) => { 21 | const styles = useStyles(); 22 | const theme = useTheme() as MyMD3Theme; 23 | 24 | return ( 25 | <View style={styles.barContainer}> 26 | <View style={styles.header}> 27 | <TouchableOpacity style={styles.closeButton} onPress={goBack}> 28 | <CloseIcon width={17} height={17} color={theme.colors.base} /> 29 | </TouchableOpacity> 30 | <View style={styles.headerTextContainer}> 31 | <Text style={styles.headerText}>{targetName}</Text> 32 | </View> 33 | <TouchableOpacity disabled={isBtnDisable} onPress={handleCreatePost}> 34 | <Text style={isBtnDisable ? styles.disabled : styles.postText}> 35 | Post 36 | </Text> 37 | </TouchableOpacity> 38 | </View> 39 | </View> 40 | ); 41 | }; 42 | 43 | export default memo(Header); 44 | -------------------------------------------------------------------------------- /src/screens/CreatePost/index.tsx: -------------------------------------------------------------------------------- 1 | import { NativeStackScreenProps } from '@react-navigation/native-stack'; 2 | import React, { FC } from 'react'; 3 | import { RootStackParamList } from '../../routes/RouteParamList'; 4 | import AmityPostComposerPage from '../AmityPostComposerPage/AmityPostComposerPage'; 5 | import { AmityPostComposerMode } from '../../types/global.interface'; 6 | 7 | 8 | type ICreatePost = NativeStackScreenProps<RootStackParamList, 'CreatePost'>; 9 | 10 | const CreatePost: FC<ICreatePost> = ({ route }) => { 11 | const { community, targetId, targetType } = route.params; 12 | 13 | return ( 14 | <AmityPostComposerPage 15 | mode={AmityPostComposerMode.CREATE} 16 | targetId={targetId} 17 | targetType={targetType} 18 | community={community} 19 | /> 20 | ); 21 | }; 22 | 23 | export default CreatePost; 24 | -------------------------------------------------------------------------------- /src/screens/EditPost/EditPost.tsx: -------------------------------------------------------------------------------- 1 | import { NativeStackScreenProps } from '@react-navigation/native-stack'; 2 | import React, { FC } from 'react'; 3 | import { RootStackParamList } from '../../routes/RouteParamList'; 4 | import { AmityPostComposerMode } from '../../types/global.interface'; 5 | import AmityPostComposerPage from '../AmityPostComposerPage/AmityPostComposerPage'; 6 | 7 | 8 | type IEditPost = NativeStackScreenProps<RootStackParamList, 'EditPost'>; 9 | 10 | const EditPost: FC<IEditPost> = ({ route }) => { 11 | const { community, post } = route.params; 12 | return ( 13 | <AmityPostComposerPage 14 | mode={AmityPostComposerMode.EDIT} 15 | post={post} 16 | community={community} 17 | /> 18 | ); 19 | }; 20 | 21 | export default EditPost; 22 | -------------------------------------------------------------------------------- /src/screens/Feed/styles.ts: -------------------------------------------------------------------------------- 1 | import { Dimensions, StyleSheet } from 'react-native'; 2 | import { useTheme } from 'react-native-paper'; 3 | import type { MyMD3Theme } from '../../providers/amity-ui-kit-provider'; 4 | 5 | export const useStyles = () => { 6 | const theme = useTheme() as MyMD3Theme; 7 | 8 | 9 | 10 | const styles = StyleSheet.create({ 11 | feedWrap: { 12 | backgroundColor: theme.colors.baseShade4, 13 | flex: 1, 14 | height: '100%', 15 | minHeight: Dimensions.get('window').height-200 16 | 17 | 18 | }, 19 | }); 20 | 21 | return styles; 22 | }; 23 | -------------------------------------------------------------------------------- /src/screens/GlobalFeed/styles.ts: -------------------------------------------------------------------------------- 1 | import { StyleSheet } from 'react-native'; 2 | import { useTheme } from 'react-native-paper'; 3 | import type { MyMD3Theme } from '../../providers/amity-ui-kit-provider'; 4 | 5 | export const useStyle = () => { 6 | const theme = useTheme() as MyMD3Theme; 7 | const styles = StyleSheet.create({ 8 | feedWrap: { 9 | backgroundColor: theme.colors.background, 10 | height: '100%', 11 | }, 12 | }); 13 | return styles; 14 | }; 15 | -------------------------------------------------------------------------------- /src/screens/MyUserProfile/index.tsx: -------------------------------------------------------------------------------- 1 | 2 | import { useNavigation } from '@react-navigation/native'; 3 | import { NativeStackNavigationProp } from '@react-navigation/native-stack'; 4 | import React, { 5 | useEffect, 6 | } from 'react'; 7 | import { View } from 'react-native'; 8 | import useAuth from '../../hooks/useAuth'; 9 | 10 | 11 | export default function MyUserprofile() { 12 | const navigation = useNavigation<NativeStackNavigationProp<any>>(); 13 | 14 | const { client } = useAuth(); 15 | 16 | 17 | 18 | const redirectToMyProfile = () => { 19 | navigation.navigate('UserProfile', { 20 | userId: (client as Amity.Client).userId, 21 | isBackEnabled: false 22 | }) 23 | } 24 | useEffect(() => { 25 | setTimeout(() => { 26 | redirectToMyProfile() 27 | }, 0); 28 | 29 | }, [client]) 30 | 31 | 32 | 33 | return ( 34 | <View > 35 | 36 | </View> 37 | ); 38 | } 39 | -------------------------------------------------------------------------------- /src/screens/PendingPosts/styles.ts: -------------------------------------------------------------------------------- 1 | import { StyleSheet } from 'react-native'; 2 | import { useTheme } from 'react-native-paper'; 3 | import type { MyMD3Theme } from '../../providers/amity-ui-kit-provider'; 4 | 5 | export const useStyles = () => { 6 | const theme = useTheme() as MyMD3Theme; 7 | const styles = StyleSheet.create({ 8 | container: { 9 | flex: 1, 10 | backgroundColor: theme.colors.background, 11 | }, 12 | categoryText: { 13 | marginLeft: 10, 14 | marginBottom: 10, 15 | fontSize: 15, 16 | color: theme.colors.base, 17 | }, 18 | LoadingIndicator: { 19 | paddingVertical: 20, 20 | }, 21 | rowContainer: { 22 | flexDirection: 'row', 23 | alignItems: 'center', 24 | padding: 10, 25 | }, 26 | avatar: { 27 | width: 40, 28 | height: 40, 29 | borderRadius: 20, 30 | marginBottom: 10, 31 | backgroundColor: '#D9E5FC', 32 | }, 33 | declineWarningText: { 34 | color: theme.colors.baseShade1, 35 | paddingHorizontal: 16, 36 | paddingVertical: 12, 37 | }, 38 | }); 39 | 40 | return styles; 41 | }; 42 | -------------------------------------------------------------------------------- /src/screens/PostDetail/index.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | import { RouteProp } from '@react-navigation/native'; 4 | import { RootStackParamList } from '../../routes/RouteParamList'; 5 | import AmityPostDetailPage from '../AmityPostDetailPage/AmityPostDetailPage'; 6 | 7 | type IPostDetailPage = { 8 | route: RouteProp<RootStackParamList, 'PostDetail'>; 9 | }; 10 | 11 | const PostDetail = ({ route }: IPostDetailPage) => { 12 | const { postId } = route.params; 13 | return <AmityPostDetailPage postId={postId} />; 14 | }; 15 | 16 | export default PostDetail; 17 | -------------------------------------------------------------------------------- /src/screens/UserProfile/Components/GalleryTab.tsx: -------------------------------------------------------------------------------- 1 | import { 2 | Text, 3 | View, 4 | TouchableOpacity, 5 | ViewStyle, 6 | TextStyle, 7 | } from 'react-native'; 8 | import React, { FC, memo, useCallback } from 'react'; 9 | import { TabName } from '../../../enum/tabNameState'; 10 | import { useStyles } from '../styles'; 11 | 12 | interface IGalleryTab { 13 | onTabChange: (tabName: TabName) => void; 14 | tabName: TabName[]; 15 | curerntTab: TabName; 16 | } 17 | 18 | const GalleryTab: FC<IGalleryTab> = ({ tabName, onTabChange, curerntTab }) => { 19 | const styles = useStyles(); 20 | 21 | const onChangeTab = useCallback( 22 | (tab: TabName) => { 23 | onTabChange(tab); 24 | }, 25 | [onTabChange] 26 | ); 27 | 28 | return ( 29 | <View style={styles.tabContainer}> 30 | {tabName.map((tab) => { 31 | const isFocused = curerntTab === tab; 32 | const focusedTabStyle: ViewStyle = isFocused && styles.focusedTab; 33 | const focusedTabTextStyle: TextStyle = 34 | isFocused && styles.focusedTabText; 35 | return ( 36 | <TouchableOpacity 37 | key={tab} 38 | onPress={() => onChangeTab(tab)} 39 | style={[styles.tab, focusedTabStyle]} 40 | > 41 | <Text style={[styles.tabText, focusedTabTextStyle]}>{tab}</Text> 42 | </TouchableOpacity> 43 | ); 44 | })} 45 | </View> 46 | ); 47 | }; 48 | 49 | export default memo(GalleryTab); 50 | -------------------------------------------------------------------------------- /src/svg/ArrowBackIcon.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Svg, Path } from 'react-native-svg'; 3 | 4 | const ArrowBackIcon = ({ color = '#292B32', width = 10, height = 17, style }: { color?: string, width?: number, height?: number, style?: any }) => ( 5 | <Svg width={width} height={height} viewBox="0 0 10 17" fill="none" style={style}> 6 | <Path 7 | id="Icon name" 8 | d="M8.62109 15.9141L9.32422 15.2461C9.46484 15.0703 9.46484 14.7891 9.32422 14.6484L2.96094 8.25L9.32422 1.88672C9.46484 1.74609 9.46484 1.46484 9.32422 1.28906L8.62109 0.621094C8.44531 0.445312 8.19922 0.445312 8.02344 0.621094L0.640625 7.96875C0.5 8.14453 0.5 8.39062 0.640625 8.56641L8.02344 15.9141C8.19922 16.0898 8.44531 16.0898 8.62109 15.9141Z" 9 | fill={color} 10 | /> 11 | </Svg> 12 | ); 13 | 14 | export default ArrowBackIcon; 15 | -------------------------------------------------------------------------------- /src/svg/ArrowDownIcon.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Svg, Path } from 'react-native-svg'; 3 | 4 | const ArrowDownIcon = ({ color = '#292B32', width = 16, height = 10, style }: { color?: string, width?: number, height?: number, style?: any }) => ( 5 | <Svg width={width} height={height} viewBox="0 0 16 10" fill="none" style={style}> 6 | <Path 7 | d="M15.6289 1.15625L14.9609 0.453125C14.7852 0.277344 14.5039 0.277344 14.3633 0.453125L8 6.81641L1.60156 0.453125C1.46094 0.277344 1.17969 0.277344 1.00391 0.453125L0.335938 1.15625C0.160156 1.29688 0.160156 1.57812 0.335938 1.75391L7.68359 9.10156C7.85938 9.27734 8.10547 9.27734 8.28125 9.10156L15.6289 1.75391C15.8047 1.57812 15.8047 1.29688 15.6289 1.15625Z" 8 | fill={color} 9 | /> 10 | </Svg> 11 | ); 12 | 13 | export default ArrowDownIcon; 14 | -------------------------------------------------------------------------------- /src/svg/ArrowForwardIcon.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Svg, Path } from 'react-native-svg'; 3 | 4 | const ArrowForwardIcon = ({ color = '#292B32', width = 5, height = 8, style }: { color?: string, width?: number, height?: number, style?: any }) => ( 5 | <Svg width={width} height={height} viewBox="0 0 5 8" fill="none" style={style}> 6 | <Path 7 | d="M4.42188 4.21094L1 7.67969C0.882812 7.79688 0.695312 7.79688 0.601562 7.67969L0.132812 7.21094C0.015625 7.09375 0.015625 6.92969 0.132812 6.8125L2.89844 4L0.132812 1.21094C0.015625 1.09375 0.015625 0.90625 0.132812 0.8125L0.601562 0.34375C0.695312 0.226562 0.882812 0.226562 1 0.34375L4.42188 3.8125C4.53906 3.92969 4.53906 4.09375 4.42188 4.21094Z" 8 | fill={color} 9 | /> 10 | </Svg> 11 | ); 12 | 13 | export default ArrowForwardIcon; 14 | -------------------------------------------------------------------------------- /src/svg/ArrowOutlinedIcon.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Svg, Path } from 'react-native-svg'; 3 | 4 | const ArrowOutlinedIcon = ({ width = 15, height = 15, color='#292B32' }) => ( 5 | <Svg width={width} height={height} viewBox="0 0 10 17"> 6 | <Path 7 | d="M1.34375 0.621094L0.640625 1.28906C0.5 1.46484 0.5 1.74609 0.640625 1.88672L7.00391 8.25L0.640625 14.6484C0.5 14.7891 0.5 15.0703 0.640625 15.2461L1.34375 15.9141C1.51953 16.0898 1.76562 16.0898 1.94141 15.9141L9.32422 8.56641C9.46484 8.39062 9.46484 8.14453 9.32422 7.96875L1.94141 0.621094C1.76562 0.445312 1.51953 0.445312 1.34375 0.621094Z" 8 | fill={color} 9 | /> 10 | </Svg> 11 | ); 12 | 13 | export default ArrowOutlinedIcon; -------------------------------------------------------------------------------- /src/svg/AvatarIcon.tsx: -------------------------------------------------------------------------------- 1 | 2 | 3 | import React from 'react'; 4 | import { Svg, Path, Rect } from 'react-native-svg'; 5 | 6 | 7 | export const AvatarIcon = ({ width = 40, height= 40,color = "#D9E5FC" }: { color?: string, width?: number, height?: number }) => ( 8 | <Svg width={width} height={height} viewBox="0 0 40 40" fill="none"> 9 | <Rect id="Rectangle 67" width="40" height="40" rx="20" fill={color}/> 10 | <Path 11 | d="M23.1254 13.1312C22.3849 12.4069 21.3805 12 20.3333 12C19.286 12 18.2816 12.4069 17.5411 13.1312C16.8006 13.8555 16.3846 14.8378 16.3846 15.8621C16.3846 16.8864 16.8006 17.8687 17.5411 18.593C18.2816 19.3172 19.286 19.7241 20.3333 19.7241C21.3805 19.7241 22.3849 19.3172 23.1254 18.593C23.866 17.8687 24.282 16.8864 24.282 15.8621C24.282 14.8378 23.866 13.8555 23.1254 13.1312Z" 12 | fill="white" 13 | /> 14 | <Path 15 | d="M20.3333 21.931C16.283 21.931 12.9999 23.7848 12.9999 26.069V28H27.6666V26.069C27.6666 23.7848 24.3835 21.931 20.3333 21.931Z" 16 | fill="white" 17 | /> 18 | </Svg> 19 | ); 20 | -------------------------------------------------------------------------------- /src/svg/BlockOrUnBlockIcon.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Svg, Rect, Path, SvgProps } from 'react-native-svg'; 3 | 4 | interface BlockOrUnblockIconProps extends SvgProps { 5 | color?: string; 6 | } 7 | 8 | const BlockOrUnblockIcon: React.FC<BlockOrUnblockIconProps> = ({ 9 | color = '#292B32', 10 | width = 28, 11 | height = 28, 12 | style, 13 | ...props 14 | }) => ( 15 | <Svg width={width} height={height} viewBox="0 0 28 28" fill="none" style={style} {...props}> 16 | <Rect width={width} height={height} rx={4} fill="#EBECEF" /> 17 | <Path d="M23.7812 20.3438C24 20.5 24.0625 20.8125 23.875 21.0312L23.2812 21.8125C23.0938 22.0312 22.7812 22.0625 22.5625 21.9062L4.1875 7.6875C3.96875 7.53125 3.9375 7.21875 4.09375 7L4.71875 6.21875C4.875 6 5.1875 5.9375 5.40625 6.125L10.0312 9.6875C10.1875 7.625 11.875 6 14 6C16.1875 6 18 7.8125 18 10C18 11.75 16.875 13.2188 15.3125 13.7812L23.7812 20.3438ZM7 19.2188C7 17.125 8.5 15.4375 10.4688 15.0938L19.4375 22H8.5C7.65625 22 7 21.3438 7 20.5V19.2188Z" fill={color} /> 18 | </Svg> 19 | ); 20 | 21 | export default BlockOrUnblockIcon; 22 | -------------------------------------------------------------------------------- /src/svg/CameraIcon.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Svg, Path } from 'react-native-svg'; 3 | 4 | const CameraIcon = ({ color = '#292B32', width = 24, height = 24, style }: { color?: string, width?: number, height?: number, style?: any }) => ( 5 | <Svg width={width} height={height} viewBox="0 0 24 24" fill="none" style={style}> 6 | <Path 7 | d="M19.5 19.5H4.5C4.10218 19.5 3.72064 19.342 3.43934 19.0607C3.15804 18.7794 3 18.3978 3 18V7.5C3 7.10218 3.15804 6.72064 3.43934 6.43934C3.72064 6.15804 4.10218 6 4.5 6H7.49945L8.99945 3.75H14.9995L16.4995 6H19.5C19.8978 6 20.2794 6.15804 20.5607 6.43934C20.842 6.72064 21 7.10218 21 7.5V18C21 18.3978 20.842 18.7794 20.5607 19.0607C20.2794 19.342 19.8978 19.5 19.5 19.5Z" 8 | stroke={color} 9 | strokeWidth="1.3" 10 | strokeLinecap="round" 11 | strokeLinejoin="round" 12 | /> 13 | <Path 14 | d="M12 15.75C13.864 15.75 15.375 14.239 15.375 12.375C15.375 10.511 13.864 9 12 9C10.136 9 8.625 10.511 8.625 12.375C8.625 14.239 10.136 15.75 12 15.75Z" 15 | stroke={color} 16 | strokeWidth="1.3" 17 | strokeLinecap="round" 18 | strokeLinejoin="round" 19 | /> 20 | </Svg> 21 | ); 22 | 23 | export default CameraIcon; 24 | -------------------------------------------------------------------------------- /src/svg/CategoryIcon.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Svg, Rect, Path } from 'react-native-svg'; 3 | 4 | const CategoryIcon = ({ color = '#D9E5FC', width = 40, height = 40, style }: { color?: string, width?: number, height?: number, style?: any }) => ( 5 | <Svg width={width} height={height} viewBox="0 0 40 40" fill="none" style={style}> 6 | <Rect width="40" height="40" rx="20" fill={color} /> 7 | <Path 8 | d="M28 21C28 20.4688 27.5312 20 27 20H22C21.4375 20 21 20.4688 21 21V26C21 26.5625 21.4375 27 22 27H27C27.5312 27 28 26.5625 28 26V21ZM14 19C11.7812 19 10 20.8125 10 23C10 25.2188 11.7812 27 14 27C16.1875 27 18 25.2188 18 23C18 20.8125 16.1875 19 14 19ZM26.9688 17C27.75 17 28.25 16.1875 27.8438 15.5L24.875 10.5C24.4688 9.84375 23.5 9.84375 23.0938 10.5L20.125 15.5C19.7188 16.1875 20.2188 17 21 17H26.9688Z" 9 | fill="white" 10 | /> 11 | </Svg> 12 | ); 13 | 14 | export default CategoryIcon; 15 | -------------------------------------------------------------------------------- /src/svg/ChevronLeftcon.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Svg, Path } from 'react-native-svg'; 3 | 4 | const ChevronLeftIcon = ({ width = 25, height = 24, color = '#292B32', style={} }) => ( 5 | <Svg width={width} height={height} viewBox="0 0 25 24" fill="none" style={style}> 6 | <Path d="M8.84375 4.62109L8.14062 5.28906C8 5.46484 8 5.74609 8.14062 5.88672L14.5039 12.25L8.14062 18.6484C8 18.7891 8 19.0703 8.14062 19.2461L8.84375 19.9141C9.01953 20.0898 9.26562 20.0898 9.44141 19.9141L16.8242 12.5664C16.9648 12.3906 16.9648 12.1445 16.8242 11.9688L9.44141 4.62109C9.26562 4.44531 9.01953 4.44531 8.84375 4.62109Z" fill={color} /> 7 | </Svg> 8 | ); 9 | 10 | export default ChevronLeftIcon; 11 | -------------------------------------------------------------------------------- /src/svg/ChevronRightIcon.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Svg, Path, SvgProps } from 'react-native-svg'; 3 | 4 | interface ChevronRightIconProps extends SvgProps { 5 | color?: string; 6 | width?: number; 7 | height?: number; 8 | } 9 | 10 | export const ChevronRightIcon: React.FC<ChevronRightIconProps> = ({ 11 | color = "#636878", 12 | width = 8, 13 | height = 7, 14 | style, 15 | ...rest 16 | }: ChevronRightIconProps) => ( 17 | <Svg width={width} height={height} viewBox="0 0 8 7" fill="none" style={style} {...rest}> 18 | <Path 19 | d="M1.46094 6.33203C1.63281 6.33203 1.77344 6.26172 1.97656 6.16406L6.82422 3.82812C7.18359 3.65234 7.33594 3.45312 7.33594 3.18359C7.33594 2.91406 7.18359 2.71484 6.82422 2.53906L1.97656 0.203125C1.77344 0.105469 1.62891 0.0351562 1.45703 0.0351562C1.12109 0.0351562 0.863281 0.292969 0.863281 0.714844L0.867188 5.65625C0.867188 6.07422 1.125 6.33203 1.46094 6.33203Z" 20 | fill={color} 21 | /> 22 | </Svg> 23 | ); 24 | -------------------------------------------------------------------------------- /src/svg/CircleCloseIcon.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Svg, Path } from 'react-native-svg'; 3 | 4 | const CircleCloseIcon = ({ color = '#A5A9B5', width = 20, height = 20, style }: { color?: string, width?: number, height?: number, style?: any }) => ( 5 | <Svg width={width} height={height} viewBox="0 0 20 20" fill="none" style={style}> 6 | <Path 7 | d="M9.99121 18.3906C14.5879 18.3906 18.376 14.5938 18.376 10.0059C18.376 5.40918 14.5791 1.6123 9.99121 1.6123C5.39453 1.6123 1.60645 5.40918 1.60645 10.0059C1.60645 14.5938 5.40332 18.3906 9.99121 18.3906ZM7.04688 13.5479C6.71289 13.5479 6.44922 13.2842 6.44922 12.9502C6.44922 12.792 6.51074 12.6514 6.63379 12.5283L9.14746 10.0146L6.63379 7.49219C6.51074 7.37793 6.44922 7.22852 6.44922 7.07031C6.44922 6.74512 6.71289 6.49023 7.04688 6.49023C7.21387 6.49023 7.35449 6.54297 7.45996 6.66602L9.99121 9.17969L12.5225 6.65723C12.6543 6.52539 12.7861 6.47266 12.9443 6.47266C13.2695 6.47266 13.5332 6.73633 13.5332 7.06152C13.5332 7.22852 13.4805 7.36035 13.3574 7.4834L10.835 10.0146L13.3486 12.5283C13.4717 12.6514 13.5332 12.7832 13.5332 12.9502C13.5332 13.2842 13.2695 13.5479 12.9268 13.5479C12.7598 13.5479 12.6191 13.4863 12.4961 13.3721L9.99121 10.8496L7.48633 13.3721C7.36328 13.4863 7.21387 13.5479 7.04688 13.5479Z" 8 | fill={color} 9 | /> 10 | </Svg> 11 | ); 12 | 13 | export default CircleCloseIcon; 14 | -------------------------------------------------------------------------------- /src/svg/CloseIcon.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Svg, Path } from 'react-native-svg'; 3 | 4 | const CloseIcon = ({ color = '#292B32', width = 12, height = 12, style }: { color?: string, width?: number, height?: number, style?: any }) => ( 5 | <Svg width={width} height={height} viewBox="0 0 12 12" fill="none" style={style}> 6 | <Path 7 | d="M7.65234 6.25L11.4492 2.48828C11.6602 2.27734 11.6602 1.89062 11.4492 1.67969L10.5703 0.800781C10.3594 0.589844 9.97266 0.589844 9.76172 0.800781L6 4.59766L2.20312 0.800781C1.99219 0.589844 1.60547 0.589844 1.39453 0.800781L0.515625 1.67969C0.304688 1.89062 0.304688 2.27734 0.515625 2.48828L4.3125 6.25L0.515625 10.0469C0.304688 10.2578 0.304688 10.6445 0.515625 10.8555L1.39453 11.7344C1.60547 11.9453 1.99219 11.9453 2.20312 11.7344L6 7.9375L9.76172 11.7344C9.97266 11.9453 10.3594 11.9453 10.5703 11.7344L11.4492 10.8555C11.6602 10.6445 11.6602 10.2578 11.4492 10.0469L7.65234 6.25Z" 8 | fill={color} 9 | /> 10 | </Svg> 11 | ); 12 | 13 | export default CloseIcon; 14 | -------------------------------------------------------------------------------- /src/svg/CommentIcon.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Svg, Path } from 'react-native-svg'; 3 | 4 | const CommentIcon = ({ width = 18, height = 16, color = '#898E9E', style }: { width?: number, height?: number, color?: string, style?: any }) => ( 5 | <Svg width={width} height={height} viewBox="0 0 18 16" fill="none" style={style}> 6 | <Path 7 | d="M8.9917 0.1875C13.6733 0.1875 17.4585 3.30859 17.4585 7.09375C17.4585 10.9121 13.6733 14 8.9917 14C7.896 14 6.8335 13.834 5.90381 13.5352C4.90771 14.2324 3.31396 15.0625 1.28857 15.0625C0.956543 15.0625 0.657715 14.8965 0.524902 14.5977C0.425293 14.2988 0.458496 13.9668 0.690918 13.7344C0.724121 13.7344 1.75342 12.6055 2.21826 11.3105C1.12256 10.1484 0.491699 8.6875 0.491699 7.09375C0.491699 3.30859 4.27686 0.1875 8.9917 0.1875ZM8.9917 12.4062C12.7769 12.4062 15.8979 10.0488 15.8979 7.09375C15.8979 4.17188 12.7769 1.78125 8.9917 1.78125C5.17334 1.78125 2.08545 4.17188 2.08545 7.09375C2.08545 8.52148 2.78271 9.58398 3.38037 10.2148L4.07764 10.9453L3.7124 11.875C3.54639 12.3398 3.31396 12.8047 3.04834 13.2031C3.84521 12.9375 4.50928 12.5723 4.97412 12.2402L5.60498 11.7754L6.36865 12.0078C7.19873 12.2734 8.09521 12.4062 8.9917 12.4062Z" 8 | fill={color} 9 | /> 10 | </Svg> 11 | ); 12 | 13 | export default CommentIcon; 14 | -------------------------------------------------------------------------------- /src/svg/EditIcon.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Svg, Path } from 'react-native-svg'; 3 | 4 | const EditIcon = ({ color = '#292B32', width = 21, height = 20, style }: { color?: string, width?: number, height?: number, style?: any }) => ( 5 | <Svg width={width} height={height} viewBox="0 0 21 20" fill="none" style={style}> 6 | <Path d="M17.4434 4.54492L16.3301 3.43164C15.9785 3.08008 15.4805 2.875 15.0117 2.875C14.543 2.875 14.0449 3.08008 13.6934 3.43164L11.4961 5.62891L10.5 6.625L3.35156 13.7734L3 17.1133C2.94141 17.5234 3.26367 17.875 3.67383 17.875C3.70312 17.875 3.73242 17.875 3.76172 17.875L7.10156 17.5234L14.25 10.375L15.2461 9.37891L17.4434 7.18164C18.1758 6.44922 18.1758 5.27734 17.4434 4.54492ZM6.45703 16.1758L4.49414 16.3809L4.69922 14.418L11.4668 7.62109L12.375 6.71289L14.1621 8.5L13.2539 9.4082L6.45703 16.1758ZM16.4473 6.18555L15.1582 7.50391L13.3711 5.7168L14.6895 4.42773C14.8066 4.31055 14.9531 4.28125 15.0117 4.28125C15.0703 4.28125 15.2168 4.31055 15.334 4.42773L16.4473 5.54102C16.623 5.7168 16.623 6.00977 16.4473 6.18555Z" fill={color} /> 7 | </Svg> 8 | ); 9 | 10 | export default EditIcon; 11 | -------------------------------------------------------------------------------- /src/svg/ExpandIcon.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Svg, Path } from 'react-native-svg'; 3 | 4 | const ExpandIcon = ({ color = '#636878', width = 16, height = 16, style }: { color?: string, width?: number, height?: number, style?: any }) => ( 5 | <Svg width={width} height={height} viewBox="0 0 16 16" fill="none" style={style}> 6 | <Path 7 | d="M13.824 9.72708L10.6334 12.8479C10.3988 13.0544 10.0469 13.0544 9.83578 12.8249L9.31965 12.3201C9.08504 12.1136 9.08504 11.7464 9.31965 11.5399L10.7507 10.2549H2.56305C2.2346 10.2549 2 10.0024 2 9.70413V5.56C2 5.25072 2.25072 5 2.56 5L3.31683 5C3.62611 5.00001 3.87683 5.25073 3.87683 5.56V8.4191H10.7507L9.31965 7.11113C9.08504 6.9046 9.08504 6.53745 9.31965 6.33093L9.83578 5.8261C10.0469 5.59663 10.3988 5.59663 10.6334 5.80315L13.824 8.92393C14.0587 9.1534 14.0587 9.49761 13.824 9.72708Z" 8 | fill={color} 9 | /> 10 | </Svg> 11 | ); 12 | 13 | export default ExpandIcon; 14 | -------------------------------------------------------------------------------- /src/svg/Icon name.svg: -------------------------------------------------------------------------------- 1 | <svg width="8" height="9" viewBox="0 0 8 9" fill="none" xmlns="http://www.w3.org/2000/svg"> 2 | <path d="M7.28125 1.8125C7.5625 1.9375 7.75 2.20312 7.75 2.5C7.75 5.96875 5.625 7.89062 4.28125 8.45312C4.09375 8.53125 3.89062 8.53125 3.70312 8.45312C2.03125 7.75 0.25 5.60938 0.25 2.5C0.25 2.20312 0.421875 1.9375 0.703125 1.8125L3.70312 0.5625C3.78125 0.53125 3.90625 0.515625 4 0.515625C4.07812 0.515625 4.20312 0.53125 4.28125 0.5625L7.28125 1.8125ZM6.54688 3.59375C6.64062 3.5 6.64062 3.34375 6.54688 3.25L6.1875 2.89062C6.09375 2.79688 5.9375 2.79688 5.84375 2.89062L3.5 5.23438L2.39062 4.14062C2.29688 4.04688 2.14062 4.04688 2.04688 4.14062L1.6875 4.5C1.59375 4.59375 1.59375 4.75 1.6875 4.84375L3.3125 6.46875C3.40625 6.57812 3.57812 6.57812 3.67188 6.46875L6.54688 3.59375Z" fill="#1054DE"/> 3 | </svg> 4 | -------------------------------------------------------------------------------- /src/svg/Icon.svg: -------------------------------------------------------------------------------- 1 | <svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg"> 2 | <path d="M18.7814 16.3104C19.0627 16.6229 19.0627 17.0917 18.7502 17.3729L17.8752 18.2479C17.5939 18.5604 17.1252 18.5604 16.8127 18.2479L13.7189 15.1542C13.5627 14.9979 13.5002 14.8104 13.5002 14.6229V14.0917C12.3752 14.9667 11.0002 15.4667 9.50016 15.4667C5.90641 15.4667 3.00016 12.5604 3.00016 8.96667C3.00016 5.40417 5.90641 2.46667 9.50016 2.46667C13.0627 2.46667 16.0002 5.40417 16.0002 8.96667C16.0002 10.4979 15.4689 11.8729 14.6252 12.9667H15.1252C15.3127 12.9667 15.5002 13.0604 15.6564 13.1854L18.7814 16.3104ZM9.50016 12.9667C11.6877 12.9667 13.5002 11.1854 13.5002 8.96667C13.5002 6.77917 11.6877 4.96667 9.50016 4.96667C7.28141 4.96667 5.50016 6.77917 5.50016 8.96667C5.50016 11.1854 7.28141 12.9667 9.50016 12.9667Z" fill="#292B32"/> 3 | </svg> 4 | -------------------------------------------------------------------------------- /src/svg/LikeIcon.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import Svg, { Path } from 'react-native-svg'; 3 | 4 | export const LikeIcon = ({ color = '#898E9E', width = 16, height = 16 }) => ( 5 | <Svg width={width} height={height} viewBox="0 0 15 16" fill="none"> 6 | <Path 7 | d="M14.5625 8.96875C14.8438 8.5 15 8 15 7.40625C15 6.03125 13.8125 4.75 12.3125 4.75H11.1562C11.3125 4.34375 11.4375 3.875 11.4375 3.28125C11.4375 1 10.25 0 8.46875 0C6.53125 0 6.65625 2.96875 6.21875 3.40625C5.5 4.125 4.65625 5.5 4.0625 6H1C0.4375 6 0 6.46875 0 7V14.5C0 15.0625 0.4375 15.5 1 15.5H3C3.4375 15.5 3.84375 15.1875 3.9375 14.7812C5.34375 14.8125 6.3125 16 9.5 16C9.75 16 10 16 10.2188 16C12.625 16 13.6875 14.7812 13.7188 13.0312C14.1562 12.4688 14.375 11.6875 14.2812 10.9375C14.5938 10.375 14.6875 9.6875 14.5625 8.96875ZM12.625 10.6562C13.0312 11.3125 12.6562 12.1875 12.1875 12.4688C12.4375 13.9688 11.625 14.5 10.5312 14.5H9.34375C7.125 14.5 5.65625 13.3438 4 13.3438V7.5H4.3125C5.21875 7.5 6.4375 5.3125 7.28125 4.46875C8.15625 3.59375 7.875 2.09375 8.46875 1.5C9.9375 1.5 9.9375 2.53125 9.9375 3.28125C9.9375 4.5 9.0625 5.0625 9.0625 6.25H12.3125C12.9688 6.25 13.4688 6.84375 13.5 7.4375C13.5 8 13.0938 8.59375 12.7812 8.59375C13.2188 9.0625 13.3125 10.0312 12.625 10.6562ZM2.75 13.5C2.75 13.9375 2.40625 14.25 2 14.25C1.5625 14.25 1.25 13.9375 1.25 13.5C1.25 13.0938 1.5625 12.75 2 12.75C2.40625 12.75 2.75 13.0938 2.75 13.5Z" 8 | fill={color} 9 | /> 10 | </Svg> 11 | ); 12 | -------------------------------------------------------------------------------- /src/svg/LikedIcon.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import Svg, { Path } from 'react-native-svg'; 3 | 4 | export const LikedIcon = ({ color = '#1054DE', width = 16, height = 16 }) => ( 5 | <Svg width={width} height={height} viewBox="0 0 16 16" fill="none"> 6 | <Path 7 | d="M3.25 7H0.75C0.3125 7 0 7.34375 0 7.75V15.25C0 15.6875 0.3125 16 0.75 16H3.25C3.65625 16 4 15.6875 4 15.25V7.75C4 7.34375 3.65625 7 3.25 7ZM2 14.75C1.5625 14.75 1.25 14.4375 1.25 14C1.25 13.5938 1.5625 13.25 2 13.25C2.40625 13.25 2.75 13.5938 2.75 14C2.75 14.4375 2.40625 14.75 2 14.75ZM12 2.5625C12 0.25 10.5 0 9.75 0C9.09375 0 8.8125 1.25 8.6875 1.8125C8.5 2.5 8.34375 3.1875 7.875 3.65625C6.875 4.6875 6.34375 5.96875 5.09375 7.1875C5.03125 7.28125 5 7.375 5 7.46875V14.1562C5 14.3438 5.15625 14.5 5.34375 14.5312C5.84375 14.5312 6.5 14.8125 7 15.0312C8 15.4688 9.21875 16 10.7188 16H10.8125C12.1562 16 13.75 16 14.375 15.0938C14.6562 14.7188 14.7188 14.25 14.5625 13.6875C15.0938 13.1562 15.3438 12.1562 15.0938 11.3438C15.625 10.625 15.6875 9.59375 15.375 8.875C15.75 8.5 16 7.90625 15.9688 7.34375C15.9688 6.375 15.1562 5.5 14.125 5.5H10.9375C11.1875 4.625 12 3.875 12 2.5625Z" 8 | fill={color} 9 | /> 10 | </Svg> 11 | ); 12 | -------------------------------------------------------------------------------- /src/svg/PersonIcon.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Svg, Path } from 'react-native-svg'; 3 | 4 | const PersonIcon = ({ width = 15, height = 16, color = '#FFFFFF' }) => ( 5 | <Svg width={width} height={height} viewBox="0 0 15 16"> 6 | <Path 7 | d="M10.1254 1.13117C9.38491 0.406896 8.38054 0 7.33327 0C6.28601 0 5.28164 0.406896 4.54111 1.13117C3.80058 1.85545 3.38455 2.83778 3.38455 3.86207C3.38455 4.88635 3.80058 5.86869 4.54111 6.59296C5.28164 7.31724 6.28601 7.72414 7.33327 7.72414C8.38054 7.72414 9.38491 7.31724 10.1254 6.59296C10.866 5.86869 11.282 4.88635 11.282 3.86207C11.282 2.83778 10.866 1.85545 10.1254 1.13117Z" 8 | fill={color} 9 | /> 10 | <Path 11 | d="M7.33327 9.93104C3.28302 9.93104 -6.10352e-05 11.7848 -6.10352e-05 14.069V16H14.6666V14.069C14.6666 11.7848 11.3835 9.93104 7.33327 9.93104Z" 12 | fill={color} 13 | /> 14 | </Svg> 15 | ); 16 | 17 | export default PersonIcon; -------------------------------------------------------------------------------- /src/svg/PhotoIcon.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Svg, Path, SvgProps } from 'react-native-svg'; 3 | 4 | interface PhotoIconProps extends SvgProps { 5 | color?: string; 6 | } 7 | 8 | const PhotoIcon: React.FC<PhotoIconProps> = ({ color = '#A5A9B5', width = 48, height = 48, ...props }) => ( 9 | <Svg width={width} height={height} viewBox="0 0 48 48" fill="none" {...props}> 10 | <Path d="M12.1875 17.5C14.9297 17.5 17.25 15.2852 17.25 12.4375C17.25 9.69531 14.9297 7.375 12.1875 7.375C9.33984 7.375 7.125 9.69531 7.125 12.4375C7.125 15.2852 9.33984 17.5 12.1875 17.5ZM12.1875 10.75C13.0312 10.75 13.875 11.5938 13.875 12.4375C13.875 13.3867 13.0312 14.125 12.1875 14.125C11.2383 14.125 10.5 13.3867 10.5 12.4375C10.5 11.5938 11.2383 10.75 12.1875 10.75ZM44.25 0.625H3.75C1.85156 0.625 0.375 2.20703 0.375 4V44.5C0.375 46.3984 1.85156 47.875 3.75 47.875H44.25C46.043 47.875 47.625 46.3984 47.625 44.5V4C47.625 2.20703 46.043 0.625 44.25 0.625ZM44.25 44.5H3.75V36.0625H44.25V44.5ZM9.33984 32.6875L14.8242 25.4102L19.043 31L17.7773 32.6875H9.33984ZM21.9961 32.6875L30.0117 22.0352L38.0273 32.6875H21.9961ZM44.25 32.6875H42.2461L31.3828 18.2383C30.6445 17.3945 29.2734 17.3945 28.6406 18.2383L21.1523 28.2578L16.1953 21.6133C15.457 20.7695 14.0859 20.7695 13.4531 21.6133L5.12109 32.6875H3.75V4H44.25V32.6875Z" fill={color} /> 11 | </Svg> 12 | ); 13 | 14 | export default PhotoIcon; 15 | -------------------------------------------------------------------------------- /src/svg/PlayIcon.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Svg, Circle, Path, Defs, ClipPath, Rect, G } from 'react-native-svg'; 3 | 4 | const PlayIcon = ({ width = 40, height = 40 }) => ( 5 | <Svg width={width} height={height} viewBox="0 0 40 40" fill="none"> 6 | <G opacity="0.3"> 7 | <Circle cx="20" cy="20" r="20" fill="black" /> 8 | <Circle cx="20" cy="20" r="20" stroke="white" /> 9 | </G> 10 | <G clipPath="url(#clip0)"> 11 | <Path d="M16 13V27L27 20L16 13Z" fill="white" /> 12 | </G> 13 | <Defs> 14 | <ClipPath id="clip0"> 15 | <Rect width="24" height="24" fill="white" transform="translate(8 8)" /> 16 | </ClipPath> 17 | </Defs> 18 | </Svg> 19 | ); 20 | 21 | export default PlayIcon; 22 | -------------------------------------------------------------------------------- /src/svg/PlayVideoIcon.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Svg, Path } from 'react-native-svg'; 3 | 4 | const PlayVideoIcon = ({ color = '#292B32', width = 25, height = 24, style }: { color?: string, width?: number, height?: number, style?: any }) => ( 5 | <Svg width={width} height={height} viewBox="0 0 25 24" fill="none" style={style}> 6 | <Path 7 | d="M12.5 21C17.4706 21 21.5 16.9706 21.5 12C21.5 7.02944 17.4706 3 12.5 3C7.52944 3 3.5 7.02944 3.5 12C3.5 16.9706 7.52944 21 12.5 21Z" 8 | stroke={color} 9 | strokeWidth="1.3" 10 | strokeLinecap="round" 11 | strokeLinejoin="round" 12 | strokeMiterlimit="10" 13 | /> 14 | <Path 15 | d="M16.5 12L10.5 8V16L16.5 12Z" 16 | stroke={color} 17 | strokeWidth="1.3" 18 | strokeLinecap="round" 19 | strokeLinejoin="round" 20 | /> 21 | </Svg> 22 | ); 23 | 24 | export default PlayVideoIcon; 25 | -------------------------------------------------------------------------------- /src/svg/PlusIcon.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Svg, Path, SvgProps } from 'react-native-svg'; 3 | 4 | interface PlusIconProps extends SvgProps { 5 | color?: string; 6 | } 7 | 8 | export const PlusIcon: React.FC<PlusIconProps> = ({ 9 | color = "#292B32", 10 | width = 24, 11 | height = 24, 12 | style, 13 | ...rest 14 | }: PlusIconProps) => ( 15 | <Svg width={width} height={height} viewBox="0 0 24 24" fill="none" style={style} {...rest}> 16 | <Path 17 | d="M18.1875 11.125H13.125V6.0625C13.125 5.78125 12.8438 5.5 12.5625 5.5H11.4375C11.1211 5.5 10.875 5.78125 10.875 6.0625V11.125H5.8125C5.49609 11.125 5.25 11.4062 5.25 11.6875V12.8125C5.25 13.1289 5.49609 13.375 5.8125 13.375H10.875V18.4375C10.875 18.7539 11.1211 19 11.4375 19H12.5625C12.8438 19 13.125 18.7539 13.125 18.4375V13.375H18.1875C18.4688 13.375 18.75 13.1289 18.75 12.8125V11.6875C18.75 11.4062 18.4688 11.125 18.1875 11.125Z" 18 | fill={color} 19 | /> 20 | </Svg> 21 | ); 22 | -------------------------------------------------------------------------------- /src/svg/PlusIconV4.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Svg, Path } from 'react-native-svg'; 3 | 4 | const PlusIconV4 = ({ color = '#292B32', width = 14, height = 15, style={} }) => ( 5 | <Svg width={width} height={height} viewBox="0 0 14 15" fill="none" style={style}> 6 | <Path 7 | d="M13.0002 5.96667C13.5314 5.96667 14.0002 6.43542 14.0002 6.96667V7.96667C14.0002 8.52917 13.5314 8.96667 13.0002 8.96667H8.50016V13.4667C8.50016 14.0292 8.03141 14.4667 7.50016 14.4667H6.50016C5.93766 14.4667 5.50016 14.0292 5.50016 13.4667V8.96667H1.00016C0.437662 8.96667 0.000162125 8.52917 0.000162125 7.96667V6.96667C0.000162125 6.43542 0.437662 5.96667 1.00016 5.96667H5.50016V1.46667C5.50016 0.935425 5.93766 0.466675 6.50016 0.466675H7.50016C8.03141 0.466675 8.50016 0.935425 8.50016 1.46667V5.96667H13.0002Z" 8 | fill={color} 9 | /> 10 | </Svg> 11 | ); 12 | 13 | export default PlusIconV4; 14 | -------------------------------------------------------------------------------- /src/svg/PollIcon.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Svg, Path } from 'react-native-svg'; 3 | 4 | export const PollIcon = ({ color = "#292B32", width = 22, height = 19 }: { color?: string, width?: number, height?: number }) => ( 5 | <Svg width={width} height={height} viewBox="0 0 22 19" fill="none"> 6 | <Path 7 | d="M14.1875 0.375H1.8125C0.863281 0.375 0.125 1.14844 0.125 2.0625V14.4375C0.125 15.3867 0.863281 16.125 1.8125 16.125H14.1875C15.1016 16.125 15.875 15.3867 15.875 14.4375V2.0625C15.875 1.14844 15.1016 0.375 14.1875 0.375ZM14.1875 14.4375H1.8125V2.0625H14.1875V14.4375ZM4.34375 12.75H4.90625C5.1875 12.75 5.46875 12.5039 5.46875 12.1875V7.6875C5.46875 7.40625 5.1875 7.125 4.90625 7.125H4.34375C4.02734 7.125 3.78125 7.40625 3.78125 7.6875V12.1875C3.78125 12.5039 4.02734 12.75 4.34375 12.75ZM7.71875 12.75H8.28125C8.5625 12.75 8.84375 12.5039 8.84375 12.1875V4.3125C8.84375 4.03125 8.5625 3.75 8.28125 3.75H7.71875C7.40234 3.75 7.15625 4.03125 7.15625 4.3125V12.1875C7.15625 12.5039 7.40234 12.75 7.71875 12.75ZM11.0938 12.75H11.6562C11.9375 12.75 12.2188 12.5039 12.2188 12.1875V9.9375C12.2188 9.65625 11.9375 9.375 11.6562 9.375H11.0938C10.7773 9.375 10.5312 9.65625 10.5312 9.9375V12.1875C10.5312 12.5039 10.7773 12.75 11.0938 12.75Z" 8 | fill={color} 9 | /> 10 | </Svg> 11 | ); 12 | -------------------------------------------------------------------------------- /src/svg/PostArrowIcon.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Svg, Path } from 'react-native-svg'; 3 | 4 | export const PostArrowIcon = ({ width = 8, height = 7, color = '#636878' }) => ( 5 | <Svg width={width} height={height} viewBox="0 0 8 7"> 6 | <Path 7 | d="M1.46094 6.33203C1.63281 6.33203 1.77344 6.26172 1.97656 6.16406L6.82422 3.82812C7.18359 3.65234 7.33594 3.45312 7.33594 3.18359C7.33594 2.91406 7.18359 2.71484 6.82422 2.53906L1.97656 0.203125C1.77344 0.105469 1.62891 0.0351562 1.45703 0.0351562C1.12109 0.0351562 0.863281 0.292969 0.863281 0.714844L0.867188 5.65625C0.867188 6.07422 1.125 6.33203 1.46094 6.33203Z" 8 | fill={color} 9 | /> 10 | </Svg> 11 | ); 12 | 13 | export default PostArrowIcon; -------------------------------------------------------------------------------- /src/svg/PostIcon.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import Svg, { Path } from 'react-native-svg'; 3 | 4 | const PostIcon = ({ color = '#292B32' }) => ( 5 | <Svg width="29" height="29" viewBox="0 0 29 29" fill="none" > 6 | <Path 7 | d="M26.6484 4.12989L27.6592 3.07521C28.1426 2.57716 28.1572 1.85939 27.6738 1.37599L27.3369 1.03907C26.8975 0.599621 26.1797 0.658215 25.7109 1.12697L24.6709 2.13771L26.6484 4.12989ZM10.7695 18.4268L13.5088 17.2549L25.623 5.14064L23.6455 3.17775L11.5459 15.292L10.3008 17.9434C10.1836 18.207 10.4912 18.544 10.7695 18.4268ZM4.9541 28.7979H21.1846C23.7188 28.7979 25.2129 27.3184 25.2129 24.4326V9.09572L22.7959 11.5127V24.2715C22.7959 25.6777 22.0342 26.3955 21.0967 26.3955H5.04199C3.69434 26.3955 2.94727 25.6777 2.94727 24.2715V8.65626C2.94727 7.25001 3.69434 6.53224 5.04199 6.53224H16.7607L19.1777 4.12989H4.9541C2.02441 4.12989 0.530273 5.59474 0.530273 8.49513V24.4326C0.530273 27.333 2.02441 28.7979 4.9541 28.7979Z" 8 | fill={color} 9 | /> 10 | </Svg> 11 | ); 12 | 13 | export default PostIcon; -------------------------------------------------------------------------------- /src/svg/PostIconOutlined.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Svg, Path } from 'react-native-svg'; 3 | 4 | export const PostIconOutlined = ({ color = "#292B32", width = 22, height = 19 }: { color?: string, width?: number, height?: number }) => ( 5 | <Svg width={width} height={height} viewBox="0 0 22 19" fill="none"> 6 | <Path 7 | d="M15.0078 12.3789C14.9375 12.4492 14.9375 12.5195 14.9375 12.5898V16.5625H2.5625V4.1875H11.0352C11.1055 4.1875 11.1758 4.1875 11.2461 4.11719L12.3711 2.99219C12.5469 2.81641 12.4062 2.5 12.1602 2.5H2.5625C1.61328 2.5 0.875 3.27344 0.875 4.1875V16.5625C0.875 17.5117 1.61328 18.25 2.5625 18.25H14.9375C15.8516 18.25 16.625 17.5117 16.625 16.5625V11.4648C16.625 11.2188 16.3086 11.0781 16.1328 11.2539L15.0078 12.3789ZM20.4922 5.3125C21.3008 4.50391 21.3008 3.20312 20.4922 2.39453L18.9805 0.882812C18.1719 0.0742188 16.8711 0.0742188 16.0625 0.882812L6.85156 10.0938L6.5 13.293C6.39453 14.207 7.16797 14.9805 8.08203 14.875L11.2812 14.5234L20.4922 5.3125ZM17.0469 6.36719L10.5078 12.9062L8.1875 13.1875L8.46875 10.8672L15.0078 4.32812L17.0469 6.36719ZM19.2969 3.58984C19.4727 3.73047 19.4727 3.94141 19.332 4.11719L18.2422 5.20703L16.2031 3.13281L17.2578 2.07812C17.3984 1.90234 17.6445 1.90234 17.7852 2.07812L19.2969 3.58984Z" 8 | fill={color} 9 | /> 10 | </Svg> 11 | ); 12 | -------------------------------------------------------------------------------- /src/svg/PrimaryDotIcon.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Svg, Circle } from 'react-native-svg'; 3 | 4 | const PrimaryDot = ({ color = '#1054DE', width = 6, height = 6, style }: { color?: string, width?: number, height?: number, style?: any }) => ( 5 | <Svg width={width} height={height} viewBox="0 0 6 6" fill="none" style={style}> 6 | <Circle cx="3" cy="3" r="3" fill={color} /> 7 | </Svg> 8 | ); 9 | 10 | export default PrimaryDot; 11 | -------------------------------------------------------------------------------- /src/svg/PrivateIcon.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Svg, Path } from 'react-native-svg'; 3 | 4 | const PrivateIcon = ({ width = 16, height = 16, color="#292B32" }) => ( 5 | <Svg width={width} height={height} viewBox="0 0 16 16" fill="none"> 6 | <Path 7 | d="M8 11.2266C8.32227 11.2266 8.60156 10.9688 8.60156 10.625V9.25C8.60156 8.92773 8.32227 8.64844 8 8.64844C7.65625 8.64844 7.39844 8.92773 7.39844 9.25V10.625C7.39844 10.9688 7.65625 11.2266 8 11.2266ZM12.8125 7.53125C12.8125 6.97266 12.3398 6.5 11.7812 6.5H11.0938V5.51172C11.0938 3.79297 9.71875 2.39648 8 2.375C6.28125 2.375 4.90625 3.77148 4.90625 5.46875V6.5H4.21875C3.63867 6.5 3.1875 6.97266 3.1875 7.53125V12.3438C3.1875 12.9238 3.63867 13.375 4.21875 13.375H11.7812C12.3398 13.375 12.8125 12.9238 12.8125 12.3438V7.53125ZM5.9375 6.5V5.46875C5.9375 4.35156 6.86133 3.40625 8 3.40625C9.11719 3.40625 10.0625 4.35156 10.0625 5.46875V6.5H5.9375ZM11.7812 7.53125V12.3438H4.21875V7.53125H11.7812Z" 8 | fill={color} 9 | /> 10 | </Svg> 11 | ); 12 | 13 | export default PrivateIcon; 14 | -------------------------------------------------------------------------------- /src/svg/RadioOffIcon.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Svg, Path } from 'react-native-svg'; 3 | 4 | const RadioOffIcon = ({ color = "#A5A9B5", width = 24, height = 24 }: { color?: string, width?: number, height?: number }) => ( 5 | <Svg width={width} height={height} viewBox="0 0 24 24" fill="none"> 6 | <Path 7 | fillRule="evenodd" 8 | clipRule="evenodd" 9 | d="M2 12C2 6.48 6.48 2 12 2C17.52 2 22 6.48 22 12C22 17.52 17.52 22 12 22C6.48 22 2 17.52 2 12ZM4 12C4 16.42 7.58 20 12 20C16.42 20 20 16.42 20 12C20 7.58 16.42 4 12 4C7.58 4 4 7.58 4 12Z" 10 | fill={color} 11 | /> 12 | </Svg> 13 | ); 14 | 15 | export default RadioOffIcon; 16 | -------------------------------------------------------------------------------- /src/svg/RadioOnIcon.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Svg, Path } from 'react-native-svg'; 3 | 4 | const RadioOnIcon = ({ color = "#1054DE", width = 18, height = 18 }: { color?: string, width?: number, height?: number }) => ( 5 | <Svg width={width} height={height} viewBox="0 0 18 18" fill="none"> 6 | <Path 7 | d="M17.7188 9.25C17.7188 4.46875 13.7812 0.53125 9 0.53125C4.18359 0.53125 0.28125 4.46875 0.28125 9.25C0.28125 14.0664 4.18359 17.9688 9 17.9688C13.7812 17.9688 17.7188 14.0664 17.7188 9.25ZM7.98047 13.8906C7.76953 14.1016 7.38281 14.1016 7.17188 13.8906L3.51562 10.2344C3.30469 10.0234 3.30469 9.63672 3.51562 9.42578L4.32422 8.65234C4.53516 8.40625 4.88672 8.40625 5.09766 8.65234L7.59375 11.1133L12.8672 5.83984C13.0781 5.59375 13.4297 5.59375 13.6406 5.83984L14.4492 6.61328C14.6602 6.82422 14.6602 7.21094 14.4492 7.42188L7.98047 13.8906Z" 8 | fill={color} 9 | /> 10 | </Svg> 11 | ); 12 | 13 | export default RadioOnIcon; 14 | -------------------------------------------------------------------------------- /src/svg/ReplyIcon.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Svg, Path } from 'react-native-svg'; 3 | 4 | const ReplyIcon = ({ color = '#898E9E', width = 19, height = 18, style }: { color?: string, width?: number, height?: number, style?: any }) => ( 5 | <Svg width={width} height={height} viewBox="0 0 19 18" fill="none" style={style}> 6 | <Path 7 | d="M17.625 6.96875L12.125 1.46875C11.1875 0.5 9.59375 1.1875 9.59375 2.53125V5.03125C5.28125 5.15625 0.09375 6 0.09375 11.3438C0.09375 13.625 1.28125 15.5312 3.125 16.75C4.28125 17.5312 5.8125 16.4375 5.375 15.0625C4.625 12.625 5 11.3438 9.59375 11.0625V13.5C9.59375 14.8438 11.1875 15.5312 12.125 14.5625L17.625 9.0625C18.2188 8.5 18.2188 7.53125 17.625 6.96875ZM11.0938 13.5V9.53125C5.9375 9.5625 2.40625 10.5625 3.96875 15.5C2.84375 14.75 1.59375 13.4375 1.59375 11.3438C1.59375 6.875 6.59375 6.53125 11.0938 6.53125V2.5L16.5938 8L11.0938 13.5Z" 8 | fill={color} 9 | /> 10 | </Svg> 11 | ); 12 | 13 | export default ReplyIcon; 14 | -------------------------------------------------------------------------------- /src/svg/ReportIcon.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Svg, Path, SvgProps } from 'react-native-svg'; 3 | 4 | interface ReportIconProps extends SvgProps { 5 | color?: string; 6 | } 7 | 8 | const ReportIcon: React.FC<ReportIconProps> = ({ color = '#292B32', width = 16, height = 17, ...props }) => ( 9 | <Svg width={width} height={height} viewBox="0 0 16 17" fill="none" {...props}> 10 | <Path d="M10.9062 4.09375C9.21875 4.09375 7.84375 3 5.75 3C4.96875 3 4.28125 3.15625 3.625 3.40625C3.6875 3.1875 3.71875 3 3.71875 2.78125C3.71875 2.71875 3.71875 2.6875 3.71875 2.65625C3.6875 1.78125 2.9375 1.0625 2.0625 1.03125C1.0625 0.96875 0.25 1.78125 0.25 2.75C0.25 3.375 0.53125 3.875 1 4.1875V16.25C1 16.6875 1.3125 17 1.75 17H2.25C2.65625 17 3 16.6875 3 16.25V13.3125C3.875 12.9375 4.96875 12.625 6.5625 12.625C8.25 12.625 9.625 13.7188 11.7188 13.7188C13.2188 13.7188 14.4375 13.1875 15.5625 12.4375C15.8125 12.25 16 11.9375 16 11.625V4C16 3.28125 15.2188 2.8125 14.5625 3.09375C13.5 3.59375 12.1875 4.09375 10.9062 4.09375Z" fill={color} /> 11 | </Svg> 12 | ); 13 | 14 | export default ReportIcon; 15 | -------------------------------------------------------------------------------- /src/svg/SearchIcon.tsx: -------------------------------------------------------------------------------- 1 | 2 | 3 | import React from 'react'; 4 | import { Svg, Path } from 'react-native-svg'; 5 | 6 | 7 | export const SearchIcon = ({ color = "#292B32", width = 24, height = 24 }: { color?: string, width?: number, height?: number }) => ( 8 | <Svg width={width} height={height} viewBox="0 0 24 24" fill="none"> 9 | <Path 10 | d="M20.8594 19.7383L16.6055 15.4844C16.5 15.4141 16.3945 15.3438 16.2891 15.3438H15.832C16.9219 14.0781 17.625 12.3906 17.625 10.5625C17.625 6.55469 14.3203 3.25 10.3125 3.25C6.26953 3.25 3 6.55469 3 10.5625C3 14.6055 6.26953 17.875 10.3125 17.875C12.1406 17.875 13.793 17.207 15.0938 16.1172V16.5742C15.0938 16.6797 15.1289 16.7852 15.1992 16.8906L19.4531 21.1445C19.6289 21.3203 19.9102 21.3203 20.0508 21.1445L20.8594 20.3359C21.0352 20.1953 21.0352 19.9141 20.8594 19.7383ZM10.3125 16.1875C7.18359 16.1875 4.6875 13.6914 4.6875 10.5625C4.6875 7.46875 7.18359 4.9375 10.3125 4.9375C13.4062 4.9375 15.9375 7.46875 15.9375 10.5625C15.9375 13.6914 13.4062 16.1875 10.3125 16.1875Z" 11 | fill={color} 12 | /> 13 | </Svg> 14 | ); 15 | -------------------------------------------------------------------------------- /src/svg/SearchIconV4.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Svg, Path } from 'react-native-svg'; 3 | 4 | const SearchIconV4 = ({ color = '#292B32', width = 22, height = 22, style={} }) => ( 5 | <Svg width={width} height={height} viewBox="0 0 22 22" fill="none" style={style}> 6 | <Path 7 | d="M18.7814 16.3104C19.0627 16.6229 19.0627 17.0917 18.7502 17.3729L17.8752 18.2479C17.5939 18.5604 17.1252 18.5604 16.8127 18.2479L13.7189 15.1542C13.5627 14.9979 13.5002 14.8104 13.5002 14.6229V14.0917C12.3752 14.9667 11.0002 15.4667 9.50016 15.4667C5.90641 15.4667 3.00016 12.5604 3.00016 8.96667C3.00016 5.40417 5.90641 2.46667 9.50016 2.46667C13.0627 2.46667 16.0002 5.40417 16.0002 8.96667C16.0002 10.4979 15.4689 11.8729 14.6252 12.9667H15.1252C15.3127 12.9667 15.5002 13.0604 15.6564 13.1854L18.7814 16.3104ZM9.50016 12.9667C11.6877 12.9667 13.5002 11.1854 13.5002 8.96667C13.5002 6.77917 11.6877 4.96667 9.50016 4.96667C7.28141 4.96667 5.50016 6.77917 5.50016 8.96667C5.50016 11.1854 7.28141 12.9667 9.50016 12.9667Z" 8 | fill={color} 9 | /> 10 | </Svg> 11 | ); 12 | 13 | export default SearchIconV4; 14 | -------------------------------------------------------------------------------- /src/svg/ShieldIcon.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Svg, Path } from 'react-native-svg'; 3 | 4 | const ShieldIcon = ({ color = '#1054DE', width = 8, height = 9, style={} }) => ( 5 | <Svg width={width} height={height} viewBox="0 0 8 9" fill="none" style={style}> 6 | <Path 7 | d="M7.28125 1.8125C7.5625 1.9375 7.75 2.20312 7.75 2.5C7.75 5.96875 5.625 7.89062 4.28125 8.45312C4.09375 8.53125 3.89062 8.53125 3.70312 8.45312C2.03125 7.75 0.25 5.60938 0.25 2.5C0.25 2.20312 0.421875 1.9375 0.703125 1.8125L3.70312 0.5625C3.78125 0.53125 3.90625 0.515625 4 0.515625C4.07812 0.515625 4.20312 0.53125 4.28125 0.5625L7.28125 1.8125ZM6.54688 3.59375C6.64062 3.5 6.64062 3.34375 6.54688 3.25L6.1875 2.89062C6.09375 2.79688 5.9375 2.79688 5.84375 2.89062L3.5 5.23438L2.39062 4.14062C2.29688 4.04688 2.14062 4.04688 2.04688 4.14062L1.6875 4.5C1.59375 4.59375 1.59375 4.75 1.6875 4.84375L3.3125 6.46875C3.40625 6.57812 3.57812 6.57812 3.67188 6.46875L6.54688 3.59375Z" 8 | fill={color} 9 | /> 10 | </Svg> 11 | ); 12 | 13 | export default ShieldIcon; 14 | -------------------------------------------------------------------------------- /src/svg/StoryRing.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Svg, Circle, Defs, LinearGradient, Stop } from 'react-native-svg'; 3 | 4 | interface StoryRingProps { 5 | colorOne?: string; 6 | colorTwo?: string; 7 | width?: number; 8 | height?: number; 9 | } 10 | 11 | const StoryRing: React.FC<StoryRingProps> = ({ colorOne = '#339AF9', colorTwo = '#78FA58', width = 64, height = 64 }) => ( 12 | <Svg width={width} height={height} viewBox="0 0 64 64" fill="none"> 13 | <Circle cx="32" cy="32" r="31" stroke="url(#paint0_linear_2142_16601)" strokeWidth="2" /> 14 | <Defs> 15 | <LinearGradient id="paint0_linear_2142_16601" x1="46.5" y1="2.5" x2="13.5" y2="61" gradientUnits="userSpaceOnUse"> 16 | <Stop stopColor={colorOne} /> 17 | <Stop offset="1" stopColor={colorTwo} /> 18 | </LinearGradient> 19 | </Defs> 20 | </Svg> 21 | ); 22 | 23 | export default StoryRing; 24 | -------------------------------------------------------------------------------- /src/svg/ThreeDotsIcon.tsx: -------------------------------------------------------------------------------- 1 | 2 | 3 | import React from 'react'; 4 | import { Svg, Path } from 'react-native-svg'; 5 | 6 | 7 | export const ThreeDotsIcon = ({ color = "#292B32", style }: { color?: string , style?: any}) => ( 8 | <Svg width="16" height="4" viewBox="0 0 16 4" fill="none" style={style}> 9 | <Path 10 | d="M9.6875 2.25C9.6875 1.33594 8.91406 0.5625 8 0.5625C7.05078 0.5625 6.3125 1.33594 6.3125 2.25C6.3125 3.19922 7.05078 3.9375 8 3.9375C8.91406 3.9375 9.6875 3.19922 9.6875 2.25ZM13.9062 0.5625C12.957 0.5625 12.2188 1.33594 12.2188 2.25C12.2188 3.19922 12.957 3.9375 13.9062 3.9375C14.8203 3.9375 15.5938 3.19922 15.5938 2.25C15.5938 1.33594 14.8203 0.5625 13.9062 0.5625ZM2.09375 0.5625C1.14453 0.5625 0.40625 1.33594 0.40625 2.25C0.40625 3.19922 1.14453 3.9375 2.09375 3.9375C3.00781 3.9375 3.78125 3.19922 3.78125 2.25C3.78125 1.33594 3.00781 0.5625 2.09375 0.5625Z" 11 | fill={color} 12 | /> 13 | </Svg> 14 | ); 15 | -------------------------------------------------------------------------------- /src/svg/UnfollowIcon.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Svg, Path, SvgProps } from 'react-native-svg'; 3 | 4 | interface UnfollowIconProps extends SvgProps { 5 | color?: string; 6 | } 7 | 8 | const UnfollowIcon: React.FC<UnfollowIconProps> = ({ color = '#292B32', width = 21, height = 16, ...props }) => ( 9 | <Svg width={width} height={height} viewBox="0 0 21 16" fill="none" {...props}> 10 | <Path d="M18.4062 7.5L19.8438 6.09375C20.0312 5.90625 20.0312 5.5625 19.8438 5.375L19.125 4.65625C18.9375 4.46875 18.5938 4.46875 18.4062 4.65625L17 6.09375L15.5625 4.65625C15.375 4.46875 15.0312 4.46875 14.8438 4.65625L14.125 5.375C13.9375 5.5625 13.9375 5.90625 14.125 6.09375L15.5625 7.5L14.125 8.9375C13.9375 9.125 13.9375 9.46875 14.125 9.65625L14.8438 10.375C15.0312 10.5625 15.375 10.5625 15.5625 10.375L17 8.9375L18.4062 10.375C18.5938 10.5625 18.9375 10.5625 19.125 10.375L19.8438 9.65625C20.0312 9.46875 20.0312 9.125 19.8438 8.9375L18.4062 7.5ZM7 8C9.1875 8 11 6.21875 11 4C11 1.8125 9.1875 0 7 0C4.78125 0 3 1.8125 3 4C3 6.21875 4.78125 8 7 8ZM9.78125 9H9.25C8.5625 9.34375 7.8125 9.5 7 9.5C6.1875 9.5 5.40625 9.34375 4.71875 9H4.1875C1.875 9 0 10.9062 0 13.2188V14.5C0 15.3438 0.65625 16 1.5 16H12.5C13.3125 16 14 15.3438 14 14.5V13.2188C14 10.9062 12.0938 9 9.78125 9Z" fill={color} /> 11 | </Svg> 12 | ); 13 | 14 | export default UnfollowIcon; 15 | -------------------------------------------------------------------------------- /src/svg/UserIcon.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Svg, Rect, Path } from 'react-native-svg'; 3 | 4 | const UserIcon = ({ color = '#D9E5FC', width = 40, height = 40, style }: { color?: string, width?: number, height?: number, style?: any }) => ( 5 | <Svg width={width} height={height} viewBox="0 0 40 40" fill="none" style={style}> 6 | <Rect width="40" height="40" rx="40" fill={color} /> 7 | <Path 8 | d="M23.1255 13.1312C22.385 12.4069 21.3806 12 20.3333 12C19.2861 12 18.2817 12.4069 17.5412 13.1312C16.8006 13.8555 16.3846 14.8378 16.3846 15.8621C16.3846 16.8864 16.8006 17.8687 17.5412 18.593C18.2817 19.3172 19.2861 19.7241 20.3333 19.7241C21.3806 19.7241 22.385 19.3172 23.1255 18.593C23.866 17.8687 24.2821 16.8864 24.2821 15.8621C24.2821 14.8378 23.866 13.8555 23.1255 13.1312Z" 9 | fill="white" 10 | /> 11 | <Path d="M20.3333 21.931C16.2831 21.931 13 23.7848 13 26.069V28H27.6667V26.069C27.6667 23.7848 24.3836 21.931 20.3333 21.931Z" fill="white" /> 12 | </Svg> 13 | ); 14 | 15 | export default UserIcon; 16 | -------------------------------------------------------------------------------- /src/svg/circle.svg: -------------------------------------------------------------------------------- 1 | <svg width="18" height="16" viewBox="0 0 18 16" fill="none" xmlns="http://www.w3.org/2000/svg"> 2 | <path d="M8.9917 0.1875C13.6733 0.1875 17.4585 3.30859 17.4585 7.09375C17.4585 10.9121 13.6733 14 8.9917 14C7.896 14 6.8335 13.834 5.90381 13.5352C4.90771 14.2324 3.31396 15.0625 1.28857 15.0625C0.956543 15.0625 0.657715 14.8965 0.524902 14.5977C0.425293 14.2988 0.458496 13.9668 0.690918 13.7344C0.724121 13.7344 1.75342 12.6055 2.21826 11.3105C1.12256 10.1484 0.491699 8.6875 0.491699 7.09375C0.491699 3.30859 4.27686 0.1875 8.9917 0.1875ZM8.9917 12.4062C12.7769 12.4062 15.8979 10.0488 15.8979 7.09375C15.8979 4.17188 12.7769 1.78125 8.9917 1.78125C5.17334 1.78125 2.08545 4.17188 2.08545 7.09375C2.08545 8.52148 2.78271 9.58398 3.38037 10.2148L4.07764 10.9453L3.7124 11.875C3.54639 12.3398 3.31396 12.8047 3.04834 13.2031C3.84521 12.9375 4.50928 12.5723 4.97412 12.2402L5.60498 11.7754L6.36865 12.0078C7.19873 12.2734 8.09521 12.4062 8.9917 12.4062Z" fill="#898E9E"/> 3 | </svg> 4 | -------------------------------------------------------------------------------- /src/types/auth.interface.ts: -------------------------------------------------------------------------------- 1 | export type AuthContextInterface = { 2 | error: string; 3 | isConnecting: boolean; 4 | logout: () => void; 5 | client?: Amity.Client | {}; 6 | login: () => void; 7 | isConnected: boolean; 8 | sessionState: string; 9 | apiRegion: string; 10 | authToken?: string; 11 | }; 12 | -------------------------------------------------------------------------------- /src/types/type.d.ts: -------------------------------------------------------------------------------- 1 | export interface IMentionPosition { 2 | index: number; 3 | type: string; 4 | userId: string; 5 | length: number; 6 | displayName?: string; 7 | } 8 | -------------------------------------------------------------------------------- /src/types/user.interface.ts: -------------------------------------------------------------------------------- 1 | export type User = { 2 | userId: string; 3 | avatar: string; 4 | displayName: string; 5 | }; 6 | export type UserGroup = { 7 | title: string; 8 | data: Amity.User[]; 9 | }; 10 | export interface UserInterface { 11 | userId: string; 12 | displayName: string; 13 | avatarFileId: string; 14 | } 15 | -------------------------------------------------------------------------------- /src/util/apiUtil.ts: -------------------------------------------------------------------------------- 1 | export const getAvatarURL = (apiRegion: string, fileId: string) => { 2 | return `https://api.${apiRegion}.amity.co/api/v3/files/${fileId}/download?size=medium`; 3 | }; 4 | -------------------------------------------------------------------------------- /src/util/colorUtil.ts: -------------------------------------------------------------------------------- 1 | const hexColorRegExp = /^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/; 2 | export const validateConfigColor = (color: string): string => { 3 | if (!color || !hexColorRegExp.test(color)) return '#00000000'; 4 | return color; 5 | }; 6 | -------------------------------------------------------------------------------- /src/util/numberUtil.ts: -------------------------------------------------------------------------------- 1 | export const formatNumber = (num: number): string => { 2 | if (!num || isNaN(num)) return '0'; 3 | if (num >= 1_000_000_000) { 4 | return (num / 1_000_000_000).toFixed(1).replace(/\.0$/, '') + 'b'; 5 | } else if (num >= 1_000_000) { 6 | return (num / 1_000_000).toFixed(1).replace(/\.0$/, '') + 'm'; 7 | } else if (num >= 1_000) { 8 | return (num / 1_000).toFixed(1).replace(/\.0$/, '') + 'k'; 9 | } else { 10 | return num.toString(); 11 | } 12 | }; 13 | -------------------------------------------------------------------------------- /src/util/postDataFormatter.ts: -------------------------------------------------------------------------------- 1 | import { getAmityUser } from '../providers/user-provider'; 2 | import { type IPost } from '../components/Social/PostList'; 3 | import { type UserInterface } from '../types/user.interface'; 4 | 5 | export const amityPostsFormatter = async ( 6 | posts: Amity.Post<any>[] 7 | ): Promise<IPost[]> => { 8 | const formattedPostList = await Promise.all( 9 | posts.map(async (item: Amity.Post<any>) => { 10 | const { userObject } = await getAmityUser(item.postedUserId); 11 | return { 12 | postId: item.postId, 13 | data: item.data as Record<string, any>, 14 | dataType: item.dataType, 15 | myReactions: item.myReactions as string[], 16 | reactionCount: item.reactions as Record<string, number>, 17 | commentsCount: item.commentsCount, 18 | user: userObject.data as UserInterface, 19 | editedAt: item.editedAt, 20 | createdAt: item.createdAt, 21 | updatedAt: item.updatedAt, 22 | targetType: item.targetType, 23 | targetId: item.targetId, 24 | childrenPosts: item.children, 25 | mentionees: item.mentionees[0]?.userIds, 26 | mentionPosition: item?.metadata?.mentioned || undefined, 27 | } as IPost; 28 | }) 29 | ); 30 | return formattedPostList; 31 | }; 32 | -------------------------------------------------------------------------------- /tsconfig.build.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig", 3 | "exclude": ["example"] 4 | } 5 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "rootDir": ".", 4 | "paths": { 5 | "@amityco/react-native-social-ui-kit": ["./src/index"] 6 | }, 7 | "allowUnreachableCode": false, 8 | "allowUnusedLabels": false, 9 | "esModuleInterop": true, 10 | "jsx": "react", 11 | "lib": ["esnext"], 12 | "module": "esnext", 13 | "moduleResolution": "node", 14 | "noFallthroughCasesInSwitch": true, 15 | "noImplicitReturns": true, 16 | "noImplicitUseStrict": false, 17 | "noUncheckedIndexedAccess": true, 18 | "noUnusedLocals": true, 19 | "noUnusedParameters": true, 20 | "resolveJsonModule": true, 21 | "skipLibCheck": true, 22 | "strict": false, 23 | "target": "esnext", 24 | "noImplicitAny": false, 25 | "allowSyntheticDefaultImports": true 26 | } 27 | } 28 | --------------------------------------------------------------------------------