feat: force to bump version

.circleci/config.yml

@@ -3,7 +3,7 @@ version: 2.1
 executors:
   default:
     docker:
-      - image: circleci/node:14
+      - image: circleci/node:16
     working_directory: ~/project
 
 commands:
@@ -29,8 +29,8 @@ jobs:
       - run:
           name: Install dependencies
           command: |
-            yarn install --cwd example --frozen-lockfile
-            yarn install --frozen-lockfile
+            yarn install --cwd example --frozen-lockfile --ignore-engines
+            yarn install --frozen-lockfile --ignore-engines
       - save_cache:
           key: dependencies-{{ checksum "package.json" }}
           paths:

README.md

@@ -29,26 +29,26 @@ npm i react-native-story-component
 
 ## Props
 
-| Name                 | Description                              | Type                                             | Default Value |
-| :------------------- | :--------------------------------------- | :----------------------------------------------- | :-----------: |
-| data                 | Array of stories.                        | IUserStory[]                                     |               |
-| unPressedBorderColor | Unpressed border color of profile circle | color                                            |      red      |
-| pressedBorderColor   | Pressed border color of profile circle   | color                                            |     grey      |
-| onClose              | Todo when close                          | (item: IUserStory) => void                       |     null      |
-| onStart              | Todo when start                          | (item: IUserStory) => void                       |     null      |
-| duration             | Per story duration in seconds            | number                                           |      10       |
-| swipeText            | Text of swipe component                  | string                                           |   Swipe Up    |
-| customSwipeUpButton  | Custom component for swipe area          | () => ReactNode                                  |               |
-| customCloseButton    | Custom component for close button        | () => ReactNode                                  |               |
-| customStoryList      | Custom component for story list          | (props: ICustomStoryList) => React.ReactNode     |               |
-| customStoryView      | Custom component for story view          | (props: ICustomStoryView) => React.ReactNode     |               |
-| customProfileBanner  | Custom component for profile banner      | (props: ICustomProfileBanner) => React.ReactNode |               |
-| customStoryImage     | Custom component for story image         | (props: ICustomStoryImage) => React.ReactNode    |               |
-| avatarSize           | Size of avatar circle                    | number                                           |      60       |
-| showAvatarText       | Show or hide avatar text                 | bool                                             |     true      |
-| showProfileBanner    | Show or hide profile banner              | bool                                             |     true      |
-| textStyle            | Avatar text style                        | TextStyle                                        |               |
-| storyListStyle       | Story list view style                    | ViewStyle                                        |               |
+| Name                 | Description                              | Type                                            | Default Value |
+| :------------------- | :--------------------------------------- | :---------------------------------------------- | :-----------: |
+| data                 | Array of stories.                        | UserStory[]                                     |               |
+| unPressedBorderColor | Unpressed border color of profile circle | color                                           |      red      |
+| pressedBorderColor   | Pressed border color of profile circle   | color                                           |     grey      |
+| onClose              | Todo when close                          | (item: UserStory) => void                       |     null      |
+| onStart              | Todo when start                          | (item: UserStory) => void                       |     null      |
+| duration             | Per story duration in seconds            | number                                          |      10       |
+| swipeText            | Text of swipe component                  | string                                          |   Swipe Up    |
+| customSwipeUpButton  | Custom component for swipe area          | () => ReactNode                                 |               |
+| customCloseButton    | Custom component for close button        | () => ReactNode                                 |               |
+| customStoryList      | Custom component for story list          | (props: CustomStoryList) => React.ReactNode     |               |
+| customStoryView      | Custom component for story view          | (props: CustomStoryView) => React.ReactNode     |               |
+| customProfileBanner  | Custom component for profile banner      | (props: CustomProfileBanner) => React.ReactNode |               |
+| customStoryImage     | Custom component for story image         | (props: CustomStoryImage) => React.ReactNode    |               |
+| avatarSize           | Size of avatar circle                    | number                                          |      60       |
+| showAvatarText       | Show or hide avatar text                 | bool                                            |     true      |
+| showProfileBanner    | Show or hide profile banner              | bool                                            |     true      |
+| textStyle            | Avatar text style                        | TextStyle                                       |               |
+| storyListStyle       | Story list view style                    | ViewStyle                                       |               |
 
 ## Usage
 

example/src/App.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react';
+import React from 'react';
 import {
   Text,
   View,
@@ -36,11 +36,17 @@ const createStories = () => {
   }));
 };
 
-const App = () => {
-  useEffect(() => {
-    ignoreWarnings();
-  }, []);
+const CustomSwipeButton = () => {
+  return (
+    <View>
+      <Text>Swipe</Text>
+    </View>
+  );
+};
+
+ignoreWarnings();
 
+const App = () => {
   return (
     <SafeAreaView style={styles.container}>
       <StatusBar backgroundColor="#fff" barStyle="dark-content" />
@@ -59,11 +65,7 @@ const App = () => {
         //     </View>
         //   );
         // }}
-        customSwipeUpButton={() => (
-          <View>
-            <Text>Swipe</Text>
-          </View>
-        )}
+        customSwipeUpButton={CustomSwipeButton}
       />
     </SafeAreaView>
   );

package.json

@@ -61,20 +61,21 @@
     "react-native-swipe-gestures": "^1.0.5"
   },
   "devDependencies": {
-    "@commitlint/cli": "^17.6.3",
-    "@commitlint/config-conventional": "^17.6.3",
-    "@react-native-community/eslint-config": "^3.0.2",
+    "@commitlint/cli": "^17.6.7",
+    "@commitlint/config-conventional": "^17.6.7",
+    "@react-native-community/eslint-config": "^3.2.0",
     "@release-it/conventional-changelog": "^5.1.1",
     "@types/jest": "^28.1.2",
     "@types/react": "~17.0.21",
     "@types/react-native": "0.70.0",
     "@types/react-native-modalbox": "^1.4.10",
     "auto-changelog": "^2.4.0",
     "commitizen": "^4.3.0",
-    "commitlint": "^17.6.3",
+    "commitlint": "^17.6.7",
     "cz-conventional-changelog": "^3.3.0",
-    "eslint": "^8.4.1",
+    "eslint": "^8.46.0",
     "eslint-config-prettier": "^8.5.0",
+    "eslint-plugin-ft-flow": "^3.0.0",
     "eslint-plugin-prettier": "^4.0.0",
     "husky": "^4.3.8",
     "jest": "^28.1.1",

src/components/Story.tsx

@@ -18,40 +18,40 @@ import { isNullOrWhitespace, isUrl } from '../helpers/ValidationHelpers';
 
 import { ActionStates } from '../index';
 import type {
-  IUserStory,
-  ICustomStoryView,
-  ICustomStoryList,
-  ICustomProfileBanner,
-  ICustomStoryImage,
+  UserStory,
+  CustomStoryView,
+  CustomStoryList,
+  CustomProfileBanner,
+  CustomStoryImage,
 } from '../index';
 import type { TextStyle, ViewStyle } from 'react-native';
 
 declare module '../animations/CubeNavigationHorizontal' {}
 
 declare module '../animations/AndroidCubeEffect' {}
 
-type Props = {
-  data: IUserStory[];
+type StoryProps = {
+  data: UserStory[];
   storyListStyle?: ViewStyle;
   unPressedBorderColor?: string;
   pressedBorderColor?: string;
-  onClose?: (item: IUserStory) => void;
-  onStart?: (item: IUserStory) => void;
+  onClose?: (item: UserStory) => void;
+  onStart?: (item: UserStory) => void;
   duration?: number;
   swipeText?: string;
   customSwipeUpButton?: () => React.ReactNode;
   customCloseButton?: () => React.ReactNode;
-  customStoryList?: (props: ICustomStoryList) => React.ReactNode;
-  customStoryView?: (props: ICustomStoryView) => React.ReactNode;
-  customProfileBanner?: (props: ICustomProfileBanner) => React.ReactNode;
-  customStoryImage?: (props: ICustomStoryImage) => React.ReactNode;
+  customStoryList?: (props: CustomStoryList) => React.ReactNode;
+  customStoryView?: (props: CustomStoryView) => React.ReactNode;
+  customProfileBanner?: (props: CustomProfileBanner) => React.ReactNode;
+  customStoryImage?: (props: CustomStoryImage) => React.ReactNode;
   avatarSize?: number;
   showAvatarText?: boolean;
   showProfileBanner?: boolean;
   avatarTextStyle?: TextStyle;
 };
 
-const Story = (props: Props) => {
+const Story = (props: StoryProps) => {
   const {
     data,
     unPressedBorderColor,
@@ -75,10 +75,10 @@ const Story = (props: Props) => {
   const [dataState, setDataState] = useState(data);
   const [isModalOpen, setIsModalOpen] = useState(false);
   const [currentPage, setCurrentPage] = useState(0);
-  const [selectedData, setSelectedData] = useState<IUserStory[]>([]);
+  const [selectedData, setSelectedData] = useState<UserStory[]>([]);
   const cubeRef = useRef();
 
-  const _handleStoryItemPress = (item: IUserStory, index: number) => {
+  const _handleStoryItemPress = (item: UserStory, index: number) => {
     const newData = dataState.slice(index);
 
     if (onStart) onStart(item);
@@ -89,15 +89,15 @@ const Story = (props: Props) => {
   };
 
   const handleSeen = useCallback(() => {
-    const seen = selectedData[currentPage] as IUserStory;
+    const seen = selectedData[currentPage] as UserStory;
     const seenIndex = dataState.indexOf(seen);
     if (seenIndex > 0) {
       if (!dataState[seenIndex]?.seen) {
         let tempData = dataState;
         dataState[seenIndex] = {
           ...dataState[seenIndex],
           seen: true,
-        } as IUserStory;
+        } as UserStory;
         setDataState(tempData);
       }
     }
@@ -119,7 +119,7 @@ const Story = (props: Props) => {
           setIsModalOpen(false);
           setCurrentPage(0);
           if (onClose) {
-            onClose(selectedData[selectedData.length - 1] as IUserStory);
+            onClose(selectedData[selectedData.length - 1] as UserStory);
           }
         }
       } else if (state === ActionStates.PREVIOUS) {
@@ -136,7 +136,7 @@ const Story = (props: Props) => {
     }
   };
 
-  const onClosePress = (story: IUserStory) => {
+  const onClosePress = (story: UserStory) => {
     setIsModalOpen(false);
     if (onClose) onClose(story);
   };

src/components/StoryCircleListItem.tsx

@@ -13,19 +13,19 @@ import { isUrl } from '../helpers/ValidationHelpers';
 import { usePrevious } from '../helpers/StateHelpers';
 
 import type { TextStyle } from 'react-native';
-import type { IUserStory } from '../index';
+import type { UserStory } from '../index';
 
-interface Props {
-  item: IUserStory;
-  showText?: Boolean;
+interface StoryCircleListItemProps {
+  item: UserStory;
+  showText?: boolean;
   textStyle?: TextStyle;
   unPressedBorderColor?: string;
   pressedBorderColor?: string;
-  handleStoryItemPress?: (item: IUserStory) => void;
+  handleStoryItemPress?: (item: UserStory) => void;
   avatarSize?: number;
 }
 
-const StoryCircleListItem = (props: Props) => {
+const StoryCircleListItem = (props: StoryCircleListItemProps) => {
   const {
     item,
     unPressedBorderColor,
@@ -46,7 +46,7 @@ const StoryCircleListItem = (props: Props) => {
     }
   }, [prevSeen, props?.item?.seen]);
 
-  const _handleItemPress = (story: IUserStory) => {
+  const _handleItemPress = (story: UserStory) => {
     if (handleStoryItemPress) handleStoryItemPress(story);
 
     setIsPressed(true);

src/components/StoryCircleListView.tsx

@@ -3,19 +3,19 @@ import { View, FlatList, StyleSheet } from 'react-native';
 import StoryCircleListItem from './StoryCircleListItem';
 
 import type { TextStyle } from 'react-native';
-import type { IUserStory } from '../index';
+import type { UserStory } from '../index';
 
-interface Props {
-  data: IUserStory[];
-  handleStoryItemPress?: (item: IUserStory, index: number) => void;
+interface StoryCircleListViewProps {
+  data: UserStory[];
+  handleStoryItemPress?: (item: UserStory, index: number) => void;
   unPressedBorderColor?: string;
   pressedBorderColor?: string;
   avatarSize?: number;
-  showText?: Boolean;
+  showText?: boolean;
   textStyle?: TextStyle;
 }
 
-const StoryCircleListView = (props: Props) => {
+const StoryCircleListView = (props: StoryCircleListViewProps) => {
   const {
     data,
     handleStoryItemPress,

src/components/StoryImage.tsx

@@ -1,14 +1,9 @@
 import React from 'react';
-import {
-  Image,
-  Dimensions,
-  StyleSheet,
-  ImageSourcePropType,
-} from 'react-native';
+import { Image, StyleSheet, ImageSourcePropType } from 'react-native';
 
 import { getStatusBarHeight } from 'react-native-safearea-height';
 
-const { width, height } = Dimensions.get('window');
+import Computed from '../helpers/Computed';
 
 interface StoryImageProps {
   onLoadEnd: () => void;
@@ -35,8 +30,8 @@ const StoryImage = ({ onLoadEnd, height, width, source }: StoryImageProps) => {
 
 const styles = StyleSheet.create({
   image: {
-    maxWidth: width,
-    maxHeight: height - getStatusBarHeight(true),
+    maxWidth: Computed.DEVICE_WIDTH,
+    maxHeight: Computed.DEVICE_HEIGHT - getStatusBarHeight(true),
   },
 });