From 0b5c89c768fd210286518750bbcfc05cfc97d3ed Mon Sep 17 00:00:00 2001 From: vpsmolina Date: Mon, 18 Mar 2024 10:13:17 +0300 Subject: [PATCH] feat(DragAndDrop): added drag and drop --- packages/chart/package.json | 2 +- packages/dragAndDrop/README.md | 1 + packages/dragAndDrop/index.ts | 1 + packages/dragAndDrop/package.json | 45 +++++ .../src/DragAndDrop/DragAndDrop.tsx | 163 ++++++++++++++++++ .../src/DragAndDrop/DragAndDropList.tsx | 76 ++++++++ packages/dragAndDrop/src/DragAndDrop/index.ts | 5 + packages/dragAndDrop/src/DragAndDrop/types.ts | 28 +++ packages/dragAndDrop/src/DragAndDrop/utils.ts | 47 +++++ packages/dragAndDrop/src/index.ts | 1 + packages/dragAndDrop/svg.d.ts | 6 + packages/dragAndDrop/tsconfig.json | 105 +++++++++++ .../Home/Core/DragAndDrop/ui/index.tsx | 54 ++++++ src/pages/MainStack/Home/ui/index.tsx | 4 + src/pages/MainStack/ui/index.tsx | 6 +- .../lib/constants/rootStackParamList.ts | 1 + src/shared/lib/constants/screens.ts | 1 + 17 files changed, 544 insertions(+), 2 deletions(-) create mode 100644 packages/dragAndDrop/README.md create mode 100644 packages/dragAndDrop/index.ts create mode 100644 packages/dragAndDrop/package.json create mode 100644 packages/dragAndDrop/src/DragAndDrop/DragAndDrop.tsx create mode 100644 packages/dragAndDrop/src/DragAndDrop/DragAndDropList.tsx create mode 100644 packages/dragAndDrop/src/DragAndDrop/index.ts create mode 100644 packages/dragAndDrop/src/DragAndDrop/types.ts create mode 100644 packages/dragAndDrop/src/DragAndDrop/utils.ts create mode 100644 packages/dragAndDrop/src/index.ts create mode 100644 packages/dragAndDrop/svg.d.ts create mode 100644 packages/dragAndDrop/tsconfig.json create mode 100644 src/pages/MainStack/Home/Core/DragAndDrop/ui/index.tsx diff --git a/packages/chart/package.json b/packages/chart/package.json index 90a5f9e99..2c5053c47 100644 --- a/packages/chart/package.json +++ b/packages/chart/package.json @@ -44,4 +44,4 @@ "react-native-reanimated": ">=3.6.1", "react-native-gesture-handler": ">=2.14.1" } -} \ No newline at end of file +} diff --git a/packages/dragAndDrop/README.md b/packages/dragAndDrop/README.md new file mode 100644 index 000000000..146103949 --- /dev/null +++ b/packages/dragAndDrop/README.md @@ -0,0 +1 @@ +## @lad-tech/mobydick-drag-and-drop diff --git a/packages/dragAndDrop/index.ts b/packages/dragAndDrop/index.ts new file mode 100644 index 000000000..8420b1093 --- /dev/null +++ b/packages/dragAndDrop/index.ts @@ -0,0 +1 @@ +export * from './src'; diff --git a/packages/dragAndDrop/package.json b/packages/dragAndDrop/package.json new file mode 100644 index 000000000..7ae4e8029 --- /dev/null +++ b/packages/dragAndDrop/package.json @@ -0,0 +1,45 @@ +{ + "name": "@lad-tech/mobydick-drag-and-drop", + "version": "7.24.0", + "description": "React Native components library focused on usability, accessibility and developer experience", + "main": "lib/index", + "module": "lib/index", + "types": "lib/index.d.ts", + "react-native": "src/index", + "source": "src/index", + "keywords": [ + "mobydick", + "lad-tech", + "mobydick-chart", + "chart", + "react-native", + "reanimated" + ], + "files": [ + "lib", + "src", + "index.ts" + ], + "repository": { + "type": "git", + "url": "https://github.com/lad-tech/mobydick.git", + "directory": "packages/dragDrop" + }, + "publishConfig": { + "registry": "https://registry.npmjs.org", + "access": "public" + }, + "scripts": { + "build": "tsc", + "test": "echo \"Error: no test specified\" && exit 1" + }, + "author": "Kirill Lebedev ", + "license": "MIT", + "peerDependencies": { + "react-native": ">=0.66.4", + "react": ">=17.0.2", + "@lad-tech/mobydick-core": "7.24.0", + "react-native-reanimated": ">=3.6.1", + "react-native-gesture-handler": ">=2.14.1" + } +} diff --git a/packages/dragAndDrop/src/DragAndDrop/DragAndDrop.tsx b/packages/dragAndDrop/src/DragAndDrop/DragAndDrop.tsx new file mode 100644 index 000000000..26f37a648 --- /dev/null +++ b/packages/dragAndDrop/src/DragAndDrop/DragAndDrop.tsx @@ -0,0 +1,163 @@ +import {FC, PropsWithChildren} from 'react'; +import { + PanGestureHandler, + PanGestureHandlerGestureEvent, +} from 'react-native-gesture-handler'; +import Animated, { + useAnimatedGestureHandler, + useAnimatedReaction, + useAnimatedStyle, + useSharedValue, + withTiming, + scrollTo, +} from 'react-native-reanimated'; +import {useSafeAreaInsets} from 'react-native-safe-area-context'; +import {Dimensions, StyleSheet} from 'react-native'; + +import {IContextType, IDragAndDropProps} from './types'; +import {animationConfig, getOrder, getPosition} from './utils'; + +const DragAndDrop: FC> = ({ + children, + positions, + id, + scrollY, + scrollView, + columns, + itemWidth, + itemHeight, +}) => { + const position = getPosition({ + index: positions.value[id]!, + col: columns, + height: itemHeight, + width: itemWidth, + }); + + const x = useSharedValue(position.x); + const y = useSharedValue(position.y); + + const isGestureActive = useSharedValue(false); + const inset = useSafeAreaInsets(); + + const containerHeight = + Dimensions.get('window').height - inset.top - inset.bottom; + const contentHeight = + (Object.keys(positions.value).length / columns) * itemHeight; + + useAnimatedReaction( + () => positions.value[id]!, + newOrder => { + const newPositions = getPosition({ + index: newOrder, + col: columns, + height: itemHeight, + width: itemWidth, + }); + x.value = withTiming(newPositions.x, animationConfig); + y.value = withTiming(newPositions.y, animationConfig); + }, + ); + + const onGestureEvent = useAnimatedGestureHandler< + PanGestureHandlerGestureEvent, + IContextType + >({ + onStart: (_, context) => { + context.x = x.value; + context.y = y.value; + isGestureActive.value = true; + }, + onActive: (event, context) => { + x.value = event.translationX + context.x; + y.value = event.translationY + context.y; + // 1. We calculate where the tile should be + const newOrder = getOrder({ + tx: x.value, + ty: y.value, + max: Object.keys(positions.value).length - 1, + col: columns, + width: itemWidth, + height: itemHeight, + }); + + // 2. We swap the positions + const oldOlder = positions.value[id]; + if (newOrder !== oldOlder) { + const idToSwap = Object.keys(positions.value).find( + key => positions.value[key] === newOrder, + ); + if (idToSwap) { + // Spread operator is not supported in worklets + // And Object.assign doesn't seem to be working on alpha.6 + const newPositions = JSON.parse(JSON.stringify(positions.value)); + newPositions[id] = newOrder; + newPositions[idToSwap] = oldOlder; + positions.value = newPositions; + } + } + + // 3. Scroll + const lowerBound = scrollY.value; + const upperBound = lowerBound + containerHeight - itemWidth; + const maxScroll = contentHeight - containerHeight; + const leftToScrollDown = maxScroll - scrollY.value; + + if (y.value < lowerBound) { + const diff = Math.min(lowerBound - y.value, lowerBound); + scrollY.value -= diff; + context.y -= diff; + y.value = context.y + event.translationY; + scrollTo(scrollView, 0, scrollY.value, false); + } + if (y.value > upperBound) { + const diff = Math.min(y.value - upperBound, leftToScrollDown); + scrollY.value += diff; + context.y += diff; + y.value = context.y + event.translationY; + scrollTo(scrollView, 0, scrollY.value, false); + } + }, + onEnd: () => { + const destination = getPosition({ + index: positions.value[id]!, + col: columns, + height: itemHeight, + width: itemWidth, + }); + x.value = withTiming( + destination.x, + animationConfig, + () => (isGestureActive.value = false), + ); + + y.value = withTiming(destination.y, animationConfig); + }, + }); + + const animatedStyle = useAnimatedStyle(() => { + const zIndex = isGestureActive.value ? 100 : 0; + const scale = isGestureActive.value ? 1.1 : 1; + return { + position: 'absolute', + top: 0, + left: 0, + width: itemWidth, + height: itemHeight, + zIndex, + transform: [{translateX: x.value}, {translateY: y.value}, {scale}], + }; + }); + + return ( + + + + {children} + + + + ); +}; + +export default DragAndDrop; diff --git a/packages/dragAndDrop/src/DragAndDrop/DragAndDropList.tsx b/packages/dragAndDrop/src/DragAndDrop/DragAndDropList.tsx new file mode 100644 index 000000000..58de4ed92 --- /dev/null +++ b/packages/dragAndDrop/src/DragAndDrop/DragAndDropList.tsx @@ -0,0 +1,76 @@ +import {GestureHandlerRootView} from 'react-native-gesture-handler'; +import Animated, { + useAnimatedRef, + useAnimatedScrollHandler, + useSharedValue, +} from 'react-native-reanimated'; +import {useStyles, createStyles, View} from '@lad-tech/mobydick-core'; + +import {IDragAndDropListProps, IPositions} from './types'; +import DragAndDrop from './DragAndDrop'; + +const DragAndDropList = ({ + list, + renderItem, + itemWidth, + itemHeight, + columns, + sideMargin, +}: IDragAndDropListProps) => { + const [styles] = useStyles(createStyleFn); + const scrollY = useSharedValue(0); + const scrollView = useAnimatedRef(); + + const positions = useSharedValue( + Object.assign({}, ...list.map((_item: T, index) => ({[index]: index}))), + ); + + const onScroll = useAnimatedScrollHandler({ + onScroll: ({contentOffset: {y}}) => { + scrollY.value = y; + }, + }); + + return ( + + + + {list.map((item, index) => { + return ( + + {renderItem(item, index, list)} + + ); + })} + + + + ); +}; + +const createStyleFn = createStyles(() => ({ + container: { + flex: 1, + }, +})); + +export default DragAndDropList; diff --git a/packages/dragAndDrop/src/DragAndDrop/index.ts b/packages/dragAndDrop/src/DragAndDrop/index.ts new file mode 100644 index 000000000..04a8d1554 --- /dev/null +++ b/packages/dragAndDrop/src/DragAndDrop/index.ts @@ -0,0 +1,5 @@ +import DragAndDrop from './DragAndDrop'; +import DragDropList from './DragAndDropList'; + +export {DragAndDrop, DragDropList}; +export * from './types'; diff --git a/packages/dragAndDrop/src/DragAndDrop/types.ts b/packages/dragAndDrop/src/DragAndDrop/types.ts new file mode 100644 index 000000000..aa12e830d --- /dev/null +++ b/packages/dragAndDrop/src/DragAndDrop/types.ts @@ -0,0 +1,28 @@ +import Animated, {AnimatedRef, SharedValue} from 'react-native-reanimated'; + +export type IContextType = { + x: number; + y: number; +}; + +export interface IPositions { + [id: string]: number; +} + +interface IView { + sideMargin: number; + itemWidth: number; + itemHeight: number; + columns: number; +} +export interface IDragAndDropListProps extends IView { + list: T[]; + renderItem: (item: T, index: number, data: Array) => JSX.Element; +} + +export interface IDragAndDropProps extends IView { + positions: SharedValue; + id: number; + scrollY: Animated.SharedValue; + scrollView: AnimatedRef; +} diff --git a/packages/dragAndDrop/src/DragAndDrop/utils.ts b/packages/dragAndDrop/src/DragAndDrop/utils.ts new file mode 100644 index 000000000..4437ca48e --- /dev/null +++ b/packages/dragAndDrop/src/DragAndDrop/utils.ts @@ -0,0 +1,47 @@ +import {Easing} from 'react-native-reanimated'; + +export const getPosition = ({ + index, + col, + width, + height, +}: { + index: number; + col: number; + width: number; + height: number; +}) => { + 'worklet'; + return { + x: (index % col) * width, + y: Math.floor(index / col) * height, + }; +}; +export const getOrder = ({ + tx, + ty, + max, + col, + width, + height, +}: { + tx: number; + ty: number; + max: number; + col: number; + width: number; + height: number; +}) => { + 'worklet'; + + const x = Math.round(tx / width) * width; + const y = Math.round(ty / height) * height; + const row = Math.max(y, 0) / height; + const columns = Math.max(x, 0) / width; + return Math.min(row * col + columns, max); +}; + +export const animationConfig = { + easing: Easing.inOut(Easing.ease), + duration: 350, +}; diff --git a/packages/dragAndDrop/src/index.ts b/packages/dragAndDrop/src/index.ts new file mode 100644 index 000000000..657e9ccd6 --- /dev/null +++ b/packages/dragAndDrop/src/index.ts @@ -0,0 +1 @@ +export * from './DragAndDrop'; diff --git a/packages/dragAndDrop/svg.d.ts b/packages/dragAndDrop/svg.d.ts new file mode 100644 index 000000000..e5bbc768d --- /dev/null +++ b/packages/dragAndDrop/svg.d.ts @@ -0,0 +1,6 @@ +declare module '*.svg' { + import React from 'react'; + import {SvgProps} from 'react-native-svg'; + const content: React.FC; + export default content; +} diff --git a/packages/dragAndDrop/tsconfig.json b/packages/dragAndDrop/tsconfig.json new file mode 100644 index 000000000..fb93c75c9 --- /dev/null +++ b/packages/dragAndDrop/tsconfig.json @@ -0,0 +1,105 @@ +{ + "exclude": [ + "node_modules", + "lib", + "*/__tests__/**" + ], + "compilerOptions": { + /* Projects */ + // "incremental": true, /* Save .tsbuildinfo files to allow for incremental compilation of projects. */ + // "composite": true, /* Enable constraints that allow a TypeScript project to be used with project references. */ + // "tsBuildInfoFile": "./.tsbuildinfo", /* Specify the path to .tsbuildinfo incremental compilation file. */ + // "disableSourceOfProjectReferenceRedirect": true, /* Disable preferring source files instead of declaration files when referencing composite projects. */ + // "disableSolutionSearching": true, /* Opt a project out of multi-project reference checking when editing. */ + // "disableReferencedProjectLoad": true, /* Reduce the number of projects loaded automatically by TypeScript. */ + + /* Language and Environment */ + "target": "ESNext", /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */ + // "lib": [], /* Specify a set of bundled library declaration files that describe the target runtime environment. */ + "jsx": "react-native", /* Specify what JSX code is generated. */ + // "experimentalDecorators": true, /* Enable experimental support for TC39 stage 2 draft decorators. */ + // "emitDecoratorMetadata": true, /* Emit design-type metadata for decorated declarations in source files. */ + // "jsxFactory": "", /* Specify the JSX factory function used when targeting React JSX emit, e.g. 'React.createElement' or 'h'. */ + // "jsxFragmentFactory": "", /* Specify the JSX Fragment reference used for fragments when targeting React JSX emit e.g. 'React.Fragment' or 'Fragment'. */ + // "jsxImportSource": "", /* Specify module specifier used to import the JSX factory functions when using 'jsx: react-jsx*'. */ + // "reactNamespace": "", /* Specify the object invoked for 'createElement'. This only applies when targeting 'react' JSX emit. */ + // "noLib": true, /* Disable including any library files, including the default lib.d.ts. */ + // "useDefineForClassFields": true, /* Emit ECMAScript-standard-compliant class fields. */ + // "moduleDetection": "auto", /* Control what method is used to detect module-format JS files. */ + + /* Modules */ + "module": "commonjs", /* Specify what module code is generated. */ + // "rootDir": "./", /* Specify the root folder within your source files. */ + "moduleResolution": "node", /* Specify how TypeScript looks up a file from a given module specifier. */ + // "baseUrl": "./", /* Specify the base directory to resolve non-relative module names. */ + // "rootDirs": [], /* Allow multiple folders to be treated as one when resolving modules. */ + // "typeRoots": [], /* Specify multiple folders that act like './node_modules/@types'. */ + // "types": [], /* Specify type package names to be included without being referenced in a source file. */ + // "allowUmdGlobalAccess": true, /* Allow accessing UMD globals from modules. */ + // "moduleSuffixes": [], /* List of file name suffixes to search when resolving a module. */ + "resolveJsonModule": true, /* Enable importing .json files. */ + // "noResolve": true, /* Disallow 'import's, 'require's or ''s from expanding the number of files TypeScript should add to a project. */ + + /* JavaScript Support */ + // "allowJs": true, /* Allow JavaScript files to be a part of your program. Use the 'checkJS' option to get errors from these files. */ + // "checkJs": true, /* Enable error reporting in type-checked JavaScript files. */ + // "maxNodeModuleJsDepth": 1, /* Specify the maximum folder depth used for checking JavaScript files from 'node_modules'. Only applicable with 'allowJs'. */ + + /* Emit */ + "declaration": true, /* Generate .d.ts files from TypeScript and JavaScript files in your project. */ + "declarationMap": true, /* Create sourcemaps for d.ts files. */ + // "emitDeclarationOnly": true, /* Only output d.ts files and not JavaScript files. */ + "sourceMap": true, /* Create source map files for emitted JavaScript files. */ + // "outFile": "./", /* Specify a file that bundles all outputs into one JavaScript file. If 'declaration' is true, also designates a file that bundles all .d.ts output. */ + "outDir": "./lib", /* Specify an output folder for all emitted files. */ + // "removeComments": true, /* Disable emitting comments. */ + "noEmit": false, /* Disable emitting files from a compilation. */ + // "importHelpers": true, /* Allow importing helper functions from tslib once per project, instead of including them per-file. */ + // "importsNotUsedAsValues": "remove", /* Specify emit/checking behavior for imports that are only used for types. */ + // "downlevelIteration": true, /* Emit more compliant, but verbose and less performant JavaScript for iteration. */ + // "sourceRoot": "", /* Specify the root path for debuggers to find the reference source code. */ + // "mapRoot": "", /* Specify the location where debugger should locate map files instead of generated locations. */ + // "inlineSourceMap": true, /* Include sourcemap files inside the emitted JavaScript. */ + // "inlineSources": true, /* Include source code in the sourcemaps inside the emitted JavaScript. */ + // "emitBOM": true, /* Emit a UTF-8 Byte Order Mark (BOM) in the beginning of output files. */ + // "newLine": "crlf", /* Set the newline character for emitting files. */ + // "stripInternal": true, /* Disable emitting declarations that have '@internal' in their JSDoc comments. */ + // "noEmitHelpers": true, /* Disable generating custom helper functions like '__extends' in compiled output. */ + // "noEmitOnError": true, /* Disable emitting files if any type checking errors are reported. */ + // "preserveConstEnums": true, /* Disable erasing 'const enum' declarations in generated code. */ + // "declarationDir": "./", /* Specify the output directory for generated declaration files. */ + // "preserveValueImports": true, /* Preserve unused imported values in the JavaScript output that would otherwise be removed. */ + + /* Interop Constraints */ + // "isolatedModules": true, /* Ensure that each file can be safely transpiled without relying on other imports. */ + // "allowSyntheticDefaultImports": true, /* Allow 'import x from y' when a module doesn't have a default export. */ + "esModuleInterop": true, /* Emit additional JavaScript to ease support for importing CommonJS modules. This enables 'allowSyntheticDefaultImports' for type compatibility. */ + // "preserveSymlinks": true, /* Disable resolving symlinks to their realpath. This correlates to the same flag in node. */ + "forceConsistentCasingInFileNames": true, /* Ensure that casing is correct in imports. */ + + /* Type Checking */ + "strict": true, /* Enable all strict type-checking options. */ + "noImplicitAny": true, /* Enable error reporting for expressions and declarations with an implied 'any' type. */ + "strictNullChecks": true, /* When type checking, take into account 'null' and 'undefined'. */ + "strictFunctionTypes": true, /* When assigning functions, check to ensure parameters and the return values are subtype-compatible. */ + "strictBindCallApply": true, /* Check that the arguments for 'bind', 'call', and 'apply' methods match the original function. */ + "strictPropertyInitialization": true, /* Check for class properties that are declared but not set in the constructor. */ + "noImplicitThis": true, /* Enable error reporting when 'this' is given the type 'any'. */ + "useUnknownInCatchVariables": true, /* Default catch clause variables as 'unknown' instead of 'any'. */ + "alwaysStrict": true, /* Ensure 'use strict' is always emitted. */ + "noUnusedLocals": true, /* Enable error reporting when local variables aren't read. */ + "noUnusedParameters": true, /* Raise an error when a function parameter isn't read. */ + "exactOptionalPropertyTypes": true, /* Interpret optional property types as written, rather than adding 'undefined'. */ + "noImplicitReturns": true, /* Enable error reporting for codepaths that do not explicitly return in a function. */ + "noFallthroughCasesInSwitch": true, /* Enable error reporting for fallthrough cases in switch statements. */ + "noUncheckedIndexedAccess": true, /* Add 'undefined' to a type when accessed using an index. */ + "noImplicitOverride": true, /* Ensure overriding members in derived classes are marked with an override modifier. */ + // "noPropertyAccessFromIndexSignature": true, /* Enforces using indexed accessors for keys declared using an indexed type. */ + // "allowUnusedLabels": true, /* Disable error reporting for unused labels. */ + // "allowUnreachableCode": true, /* Disable error reporting for unreachable code. */ + + /* Completeness */ + // "skipDefaultLibCheck": true, /* Skip type checking .d.ts files that are included with TypeScript. */ + "skipLibCheck": true /* Skip type checking all .d.ts files. */ + } +} diff --git a/src/pages/MainStack/Home/Core/DragAndDrop/ui/index.tsx b/src/pages/MainStack/Home/Core/DragAndDrop/ui/index.tsx new file mode 100644 index 000000000..37964fb91 --- /dev/null +++ b/src/pages/MainStack/Home/Core/DragAndDrop/ui/index.tsx @@ -0,0 +1,54 @@ +import {Dimensions} from 'react-native'; + +import DragAndDropList from '../../../../../../../packages/dragAndDrop/src/DragAndDrop/DragAndDropList'; + +import { + createStyles, + rem, + Typography, + useStyles, + View, +} from '@lad-tech/mobydick-core'; + +const {width: WIDTH} = Dimensions.get('window'); + +const arr = new Array(25).fill('').map((_, i) => i); +export const MARGIN = rem(8); +export const COL = 1; +export const EL_WIDTH = WIDTH / COL - MARGIN * 2; +export const EL_HEIGHT = EL_WIDTH / 4; + +const DragAndDropScreen = () => { + const [styles] = useStyles(createStyleFn); + + return ( + { + return ( + + {item} + + ); + }} + /> + ); +}; + +const createStyleFn = createStyles(({colors}) => ({ + box: { + width: EL_WIDTH, + height: EL_HEIGHT, + }, + element: { + backgroundColor: colors.BgAccent, + flex: 1, + marginVertical: MARGIN, + }, +})); + +export default DragAndDropScreen; diff --git a/src/pages/MainStack/Home/ui/index.tsx b/src/pages/MainStack/Home/ui/index.tsx index 04b917141..393667f7e 100644 --- a/src/pages/MainStack/Home/ui/index.tsx +++ b/src/pages/MainStack/Home/ui/index.tsx @@ -20,6 +20,10 @@ const HomeScreen = () => { onPress={move(SCREENS.KeyboardAware)} text={SCREENS.KeyboardAware} /> + ); }; diff --git a/src/pages/MainStack/ui/index.tsx b/src/pages/MainStack/ui/index.tsx index c4ff986e7..387b7bc93 100644 --- a/src/pages/MainStack/ui/index.tsx +++ b/src/pages/MainStack/ui/index.tsx @@ -28,6 +28,7 @@ import {KeyboardAwareScrollViewWithBottomScreen} from 'pages/MainStack/Home/Keyb import {KeyboardAwareScrollViewTabsScreen} from 'pages/MainStack/Home/KeyboardAware/ScrollView/Tabs/ui'; import OtherScreen from 'pages/MainStack/Home/Core/Other/ui'; import NavbarsScreen from 'pages/MainStack/Home/Core/Navbars/ui'; +import DragAndDropScreen from 'pages/MainStack/Home/Core/DragAndDrop/ui'; const Stack = createNativeStackNavigator(); @@ -95,8 +96,11 @@ const MainStack = () => { /> + - diff --git a/src/shared/lib/constants/rootStackParamList.ts b/src/shared/lib/constants/rootStackParamList.ts index 09104590c..b49c7a189 100644 --- a/src/shared/lib/constants/rootStackParamList.ts +++ b/src/shared/lib/constants/rootStackParamList.ts @@ -30,6 +30,7 @@ type IRootStackParamList = { [SCREENS.KeyboardAwareScrollViewTabs]: undefined [SCREENS.KeyboardAwareScrollViewWithTabs]: undefined [SCREENS.KeyboardAwareScrollViewWithBottomAndTabs]: undefined + [SCREENS.DragAndDrop]: undefined } export default IRootStackParamList diff --git a/src/shared/lib/constants/screens.ts b/src/shared/lib/constants/screens.ts index 6132b346c..cad67024a 100644 --- a/src/shared/lib/constants/screens.ts +++ b/src/shared/lib/constants/screens.ts @@ -27,4 +27,5 @@ export enum SCREENS { KeyboardAwareScrollViewTabs= 'KeyboardAwareScrollViewTabsScreen', KeyboardAwareScrollViewWithTabs= 'KeyboardAwareScrollViewWithTabs', KeyboardAwareScrollViewWithBottomAndTabs = 'KeyboardAwareScrollViewWithBottomAndTabs', + DragAndDrop = 'DragAndDrop', }