@fountain-ui/core 1.16.0 → 1.17.0

package/CHANGELOG.md

@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [1.17.0](https://github.com/tappytoon/tappytoon/compare/@fountain-ui/core@1.11.0...@fountain-ui/core@1.17.0) (2022-03-21)
+
+**Note:** Version bump only for package @fountain-ui/core
+
+
+
+
+
 # [1.16.0](https://github.com/tappytoon/tappytoon/compare/@fountain-ui/core@1.11.0...@fountain-ui/core@1.16.0) (2022-03-07)
 
 **Note:** Version bump only for package @fountain-ui/core

package/build/commonjs/hooks/useCollapsibleAppBar.js

@@ -22,6 +22,7 @@ var _useAppbarStyles = _interopRequireDefault(require("./useAppbarStyles"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 const defaultOptions = {
+  keyboardDismissMode: 'none',
   translucent: false
 };
 const ANIMATION_DURATION_MILLIS = 100;
@@ -29,7 +30,8 @@ const SUPPORTS_DRAG_DETECTION = _reactNative.Platform.OS !== 'web';
 
 function useCollapsibleAppBar(userOptions = defaultOptions) {
   const {
-    translucent
+    translucent,
+    keyboardDismissMode
   } = { ...defaultOptions,
     ...userOptions
   };
@@ -97,6 +99,10 @@ function useCollapsibleAppBar(userOptions = defaultOptions) {
 
   const scrollHandler = _reactNativeReanimated.default.useAnimatedScrollHandler({
     onBeginDrag: () => {
+      if (keyboardDismissMode === 'on-drag') {
+        _reactNativeReanimated.default.runOnJS(_reactNative.Keyboard.dismiss)();
+      }
+
       lastTranslateY.value = translateY.value;
     },
     onMomentumBegin: () => {

package/build/commonjs/hooks/useCollapsibleAppBar.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useCollapsibleAppBar.ts"],"names":["defaultOptions","translucent","ANIMATION_DURATION_MILLIS","SUPPORTS_DRAG_DETECTION","Platform","OS","useCollapsibleAppBar","userOptions","styles","safeAreaInsets","appBarHeight","onAppBarLayout","collapsibleToolbarHeight","onCollapsibleToolbarLayout","maxTranslateY","Animated","useDerivedValue","translateY","useSharedValue","lastTranslateY","lastOffsetY","overlapped","elevationStyle","animatedStyle","useAnimatedStyle","transform","value","boxShadow","elevation","shadowColor","shadowOffset","shadowRadius","shadowOpacity","indexRef","React","useRef","offsetsRef","onScrollViewChanged","nextIndex","prevIndex","current","savedOffsetY","withTiming","duration","scrollHandler","useAnimatedScrollHandler","onBeginDrag","onMomentumBegin","onScroll","event","offsetY","contentOffset","y","ty","maxTy","dy","Math","min","max","onEndDrag","onMomentumEnd","threshold","nextTranslateY","hasCollapsible","appBarStyle","paddingTop","top","undefined","floating","scrollContentInsets"],"mappings":"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","sourcesContent":["import React from 'react';\nimport { Falsy, Platform, RegisteredStyle, ScrollViewProps, ViewProps, ViewStyle } from 'react-native';\nimport Animated from 'react-native-reanimated';\nimport { useSafeAreaInsets } from 'react-native-safe-area-context';\nimport { useHeight } from '../internal/hooks';\nimport useElevationStyle from './useElevationStyle';\nimport useAppbarStyles from './useAppbarStyles';\n\ntype WebOnlyStyle = { boxShadow: any };\n\ntype ViewStyleProp = Array<ViewStyle | RegisteredStyle<ViewStyle> | WebOnlyStyle | Falsy>;\n\ntype OnScroll = ScrollViewProps['onScroll'];\n\ntype OnLayoutCallback = ViewProps['onLayout'];\n\nexport interface ContentInsets {\n    top?: number;\n    bottom?: number;\n    left?: number;\n    right?: number;\n}\n\nexport interface Options {\n    translucent?: boolean;\n}\n\nexport interface CollapsibleAppBar {\n    appBarStyle: ViewStyleProp;\n    onAppBarLayout: OnLayoutCallback;\n    onCollapsibleToolbarLayout: OnLayoutCallback;\n    onScroll: OnScroll;\n    onScrollViewChanged: (index: number) => void;\n    scrollContentInsets: ContentInsets;\n}\n\nconst defaultOptions: Required<Options> = {\n    translucent: false,\n};\n\nconst ANIMATION_DURATION_MILLIS = 100;\n\nconst SUPPORTS_DRAG_DETECTION = Platform.OS !== 'web';\n\nexport default function useCollapsibleAppBar(userOptions: Options = defaultOptions): CollapsibleAppBar {\n    const { translucent }: Required<Options> = {\n        ...defaultOptions,\n        ...userOptions,\n    };\n\n    const styles = useAppbarStyles();\n\n    const safeAreaInsets = useSafeAreaInsets();\n\n    const [appBarHeight, onAppBarLayout] = useHeight();\n    const [collapsibleToolbarHeight, onCollapsibleToolbarLayout] = useHeight();\n\n    const maxTranslateY = Animated.useDerivedValue(() => -collapsibleToolbarHeight);\n\n    const translateY = Animated.useSharedValue<number>(0);\n    const lastTranslateY = Animated.useSharedValue<number>(0);\n    const lastOffsetY = Animated.useSharedValue<number>(0);\n    const overlapped = Animated.useSharedValue<boolean>(false);\n\n    const elevationStyle = useElevationStyle(4);\n    const animatedStyle = Animated.useAnimatedStyle(() => {\n        return Platform.OS === 'web' ? ({\n            transform: [{ translateY: translateY.value }],\n            boxShadow: overlapped.value ? elevationStyle?.boxShadow : 0,\n        }) : ({\n            transform: [{ translateY: translateY.value }],\n            elevation: overlapped.value ? elevationStyle?.elevation : 0,\n            shadowColor: elevationStyle?.shadowColor,\n            shadowOffset: elevationStyle?.shadowOffset,\n            shadowRadius: elevationStyle?.shadowRadius,\n            shadowOpacity: overlapped.value ? elevationStyle?.shadowOpacity : 0,\n        });\n    });\n\n    const indexRef = React.useRef<number>(0);\n    const offsetsRef = React.useRef<Array<number>>([]);\n\n    const onScrollViewChanged = (nextIndex: number) => {\n        const prevIndex = indexRef.current;\n        if (prevIndex === nextIndex) {\n            return;\n        }\n\n        offsetsRef.current[prevIndex] = lastOffsetY.value;\n\n        const savedOffsetY = offsetsRef.current[nextIndex] ?? 0;\n        lastOffsetY.value = savedOffsetY;\n\n        indexRef.current = nextIndex;\n\n        // Determine whether to overlap every time index is changed.\n        overlapped.value = savedOffsetY > 0;\n\n        // If next ScrollView's offset is too short, expand app bar.\n        if (translateY.value < 0 && savedOffsetY < appBarHeight) {\n            translateY.value = Animated.withTiming(0, {\n                duration: ANIMATION_DURATION_MILLIS,\n            });\n        }\n    };\n\n    const scrollHandler = Animated.useAnimatedScrollHandler({\n        onBeginDrag: () => {\n            lastTranslateY.value = translateY.value;\n        },\n        onMomentumBegin: () => {\n            lastTranslateY.value = translateY.value;\n        },\n        onScroll: (event) => {\n            const offsetY = event.contentOffset.y;\n\n            const ty = translateY.value;\n            const maxTy = maxTranslateY.value;\n\n            if (SUPPORTS_DRAG_DETECTION) {\n                const dy = offsetY - lastOffsetY.value;\n\n                translateY.value = offsetY <= 0 ? 0 : Math.min(Math.max(lastTranslateY.value - dy, maxTy), 0);\n\n                overlapped.value = offsetY + translateY.value > 0;\n            } else {\n                if (offsetY > -maxTy) {\n                    if (ty === 0) {\n                        translateY.value = Animated.withTiming(Math.min(Math.max(-offsetY, maxTy), 0), {\n                            duration: ANIMATION_DURATION_MILLIS,\n                        });\n                    }\n                } else {\n                    if (ty === maxTy) {\n                        translateY.value = Animated.withTiming(0, {\n                            duration: ANIMATION_DURATION_MILLIS,\n                        });\n                    }\n                }\n\n                overlapped.value = offsetY > 0;\n\n                lastOffsetY.value = offsetY;\n            }\n        },\n        onEndDrag: (event) => {\n            lastOffsetY.value = event.contentOffset.y;\n        },\n        onMomentumEnd: (event) => {\n            const offsetY = event.contentOffset.y;\n\n            lastOffsetY.value = offsetY;\n\n            const ty = translateY.value;\n            const maxTy = maxTranslateY.value;\n\n            // If toolbar is already positioned on edge, do nothing.\n            if (ty <= maxTy || ty >= 0) {\n                return;\n            }\n\n            const threshold = maxTy * 0.5;\n\n            const nextTranslateY = (ty > threshold || offsetY < appBarHeight) ? 0 : maxTy;\n\n            overlapped.value = offsetY + nextTranslateY > 0;\n\n            translateY.value = Animated.withTiming(nextTranslateY, {\n                duration: ANIMATION_DURATION_MILLIS,\n            });\n        },\n    });\n\n    const hasCollapsible = collapsibleToolbarHeight > 0;\n\n    const appBarStyle = [\n        animatedStyle,\n        translucent ? { paddingTop: safeAreaInsets.top } : undefined,\n        hasCollapsible ? styles.floating : undefined,\n    ];\n\n    return {\n        appBarStyle,\n        onAppBarLayout,\n        onCollapsibleToolbarLayout,\n        onScroll: scrollHandler,\n        onScrollViewChanged,\n        scrollContentInsets: { top: hasCollapsible ? appBarHeight : 0 },\n    };\n};\n"]}
+{"version":3,"sources":["useCollapsibleAppBar.ts"],"names":["defaultOptions","keyboardDismissMode","translucent","ANIMATION_DURATION_MILLIS","SUPPORTS_DRAG_DETECTION","Platform","OS","useCollapsibleAppBar","userOptions","styles","safeAreaInsets","appBarHeight","onAppBarLayout","collapsibleToolbarHeight","onCollapsibleToolbarLayout","maxTranslateY","Animated","useDerivedValue","translateY","useSharedValue","lastTranslateY","lastOffsetY","overlapped","elevationStyle","animatedStyle","useAnimatedStyle","transform","value","boxShadow","elevation","shadowColor","shadowOffset","shadowRadius","shadowOpacity","indexRef","React","useRef","offsetsRef","onScrollViewChanged","nextIndex","prevIndex","current","savedOffsetY","withTiming","duration","scrollHandler","useAnimatedScrollHandler","onBeginDrag","runOnJS","Keyboard","dismiss","onMomentumBegin","onScroll","event","offsetY","contentOffset","y","ty","maxTy","dy","Math","min","max","onEndDrag","onMomentumEnd","threshold","nextTranslateY","hasCollapsible","appBarStyle","paddingTop","top","undefined","floating","scrollContentInsets"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;AA+BA,MAAMA,cAAiC,GAAG;AACtCC,EAAAA,mBAAmB,EAAE,MADiB;AAEtCC,EAAAA,WAAW,EAAE;AAFyB,CAA1C;AAKA,MAAMC,yBAAyB,GAAG,GAAlC;AAEA,MAAMC,uBAAuB,GAAGC,sBAASC,EAAT,KAAgB,KAAhD;;AAEe,SAASC,oBAAT,CAA8BC,WAAoB,GAAGR,cAArD,EAAwF;AACnG,QAAM;AAAEE,IAAAA,WAAF;AAAeD,IAAAA;AAAf,MAA0D,EAC5D,GAAGD,cADyD;AAE5D,OAAGQ;AAFyD,GAAhE;AAKA,QAAMC,MAAM,GAAG,+BAAf;AAEA,QAAMC,cAAc,GAAG,oDAAvB;AAEA,QAAM,CAACC,YAAD,EAAeC,cAAf,IAAiC,uBAAvC;AACA,QAAM,CAACC,wBAAD,EAA2BC,0BAA3B,IAAyD,uBAA/D;;AAEA,QAAMC,aAAa,GAAGC,+BAASC,eAAT,CAAyB,MAAM,CAACJ,wBAAhC,CAAtB;;AAEA,QAAMK,UAAU,GAAGF,+BAASG,cAAT,CAAgC,CAAhC,CAAnB;;AACA,QAAMC,cAAc,GAAGJ,+BAASG,cAAT,CAAgC,CAAhC,CAAvB;;AACA,QAAME,WAAW,GAAGL,+BAASG,cAAT,CAAgC,CAAhC,CAApB;;AACA,QAAMG,UAAU,GAAGN,+BAASG,cAAT,CAAiC,KAAjC,CAAnB;;AAEA,QAAMI,cAAc,GAAG,gCAAkB,CAAlB,CAAvB;;AACA,QAAMC,aAAa,GAAGR,+BAASS,gBAAT,CAA0B,MAAM;AAClD,WAAOpB,sBAASC,EAAT,KAAgB,KAAhB,GAAyB;AAC5BoB,MAAAA,SAAS,EAAE,CAAC;AAAER,QAAAA,UAAU,EAAEA,UAAU,CAACS;AAAzB,OAAD,CADiB;AAE5BC,MAAAA,SAAS,EAAEN,UAAU,CAACK,KAAX,GAAmBJ,cAAnB,aAAmBA,cAAnB,uBAAmBA,cAAc,CAAEK,SAAnC,GAA+C;AAF9B,KAAzB,GAGD;AACFF,MAAAA,SAAS,EAAE,CAAC;AAAER,QAAAA,UAAU,EAAEA,UAAU,CAACS;AAAzB,OAAD,CADT;AAEFE,MAAAA,SAAS,EAAEP,UAAU,CAACK,KAAX,GAAmBJ,cAAnB,aAAmBA,cAAnB,uBAAmBA,cAAc,CAAEM,SAAnC,GAA+C,CAFxD;AAGFC,MAAAA,WAAW,EAAEP,cAAF,aAAEA,cAAF,uBAAEA,cAAc,CAAEO,WAH3B;AAIFC,MAAAA,YAAY,EAAER,cAAF,aAAEA,cAAF,uBAAEA,cAAc,CAAEQ,YAJ5B;AAKFC,MAAAA,YAAY,EAAET,cAAF,aAAEA,cAAF,uBAAEA,cAAc,CAAES,YAL5B;AAMFC,MAAAA,aAAa,EAAEX,UAAU,CAACK,KAAX,GAAmBJ,cAAnB,aAAmBA,cAAnB,uBAAmBA,cAAc,CAAEU,aAAnC,GAAmD;AANhE,KAHN;AAWH,GAZqB,CAAtB;;AAcA,QAAMC,QAAQ,GAAGC,eAAMC,MAAN,CAAqB,CAArB,CAAjB;;AACA,QAAMC,UAAU,GAAGF,eAAMC,MAAN,CAA4B,EAA5B,CAAnB;;AAEA,QAAME,mBAAmB,GAAIC,SAAD,IAAuB;AAAA;;AAC/C,UAAMC,SAAS,GAAGN,QAAQ,CAACO,OAA3B;;AACA,QAAID,SAAS,KAAKD,SAAlB,EAA6B;AACzB;AACH;;AAEDF,IAAAA,UAAU,CAACI,OAAX,CAAmBD,SAAnB,IAAgCnB,WAAW,CAACM,KAA5C;AAEA,UAAMe,YAAY,4BAAGL,UAAU,CAACI,OAAX,CAAmBF,SAAnB,CAAH,yEAAoC,CAAtD;AACAlB,IAAAA,WAAW,CAACM,KAAZ,GAAoBe,YAApB;AAEAR,IAAAA,QAAQ,CAACO,OAAT,GAAmBF,SAAnB,CAX+C,CAa/C;;AACAjB,IAAAA,UAAU,CAACK,KAAX,GAAmBe,YAAY,GAAG,CAAlC,CAd+C,CAgB/C;;AACA,QAAIxB,UAAU,CAACS,KAAX,GAAmB,CAAnB,IAAwBe,YAAY,GAAG/B,YAA3C,EAAyD;AACrDO,MAAAA,UAAU,CAACS,KAAX,GAAmBX,+BAAS2B,UAAT,CAAoB,CAApB,EAAuB;AACtCC,QAAAA,QAAQ,EAAEzC;AAD4B,OAAvB,CAAnB;AAGH;AACJ,GAtBD;;AAwBA,QAAM0C,aAAa,GAAG7B,+BAAS8B,wBAAT,CAAkC;AACpDC,IAAAA,WAAW,EAAE,MAAM;AACf,UAAI9C,mBAAmB,KAAK,SAA5B,EAAuC;AACnCe,uCAASgC,OAAT,CAAiBC,sBAASC,OAA1B;AACH;;AACD9B,MAAAA,cAAc,CAACO,KAAf,GAAuBT,UAAU,CAACS,KAAlC;AACH,KANmD;AAOpDwB,IAAAA,eAAe,EAAE,MAAM;AACnB/B,MAAAA,cAAc,CAACO,KAAf,GAAuBT,UAAU,CAACS,KAAlC;AACH,KATmD;AAUpDyB,IAAAA,QAAQ,EAAGC,KAAD,IAAW;AACjB,YAAMC,OAAO,GAAGD,KAAK,CAACE,aAAN,CAAoBC,CAApC;AAEA,YAAMC,EAAE,GAAGvC,UAAU,CAACS,KAAtB;AACA,YAAM+B,KAAK,GAAG3C,aAAa,CAACY,KAA5B;;AAEA,UAAIvB,uBAAJ,EAA6B;AACzB,cAAMuD,EAAE,GAAGL,OAAO,GAAGjC,WAAW,CAACM,KAAjC;AAEAT,QAAAA,UAAU,CAACS,KAAX,GAAmB2B,OAAO,IAAI,CAAX,GAAe,CAAf,GAAmBM,IAAI,CAACC,GAAL,CAASD,IAAI,CAACE,GAAL,CAAS1C,cAAc,CAACO,KAAf,GAAuBgC,EAAhC,EAAoCD,KAApC,CAAT,EAAqD,CAArD,CAAtC;AAEApC,QAAAA,UAAU,CAACK,KAAX,GAAmB2B,OAAO,GAAGpC,UAAU,CAACS,KAArB,GAA6B,CAAhD;AACH,OAND,MAMO;AACH,YAAI2B,OAAO,GAAG,CAACI,KAAf,EAAsB;AAClB,cAAID,EAAE,KAAK,CAAX,EAAc;AACVvC,YAAAA,UAAU,CAACS,KAAX,GAAmBX,+BAAS2B,UAAT,CAAoBiB,IAAI,CAACC,GAAL,CAASD,IAAI,CAACE,GAAL,CAAS,CAACR,OAAV,EAAmBI,KAAnB,CAAT,EAAoC,CAApC,CAApB,EAA4D;AAC3Ed,cAAAA,QAAQ,EAAEzC;AADiE,aAA5D,CAAnB;AAGH;AACJ,SAND,MAMO;AACH,cAAIsD,EAAE,KAAKC,KAAX,EAAkB;AACdxC,YAAAA,UAAU,CAACS,KAAX,GAAmBX,+BAAS2B,UAAT,CAAoB,CAApB,EAAuB;AACtCC,cAAAA,QAAQ,EAAEzC;AAD4B,aAAvB,CAAnB;AAGH;AACJ;;AAEDmB,QAAAA,UAAU,CAACK,KAAX,GAAmB2B,OAAO,GAAG,CAA7B;AAEAjC,QAAAA,WAAW,CAACM,KAAZ,GAAoB2B,OAApB;AACH;AACJ,KAzCmD;AA0CpDS,IAAAA,SAAS,EAAGV,KAAD,IAAW;AAClBhC,MAAAA,WAAW,CAACM,KAAZ,GAAoB0B,KAAK,CAACE,aAAN,CAAoBC,CAAxC;AACH,KA5CmD;AA6CpDQ,IAAAA,aAAa,EAAGX,KAAD,IAAW;AACtB,YAAMC,OAAO,GAAGD,KAAK,CAACE,aAAN,CAAoBC,CAApC;AAEAnC,MAAAA,WAAW,CAACM,KAAZ,GAAoB2B,OAApB;AAEA,YAAMG,EAAE,GAAGvC,UAAU,CAACS,KAAtB;AACA,YAAM+B,KAAK,GAAG3C,aAAa,CAACY,KAA5B,CANsB,CAQtB;;AACA,UAAI8B,EAAE,IAAIC,KAAN,IAAeD,EAAE,IAAI,CAAzB,EAA4B;AACxB;AACH;;AAED,YAAMQ,SAAS,GAAGP,KAAK,GAAG,GAA1B;AAEA,YAAMQ,cAAc,GAAIT,EAAE,GAAGQ,SAAL,IAAkBX,OAAO,GAAG3C,YAA7B,GAA6C,CAA7C,GAAiD+C,KAAxE;AAEApC,MAAAA,UAAU,CAACK,KAAX,GAAmB2B,OAAO,GAAGY,cAAV,GAA2B,CAA9C;AAEAhD,MAAAA,UAAU,CAACS,KAAX,GAAmBX,+BAAS2B,UAAT,CAAoBuB,cAApB,EAAoC;AACnDtB,QAAAA,QAAQ,EAAEzC;AADyC,OAApC,CAAnB;AAGH;AAnEmD,GAAlC,CAAtB;;AAsEA,QAAMgE,cAAc,GAAGtD,wBAAwB,GAAG,CAAlD;AAEA,QAAMuD,WAAW,GAAG,CAChB5C,aADgB,EAEhBtB,WAAW,GAAG;AAAEmE,IAAAA,UAAU,EAAE3D,cAAc,CAAC4D;AAA7B,GAAH,GAAwCC,SAFnC,EAGhBJ,cAAc,GAAG1D,MAAM,CAAC+D,QAAV,GAAqBD,SAHnB,CAApB;AAMA,SAAO;AACHH,IAAAA,WADG;AAEHxD,IAAAA,cAFG;AAGHE,IAAAA,0BAHG;AAIHsC,IAAAA,QAAQ,EAAEP,aAJP;AAKHP,IAAAA,mBALG;AAMHmC,IAAAA,mBAAmB,EAAE;AAAEH,MAAAA,GAAG,EAAEH,cAAc,GAAGxD,YAAH,GAAkB;AAAvC;AANlB,GAAP;AAQH;;AAAA","sourcesContent":["import React from 'react';\nimport { Falsy, Keyboard, Platform, RegisteredStyle, ScrollViewProps, ViewProps, ViewStyle } from 'react-native';\nimport Animated from 'react-native-reanimated';\nimport { useSafeAreaInsets } from 'react-native-safe-area-context';\nimport { useHeight } from '../internal/hooks';\nimport useElevationStyle from './useElevationStyle';\nimport useAppbarStyles from './useAppbarStyles';\n\ntype WebOnlyStyle = { boxShadow: any };\n\ntype ViewStyleProp = Array<ViewStyle | RegisteredStyle<ViewStyle> | WebOnlyStyle | Falsy>;\n\ntype OnScroll = ScrollViewProps['onScroll'];\n\ntype OnLayoutCallback = ViewProps['onLayout'];\n\nexport interface ContentInsets {\n    top?: number;\n    bottom?: number;\n    left?: number;\n    right?: number;\n}\n\nexport interface Options {\n    keyboardDismissMode?: 'none' | 'on-drag';\n    translucent?: boolean;\n}\n\nexport interface CollapsibleAppBar {\n    appBarStyle: ViewStyleProp;\n    onAppBarLayout: OnLayoutCallback;\n    onCollapsibleToolbarLayout: OnLayoutCallback;\n    onScroll: OnScroll;\n    onScrollViewChanged: (index: number) => void;\n    scrollContentInsets: ContentInsets;\n}\n\nconst defaultOptions: Required<Options> = {\n    keyboardDismissMode: 'none',\n    translucent: false,\n};\n\nconst ANIMATION_DURATION_MILLIS = 100;\n\nconst SUPPORTS_DRAG_DETECTION = Platform.OS !== 'web';\n\nexport default function useCollapsibleAppBar(userOptions: Options = defaultOptions): CollapsibleAppBar {\n    const { translucent, keyboardDismissMode }: Required<Options> = {\n        ...defaultOptions,\n        ...userOptions,\n    };\n\n    const styles = useAppbarStyles();\n\n    const safeAreaInsets = useSafeAreaInsets();\n\n    const [appBarHeight, onAppBarLayout] = useHeight();\n    const [collapsibleToolbarHeight, onCollapsibleToolbarLayout] = useHeight();\n\n    const maxTranslateY = Animated.useDerivedValue(() => -collapsibleToolbarHeight);\n\n    const translateY = Animated.useSharedValue<number>(0);\n    const lastTranslateY = Animated.useSharedValue<number>(0);\n    const lastOffsetY = Animated.useSharedValue<number>(0);\n    const overlapped = Animated.useSharedValue<boolean>(false);\n\n    const elevationStyle = useElevationStyle(4);\n    const animatedStyle = Animated.useAnimatedStyle(() => {\n        return Platform.OS === 'web' ? ({\n            transform: [{ translateY: translateY.value }],\n            boxShadow: overlapped.value ? elevationStyle?.boxShadow : 0,\n        }) : ({\n            transform: [{ translateY: translateY.value }],\n            elevation: overlapped.value ? elevationStyle?.elevation : 0,\n            shadowColor: elevationStyle?.shadowColor,\n            shadowOffset: elevationStyle?.shadowOffset,\n            shadowRadius: elevationStyle?.shadowRadius,\n            shadowOpacity: overlapped.value ? elevationStyle?.shadowOpacity : 0,\n        });\n    });\n\n    const indexRef = React.useRef<number>(0);\n    const offsetsRef = React.useRef<Array<number>>([]);\n\n    const onScrollViewChanged = (nextIndex: number) => {\n        const prevIndex = indexRef.current;\n        if (prevIndex === nextIndex) {\n            return;\n        }\n\n        offsetsRef.current[prevIndex] = lastOffsetY.value;\n\n        const savedOffsetY = offsetsRef.current[nextIndex] ?? 0;\n        lastOffsetY.value = savedOffsetY;\n\n        indexRef.current = nextIndex;\n\n        // Determine whether to overlap every time index is changed.\n        overlapped.value = savedOffsetY > 0;\n\n        // If next ScrollView's offset is too short, expand app bar.\n        if (translateY.value < 0 && savedOffsetY < appBarHeight) {\n            translateY.value = Animated.withTiming(0, {\n                duration: ANIMATION_DURATION_MILLIS,\n            });\n        }\n    };\n\n    const scrollHandler = Animated.useAnimatedScrollHandler({\n        onBeginDrag: () => {\n            if (keyboardDismissMode === 'on-drag') {\n                Animated.runOnJS(Keyboard.dismiss)();\n            }\n            lastTranslateY.value = translateY.value;\n        },\n        onMomentumBegin: () => {\n            lastTranslateY.value = translateY.value;\n        },\n        onScroll: (event) => {\n            const offsetY = event.contentOffset.y;\n\n            const ty = translateY.value;\n            const maxTy = maxTranslateY.value;\n\n            if (SUPPORTS_DRAG_DETECTION) {\n                const dy = offsetY - lastOffsetY.value;\n\n                translateY.value = offsetY <= 0 ? 0 : Math.min(Math.max(lastTranslateY.value - dy, maxTy), 0);\n\n                overlapped.value = offsetY + translateY.value > 0;\n            } else {\n                if (offsetY > -maxTy) {\n                    if (ty === 0) {\n                        translateY.value = Animated.withTiming(Math.min(Math.max(-offsetY, maxTy), 0), {\n                            duration: ANIMATION_DURATION_MILLIS,\n                        });\n                    }\n                } else {\n                    if (ty === maxTy) {\n                        translateY.value = Animated.withTiming(0, {\n                            duration: ANIMATION_DURATION_MILLIS,\n                        });\n                    }\n                }\n\n                overlapped.value = offsetY > 0;\n\n                lastOffsetY.value = offsetY;\n            }\n        },\n        onEndDrag: (event) => {\n            lastOffsetY.value = event.contentOffset.y;\n        },\n        onMomentumEnd: (event) => {\n            const offsetY = event.contentOffset.y;\n\n            lastOffsetY.value = offsetY;\n\n            const ty = translateY.value;\n            const maxTy = maxTranslateY.value;\n\n            // If toolbar is already positioned on edge, do nothing.\n            if (ty <= maxTy || ty >= 0) {\n                return;\n            }\n\n            const threshold = maxTy * 0.5;\n\n            const nextTranslateY = (ty > threshold || offsetY < appBarHeight) ? 0 : maxTy;\n\n            overlapped.value = offsetY + nextTranslateY > 0;\n\n            translateY.value = Animated.withTiming(nextTranslateY, {\n                duration: ANIMATION_DURATION_MILLIS,\n            });\n        },\n    });\n\n    const hasCollapsible = collapsibleToolbarHeight > 0;\n\n    const appBarStyle = [\n        animatedStyle,\n        translucent ? { paddingTop: safeAreaInsets.top } : undefined,\n        hasCollapsible ? styles.floating : undefined,\n    ];\n\n    return {\n        appBarStyle,\n        onAppBarLayout,\n        onCollapsibleToolbarLayout,\n        onScroll: scrollHandler,\n        onScrollViewChanged,\n        scrollContentInsets: { top: hasCollapsible ? appBarHeight : 0 },\n    };\n};\n"]}

package/build/commonjs/hooks/useFadeInAppBar.js

@@ -26,6 +26,7 @@ const defaultOptions = {
   fadeInBeginY: (endY, appBarHeight) => endY - appBarHeight,
   fadeInEndY: appBarHeight => appBarHeight,
   floating: true,
+  keyboardDismissMode: 'none',
   translucent: false
 };
 const shadowOffset = _reactNative.Platform.OS === 'ios' ? {
@@ -39,6 +40,7 @@ function useFadeInAppBar(userOptions = defaultOptions) {
     fadeInBeginY,
     fadeInEndY,
     floating,
+    keyboardDismissMode,
     translucent
   } = { ...defaultOptions,
     ...userOptions
@@ -75,6 +77,11 @@ function useFadeInAppBar(userOptions = defaultOptions) {
   }));
 
   const scrollHandler = _reactNativeReanimated.default.useAnimatedScrollHandler({
+    onBeginDrag: () => {
+      if (keyboardDismissMode === 'on-drag') {
+        _reactNativeReanimated.default.runOnJS(_reactNative.Keyboard.dismiss)();
+      }
+    },
     onScroll: event => {
       const offsetY = event.contentOffset.y;
       const distance = Math.max(toOffsetY - fromOffsetY, 1);

package/build/commonjs/hooks/useFadeInAppBar.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useFadeInAppBar.ts"],"names":["defaultOptions","backgroundColor","fadeInBeginY","endY","appBarHeight","fadeInEndY","floating","translucent","shadowOffset","Platform","OS","width","height","undefined","useFadeInAppBar","userOptions","styles","safeAreaInsets","onAppBarLayout","fromOffsetY","toOffsetY","React","useMemo","beginY","dy","Animated","useSharedValue","lastOffsetY","normalized","r","g","b","animatedAppBarStyle","useAnimatedStyle","value","elevation","shadowColor","shadowRadius","shadowOpacity","animatedTitleStyle","opacity","scrollHandler","useAnimatedScrollHandler","onScroll","event","offsetY","contentOffset","y","distance","Math","max","localOffsetY","min","onEndDrag","onMomentumEnd","appBarStyle","paddingTop","top","titleStyle"],"mappings":"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","sourcesContent":["import React from 'react';\nimport { Falsy, Platform, RegisteredStyle, ScrollViewProps, ViewProps, ViewStyle } from 'react-native';\nimport Animated from 'react-native-reanimated';\nimport { useSafeAreaInsets } from 'react-native-safe-area-context';\nimport { rgb } from '@fountain-ui/utils';\nimport { useHeight } from '../internal/hooks';\nimport useAppbarStyles from './useAppbarStyles';\n\ntype ViewStyleProp = Array<ViewStyle | RegisteredStyle<ViewStyle> | Falsy>;\n\ntype OnScroll = ScrollViewProps['onScroll'];\n\ntype OnLayoutCallback = ViewProps['onLayout'];\n\nexport interface Options {\n    backgroundColor?: string;\n    fadeInBeginY?: number | ((endY: number, appBarHeight: number) => number);\n    fadeInEndY?: number | ((appBarHeight: number) => number);\n    floating?: boolean;\n    translucent?: boolean;\n}\n\nexport interface FadeInAppBar {\n    appBarStyle: ViewStyleProp;\n    titleStyle: ViewStyleProp;\n    onAppBarLayout: OnLayoutCallback;\n    onScroll: OnScroll;\n    dy: Animated.SharedValue<number>;\n    normalized: Animated.SharedValue<number>;\n}\n\nconst defaultOptions: Required<Options> = {\n    backgroundColor: '#ffffff',\n    fadeInBeginY: (endY, appBarHeight) => endY - appBarHeight,\n    fadeInEndY: (appBarHeight) => appBarHeight,\n    floating: true,\n    translucent: false,\n};\n\nconst shadowOffset = Platform.OS === 'ios' ? { width: 0, height: 3 } : undefined;\n\nexport default function useFadeInAppBar(userOptions: Options = defaultOptions): FadeInAppBar {\n    const {\n        backgroundColor,\n        fadeInBeginY,\n        fadeInEndY,\n        floating,\n        translucent,\n    }: Required<Options> = {\n        ...defaultOptions,\n        ...userOptions,\n    };\n\n    const styles = useAppbarStyles();\n\n    const safeAreaInsets = useSafeAreaInsets();\n\n    const [appBarHeight, onAppBarLayout] = useHeight();\n\n    const [fromOffsetY, toOffsetY] = React.useMemo(() => {\n        const endY = typeof fadeInEndY === 'function'\n            ? fadeInEndY(appBarHeight)\n            : fadeInEndY;\n\n        const beginY = typeof fadeInBeginY === 'function'\n            ? fadeInBeginY(endY, appBarHeight)\n            : fadeInBeginY;\n\n        return [beginY, endY];\n    }, [fadeInBeginY, fadeInBeginY, appBarHeight]);\n\n    const dy = Animated.useSharedValue<number>(0);\n    const lastOffsetY = Animated.useSharedValue<number>(0);\n    const normalized = Animated.useSharedValue<number>(0);\n\n    const [r, g, b] = React.useMemo(() => rgb(backgroundColor), [backgroundColor]);\n\n    const animatedAppBarStyle = Animated.useAnimatedStyle(() => ({\n        backgroundColor: `rgba(${r}, ${g}, ${b}, ${normalized.value})`,\n        elevation: normalized.value >= 1 ? 6 : 0,\n        shadowColor: '#000',\n        shadowOffset,\n        shadowRadius: 4.65,\n        shadowOpacity: normalized.value >= 1 ? 0.25 : 0,\n    }));\n\n    const animatedTitleStyle = Animated.useAnimatedStyle(() => ({\n        opacity: normalized.value,\n    }));\n\n    const scrollHandler = Animated.useAnimatedScrollHandler({\n        onScroll: (event) => {\n            const offsetY = event.contentOffset.y;\n\n            const distance = Math.max(toOffsetY - fromOffsetY, 1);\n            const localOffsetY = offsetY - fromOffsetY;\n\n            dy.value = offsetY - lastOffsetY.value;\n\n            normalized.value = Math.min(Math.max(localOffsetY / distance, 0), 1);\n        },\n        onEndDrag: (event) => {\n            lastOffsetY.value = event.contentOffset.y;\n        },\n        onMomentumEnd: (event) => {\n            lastOffsetY.value = event.contentOffset.y;\n        },\n    });\n\n    const appBarStyle = [\n        animatedAppBarStyle,\n        translucent ? { paddingTop: safeAreaInsets.top } : undefined,\n        floating ? styles.floating : undefined,\n    ];\n\n    return {\n        appBarStyle,\n        titleStyle: [animatedTitleStyle],\n        onAppBarLayout,\n        onScroll: scrollHandler,\n        dy,\n        normalized,\n    };\n};\n"]}
+{"version":3,"sources":["useFadeInAppBar.ts"],"names":["defaultOptions","backgroundColor","fadeInBeginY","endY","appBarHeight","fadeInEndY","floating","keyboardDismissMode","translucent","shadowOffset","Platform","OS","width","height","undefined","useFadeInAppBar","userOptions","styles","safeAreaInsets","onAppBarLayout","fromOffsetY","toOffsetY","React","useMemo","beginY","dy","Animated","useSharedValue","lastOffsetY","normalized","r","g","b","animatedAppBarStyle","useAnimatedStyle","value","elevation","shadowColor","shadowRadius","shadowOpacity","animatedTitleStyle","opacity","scrollHandler","useAnimatedScrollHandler","onBeginDrag","runOnJS","Keyboard","dismiss","onScroll","event","offsetY","contentOffset","y","distance","Math","max","localOffsetY","min","onEndDrag","onMomentumEnd","appBarStyle","paddingTop","top","titleStyle"],"mappings":"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","sourcesContent":["import React from 'react';\nimport { Falsy, Keyboard, Platform, RegisteredStyle, ScrollViewProps, ViewProps, ViewStyle } from 'react-native';\nimport Animated from 'react-native-reanimated';\nimport { useSafeAreaInsets } from 'react-native-safe-area-context';\nimport { rgb } from '@fountain-ui/utils';\nimport { useHeight } from '../internal/hooks';\nimport useAppbarStyles from './useAppbarStyles';\n\ntype ViewStyleProp = Array<ViewStyle | RegisteredStyle<ViewStyle> | Falsy>;\n\ntype OnScroll = ScrollViewProps['onScroll'];\n\ntype OnLayoutCallback = ViewProps['onLayout'];\n\nexport interface Options {\n    backgroundColor?: string;\n    fadeInBeginY?: number | ((endY: number, appBarHeight: number) => number);\n    fadeInEndY?: number | ((appBarHeight: number) => number);\n    floating?: boolean;\n    keyboardDismissMode?: 'none' | 'on-drag';\n    translucent?: boolean;\n}\n\nexport interface FadeInAppBar {\n    appBarStyle: ViewStyleProp;\n    titleStyle: ViewStyleProp;\n    onAppBarLayout: OnLayoutCallback;\n    onScroll: OnScroll;\n    dy: Animated.SharedValue<number>;\n    normalized: Animated.SharedValue<number>;\n}\n\nconst defaultOptions: Required<Options> = {\n    backgroundColor: '#ffffff',\n    fadeInBeginY: (endY, appBarHeight) => endY - appBarHeight,\n    fadeInEndY: (appBarHeight) => appBarHeight,\n    floating: true,\n    keyboardDismissMode: 'none',\n    translucent: false,\n};\n\nconst shadowOffset = Platform.OS === 'ios' ? { width: 0, height: 3 } : undefined;\n\nexport default function useFadeInAppBar(userOptions: Options = defaultOptions): FadeInAppBar {\n    const {\n        backgroundColor,\n        fadeInBeginY,\n        fadeInEndY,\n        floating,\n        keyboardDismissMode,\n        translucent,\n    }: Required<Options> = {\n        ...defaultOptions,\n        ...userOptions,\n    };\n\n    const styles = useAppbarStyles();\n\n    const safeAreaInsets = useSafeAreaInsets();\n\n    const [appBarHeight, onAppBarLayout] = useHeight();\n\n    const [fromOffsetY, toOffsetY] = React.useMemo(() => {\n        const endY = typeof fadeInEndY === 'function'\n            ? fadeInEndY(appBarHeight)\n            : fadeInEndY;\n\n        const beginY = typeof fadeInBeginY === 'function'\n            ? fadeInBeginY(endY, appBarHeight)\n            : fadeInBeginY;\n\n        return [beginY, endY];\n    }, [fadeInBeginY, fadeInBeginY, appBarHeight]);\n\n    const dy = Animated.useSharedValue<number>(0);\n    const lastOffsetY = Animated.useSharedValue<number>(0);\n    const normalized = Animated.useSharedValue<number>(0);\n\n    const [r, g, b] = React.useMemo(() => rgb(backgroundColor), [backgroundColor]);\n\n    const animatedAppBarStyle = Animated.useAnimatedStyle(() => ({\n        backgroundColor: `rgba(${r}, ${g}, ${b}, ${normalized.value})`,\n        elevation: normalized.value >= 1 ? 6 : 0,\n        shadowColor: '#000',\n        shadowOffset,\n        shadowRadius: 4.65,\n        shadowOpacity: normalized.value >= 1 ? 0.25 : 0,\n    }));\n\n    const animatedTitleStyle = Animated.useAnimatedStyle(() => ({\n        opacity: normalized.value,\n    }));\n\n    const scrollHandler = Animated.useAnimatedScrollHandler({\n        onBeginDrag: () => {\n            if (keyboardDismissMode === 'on-drag') {\n                Animated.runOnJS(Keyboard.dismiss)();\n            }\n        },\n        onScroll: (event) => {\n            const offsetY = event.contentOffset.y;\n\n            const distance = Math.max(toOffsetY - fromOffsetY, 1);\n            const localOffsetY = offsetY - fromOffsetY;\n\n            dy.value = offsetY - lastOffsetY.value;\n\n            normalized.value = Math.min(Math.max(localOffsetY / distance, 0), 1);\n        },\n        onEndDrag: (event) => {\n            lastOffsetY.value = event.contentOffset.y;\n        },\n        onMomentumEnd: (event) => {\n            lastOffsetY.value = event.contentOffset.y;\n        },\n    });\n\n    const appBarStyle = [\n        animatedAppBarStyle,\n        translucent ? { paddingTop: safeAreaInsets.top } : undefined,\n        floating ? styles.floating : undefined,\n    ];\n\n    return {\n        appBarStyle,\n        titleStyle: [animatedTitleStyle],\n        onAppBarLayout,\n        onScroll: scrollHandler,\n        dy,\n        normalized,\n    };\n};\n"]}

package/build/module/hooks/useCollapsibleAppBar.js

@@ -1,18 +1,20 @@
 import React from 'react';
-import { Platform } from 'react-native';
+import { Keyboard, Platform } from 'react-native';
 import Animated from 'react-native-reanimated';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { useHeight } from '../internal/hooks';
 import useElevationStyle from './useElevationStyle';
 import useAppbarStyles from './useAppbarStyles';
 const defaultOptions = {
+  keyboardDismissMode: 'none',
   translucent: false
 };
 const ANIMATION_DURATION_MILLIS = 100;
 const SUPPORTS_DRAG_DETECTION = Platform.OS !== 'web';
 export default function useCollapsibleAppBar(userOptions = defaultOptions) {
   const {
-    translucent
+    translucent,
+    keyboardDismissMode
   } = { ...defaultOptions,
     ...userOptions
   };
@@ -71,6 +73,10 @@ export default function useCollapsibleAppBar(userOptions = defaultOptions) {
 
   const scrollHandler = Animated.useAnimatedScrollHandler({
     onBeginDrag: () => {
+      if (keyboardDismissMode === 'on-drag') {
+        Animated.runOnJS(Keyboard.dismiss)();
+      }
+
       lastTranslateY.value = translateY.value;
     },
     onMomentumBegin: () => {

package/build/module/hooks/useCollapsibleAppBar.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useCollapsibleAppBar.ts"],"names":["React","Platform","Animated","useSafeAreaInsets","useHeight","useElevationStyle","useAppbarStyles","defaultOptions","translucent","ANIMATION_DURATION_MILLIS","SUPPORTS_DRAG_DETECTION","OS","useCollapsibleAppBar","userOptions","styles","safeAreaInsets","appBarHeight","onAppBarLayout","collapsibleToolbarHeight","onCollapsibleToolbarLayout","maxTranslateY","useDerivedValue","translateY","useSharedValue","lastTranslateY","lastOffsetY","overlapped","elevationStyle","animatedStyle","useAnimatedStyle","transform","value","boxShadow","elevation","shadowColor","shadowOffset","shadowRadius","shadowOpacity","indexRef","useRef","offsetsRef","onScrollViewChanged","nextIndex","prevIndex","current","savedOffsetY","withTiming","duration","scrollHandler","useAnimatedScrollHandler","onBeginDrag","onMomentumBegin","onScroll","event","offsetY","contentOffset","y","ty","maxTy","dy","Math","min","max","onEndDrag","onMomentumEnd","threshold","nextTranslateY","hasCollapsible","appBarStyle","paddingTop","top","undefined","floating","scrollContentInsets"],"mappings":"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","sourcesContent":["import React from 'react';\nimport { Falsy, Platform, RegisteredStyle, ScrollViewProps, ViewProps, ViewStyle } from 'react-native';\nimport Animated from 'react-native-reanimated';\nimport { useSafeAreaInsets } from 'react-native-safe-area-context';\nimport { useHeight } from '../internal/hooks';\nimport useElevationStyle from './useElevationStyle';\nimport useAppbarStyles from './useAppbarStyles';\n\ntype WebOnlyStyle = { boxShadow: any };\n\ntype ViewStyleProp = Array<ViewStyle | RegisteredStyle<ViewStyle> | WebOnlyStyle | Falsy>;\n\ntype OnScroll = ScrollViewProps['onScroll'];\n\ntype OnLayoutCallback = ViewProps['onLayout'];\n\nexport interface ContentInsets {\n    top?: number;\n    bottom?: number;\n    left?: number;\n    right?: number;\n}\n\nexport interface Options {\n    translucent?: boolean;\n}\n\nexport interface CollapsibleAppBar {\n    appBarStyle: ViewStyleProp;\n    onAppBarLayout: OnLayoutCallback;\n    onCollapsibleToolbarLayout: OnLayoutCallback;\n    onScroll: OnScroll;\n    onScrollViewChanged: (index: number) => void;\n    scrollContentInsets: ContentInsets;\n}\n\nconst defaultOptions: Required<Options> = {\n    translucent: false,\n};\n\nconst ANIMATION_DURATION_MILLIS = 100;\n\nconst SUPPORTS_DRAG_DETECTION = Platform.OS !== 'web';\n\nexport default function useCollapsibleAppBar(userOptions: Options = defaultOptions): CollapsibleAppBar {\n    const { translucent }: Required<Options> = {\n        ...defaultOptions,\n        ...userOptions,\n    };\n\n    const styles = useAppbarStyles();\n\n    const safeAreaInsets = useSafeAreaInsets();\n\n    const [appBarHeight, onAppBarLayout] = useHeight();\n    const [collapsibleToolbarHeight, onCollapsibleToolbarLayout] = useHeight();\n\n    const maxTranslateY = Animated.useDerivedValue(() => -collapsibleToolbarHeight);\n\n    const translateY = Animated.useSharedValue<number>(0);\n    const lastTranslateY = Animated.useSharedValue<number>(0);\n    const lastOffsetY = Animated.useSharedValue<number>(0);\n    const overlapped = Animated.useSharedValue<boolean>(false);\n\n    const elevationStyle = useElevationStyle(4);\n    const animatedStyle = Animated.useAnimatedStyle(() => {\n        return Platform.OS === 'web' ? ({\n            transform: [{ translateY: translateY.value }],\n            boxShadow: overlapped.value ? elevationStyle?.boxShadow : 0,\n        }) : ({\n            transform: [{ translateY: translateY.value }],\n            elevation: overlapped.value ? elevationStyle?.elevation : 0,\n            shadowColor: elevationStyle?.shadowColor,\n            shadowOffset: elevationStyle?.shadowOffset,\n            shadowRadius: elevationStyle?.shadowRadius,\n            shadowOpacity: overlapped.value ? elevationStyle?.shadowOpacity : 0,\n        });\n    });\n\n    const indexRef = React.useRef<number>(0);\n    const offsetsRef = React.useRef<Array<number>>([]);\n\n    const onScrollViewChanged = (nextIndex: number) => {\n        const prevIndex = indexRef.current;\n        if (prevIndex === nextIndex) {\n            return;\n        }\n\n        offsetsRef.current[prevIndex] = lastOffsetY.value;\n\n        const savedOffsetY = offsetsRef.current[nextIndex] ?? 0;\n        lastOffsetY.value = savedOffsetY;\n\n        indexRef.current = nextIndex;\n\n        // Determine whether to overlap every time index is changed.\n        overlapped.value = savedOffsetY > 0;\n\n        // If next ScrollView's offset is too short, expand app bar.\n        if (translateY.value < 0 && savedOffsetY < appBarHeight) {\n            translateY.value = Animated.withTiming(0, {\n                duration: ANIMATION_DURATION_MILLIS,\n            });\n        }\n    };\n\n    const scrollHandler = Animated.useAnimatedScrollHandler({\n        onBeginDrag: () => {\n            lastTranslateY.value = translateY.value;\n        },\n        onMomentumBegin: () => {\n            lastTranslateY.value = translateY.value;\n        },\n        onScroll: (event) => {\n            const offsetY = event.contentOffset.y;\n\n            const ty = translateY.value;\n            const maxTy = maxTranslateY.value;\n\n            if (SUPPORTS_DRAG_DETECTION) {\n                const dy = offsetY - lastOffsetY.value;\n\n                translateY.value = offsetY <= 0 ? 0 : Math.min(Math.max(lastTranslateY.value - dy, maxTy), 0);\n\n                overlapped.value = offsetY + translateY.value > 0;\n            } else {\n                if (offsetY > -maxTy) {\n                    if (ty === 0) {\n                        translateY.value = Animated.withTiming(Math.min(Math.max(-offsetY, maxTy), 0), {\n                            duration: ANIMATION_DURATION_MILLIS,\n                        });\n                    }\n                } else {\n                    if (ty === maxTy) {\n                        translateY.value = Animated.withTiming(0, {\n                            duration: ANIMATION_DURATION_MILLIS,\n                        });\n                    }\n                }\n\n                overlapped.value = offsetY > 0;\n\n                lastOffsetY.value = offsetY;\n            }\n        },\n        onEndDrag: (event) => {\n            lastOffsetY.value = event.contentOffset.y;\n        },\n        onMomentumEnd: (event) => {\n            const offsetY = event.contentOffset.y;\n\n            lastOffsetY.value = offsetY;\n\n            const ty = translateY.value;\n            const maxTy = maxTranslateY.value;\n\n            // If toolbar is already positioned on edge, do nothing.\n            if (ty <= maxTy || ty >= 0) {\n                return;\n            }\n\n            const threshold = maxTy * 0.5;\n\n            const nextTranslateY = (ty > threshold || offsetY < appBarHeight) ? 0 : maxTy;\n\n            overlapped.value = offsetY + nextTranslateY > 0;\n\n            translateY.value = Animated.withTiming(nextTranslateY, {\n                duration: ANIMATION_DURATION_MILLIS,\n            });\n        },\n    });\n\n    const hasCollapsible = collapsibleToolbarHeight > 0;\n\n    const appBarStyle = [\n        animatedStyle,\n        translucent ? { paddingTop: safeAreaInsets.top } : undefined,\n        hasCollapsible ? styles.floating : undefined,\n    ];\n\n    return {\n        appBarStyle,\n        onAppBarLayout,\n        onCollapsibleToolbarLayout,\n        onScroll: scrollHandler,\n        onScrollViewChanged,\n        scrollContentInsets: { top: hasCollapsible ? appBarHeight : 0 },\n    };\n};\n"]}
+{"version":3,"sources":["useCollapsibleAppBar.ts"],"names":["React","Keyboard","Platform","Animated","useSafeAreaInsets","useHeight","useElevationStyle","useAppbarStyles","defaultOptions","keyboardDismissMode","translucent","ANIMATION_DURATION_MILLIS","SUPPORTS_DRAG_DETECTION","OS","useCollapsibleAppBar","userOptions","styles","safeAreaInsets","appBarHeight","onAppBarLayout","collapsibleToolbarHeight","onCollapsibleToolbarLayout","maxTranslateY","useDerivedValue","translateY","useSharedValue","lastTranslateY","lastOffsetY","overlapped","elevationStyle","animatedStyle","useAnimatedStyle","transform","value","boxShadow","elevation","shadowColor","shadowOffset","shadowRadius","shadowOpacity","indexRef","useRef","offsetsRef","onScrollViewChanged","nextIndex","prevIndex","current","savedOffsetY","withTiming","duration","scrollHandler","useAnimatedScrollHandler","onBeginDrag","runOnJS","dismiss","onMomentumBegin","onScroll","event","offsetY","contentOffset","y","ty","maxTy","dy","Math","min","max","onEndDrag","onMomentumEnd","threshold","nextTranslateY","hasCollapsible","appBarStyle","paddingTop","top","undefined","floating","scrollContentInsets"],"mappings":"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","sourcesContent":["import React from 'react';\nimport { Falsy, Keyboard, Platform, RegisteredStyle, ScrollViewProps, ViewProps, ViewStyle } from 'react-native';\nimport Animated from 'react-native-reanimated';\nimport { useSafeAreaInsets } from 'react-native-safe-area-context';\nimport { useHeight } from '../internal/hooks';\nimport useElevationStyle from './useElevationStyle';\nimport useAppbarStyles from './useAppbarStyles';\n\ntype WebOnlyStyle = { boxShadow: any };\n\ntype ViewStyleProp = Array<ViewStyle | RegisteredStyle<ViewStyle> | WebOnlyStyle | Falsy>;\n\ntype OnScroll = ScrollViewProps['onScroll'];\n\ntype OnLayoutCallback = ViewProps['onLayout'];\n\nexport interface ContentInsets {\n    top?: number;\n    bottom?: number;\n    left?: number;\n    right?: number;\n}\n\nexport interface Options {\n    keyboardDismissMode?: 'none' | 'on-drag';\n    translucent?: boolean;\n}\n\nexport interface CollapsibleAppBar {\n    appBarStyle: ViewStyleProp;\n    onAppBarLayout: OnLayoutCallback;\n    onCollapsibleToolbarLayout: OnLayoutCallback;\n    onScroll: OnScroll;\n    onScrollViewChanged: (index: number) => void;\n    scrollContentInsets: ContentInsets;\n}\n\nconst defaultOptions: Required<Options> = {\n    keyboardDismissMode: 'none',\n    translucent: false,\n};\n\nconst ANIMATION_DURATION_MILLIS = 100;\n\nconst SUPPORTS_DRAG_DETECTION = Platform.OS !== 'web';\n\nexport default function useCollapsibleAppBar(userOptions: Options = defaultOptions): CollapsibleAppBar {\n    const { translucent, keyboardDismissMode }: Required<Options> = {\n        ...defaultOptions,\n        ...userOptions,\n    };\n\n    const styles = useAppbarStyles();\n\n    const safeAreaInsets = useSafeAreaInsets();\n\n    const [appBarHeight, onAppBarLayout] = useHeight();\n    const [collapsibleToolbarHeight, onCollapsibleToolbarLayout] = useHeight();\n\n    const maxTranslateY = Animated.useDerivedValue(() => -collapsibleToolbarHeight);\n\n    const translateY = Animated.useSharedValue<number>(0);\n    const lastTranslateY = Animated.useSharedValue<number>(0);\n    const lastOffsetY = Animated.useSharedValue<number>(0);\n    const overlapped = Animated.useSharedValue<boolean>(false);\n\n    const elevationStyle = useElevationStyle(4);\n    const animatedStyle = Animated.useAnimatedStyle(() => {\n        return Platform.OS === 'web' ? ({\n            transform: [{ translateY: translateY.value }],\n            boxShadow: overlapped.value ? elevationStyle?.boxShadow : 0,\n        }) : ({\n            transform: [{ translateY: translateY.value }],\n            elevation: overlapped.value ? elevationStyle?.elevation : 0,\n            shadowColor: elevationStyle?.shadowColor,\n            shadowOffset: elevationStyle?.shadowOffset,\n            shadowRadius: elevationStyle?.shadowRadius,\n            shadowOpacity: overlapped.value ? elevationStyle?.shadowOpacity : 0,\n        });\n    });\n\n    const indexRef = React.useRef<number>(0);\n    const offsetsRef = React.useRef<Array<number>>([]);\n\n    const onScrollViewChanged = (nextIndex: number) => {\n        const prevIndex = indexRef.current;\n        if (prevIndex === nextIndex) {\n            return;\n        }\n\n        offsetsRef.current[prevIndex] = lastOffsetY.value;\n\n        const savedOffsetY = offsetsRef.current[nextIndex] ?? 0;\n        lastOffsetY.value = savedOffsetY;\n\n        indexRef.current = nextIndex;\n\n        // Determine whether to overlap every time index is changed.\n        overlapped.value = savedOffsetY > 0;\n\n        // If next ScrollView's offset is too short, expand app bar.\n        if (translateY.value < 0 && savedOffsetY < appBarHeight) {\n            translateY.value = Animated.withTiming(0, {\n                duration: ANIMATION_DURATION_MILLIS,\n            });\n        }\n    };\n\n    const scrollHandler = Animated.useAnimatedScrollHandler({\n        onBeginDrag: () => {\n            if (keyboardDismissMode === 'on-drag') {\n                Animated.runOnJS(Keyboard.dismiss)();\n            }\n            lastTranslateY.value = translateY.value;\n        },\n        onMomentumBegin: () => {\n            lastTranslateY.value = translateY.value;\n        },\n        onScroll: (event) => {\n            const offsetY = event.contentOffset.y;\n\n            const ty = translateY.value;\n            const maxTy = maxTranslateY.value;\n\n            if (SUPPORTS_DRAG_DETECTION) {\n                const dy = offsetY - lastOffsetY.value;\n\n                translateY.value = offsetY <= 0 ? 0 : Math.min(Math.max(lastTranslateY.value - dy, maxTy), 0);\n\n                overlapped.value = offsetY + translateY.value > 0;\n            } else {\n                if (offsetY > -maxTy) {\n                    if (ty === 0) {\n                        translateY.value = Animated.withTiming(Math.min(Math.max(-offsetY, maxTy), 0), {\n                            duration: ANIMATION_DURATION_MILLIS,\n                        });\n                    }\n                } else {\n                    if (ty === maxTy) {\n                        translateY.value = Animated.withTiming(0, {\n                            duration: ANIMATION_DURATION_MILLIS,\n                        });\n                    }\n                }\n\n                overlapped.value = offsetY > 0;\n\n                lastOffsetY.value = offsetY;\n            }\n        },\n        onEndDrag: (event) => {\n            lastOffsetY.value = event.contentOffset.y;\n        },\n        onMomentumEnd: (event) => {\n            const offsetY = event.contentOffset.y;\n\n            lastOffsetY.value = offsetY;\n\n            const ty = translateY.value;\n            const maxTy = maxTranslateY.value;\n\n            // If toolbar is already positioned on edge, do nothing.\n            if (ty <= maxTy || ty >= 0) {\n                return;\n            }\n\n            const threshold = maxTy * 0.5;\n\n            const nextTranslateY = (ty > threshold || offsetY < appBarHeight) ? 0 : maxTy;\n\n            overlapped.value = offsetY + nextTranslateY > 0;\n\n            translateY.value = Animated.withTiming(nextTranslateY, {\n                duration: ANIMATION_DURATION_MILLIS,\n            });\n        },\n    });\n\n    const hasCollapsible = collapsibleToolbarHeight > 0;\n\n    const appBarStyle = [\n        animatedStyle,\n        translucent ? { paddingTop: safeAreaInsets.top } : undefined,\n        hasCollapsible ? styles.floating : undefined,\n    ];\n\n    return {\n        appBarStyle,\n        onAppBarLayout,\n        onCollapsibleToolbarLayout,\n        onScroll: scrollHandler,\n        onScrollViewChanged,\n        scrollContentInsets: { top: hasCollapsible ? appBarHeight : 0 },\n    };\n};\n"]}

package/build/module/hooks/useFadeInAppBar.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Platform } from 'react-native';
+import { Keyboard, Platform } from 'react-native';
 import Animated from 'react-native-reanimated';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { rgb } from '@fountain-ui/utils';
@@ -10,6 +10,7 @@ const defaultOptions = {
   fadeInBeginY: (endY, appBarHeight) => endY - appBarHeight,
   fadeInEndY: appBarHeight => appBarHeight,
   floating: true,
+  keyboardDismissMode: 'none',
   translucent: false
 };
 const shadowOffset = Platform.OS === 'ios' ? {
@@ -22,6 +23,7 @@ export default function useFadeInAppBar(userOptions = defaultOptions) {
     fadeInBeginY,
     fadeInEndY,
     floating,
+    keyboardDismissMode,
     translucent
   } = { ...defaultOptions,
     ...userOptions
@@ -50,6 +52,11 @@ export default function useFadeInAppBar(userOptions = defaultOptions) {
     opacity: normalized.value
   }));
   const scrollHandler = Animated.useAnimatedScrollHandler({
+    onBeginDrag: () => {
+      if (keyboardDismissMode === 'on-drag') {
+        Animated.runOnJS(Keyboard.dismiss)();
+      }
+    },
     onScroll: event => {
       const offsetY = event.contentOffset.y;
       const distance = Math.max(toOffsetY - fromOffsetY, 1);

package/build/module/hooks/useFadeInAppBar.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useFadeInAppBar.ts"],"names":["React","Platform","Animated","useSafeAreaInsets","rgb","useHeight","useAppbarStyles","defaultOptions","backgroundColor","fadeInBeginY","endY","appBarHeight","fadeInEndY","floating","translucent","shadowOffset","OS","width","height","undefined","useFadeInAppBar","userOptions","styles","safeAreaInsets","onAppBarLayout","fromOffsetY","toOffsetY","useMemo","beginY","dy","useSharedValue","lastOffsetY","normalized","r","g","b","animatedAppBarStyle","useAnimatedStyle","value","elevation","shadowColor","shadowRadius","shadowOpacity","animatedTitleStyle","opacity","scrollHandler","useAnimatedScrollHandler","onScroll","event","offsetY","contentOffset","y","distance","Math","max","localOffsetY","min","onEndDrag","onMomentumEnd","appBarStyle","paddingTop","top","titleStyle"],"mappings":"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","sourcesContent":["import React from 'react';\nimport { Falsy, Platform, RegisteredStyle, ScrollViewProps, ViewProps, ViewStyle } from 'react-native';\nimport Animated from 'react-native-reanimated';\nimport { useSafeAreaInsets } from 'react-native-safe-area-context';\nimport { rgb } from '@fountain-ui/utils';\nimport { useHeight } from '../internal/hooks';\nimport useAppbarStyles from './useAppbarStyles';\n\ntype ViewStyleProp = Array<ViewStyle | RegisteredStyle<ViewStyle> | Falsy>;\n\ntype OnScroll = ScrollViewProps['onScroll'];\n\ntype OnLayoutCallback = ViewProps['onLayout'];\n\nexport interface Options {\n    backgroundColor?: string;\n    fadeInBeginY?: number | ((endY: number, appBarHeight: number) => number);\n    fadeInEndY?: number | ((appBarHeight: number) => number);\n    floating?: boolean;\n    translucent?: boolean;\n}\n\nexport interface FadeInAppBar {\n    appBarStyle: ViewStyleProp;\n    titleStyle: ViewStyleProp;\n    onAppBarLayout: OnLayoutCallback;\n    onScroll: OnScroll;\n    dy: Animated.SharedValue<number>;\n    normalized: Animated.SharedValue<number>;\n}\n\nconst defaultOptions: Required<Options> = {\n    backgroundColor: '#ffffff',\n    fadeInBeginY: (endY, appBarHeight) => endY - appBarHeight,\n    fadeInEndY: (appBarHeight) => appBarHeight,\n    floating: true,\n    translucent: false,\n};\n\nconst shadowOffset = Platform.OS === 'ios' ? { width: 0, height: 3 } : undefined;\n\nexport default function useFadeInAppBar(userOptions: Options = defaultOptions): FadeInAppBar {\n    const {\n        backgroundColor,\n        fadeInBeginY,\n        fadeInEndY,\n        floating,\n        translucent,\n    }: Required<Options> = {\n        ...defaultOptions,\n        ...userOptions,\n    };\n\n    const styles = useAppbarStyles();\n\n    const safeAreaInsets = useSafeAreaInsets();\n\n    const [appBarHeight, onAppBarLayout] = useHeight();\n\n    const [fromOffsetY, toOffsetY] = React.useMemo(() => {\n        const endY = typeof fadeInEndY === 'function'\n            ? fadeInEndY(appBarHeight)\n            : fadeInEndY;\n\n        const beginY = typeof fadeInBeginY === 'function'\n            ? fadeInBeginY(endY, appBarHeight)\n            : fadeInBeginY;\n\n        return [beginY, endY];\n    }, [fadeInBeginY, fadeInBeginY, appBarHeight]);\n\n    const dy = Animated.useSharedValue<number>(0);\n    const lastOffsetY = Animated.useSharedValue<number>(0);\n    const normalized = Animated.useSharedValue<number>(0);\n\n    const [r, g, b] = React.useMemo(() => rgb(backgroundColor), [backgroundColor]);\n\n    const animatedAppBarStyle = Animated.useAnimatedStyle(() => ({\n        backgroundColor: `rgba(${r}, ${g}, ${b}, ${normalized.value})`,\n        elevation: normalized.value >= 1 ? 6 : 0,\n        shadowColor: '#000',\n        shadowOffset,\n        shadowRadius: 4.65,\n        shadowOpacity: normalized.value >= 1 ? 0.25 : 0,\n    }));\n\n    const animatedTitleStyle = Animated.useAnimatedStyle(() => ({\n        opacity: normalized.value,\n    }));\n\n    const scrollHandler = Animated.useAnimatedScrollHandler({\n        onScroll: (event) => {\n            const offsetY = event.contentOffset.y;\n\n            const distance = Math.max(toOffsetY - fromOffsetY, 1);\n            const localOffsetY = offsetY - fromOffsetY;\n\n            dy.value = offsetY - lastOffsetY.value;\n\n            normalized.value = Math.min(Math.max(localOffsetY / distance, 0), 1);\n        },\n        onEndDrag: (event) => {\n            lastOffsetY.value = event.contentOffset.y;\n        },\n        onMomentumEnd: (event) => {\n            lastOffsetY.value = event.contentOffset.y;\n        },\n    });\n\n    const appBarStyle = [\n        animatedAppBarStyle,\n        translucent ? { paddingTop: safeAreaInsets.top } : undefined,\n        floating ? styles.floating : undefined,\n    ];\n\n    return {\n        appBarStyle,\n        titleStyle: [animatedTitleStyle],\n        onAppBarLayout,\n        onScroll: scrollHandler,\n        dy,\n        normalized,\n    };\n};\n"]}
+{"version":3,"sources":["useFadeInAppBar.ts"],"names":["React","Keyboard","Platform","Animated","useSafeAreaInsets","rgb","useHeight","useAppbarStyles","defaultOptions","backgroundColor","fadeInBeginY","endY","appBarHeight","fadeInEndY","floating","keyboardDismissMode","translucent","shadowOffset","OS","width","height","undefined","useFadeInAppBar","userOptions","styles","safeAreaInsets","onAppBarLayout","fromOffsetY","toOffsetY","useMemo","beginY","dy","useSharedValue","lastOffsetY","normalized","r","g","b","animatedAppBarStyle","useAnimatedStyle","value","elevation","shadowColor","shadowRadius","shadowOpacity","animatedTitleStyle","opacity","scrollHandler","useAnimatedScrollHandler","onBeginDrag","runOnJS","dismiss","onScroll","event","offsetY","contentOffset","y","distance","Math","max","localOffsetY","min","onEndDrag","onMomentumEnd","appBarStyle","paddingTop","top","titleStyle"],"mappings":"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","sourcesContent":["import React from 'react';\nimport { Falsy, Keyboard, Platform, RegisteredStyle, ScrollViewProps, ViewProps, ViewStyle } from 'react-native';\nimport Animated from 'react-native-reanimated';\nimport { useSafeAreaInsets } from 'react-native-safe-area-context';\nimport { rgb } from '@fountain-ui/utils';\nimport { useHeight } from '../internal/hooks';\nimport useAppbarStyles from './useAppbarStyles';\n\ntype ViewStyleProp = Array<ViewStyle | RegisteredStyle<ViewStyle> | Falsy>;\n\ntype OnScroll = ScrollViewProps['onScroll'];\n\ntype OnLayoutCallback = ViewProps['onLayout'];\n\nexport interface Options {\n    backgroundColor?: string;\n    fadeInBeginY?: number | ((endY: number, appBarHeight: number) => number);\n    fadeInEndY?: number | ((appBarHeight: number) => number);\n    floating?: boolean;\n    keyboardDismissMode?: 'none' | 'on-drag';\n    translucent?: boolean;\n}\n\nexport interface FadeInAppBar {\n    appBarStyle: ViewStyleProp;\n    titleStyle: ViewStyleProp;\n    onAppBarLayout: OnLayoutCallback;\n    onScroll: OnScroll;\n    dy: Animated.SharedValue<number>;\n    normalized: Animated.SharedValue<number>;\n}\n\nconst defaultOptions: Required<Options> = {\n    backgroundColor: '#ffffff',\n    fadeInBeginY: (endY, appBarHeight) => endY - appBarHeight,\n    fadeInEndY: (appBarHeight) => appBarHeight,\n    floating: true,\n    keyboardDismissMode: 'none',\n    translucent: false,\n};\n\nconst shadowOffset = Platform.OS === 'ios' ? { width: 0, height: 3 } : undefined;\n\nexport default function useFadeInAppBar(userOptions: Options = defaultOptions): FadeInAppBar {\n    const {\n        backgroundColor,\n        fadeInBeginY,\n        fadeInEndY,\n        floating,\n        keyboardDismissMode,\n        translucent,\n    }: Required<Options> = {\n        ...defaultOptions,\n        ...userOptions,\n    };\n\n    const styles = useAppbarStyles();\n\n    const safeAreaInsets = useSafeAreaInsets();\n\n    const [appBarHeight, onAppBarLayout] = useHeight();\n\n    const [fromOffsetY, toOffsetY] = React.useMemo(() => {\n        const endY = typeof fadeInEndY === 'function'\n            ? fadeInEndY(appBarHeight)\n            : fadeInEndY;\n\n        const beginY = typeof fadeInBeginY === 'function'\n            ? fadeInBeginY(endY, appBarHeight)\n            : fadeInBeginY;\n\n        return [beginY, endY];\n    }, [fadeInBeginY, fadeInBeginY, appBarHeight]);\n\n    const dy = Animated.useSharedValue<number>(0);\n    const lastOffsetY = Animated.useSharedValue<number>(0);\n    const normalized = Animated.useSharedValue<number>(0);\n\n    const [r, g, b] = React.useMemo(() => rgb(backgroundColor), [backgroundColor]);\n\n    const animatedAppBarStyle = Animated.useAnimatedStyle(() => ({\n        backgroundColor: `rgba(${r}, ${g}, ${b}, ${normalized.value})`,\n        elevation: normalized.value >= 1 ? 6 : 0,\n        shadowColor: '#000',\n        shadowOffset,\n        shadowRadius: 4.65,\n        shadowOpacity: normalized.value >= 1 ? 0.25 : 0,\n    }));\n\n    const animatedTitleStyle = Animated.useAnimatedStyle(() => ({\n        opacity: normalized.value,\n    }));\n\n    const scrollHandler = Animated.useAnimatedScrollHandler({\n        onBeginDrag: () => {\n            if (keyboardDismissMode === 'on-drag') {\n                Animated.runOnJS(Keyboard.dismiss)();\n            }\n        },\n        onScroll: (event) => {\n            const offsetY = event.contentOffset.y;\n\n            const distance = Math.max(toOffsetY - fromOffsetY, 1);\n            const localOffsetY = offsetY - fromOffsetY;\n\n            dy.value = offsetY - lastOffsetY.value;\n\n            normalized.value = Math.min(Math.max(localOffsetY / distance, 0), 1);\n        },\n        onEndDrag: (event) => {\n            lastOffsetY.value = event.contentOffset.y;\n        },\n        onMomentumEnd: (event) => {\n            lastOffsetY.value = event.contentOffset.y;\n        },\n    });\n\n    const appBarStyle = [\n        animatedAppBarStyle,\n        translucent ? { paddingTop: safeAreaInsets.top } : undefined,\n        floating ? styles.floating : undefined,\n    ];\n\n    return {\n        appBarStyle,\n        titleStyle: [animatedTitleStyle],\n        onAppBarLayout,\n        onScroll: scrollHandler,\n        dy,\n        normalized,\n    };\n};\n"]}

package/build/typescript/hooks/useCollapsibleAppBar.d.ts

@@ -12,6 +12,7 @@ export interface ContentInsets {
     right?: number;
 }
 export interface Options {
+    keyboardDismissMode?: 'none' | 'on-drag';
     translucent?: boolean;
 }
 export interface CollapsibleAppBar {

package/build/typescript/hooks/useFadeInAppBar.d.ts

@@ -8,6 +8,7 @@ export interface Options {
     fadeInBeginY?: number | ((endY: number, appBarHeight: number) => number);
     fadeInEndY?: number | ((appBarHeight: number) => number);
     floating?: boolean;
+    keyboardDismissMode?: 'none' | 'on-drag';
     translucent?: boolean;
 }
 export interface FadeInAppBar {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fountain-ui/core",
-  "version": "1.16.0",
+  "version": "1.17.0",
   "author": "Fountain-UI Team",
   "description": "React components that implement Tappytoon's Fountain Design.",
   "license": "MIT",
@@ -67,5 +67,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "0738cec018c008c9993b8d432ca8aaa44d7c3f77"
+  "gitHead": "f1c8ecff8e5819a3cf723236e0f626cc921cb9d3"
 }

package/src/hooks/useCollapsibleAppBar.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Falsy, Platform, RegisteredStyle, ScrollViewProps, ViewProps, ViewStyle } from 'react-native';
+import { Falsy, Keyboard, Platform, RegisteredStyle, ScrollViewProps, ViewProps, ViewStyle } from 'react-native';
 import Animated from 'react-native-reanimated';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { useHeight } from '../internal/hooks';
@@ -22,6 +22,7 @@ export interface ContentInsets {
 }
 
 export interface Options {
+    keyboardDismissMode?: 'none' | 'on-drag';
     translucent?: boolean;
 }
 
@@ -35,6 +36,7 @@ export interface CollapsibleAppBar {
 }
 
 const defaultOptions: Required<Options> = {
+    keyboardDismissMode: 'none',
     translucent: false,
 };
 
@@ -43,7 +45,7 @@ const ANIMATION_DURATION_MILLIS = 100;
 const SUPPORTS_DRAG_DETECTION = Platform.OS !== 'web';
 
 export default function useCollapsibleAppBar(userOptions: Options = defaultOptions): CollapsibleAppBar {
-    const { translucent }: Required<Options> = {
+    const { translucent, keyboardDismissMode }: Required<Options> = {
         ...defaultOptions,
         ...userOptions,
     };
@@ -106,6 +108,9 @@ export default function useCollapsibleAppBar(userOptions: Options = defaultOptio
 
     const scrollHandler = Animated.useAnimatedScrollHandler({
         onBeginDrag: () => {
+            if (keyboardDismissMode === 'on-drag') {
+                Animated.runOnJS(Keyboard.dismiss)();
+            }
             lastTranslateY.value = translateY.value;
         },
         onMomentumBegin: () => {

package/src/hooks/useFadeInAppBar.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Falsy, Platform, RegisteredStyle, ScrollViewProps, ViewProps, ViewStyle } from 'react-native';
+import { Falsy, Keyboard, Platform, RegisteredStyle, ScrollViewProps, ViewProps, ViewStyle } from 'react-native';
 import Animated from 'react-native-reanimated';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { rgb } from '@fountain-ui/utils';
@@ -17,6 +17,7 @@ export interface Options {
     fadeInBeginY?: number | ((endY: number, appBarHeight: number) => number);
     fadeInEndY?: number | ((appBarHeight: number) => number);
     floating?: boolean;
+    keyboardDismissMode?: 'none' | 'on-drag';
     translucent?: boolean;
 }
 
@@ -34,6 +35,7 @@ const defaultOptions: Required<Options> = {
     fadeInBeginY: (endY, appBarHeight) => endY - appBarHeight,
     fadeInEndY: (appBarHeight) => appBarHeight,
     floating: true,
+    keyboardDismissMode: 'none',
     translucent: false,
 };
 
@@ -45,6 +47,7 @@ export default function useFadeInAppBar(userOptions: Options = defaultOptions):
         fadeInBeginY,
         fadeInEndY,
         floating,
+        keyboardDismissMode,
         translucent,
     }: Required<Options> = {
         ...defaultOptions,
@@ -89,6 +92,11 @@ export default function useFadeInAppBar(userOptions: Options = defaultOptions):
     }));
 
     const scrollHandler = Animated.useAnimatedScrollHandler({
+        onBeginDrag: () => {
+            if (keyboardDismissMode === 'on-drag') {
+                Animated.runOnJS(Keyboard.dismiss)();
+            }
+        },
         onScroll: (event) => {
             const offsetY = event.contentOffset.y;