@amityco/react-native-social-uikit 4.0.0-03e2bf8.0 → 4.0.0-06cc633.0

package/lib/typescript/src/v4/screen/CreateStory/CreateStoryScreen.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CreateStoryScreen.d.ts","sourceRoot":"","sources":["../../../../../../src/v4/screen/CreateStory/CreateStoryScreen.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,QAAA,MAAM,iBAAiB,GAAI;;;CAAqB,sBAmC/C,CAAC;AAEF,eAAe,iBAAiB,CAAC"}
+{"version":3,"file":"CreateStoryScreen.d.ts","sourceRoot":"","sources":["../../../../../../src/v4/screen/CreateStory/CreateStoryScreen.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,QAAA,MAAM,iBAAiB,GAAI;;;CAAqB,sBAwD/C,CAAC;AAEF,eAAe,iBAAiB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@amityco/react-native-social-uikit",
-  "version": "4.0.0-03e2bf8.0",
+  "version": "4.0.0-06cc633.0",
   "description": "Social UIKit",
   "main": "lib/commonjs/index",
   "module": "lib/module/index",
@@ -72,7 +72,7 @@
     "@react-navigation/stack": "^7.3.1",
     "@release-it/conventional-changelog": "^5.0.0",
     "@types/jest": "^29.5.13",
-    "@types/react": "^18.2.6",
+    "@types/react": "^19.1.0",
     "@types/react-native": "0.73.0",
     "@types/react-native-video": "^5.0.18",
     "babel-plugin-module-resolver": "^5.0.0",
@@ -86,8 +86,8 @@
     "lint-staged": "^15.2.0",
     "pod-install": "^0.1.0",
     "prettier": "2.8.8",
-    "react": "18.3.1",
-    "react-native": "0.77.0",
+    "react": "19.1.0",
+    "react-native": "0.80.1",
     "react-native-builder-bob": "^0.20.0",
     "react-native-compressor": "^1.13.0",
     "react-native-fs": "2.20.0",
@@ -95,12 +95,12 @@
     "react-native-get-random-values": "^1.11.0",
     "react-native-image-picker": "^8.2.1",
     "react-native-linear-gradient": "^2.8.3",
-    "react-native-safe-area-context": "5.2.0",
-    "react-native-screens": "4.8.0",
-    "react-native-svg": "15.11.1",
-    "react-native-video": "^6.16.1",
+    "react-native-safe-area-context": "^5.6.2",
+    "react-native-screens": "^4.18.0",
+    "react-native-svg": "^15.15.1",
+    "react-native-video": "^6.18.0",
     "react-native-video-controls": "^2.8.1",
-    "react-native-vision-camera": "^4.7.1",
+    "react-native-vision-camera": "^4.7.3",
     "release-it": "^15.0.0",
     "turbo": "^1.10.7",
     "typescript": "^5.2.2"
@@ -110,7 +110,7 @@
     "*.{json,md}": "prettier --write"
   },
   "resolutions": {
-    "@types/react": "18.2.37"
+    "@types/react": "^19.1.0"
   },
   "peerDependencies": {
     "@amityco/ts-sdk-react-native": "^7.9.2",
@@ -130,11 +130,11 @@
     "react-native-image-picker": "^8.2.1",
     "react-native-linear-gradient": "^2.8.3",
     "react-native-netinfo": "^1.1.0",
-    "react-native-safe-area-context": "^5.2.0",
-    "react-native-screens": "^4.8.0",
-    "react-native-svg": "^15.11.0",
-    "react-native-video": "^6.16.1",
-    "react-native-vision-camera": "^4.7.1"
+    "react-native-safe-area-context": "^5.6.2",
+    "react-native-screens": "^4.18.0",
+    "react-native-svg": "^15.15.1",
+    "react-native-video": "^6.18.0",
+    "react-native-vision-camera": "^4.7.3"
   },
   "engines": {
     "node": ">= 18.0.0"
@@ -218,7 +218,7 @@
     "@hookform/resolvers": "^5.2.1",
     "@reduxjs/toolkit": "^1.9.7",
     "@tanstack/react-query": "^5.85.5",
-    "@types/react-dom": "^18.2.15",
+    "@types/react-dom": "^19.1.0",
     "dayjs": "^1.11.10",
     "html-entities": "^2.5.2",
     "i18next": "22.4.10",

package/src/components/CustomText/index.tsx

@@ -9,10 +9,13 @@ interface CustomTextProps {
   ellipsizeMode?: 'tail' | 'head' | 'middle' | 'clip' | undefined;
 }
 
-const CustomText: React.FC<CustomTextProps> = (
-  { children, style, numberOfLines, ellipsizeMode = 'tail' }: CustomTextProps,
-  props
-) => {
+const CustomText: React.FC<CustomTextProps> = ({
+  children,
+  style,
+  numberOfLines,
+  ellipsizeMode = 'tail',
+  ...props
+}: CustomTextProps) => {
   return (
     <Text
       {...props}

package/src/components/Social/PostList/Components/RenderTextWithMention.tsx

@@ -27,7 +27,7 @@ const RenderTextWithMention: React.FC<IrenderTextWithMention> = ({
     });
   };
   let currentPosition = 0;
-  const result: (string | JSX.Element)[][] = mentionPositionArr.map(
+  const result: (string | React.JSX.Element)[][] = mentionPositionArr.map(
     ({ index, length, userId }, i) => {
       // Add non-highlighted text before the mention
       const nonHighlightedText = textPost.slice(currentPosition, index);

package/src/components/StoryKit/src/Story.tsx

@@ -45,7 +45,7 @@ export const Story = ({
   const [isModalOpen, setIsModalOpen] = useState<boolean>(false);
   const [currentPage, setCurrentPage] = useState<number>(0);
   const [selectedData, setSelectedData] = useState<IUserStory[]>([]);
-  const cube = useRef<CubeNavigationHorizontal | AndroidCubeEffect>();
+  const cube = useRef<CubeNavigationHorizontal | AndroidCubeEffect>(null);
 
   // Component Functions
   const _handleStoryItemPress = (item: IUserStory, index?: number) => {

package/src/components/StoryKit/src/StoryListItem.tsx

@@ -101,7 +101,7 @@ export const StoryListItem = ({
   );
 
   useEffect(() => {
-    let isPrevious = !!prevCurrentPage && prevCurrentPage > currentPage;
+    let isPrevious = !!prevCurrentPage && +prevCurrentPage > +currentPage;
     if (isPrevious) {
       setCurrent(content.length - 1);
     } else {
@@ -129,12 +129,12 @@ export const StoryListItem = ({
     if (!isNullOrWhitespace(prevCurrent)) {
       if (prevCurrent) {
         if (
-          current > prevCurrent &&
+          +current > +prevCurrent &&
           content[current - 1].story_image == content[current].story_image
         ) {
           start();
         } else if (
-          current < prevCurrent &&
+          +current < +prevCurrent &&
           content[current + 1].story_image == content[current].story_image
         ) {
           start();

package/src/components/StoryKit/src/helpers/StateHelpers.ts

@@ -1,7 +1,7 @@
 import { useEffect, useRef } from 'react';
 
 export function usePrevious(value: any) {
-  const ref = useRef();
+  const ref = useRef(null);
   useEffect(() => {
     ref.current = value;
   });

package/src/index.tsx

@@ -99,7 +99,7 @@ import {
   AmityPostComposerMode,
   mediaAttachment,
 } from './v4/PublicApi/types';
-import { AmityStoryTabComponentStyle } from './v4/PublicApi/Components/AmityStoryTabComponent/AmityStoryTabComponent';
+import { AmityGlobalStoryTabWrapper } from './v4/component/MyStories';
 
 const LINKING_ERROR =
   `The package 'amity-react-native-social-ui-kit' doesn't seem to be linked. Make sure: \n\n` +
@@ -191,5 +191,5 @@ export {
   AmityCommunityLivestreamsNotificationSettingPage,
   AmityCommunityPinnedPostComponent,
   AmityPendingPostListComponent,
-  AmityStoryTabComponentStyle,
+  AmityGlobalStoryTabWrapper,
 };

package/src/providers/amity-ui-kit-provider.tsx

@@ -144,7 +144,7 @@ export default function AmityUiKitProvider({
 
   return (
     <QueryClientProvider client={queryClient}>
-      <Provider store={store} context={AmityUIKitReduxContext}>
+      <Provider store={store} context={AmityUIKitReduxContext as any}>
         <AuthContextProvider
           userId={userId}
           displayName={displayName || userId}

package/src/redux/slices/bottomSheetSlice.ts

@@ -4,14 +4,14 @@ import { RootState, useUIKitDispatch, useUIKitSelector } from '../store';
 
 export interface BottomSheetState {
   open: boolean;
-  content: JSX.Element | null;
+  content: React.JSX.Element | null;
   height?: number;
   pageId?: PageID;
   componentId?: ComponentID;
 }
 
 type OpenBottomSheetPayload = {
-  content: JSX.Element;
+  content: React.JSX.Element;
   height?: number;
 };
 

package/src/redux/store/index.ts

@@ -10,13 +10,21 @@ import {
   createStoreHook,
   createDispatchHook,
   createSelectorHook,
+  ReactReduxContextValue,
 } from 'react-redux';
+import { AnyAction } from 'redux';
 
-export const AmityUIKitReduxContext = createContext(null);
+export const AmityUIKitReduxContext = createContext<
+  ReactReduxContextValue<any, AnyAction>
+>(null as any);
 
-export const useUIKitStore = createStoreHook(AmityUIKitReduxContext);
-export const useUIKitDispatch = createDispatchHook(AmityUIKitReduxContext);
-export const useUIKitSelector = createSelectorHook(AmityUIKitReduxContext);
+export const useUIKitStore = createStoreHook(AmityUIKitReduxContext as any);
+export const useUIKitDispatch = createDispatchHook(
+  AmityUIKitReduxContext as any
+);
+export const useUIKitSelector = createSelectorHook(
+  AmityUIKitReduxContext as any
+);
 
 export const store: Store = configureStore({
   reducer: {

package/src/v4/PublicApi/Components/AmityCreatePostMenuComponent/AmityCreatePostMenuComponent.tsx

@@ -17,7 +17,7 @@ interface AmityCreatePostMenuComponentProps {
 const AmityCreatePostMenuComponent = ({
   pageId = PageID.WildCardPage,
   componentId = ComponentID.WildCardComponent,
-}: AmityCreatePostMenuComponentProps): JSX.Element => {
+}: AmityCreatePostMenuComponentProps): React.JSX.Element => {
   const navigation = useNavigation<StackNavigationProp<RootStackParamList>>();
   const { themeStyles } = useAmityComponent({ pageId, componentId });
 

package/src/v4/PublicApi/Components/AmityPostCommentComponent/AmityPostCommentComponent.tsx

@@ -48,7 +48,7 @@ type AmityPostCommentComponentType = {
   disabledInteraction?: boolean;
   setReplyUserName?: (arg: string) => void;
   setReplyCommentId?: (arg: string) => void;
-  ListHeaderComponent?: JSX.Element;
+  ListHeaderComponent?: React.JSX.Element;
 };
 
 const commentListLimit = 10;

package/src/v4/PublicApi/Components/AmityStoryTabComponent/AmityStoryTabComponent.tsx

@@ -39,8 +39,4 @@ const AmityStoryTabComponent: FC<AmityStoryTabComponentType> = ({
   return null;
 };
 
-export const AmityStoryTabComponentStyle = {
-  height: 130,
-};
-
 export default memo(AmityStoryTabComponent);

package/src/v4/PublicApi/Components/AmityThumbnailActionComponent/AmityThumbnailActionComponent.tsx

@@ -16,7 +16,7 @@ const AmityThumbnailActionComponent = ({
   onChangeThumbnail,
   onDeleteThumbnail,
   pageId = PageID.WildCardPage,
-}: AmityThumbnailActionComponentProps): JSX.Element => {
+}: AmityThumbnailActionComponentProps): React.JSX.Element => {
   const componentId = ComponentID.thumbnail_action;
   const { themeStyles } = useAmityComponent({ pageId, componentId });
   const styles = useStyles(themeStyles);

package/src/v4/component/MyStories/StoryTargetView.tsx

@@ -24,7 +24,7 @@ const StoryTargetView: FC<IStorytargetView> = ({
   setViewStory,
   onClose,
 }) => {
-  const cube = useRef<CubeNavigationHorizontal | AndroidCubeEffect>();
+  const cube = useRef<CubeNavigationHorizontal | AndroidCubeEffect>(null);
   const communityId = globalStoryTargets[currentCommunityIndex].targetId;
   const hasStoryPermission = useStoryPermission(communityId);
 

package/src/v4/component/MyStories/index.tsx

@@ -8,6 +8,7 @@ import Modal from 'react-native-modalbox';
 import StoryTargetView from './StoryTargetView';
 import { useTheme } from 'react-native-paper';
 import { MyMD3Theme } from '../../../providers/amity-ui-kit-provider';
+import useAuth from '../../../hooks/useAuth';
 
 export interface IStoryItems {
   communityId: string;
@@ -112,5 +113,25 @@ const MyStories = () => {
 
   return null;
 };
+export const AmityGlobalStoryTabWrapper = ({ children }) => {
+  const { globalStoryTargets, getGlobalStoryTargets } = useGlobalStory();
+
+  const { sessionState } = useAuth();
+
+  useEffect(() => {
+    if (sessionState === 'established') {
+      getGlobalStoryTargets();
+    }
+  }, [sessionState, getGlobalStoryTargets]);
+  return (
+    <View
+      style={{
+        height: globalStoryTargets.length > 0 ? 113 : 0,
+      }}
+    >
+      {children}
+    </View>
+  );
+};
 
 export default memo(MyStories);

package/src/v4/component/MyStories/styles.ts

@@ -8,7 +8,6 @@ export const useStyles = () => {
     container: {
       backgroundColor: theme.colors.background,
       width,
-      marginTop: 8,
     },
     skeletonContainer: {
       backgroundColor: theme.colors.background,

package/src/v4/component/RenderTextWithMention/RenderTextWithMention.tsx

@@ -82,7 +82,7 @@ const RenderTextWithMention: React.FC<IrenderTextWithMention> = ({
   }
 
   let currentPosition = 0;
-  const result: (string | JSX.Element)[][] = heightlightTextPositions.map(
+  const result: (string | React.JSX.Element)[][] = heightlightTextPositions.map(
     ({ index, length, userId, link }, i) => {
       // Add non-highlighted text before the mention
       const nonHighlightedText = textPost.slice(currentPosition, index);

package/src/v4/component/StoryKit/src/Story.tsx

@@ -22,7 +22,7 @@ export const Story = ({
   const [isModalOpen, setIsModalOpen] = useState<boolean>(false);
   const [currentPage, setCurrentPage] = useState<number>(0);
   const [selectedData, setSelectedData] = useState<IUserStory[]>([]);
-  const cube = useRef<CubeNavigationHorizontal | AndroidCubeEffect>();
+  const cube = useRef<CubeNavigationHorizontal | AndroidCubeEffect>(null);
   // Component Functions
   const _handleStoryItemPress = (item: IUserStory, index?: number) => {
     if (item?.stories?.length === 0) return;

package/src/v4/component/StoryKit/src/StoryListItem.tsx

@@ -152,7 +152,7 @@ export const StoryListItem = ({
   }, [myReactions, reactionCounts]);
 
   useEffect(() => {
-    let isPrevious = !!prevCurrentPage && prevCurrentPage > currentPage;
+    let isPrevious = !!prevCurrentPage && +prevCurrentPage > +currentPage;
     if (isPrevious) {
       setCurrent(content.length - 1);
     } else {
@@ -180,12 +180,12 @@ export const StoryListItem = ({
     if (!isNullOrWhitespace(prevCurrent)) {
       if (prevCurrent) {
         if (
-          current > prevCurrent &&
+          +current > +prevCurrent &&
           content[current - 1].story_image === content[current].story_image
         ) {
           start();
         } else if (
-          current < prevCurrent &&
+          +current < +prevCurrent &&
           content[current + 1].story_image === content[current].story_image
         ) {
           start();

package/src/v4/component/StoryKit/src/helpers/StateHelpers.ts

@@ -1,7 +1,7 @@
 import { useEffect, useRef } from 'react';
 
 export function usePrevious(value: any) {
-  const ref = useRef();
+  const ref = useRef(null);
   useEffect(() => {
     ref.current = value;
   });

package/src/v4/elements/ChangeThumbnailButton/ChangeThumbnailButton.tsx

@@ -16,7 +16,7 @@ const ChangeThumbnailButton = ({
   pageId = PageID.WildCardPage,
   componentId = ComponentID.WildCardComponent,
   ...props
-}: ChangeThumbnailButtonProps): JSX.Element => {
+}: ChangeThumbnailButtonProps): React.JSX.Element => {
   const { themeStyles, config } = useAmityElement({
     pageId,
     componentId,

package/src/v4/elements/DeleteThumbnailButton/DeleteThumbnailButton.tsx

@@ -16,7 +16,7 @@ const ChangeThumbnailButton = ({
   pageId = PageID.WildCardPage,
   componentId = ComponentID.WildCardComponent,
   ...props
-}: ChangeThumbnailButtonProps): JSX.Element => {
+}: ChangeThumbnailButtonProps): React.JSX.Element => {
   const { themeStyles, config } = useAmityElement({
     pageId,
     componentId,

package/src/v4/routes/AmityPageRenderer.tsx

@@ -84,7 +84,7 @@ export default function PageRenderer({ children }: PageRendererProps) {
             screenOptions={{
               headerShadowVisible: false,
               contentStyle: {
-                backgroundColor: 'white',
+                backgroundColor: theme.colors.background,
               },
               headerStyle: {
                 backgroundColor: theme.colors.background,

package/src/v4/screen/CreateStory/CreateStoryScreen.tsx

@@ -32,11 +32,32 @@ const CreateStoryScreen = ({ navigation, route }) => {
     return null;
   }
 
+  const handleCreateStory = () => {
+    const state = navigation.getState();
+    const routes = state.routes;
+    const currentIndex = state.index;
+
+    if (currentIndex > 0) {
+      const previousRoute = routes[currentIndex - 1];
+      const previousRouteName = previousRoute.name;
+
+      if (
+        previousRouteName === 'ViewStory' ||
+        previousRouteName === 'StoryTargetSelection'
+      ) {
+        navigation.pop(2);
+        return;
+      }
+    }
+
+    navigation.goBack();
+  };
+
   return (
     <AmityCreateStoryPage
       targetId={targetId}
       targetType={targetType}
-      onCreateStory={() => navigation.goBack()}
+      onCreateStory={handleCreateStory}
     />
   );
 };