diff --git a/android/app/build.gradle b/android/app/build.gradle index 7ed5903..547be53 100644 --- a/android/app/build.gradle +++ b/android/app/build.gradle @@ -78,7 +78,7 @@ import com.android.build.OutputFile */ project.ext.react = [ - enableHermes: false, // clean and rebuild if changing + enableHermes: true, // clean and rebuild if changing ] apply from: "../../node_modules/react-native/react.gradle" diff --git a/android/app/src/main/java/com/topping/MainApplication.java b/android/app/src/main/java/com/topping/MainApplication.java index db393f8..dd74809 100644 --- a/android/app/src/main/java/com/topping/MainApplication.java +++ b/android/app/src/main/java/com/topping/MainApplication.java @@ -8,6 +8,8 @@ import com.facebook.react.ReactNativeHost; import com.facebook.react.ReactPackage; import com.facebook.soloader.SoLoader; +import com.facebook.react.bridge.JSIModulePackage; +import com.swmansion.reanimated.ReanimatedJSIModulePackage; import java.lang.reflect.InvocationTargetException; import java.util.List; @@ -33,6 +35,11 @@ protected List getPackages() { protected String getJSMainModuleName() { return "index"; } + + @Override + protected JSIModulePackage getJSIModulePackage() { + return new ReanimatedJSIModulePackage(); // <- add + } }; @Override diff --git a/babel.config.js b/babel.config.js index f3d9a90..946edc5 100644 --- a/babel.config.js +++ b/babel.config.js @@ -38,6 +38,7 @@ module.exports = { ], // ['@babel/plugin-proposal-class-properties', { loose: true }], // Cannot use with storybook ['transform-inline-environment-variables'], + 'react-native-reanimated/plugin' ], env: { production: { diff --git a/package.json b/package.json index e7a6dd6..fee40b4 100644 --- a/package.json +++ b/package.json @@ -19,6 +19,7 @@ }, "dependencies": { "@expo/react-native-action-sheet": "^3.8.0", + "@gorhom/bottom-sheet": "^4", "@react-native-community/async-storage": "1.12.1", "@react-navigation/bottom-tabs": "6.0.0-next.17", "@react-navigation/material-top-tabs": "6.0.0-next.14", @@ -28,6 +29,7 @@ "react": "17.0.1", "react-native": "0.64.2", "react-native-gesture-handler": "^1.10.3", + "react-native-reanimated": "2.2.4", "react-native-safe-area-context": "^3.2.0", "react-native-screens": "^3.1.1", "react-native-size-matters": "0.4.0", diff --git a/src/components/atoms/PublicBottomSheet.stories.tsx b/src/components/atoms/PublicBottomSheet.stories.tsx new file mode 100644 index 0000000..5c7f41e --- /dev/null +++ b/src/components/atoms/PublicBottomSheet.stories.tsx @@ -0,0 +1,23 @@ +import {action} from '@storybook/addon-actions'; +import {withKnobs} from '@storybook/addon-knobs'; +import {storiesOf} from '@storybook/react-native'; +import React from 'react'; +import {View, StyleSheet} from 'react-native'; +import {colors, maxScale} from '~/constants/theme'; +import PublicBottomSheet from './PublicBottomSheet'; + +storiesOf('components|atoms', module) + .addDecorator(withKnobs) + .add('PublicBottomSheet', () => ( + + {/* 기본 버튼 - disabled */} + + + )); + +const styles = StyleSheet.create({ + container: { + flex: 1, + justifyContent: 'space-around', + }, +}); diff --git a/src/components/atoms/PublicBottomSheet.tsx b/src/components/atoms/PublicBottomSheet.tsx new file mode 100644 index 0000000..c91c479 --- /dev/null +++ b/src/components/atoms/PublicBottomSheet.tsx @@ -0,0 +1,49 @@ +import React, { useCallback, useMemo, useRef } from 'react'; +import { + StyleSheet, + View, + Text +} from 'react-native'; +import BottomSheet from '@gorhom/bottom-sheet'; +import {colors, maxScale} from '~/constants/theme'; + +export interface Props{} + +const PublicBottomSheet = (props: Props) => { + // ref + const bottomSheetRef = useRef(null); + + // variables + const snapPoints = useMemo(() => ['25%', '50%'], []); + + // callbacks + const handleSheetChanges = useCallback((index: number) => { + console.log('handleSheetChanges', index); + }, []); + return ( + + + Awesome 🎉 + + + ); +}; + +export default PublicBottomSheet; + +const styles = StyleSheet.create({ + container: { + flex: 1, + padding: 24, + backgroundColor: 'grey', + }, + contentContainer: { + flex: 1, + alignItems: 'center', + }, +}); diff --git a/storybook/storyLoader.js b/storybook/storyLoader.js index 322c062..fd79abc 100644 --- a/storybook/storyLoader.js +++ b/storybook/storyLoader.js @@ -7,6 +7,7 @@ function loadStories() { require('../src/components/atoms/IconButton.stories'); require('../src/components/atoms/PublicButton.stories'); require('../src/components/atoms/PublicTextInput.stories'); + require('../src/components/atoms/PublicBottomSheet.stories'); require('../src/components/molecules/MainButton.stories'); require('../src/components/molecules/PublicHeader.stories'); require('../src/components/molecules/RegisterInput.stories'); @@ -19,6 +20,7 @@ const stories = [ '../src/components/atoms/IconButton.stories', '../src/components/atoms/PublicButton.stories', '../src/components/atoms/PublicTextInput.stories', + '../src/components/atoms/PublicBottomSheet.stories', '../src/components/molecules/MainButton.stories', '../src/components/molecules/PublicHeader.stories', '../src/components/molecules/RegisterInput.stories', diff --git a/yarn.lock b/yarn.lock index e315cd4..5bdcdb6 100644 --- a/yarn.lock +++ b/yarn.lock @@ -235,6 +235,11 @@ resolved "https://registry.yarnpkg.com/@babel/helper-plugin-utils/-/helper-plugin-utils-7.14.5.tgz#5ac822ce97eec46741ab70a517971e443a70c5a9" integrity sha512-/37qQCE3K0vvZKwoK4XU/irIJQdIfCJuhU5eKnNxpFDsOkgFaUAwbv+RYw6eYgsC0E4hS7r5KqGULUogqui0fQ== +"@babel/helper-plugin-utils@^7.16.5": + version "7.16.5" + resolved "https://registry.yarnpkg.com/@babel/helper-plugin-utils/-/helper-plugin-utils-7.16.5.tgz#afe37a45f39fce44a3d50a7958129ea5b1a5c074" + integrity sha512-59KHWHXxVA9K4HNF4sbHCf+eJeFe0Te/ZFGqBT4OjXhrwvA04sGfaEGsVTdsjoszq0YTP49RC9UKe5g8uN2RwQ== + "@babel/helper-remap-async-to-generator@^7.14.5", "@babel/helper-remap-async-to-generator@^7.15.4": version "7.15.4" resolved "https://registry.yarnpkg.com/@babel/helper-remap-async-to-generator/-/helper-remap-async-to-generator-7.15.4.tgz#2637c0731e4c90fbf58ac58b50b2b5a192fc970f" @@ -811,6 +816,13 @@ dependencies: "@babel/helper-plugin-utils" "^7.14.5" +"@babel/plugin-transform-object-assign@^7.10.4": + version "7.16.5" + resolved "https://registry.yarnpkg.com/@babel/plugin-transform-object-assign/-/plugin-transform-object-assign-7.16.5.tgz#8d35b2fd1a4a545aed1f8289680d6d38e57d9f6e" + integrity sha512-KVuJ7sWf6bcXawKVH6ZDQFYcOulObt1IOvl/gvNrkNXzmFf1IdgKOy4thmVomReleXqffMbptmXXMl3zPI7zHw== + dependencies: + "@babel/helper-plugin-utils" "^7.16.5" + "@babel/plugin-transform-object-super@^7.0.0", "@babel/plugin-transform-object-super@^7.14.5": version "7.14.5" resolved "https://registry.yarnpkg.com/@babel/plugin-transform-object-super/-/plugin-transform-object-super-7.14.5.tgz#d0b5faeac9e98597a161a9cf78c527ed934cdc45" @@ -1320,6 +1332,23 @@ resolved "https://registry.yarnpkg.com/@gar/promisify/-/promisify-1.1.2.tgz#30aa825f11d438671d585bd44e7fd564535fc210" integrity sha512-82cpyJyKRoQoRi+14ibCeGPu0CwypgtBAdBhq1WfvagpCZNKqwXbKwXllYSMG91DhmG4jt9gN8eP6lGOtozuaw== +"@gorhom/bottom-sheet@^4": + version "4.1.5" + resolved "https://registry.yarnpkg.com/@gorhom/bottom-sheet/-/bottom-sheet-4.1.5.tgz#35341d45799de28082c380db6639537b04fa0b26" + integrity sha512-3F5P8jK3NXwT2lGwkAdkdLwDVHaRvMZalUTXjK6Ogf0Tki6idffJ3TNlQZlg8k6+OnXAx0+i80f4XaI+J4GFrA== + dependencies: + "@gorhom/portal" "^1.0.11" + invariant "^2.2.4" + nanoid "^3.1.20" + react-native-redash "^16.1.1" + +"@gorhom/portal@^1.0.11": + version "1.0.11" + resolved "https://registry.yarnpkg.com/@gorhom/portal/-/portal-1.0.11.tgz#4224d45fea25e70d7e55af3b67249bad0ac9359b" + integrity sha512-Vrh2hAVp8ZToJ1a1NbYnehNzdJTxJv1BF3vMNbz1pnJIqm0nbi2W51piVvfiqohCDAegOyCCH1j/AEhW2cJYTA== + dependencies: + nanoid "^3.1.23" + "@hapi/hoek@^9.0.0": version "9.2.1" resolved "https://registry.yarnpkg.com/@hapi/hoek/-/hoek-9.2.1.tgz#9551142a1980503752536b5050fd99f4a7f13b17" @@ -3580,6 +3609,11 @@ abort-controller@^3.0.0: dependencies: event-target-shim "^5.0.0" +abs-svg-path@^0.1.1: + version "0.1.1" + resolved "https://registry.yarnpkg.com/abs-svg-path/-/abs-svg-path-0.1.1.tgz#df601c8e8d2ba10d4a76d625e236a9a39c2723bf" + integrity sha1-32Acjo0roQ1KdtYl4japo5wnI78= + absolute-path@^0.0.0: version "0.0.0" resolved "https://registry.yarnpkg.com/absolute-path/-/absolute-path-0.0.0.tgz#a78762fbdadfb5297be99b15d35a785b2f095bf7" @@ -10213,6 +10247,11 @@ mkdirp@^0.5.1, mkdirp@^0.5.3: dependencies: minimist "^1.2.5" +mockdate@^3.0.2: + version "3.0.5" + resolved "https://registry.yarnpkg.com/mockdate/-/mockdate-3.0.5.tgz#789be686deb3149e7df2b663d2bc4392bc3284fb" + integrity sha512-iniQP4rj1FhBdBYS/+eQv7j1tadJ9lJtdzgOpvsOHng/GbcDh2Fhdeq+ZRldrPYdXvCyfFUmFeEwEGXZB5I/AQ== + move-concurrently@^1.0.1: version "1.0.1" resolved "https://registry.yarnpkg.com/move-concurrently/-/move-concurrently-1.0.1.tgz#be2c005fda32e0b29af1f05d7c4b33214c701f92" @@ -10260,7 +10299,7 @@ nan@^2.12.1: resolved "https://registry.yarnpkg.com/nan/-/nan-2.15.0.tgz#3f34a473ff18e15c1b5626b62903b5ad6e665fee" integrity sha512-8ZtvEnA2c5aYCZYd1cvgdnU6cqwixRoYg70xPLWUws5ORTa/lnw+u4amixRS/Ac5U5mQVgp9pnlSUnbNWFaWZQ== -nanoid@^3.1.22, nanoid@^3.1.23: +nanoid@^3.1.20, nanoid@^3.1.22, nanoid@^3.1.23: version "3.1.30" resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.1.30.tgz#63f93cc548d2a113dc5dfbc63bfa09e2b9b64362" integrity sha512-zJpuPDwOv8D2zq2WRoMe1HsfZthVewpel9CAvTfc/2mBD1uUT/agc5f7GHGWXlYkFvi1mVxe4IjvP2HNrop7nQ== @@ -10432,6 +10471,13 @@ normalize-range@^0.1.2: resolved "https://registry.yarnpkg.com/normalize-range/-/normalize-range-0.1.2.tgz#2d10c06bdfd312ea9777695a4d28439456b75942" integrity sha1-LRDAa9/TEuqXd2laTShDlFa3WUI= +normalize-svg-path@^1.0.1: + version "1.1.0" + resolved "https://registry.yarnpkg.com/normalize-svg-path/-/normalize-svg-path-1.1.0.tgz#0e614eca23c39f0cffe821d6be6cd17e569a766c" + integrity sha512-r9KHKG2UUeB5LoTouwDzBy2VxXlHsiM6fyLQvnJa0S5hrhzqElH/CH7TUGhT1fVvIYBIKf3OpY4YJ4CK+iaqHg== + dependencies: + svg-arc-to-cubic-bezier "^3.0.0" + npm-run-path@^2.0.0: version "2.0.2" resolved "https://registry.yarnpkg.com/npm-run-path/-/npm-run-path-2.0.2.tgz#35a9232dfa35d7067b4cb2ddf2357b1871536c5f" @@ -10897,6 +10943,11 @@ parse-json@^5.0.0: json-parse-even-better-errors "^2.3.0" lines-and-columns "^1.1.6" +parse-svg-path@^0.1.2: + version "0.1.2" + resolved "https://registry.yarnpkg.com/parse-svg-path/-/parse-svg-path-0.1.2.tgz#7a7ec0d1eb06fa5325c7d3e009b859a09b5d49eb" + integrity sha1-en7A0esG+lMlx9PgCbhZoJtdSes= + parse5@6.0.1, parse5@^6.0.0: version "6.0.1" resolved "https://registry.yarnpkg.com/parse5/-/parse5-6.0.1.tgz#e1a1c085c569b3dc08321184f19a39cc27f7c30b" @@ -11789,6 +11840,25 @@ react-native-modal@^11.0.2: prop-types "^15.6.2" react-native-animatable "1.3.3" +react-native-reanimated@2.2.4: + version "2.2.4" + resolved "https://registry.yarnpkg.com/react-native-reanimated/-/react-native-reanimated-2.2.4.tgz#36c5d15028b0bd7d479fba5199117ac870c7a532" + integrity sha512-Nn648MfEEnTCEiWsl1YmfkojiLyV0NMY0EiRdDRbZNfJVfxBuyqhCxI/4Jd7aBi162qpgf8XK2mByYgvF4zLrQ== + dependencies: + "@babel/plugin-transform-object-assign" "^7.10.4" + fbjs "^3.0.0" + mockdate "^3.0.2" + string-hash-64 "^1.0.3" + +react-native-redash@^16.1.1: + version "16.2.3" + resolved "https://registry.yarnpkg.com/react-native-redash/-/react-native-redash-16.2.3.tgz#ee63e100c60f83275116e57d4e8bc79f26349db9" + integrity sha512-vSjHA6/mBY3IpDYPish3DlG06PKNLkb/b89hw7nsDM3yxAJ7Db+yMnEL3pp2YsoYblDc3s+0+wBRlvxay4X4vQ== + dependencies: + abs-svg-path "^0.1.1" + normalize-svg-path "^1.0.1" + parse-svg-path "^0.1.2" + react-native-safe-area-context@^3.2.0: version "3.3.2" resolved "https://registry.yarnpkg.com/react-native-safe-area-context/-/react-native-safe-area-context-3.3.2.tgz#9549a2ce580f2374edb05e49d661258d1b8bcaed" @@ -13112,6 +13182,11 @@ strict-uri-encode@^2.0.0: resolved "https://registry.yarnpkg.com/strict-uri-encode/-/strict-uri-encode-2.0.0.tgz#b9c7330c7042862f6b142dc274bbcc5866ce3546" integrity sha1-ucczDHBChi9rFC3CdLvMWGbONUY= +string-hash-64@^1.0.3: + version "1.0.3" + resolved "https://registry.yarnpkg.com/string-hash-64/-/string-hash-64-1.0.3.tgz#0deb56df58678640db5c479ccbbb597aaa0de322" + integrity sha512-D5OKWKvDhyVWWn2x5Y9b+37NUllks34q1dCDhk/vYcso9fmhs+Tl3KR/gE4v5UNj2UA35cnX4KdVVGkG1deKqw== + string-length@^4.0.1: version "4.0.2" resolved "https://registry.yarnpkg.com/string-length/-/string-length-4.0.2.tgz#a8a8dc7bd5c1a82b9b3c8b87e125f66871b6e57a" @@ -13315,6 +13390,11 @@ supports-hyperlinks@^2.0.0: has-flag "^4.0.0" supports-color "^7.0.0" +svg-arc-to-cubic-bezier@^3.0.0: + version "3.2.0" + resolved "https://registry.yarnpkg.com/svg-arc-to-cubic-bezier/-/svg-arc-to-cubic-bezier-3.2.0.tgz#390c450035ae1c4a0104d90650304c3bc814abe6" + integrity sha512-djbJ/vZKZO+gPoSDThGNpKDO+o+bAeA4XQKovvkNCqnIS2t+S4qnLAGQhyyrulhCFRl1WWzAp0wUDV8PpTVU3g== + symbol-tree@^3.2.4: version "3.2.4" resolved "https://registry.yarnpkg.com/symbol-tree/-/symbol-tree-3.2.4.tgz#430637d248ba77e078883951fb9aa0eed7c63fa2"