diff --git a/babel.config.js b/babel.config.js index f842b77f..65314945 100644 --- a/babel.config.js +++ b/babel.config.js @@ -1,3 +1,7 @@ -module.exports = { - presets: ['module:metro-react-native-babel-preset'], -}; +module.exports = function (api) { + api.cache(true) + return { + presets: ['module:metro-react-native-babel-preset'], + plugins: ['react-native-reanimated/plugin'], + } +} diff --git a/ios/Podfile.lock b/ios/Podfile.lock index 34b5443a..d43ca2ee 100644 --- a/ios/Podfile.lock +++ b/ios/Podfile.lock @@ -10,7 +10,7 @@ PODS: - React-jsi (= 0.64.3) - ReactCommon/turbomodule/core (= 0.64.3) - glog (0.3.5) - - OneSignal (3.10.0) + - OneSignal (3.10.1) - OneSignalXCFramework (3.10.0) - Permission-Camera (3.2.0): - RNPermissions @@ -317,6 +317,34 @@ PODS: - TOCropViewController - RNPermissions (3.2.0): - React-Core + - RNReanimated (2.4.1): + - DoubleConversion + - FBLazyVector + - FBReactNativeSpec + - glog + - RCT-Folly + - RCTRequired + - RCTTypeSafety + - React + - React-callinvoker + - React-Core + - React-Core/DevSupport + - React-Core/RCTWebSocket + - React-CoreModules + - React-cxxreact + - React-jsi + - React-jsiexecutor + - React-jsinspector + - React-RCTActionSheet + - React-RCTAnimation + - React-RCTBlob + - React-RCTImage + - React-RCTLinking + - React-RCTNetwork + - React-RCTSettings + - React-RCTText + - ReactCommon/turbomodule/core + - Yoga - RNScreens (3.6.0): - React-Core - React-RCTImage @@ -324,7 +352,7 @@ PODS: - React - RNVectorIcons (8.0.0): - React-Core - - TOCropViewController (2.6.0) + - TOCropViewController (2.6.1) - Yoga (1.14.0) DEPENDENCIES: @@ -378,6 +406,7 @@ DEPENDENCIES: - RNGestureHandler (from `../node_modules/react-native-gesture-handler`) - RNImageCropPicker (from `../node_modules/react-native-image-crop-picker`) - RNPermissions (from `../node_modules/react-native-permissions`) + - RNReanimated (from `../node_modules/react-native-reanimated`) - RNScreens (from `../node_modules/react-native-screens`) - RNSVG (from `../node_modules/react-native-svg`) - RNVectorIcons (from `../node_modules/react-native-vector-icons`) @@ -485,6 +514,8 @@ EXTERNAL SOURCES: :path: "../node_modules/react-native-image-crop-picker" RNPermissions: :path: "../node_modules/react-native-permissions" + RNReanimated: + :path: "../node_modules/react-native-reanimated" RNScreens: :path: "../node_modules/react-native-screens" RNSVG: @@ -500,7 +531,7 @@ SPEC CHECKSUMS: FBLazyVector: c71c5917ec0ad2de41d5d06a5855f6d5eda06971 FBReactNativeSpec: 50ac84ed135478e1b20e25b4c165cd57b2ce1988 glog: 73c2498ac6884b13ede40eda8228cb1eee9d9d62 - OneSignal: 198da4de73fb7bd6e45bc04221a7f16efca057ad + OneSignal: ce7e3c514b016b98211b3d0458de156b8cc82aec OneSignalXCFramework: 10648e60ff3d335fbffa62d9b44b700b56d49b51 Permission-Camera: 9eb618fd601ae4a674b072c3b0d37f109d7b91e5 Permission-PhotoLibrary: 900e7e33012bd5e02e5859cb65d5bb2134259c64 @@ -545,10 +576,11 @@ SPEC CHECKSUMS: RNGestureHandler: a479ebd5ed4221a810967000735517df0d2db211 RNImageCropPicker: 448d3c6e923fde3466b49caf3c2457c2a0ba02dd RNPermissions: bf844d392fe0ecbfbd2e4ae2b88cc32f2f09b369 + RNReanimated: 58e7b950e0172235ff8296dd39ec145f9577e301 RNScreens: eb0dfb2d6b21d2d7f980ad46b14eb306d2f1062e RNSVG: 8ba35cbeb385a52fd960fd28db9d7d18b4c2974f RNVectorIcons: f67a1abce2ec73e62fe4606e8110e95a832bc859 - TOCropViewController: 3105367e808b7d3d886a74ff59bf4804e7d3ab38 + TOCropViewController: edfd4f25713d56905ad1e0b9f5be3fbe0f59c863 Yoga: e6ecf3fa25af9d4c87e94ad7d5d292eedef49749 PODFILE CHECKSUM: 39216d0b0cefabcff3ab72e7003b18f6ef39a19e diff --git a/ios/taskme.xcodeproj/project.pbxproj b/ios/taskme.xcodeproj/project.pbxproj index 77a7e8ec..e99e021e 100644 --- a/ios/taskme.xcodeproj/project.pbxproj +++ b/ios/taskme.xcodeproj/project.pbxproj @@ -763,7 +763,7 @@ CODE_SIGN_ENTITLEMENTS = taskme/taskme.entitlements; CODE_SIGN_IDENTITY = "Apple Development"; CODE_SIGN_STYLE = Automatic; - CURRENT_PROJECT_VERSION = 57; + CURRENT_PROJECT_VERSION = 58; DEVELOPMENT_TEAM = HQ3J3TDPR2; ENABLE_BITCODE = NO; "EXCLUDED_ARCHS[sdk=iphonesimulator*]" = ""; @@ -801,7 +801,7 @@ CODE_SIGN_ENTITLEMENTS = taskme/taskme.entitlements; CODE_SIGN_IDENTITY = "Apple Development"; CODE_SIGN_STYLE = Automatic; - CURRENT_PROJECT_VERSION = 57; + CURRENT_PROJECT_VERSION = 58; DEVELOPMENT_TEAM = HQ3J3TDPR2; ENABLE_BITCODE = NO; "EXCLUDED_ARCHS[sdk=iphonesimulator*]" = ""; diff --git a/package-lock.json b/package-lock.json index 5b43fd1f..41dd7868 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1568,6 +1568,25 @@ "hoist-non-react-statics": "^3.3.0" } }, + "@gorhom/bottom-sheet": { + "version": "4.1.5", + "resolved": "https://registry.npmjs.org/@gorhom/bottom-sheet/-/bottom-sheet-4.1.5.tgz", + "integrity": "sha512-3F5P8jK3NXwT2lGwkAdkdLwDVHaRvMZalUTXjK6Ogf0Tki6idffJ3TNlQZlg8k6+OnXAx0+i80f4XaI+J4GFrA==", + "requires": { + "@gorhom/portal": "^1.0.11", + "invariant": "^2.2.4", + "nanoid": "^3.1.20", + "react-native-redash": "^16.1.1" + } + }, + "@gorhom/portal": { + "version": "1.0.12", + "resolved": "https://registry.npmjs.org/@gorhom/portal/-/portal-1.0.12.tgz", + "integrity": "sha512-JOYe85RUwiksgdMbhLWDCLpH3kgFFz+LCu1lnxOMMBQSfAKtL5kkTKVrhtmQ3Lq3lJM2paGnLc4wJrlVuaC5Jw==", + "requires": { + "nanoid": "^3.1.23" + } + }, "@hapi/hoek": { "version": "9.2.1", "resolved": "https://registry.npmjs.org/@hapi/hoek/-/hoek-9.2.1.tgz", @@ -2435,6 +2454,11 @@ "hoist-non-react-statics": "^3.3.0" } }, + "@types/invariant": { + "version": "2.2.35", + "resolved": "https://registry.npmjs.org/@types/invariant/-/invariant-2.2.35.tgz", + "integrity": "sha512-DxX1V9P8zdJPYQat1gHyY0xj3efl8gnMVjiM9iCY6y27lj+PoQWkgjt8jDqmovPqULkKVpKRg8J36iQiA+EtEg==" + }, "@types/istanbul-lib-coverage": { "version": "2.0.3", "resolved": "https://registry.npmjs.org/@types/istanbul-lib-coverage/-/istanbul-lib-coverage-2.0.3.tgz", @@ -2698,8 +2722,7 @@ "abs-svg-path": { "version": "0.1.1", "resolved": "https://registry.npmjs.org/abs-svg-path/-/abs-svg-path-0.1.1.tgz", - "integrity": "sha1-32Acjo0roQ1KdtYl4japo5wnI78=", - "dev": true + "integrity": "sha1-32Acjo0roQ1KdtYl4japo5wnI78=" }, "absolute-path": { "version": "0.0.0", @@ -8014,6 +8037,11 @@ "integrity": "sha512-gKLcREMhtuZRwRAfqP3RFW+TK4JqApVBtOIftVgjuABpAtpxhPGaDcfvbhNvD0B8iD1oUr/txX35NjcaY6Ns/A==", "dev": true }, + "mockdate": { + "version": "3.0.5", + "resolved": "https://registry.npmjs.org/mockdate/-/mockdate-3.0.5.tgz", + "integrity": "sha512-iniQP4rj1FhBdBYS/+eQv7j1tadJ9lJtdzgOpvsOHng/GbcDh2Fhdeq+ZRldrPYdXvCyfFUmFeEwEGXZB5I/AQ==" + }, "moment": { "version": "2.29.1", "resolved": "https://registry.npmjs.org/moment/-/moment-2.29.1.tgz", @@ -8227,7 +8255,6 @@ "version": "1.1.0", "resolved": "https://registry.npmjs.org/normalize-svg-path/-/normalize-svg-path-1.1.0.tgz", "integrity": "sha512-r9KHKG2UUeB5LoTouwDzBy2VxXlHsiM6fyLQvnJa0S5hrhzqElH/CH7TUGhT1fVvIYBIKf3OpY4YJ4CK+iaqHg==", - "dev": true, "requires": { "svg-arc-to-cubic-bezier": "^3.0.0" } @@ -8592,8 +8619,7 @@ "parse-svg-path": { "version": "0.1.2", "resolved": "https://registry.npmjs.org/parse-svg-path/-/parse-svg-path-0.1.2.tgz", - "integrity": "sha1-en7A0esG+lMlx9PgCbhZoJtdSes=", - "dev": true + "integrity": "sha1-en7A0esG+lMlx9PgCbhZoJtdSes=" }, "parse5": { "version": "6.0.1", @@ -9318,6 +9344,30 @@ "resolved": "https://registry.npmjs.org/react-native-raw-bottom-sheet/-/react-native-raw-bottom-sheet-2.2.0.tgz", "integrity": "sha512-qL4JKIqvbcVxbkKzeh51hjV7suoJN3ouxzvLmOg0FBUV1yiJAfEbacjQdtRCI6+OU5pyGFBIifLsTXcFDwHggg==" }, + "react-native-reanimated": { + "version": "2.4.1", + "resolved": "https://registry.npmjs.org/react-native-reanimated/-/react-native-reanimated-2.4.1.tgz", + "integrity": "sha512-kvf7ylGlwa5hxMQ+wpPFjQrI2c6eexf53/xRo+dvXBNefGmSYaYR5sFtD0XMMzIPQlkCB9tJ0Pu9+2WCQUY7Cg==", + "requires": { + "@babel/plugin-transform-object-assign": "^7.10.4", + "@types/invariant": "^2.2.35", + "invariant": "^2.2.4", + "lodash.isequal": "^4.5.0", + "mockdate": "^3.0.2", + "react-native-screens": "^3.4.0", + "string-hash-64": "^1.0.3" + } + }, + "react-native-redash": { + "version": "16.2.3", + "resolved": "https://registry.npmjs.org/react-native-redash/-/react-native-redash-16.2.3.tgz", + "integrity": "sha512-vSjHA6/mBY3IpDYPish3DlG06PKNLkb/b89hw7nsDM3yxAJ7Db+yMnEL3pp2YsoYblDc3s+0+wBRlvxay4X4vQ==", + "requires": { + "abs-svg-path": "^0.1.1", + "normalize-svg-path": "^1.0.1", + "parse-svg-path": "^0.1.2" + } + }, "react-native-restart": { "version": "0.0.24", "resolved": "https://registry.npmjs.org/react-native-restart/-/react-native-restart-0.0.24.tgz", @@ -10690,6 +10740,11 @@ "resolved": "https://registry.npmjs.org/strict-uri-encode/-/strict-uri-encode-2.0.0.tgz", "integrity": "sha1-ucczDHBChi9rFC3CdLvMWGbONUY=" }, + "string-hash-64": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/string-hash-64/-/string-hash-64-1.0.3.tgz", + "integrity": "sha512-D5OKWKvDhyVWWn2x5Y9b+37NUllks34q1dCDhk/vYcso9fmhs+Tl3KR/gE4v5UNj2UA35cnX4KdVVGkG1deKqw==" + }, "string-length": { "version": "4.0.2", "resolved": "https://registry.npmjs.org/string-length/-/string-length-4.0.2.tgz", @@ -10848,8 +10903,7 @@ "svg-arc-to-cubic-bezier": { "version": "3.2.0", "resolved": "https://registry.npmjs.org/svg-arc-to-cubic-bezier/-/svg-arc-to-cubic-bezier-3.2.0.tgz", - "integrity": "sha512-djbJ/vZKZO+gPoSDThGNpKDO+o+bAeA4XQKovvkNCqnIS2t+S4qnLAGQhyyrulhCFRl1WWzAp0wUDV8PpTVU3g==", - "dev": true + "integrity": "sha512-djbJ/vZKZO+gPoSDThGNpKDO+o+bAeA4XQKovvkNCqnIS2t+S4qnLAGQhyyrulhCFRl1WWzAp0wUDV8PpTVU3g==" }, "svg-parser": { "version": "2.0.4", diff --git a/package.json b/package.json index 45b78f82..03133759 100644 --- a/package.json +++ b/package.json @@ -15,6 +15,7 @@ "dependencies": { "@bitalikrty/redux-create-reducer": "^1.0.0", "@expo/react-native-action-sheet": "^3.13.0", + "@gorhom/bottom-sheet": "^4.1.5", "@react-native-async-storage/async-storage": "^1.15.8", "@react-native-community/netinfo": "^6.2.1", "@react-native-community/push-notification-ios": "^1.10.1", @@ -56,6 +57,7 @@ "react-native-pager-view": "^5.4.4", "react-native-permissions": "^3.2.0", "react-native-raw-bottom-sheet": "^2.2.0", + "react-native-reanimated": "^2.4.1", "react-native-restart": "0.0.24", "react-native-safe-area-context": "^3.3.0", "react-native-screens": "^3.6.0", @@ -82,6 +84,7 @@ "@react-native-community/eslint-config": "^2.0.0", "@types/lodash": "^4.14.171", "@types/react-native": "^0.64.12", + "babel-core": "^7.0.0-bridge.0", "babel-jest": "^26.6.3", "babel-plugin-inline-import": "^3.0.0", "babel-plugin-module-resolver": "^4.1.0", diff --git a/src/App.tsx b/src/App.tsx index 8f2e5885..7b2b3ec0 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -9,6 +9,8 @@ import { LogBox } from 'react-native' import { appService } from './services/app.service' import { NetworkProvider } from 'react-native-offline' import { ActionSheetProvider } from '@expo/react-native-action-sheet' +import 'react-native-gesture-handler' +import { BottomSheetModalProvider } from '@gorhom/bottom-sheet' LogBox.ignoreLogs(['Warning: ...', 'Require cycle: ...']) // Ignore log notification by message LogBox.ignoreAllLogs() //Ignore all log notifications @@ -24,7 +26,9 @@ const App: FC = () => { - + + + diff --git a/src/modules/taxonomies/smart-components/select-taxonomies-modal/index.tsx b/src/modules/taxonomies/smart-components/select-taxonomies-modal/index.tsx index 4c91d453..44a17c0a 100644 --- a/src/modules/taxonomies/smart-components/select-taxonomies-modal/index.tsx +++ b/src/modules/taxonomies/smart-components/select-taxonomies-modal/index.tsx @@ -1,4 +1,4 @@ -import React, { useEffect, useMemo, useRef, useState } from 'react' +import React, { useCallback, useMemo, useRef, useState } from 'react' import _ from 'lodash' import { View, @@ -7,7 +7,6 @@ import { FlatList, TouchableOpacity, Dimensions, - Alert, } from 'react-native' import RBSheet from 'react-native-raw-bottom-sheet' import { @@ -18,7 +17,6 @@ import { SearchForm, Txt, useEventsListener, - useKeyboard, useTheme, } from '@/shared' import { useSelector } from 'react-redux' @@ -27,6 +25,11 @@ import { selectReasonTaxonomies, } from '@/store/taxonomies' import { PartialTheme } from '@/shared/themes/interfaces' +import { + BottomSheetBackdrop, + BottomSheetModal, + BottomSheetTextInput, +} from '@gorhom/bottom-sheet' const screenHeight = Dimensions.get('screen').height @@ -43,11 +46,12 @@ const selectors = { export const SelectTaxonomiesModalSmart = () => { const { styles } = useTheme(createStyles) - const sheetRef = useRef(null) + const sheetRef = useRef(null) const settingsRef = useRef({ callback: null }) const [type, setType] = useState('groups') + const [isFocus, setFocus] = useState(false) - const [modalHeight, setModalHeight] = useState(screenHeight - $size(250)) + const [modalHeight, setModalHeight] = useState(screenHeight - $size(150)) const [selectedItem, selectItem] = useState({} as any) const [searchString, setsearchString] = useState() @@ -77,7 +81,7 @@ export const SelectTaxonomiesModalSmart = () => { setType(_.defaultTo(data.type, 'groups')) selectItem(data.selectedOption) - sheetRef.current.open() + sheetRef.current.present() } catch (e) { console.log(e) } @@ -88,7 +92,6 @@ export const SelectTaxonomiesModalSmart = () => { const onClose = () => { selectItem({} as any) setsearchString('') - setModalHeight(screenHeight - $size(250)) } const confirm = () => { @@ -133,34 +136,41 @@ export const SelectTaxonomiesModalSmart = () => { searchValue={searchString} placeholder="Пошук" onChange={setsearchString} - onFocus={() => - setModalHeight(screenHeight - 220 - $size(100)) - } - onBlur={() => setModalHeight(screenHeight - $size(250))} + onFocus={() => setFocus(true)} + onBlur={() => setFocus(false)} paddingHorizontal={0} borderBottom={false} + customInputComponent={BottomSheetTextInput} /> ) } + const renderBackdrop = useCallback( + props => ( + + ), + [], + ) + return ( - + snapPoints={[modalHeight]} + backgroundStyle={[ + styles.container, + isFocus ? styles.containerFocus : null, + ]} + backdropComponent={renderBackdrop} + keyboardBehavior="fillParent" + keyboardBlurBehavior="restore" + handleIndicatorStyle={isFocus ? { display: 'none' } : null}> { ListHeaderComponent={renderHeader()} stickyHeaderIndices={[0]} showsVerticalScrollIndicator={false} + contentContainerStyle={styles.listContent} /> -