react-native-keyboard-controller 1.21.0-beta.0 → 1.21.0-beta.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (77) hide show
  1. package/ios/animations/KeyboardAnimation.swift +2 -2
  2. package/ios/animations/SpringAnimation.swift +1 -1
  3. package/ios/animations/TimingAnimation.swift +3 -1
  4. package/ios/delegates/KCTextInputCompositeDelegate.swift +2 -2
  5. package/ios/extensions/CGFloat.swift +3 -1
  6. package/ios/interactive/KeyboardAreaExtender.swift +1 -2
  7. package/ios/observers/FocusedInputObserver.swift +2 -4
  8. package/ios/observers/movement/KeyboardTrackingView.swift +1 -4
  9. package/ios/protocols/TextInput.swift +1 -1
  10. package/ios/swizzling/UIResponderSwizzle.swift +4 -2
  11. package/ios/traversal/FocusedInputHolder.swift +3 -3
  12. package/ios/traversal/KeyboardView.swift +1 -1
  13. package/ios/traversal/ViewHierarchyNavigator.swift +2 -2
  14. package/ios/views/KeyboardControllerViewManager.swift +5 -5
  15. package/jest/index.js +3 -0
  16. package/lib/commonjs/components/ChatKit/TODO.md +20 -0
  17. package/lib/commonjs/components/ChatKit/hooks.js +13 -0
  18. package/lib/commonjs/components/ChatKit/hooks.js.map +1 -0
  19. package/lib/commonjs/components/ChatKit/index.js +55 -0
  20. package/lib/commonjs/components/ChatKit/index.js.map +1 -0
  21. package/lib/commonjs/components/ChatKit/types.js +6 -0
  22. package/lib/commonjs/components/ChatKit/types.js.map +1 -0
  23. package/lib/commonjs/components/ChatKit/useChatKeyboard/helpers.js +101 -0
  24. package/lib/commonjs/components/ChatKit/useChatKeyboard/helpers.js.map +1 -0
  25. package/lib/commonjs/components/ChatKit/useChatKeyboard/index.js +147 -0
  26. package/lib/commonjs/components/ChatKit/useChatKeyboard/index.js.map +1 -0
  27. package/lib/commonjs/components/KeyboardAwareScrollView/index.js +7 -36
  28. package/lib/commonjs/components/KeyboardAwareScrollView/index.js.map +1 -1
  29. package/lib/commonjs/components/KeyboardStickyView/index.js +7 -5
  30. package/lib/commonjs/components/KeyboardStickyView/index.js.map +1 -1
  31. package/lib/commonjs/components/ScrollViewWithBottomPadding/index.js +38 -14
  32. package/lib/commonjs/components/ScrollViewWithBottomPadding/index.js.map +1 -1
  33. package/lib/commonjs/components/index.js +7 -0
  34. package/lib/commonjs/components/index.js.map +1 -1
  35. package/lib/commonjs/index.js +7 -0
  36. package/lib/commonjs/index.js.map +1 -1
  37. package/lib/module/components/ChatKit/TODO.md +20 -0
  38. package/lib/module/components/ChatKit/hooks.js +2 -0
  39. package/lib/module/components/ChatKit/hooks.js.map +1 -0
  40. package/lib/module/components/ChatKit/index.js +48 -0
  41. package/lib/module/components/ChatKit/index.js.map +1 -0
  42. package/lib/module/components/ChatKit/types.js +2 -0
  43. package/lib/module/components/ChatKit/types.js.map +1 -0
  44. package/lib/module/components/ChatKit/useChatKeyboard/helpers.js +92 -0
  45. package/lib/module/components/ChatKit/useChatKeyboard/helpers.js.map +1 -0
  46. package/lib/module/components/ChatKit/useChatKeyboard/index.js +141 -0
  47. package/lib/module/components/ChatKit/useChatKeyboard/index.js.map +1 -0
  48. package/lib/module/components/KeyboardAwareScrollView/index.js +7 -36
  49. package/lib/module/components/KeyboardAwareScrollView/index.js.map +1 -1
  50. package/lib/module/components/KeyboardStickyView/index.js +7 -5
  51. package/lib/module/components/KeyboardStickyView/index.js.map +1 -1
  52. package/lib/module/components/ScrollViewWithBottomPadding/index.js +38 -14
  53. package/lib/module/components/ScrollViewWithBottomPadding/index.js.map +1 -1
  54. package/lib/module/components/index.js +1 -0
  55. package/lib/module/components/index.js.map +1 -1
  56. package/lib/module/index.js +1 -1
  57. package/lib/module/index.js.map +1 -1
  58. package/lib/typescript/components/ChatKit/hooks.d.ts +2 -0
  59. package/lib/typescript/components/ChatKit/index.d.ts +14 -0
  60. package/lib/typescript/components/ChatKit/types.d.ts +49 -0
  61. package/lib/typescript/components/ChatKit/useChatKeyboard/helpers.d.ts +57 -0
  62. package/lib/typescript/components/ChatKit/useChatKeyboard/index.d.ts +36 -0
  63. package/lib/typescript/components/ScrollViewWithBottomPadding/index.d.ts +6 -1
  64. package/lib/typescript/components/index.d.ts +2 -0
  65. package/lib/typescript/index.d.ts +2 -2
  66. package/package.json +10 -3
  67. package/src/components/ChatKit/TODO.md +20 -0
  68. package/src/components/ChatKit/hooks.ts +2 -0
  69. package/src/components/ChatKit/index.tsx +63 -0
  70. package/src/components/ChatKit/types.ts +50 -0
  71. package/src/components/ChatKit/useChatKeyboard/helpers.ts +118 -0
  72. package/src/components/ChatKit/useChatKeyboard/index.ts +228 -0
  73. package/src/components/KeyboardAwareScrollView/index.tsx +7 -43
  74. package/src/components/KeyboardStickyView/index.tsx +4 -5
  75. package/src/components/ScrollViewWithBottomPadding/index.tsx +66 -17
  76. package/src/components/index.ts +2 -0
  77. package/src/index.ts +2 -0
@@ -1 +1 @@
1
- {"version":3,"names":["React","forwardRef","useMemo","Animated","useKeyboardAnimation","KeyboardStickyView","children","offset","closed","opened","style","enabled","props","ref","height","progress","interpolate","inputRange","outputRange","styles","transform","translateY","add","createElement","View","_extends"],"sources":["index.tsx"],"sourcesContent":["import React, { forwardRef, useMemo } from \"react\";\nimport { Animated } from \"react-native\";\n\nimport { useKeyboardAnimation } from \"../../hooks\";\n\nimport type { View, ViewProps } from \"react-native\";\n\nexport type KeyboardStickyViewProps = {\n /**\n * Specify additional offset to the view for given keyboard state.\n */\n offset?: {\n /**\n * Adds additional `translateY` when keyboard is close. By default `0`.\n */\n closed?: number;\n /**\n * Adds additional `translateY` when keyboard is open. By default `0`.\n */\n opened?: number;\n };\n\n /** Controls whether this `KeyboardStickyView` instance should take effect. Default is `true`. */\n enabled?: boolean;\n} & ViewProps;\n\n/**\n * A View component that sticks to the keyboard and moves with it when it appears or disappears.\n * The view can be configured with custom offsets for both closed and open keyboard states.\n *\n * @returns An animated View component that sticks to the keyboard.\n * @see {@link https://kirillzyusko.github.io/react-native-keyboard-controller/docs/api/components/keyboard-sticky-view|Documentation} page for more details.\n * @example\n * ```tsx\n * <KeyboardStickyView offset={{ closed: 0, opened: 20 }}>\n * <Button title=\"Submit\" />\n * </KeyboardStickyView>\n * ```\n */\nconst KeyboardStickyView = forwardRef<\n View,\n React.PropsWithChildren<KeyboardStickyViewProps>\n>(\n (\n {\n children,\n offset: { closed = 0, opened = 0 } = {},\n style,\n enabled = true,\n ...props\n },\n ref,\n ) => {\n const { height, progress } = useKeyboardAnimation();\n\n const offset = progress.interpolate({\n inputRange: [0, 1],\n outputRange: [closed, opened],\n });\n\n const styles = useMemo(\n () => [\n {\n transform: [\n { translateY: enabled ? Animated.add(height, offset) : closed },\n ],\n },\n style,\n ],\n [closed, enabled, height, offset, style],\n );\n\n return (\n <Animated.View ref={ref} style={styles} {...props}>\n {children}\n </Animated.View>\n );\n },\n);\n\nexport default KeyboardStickyView;\n"],"mappings":";AAAA,OAAOA,KAAK,IAAIC,UAAU,EAAEC,OAAO,QAAQ,OAAO;AAClD,SAASC,QAAQ,QAAQ,cAAc;AAEvC,SAASC,oBAAoB,QAAQ,aAAa;AAuBlD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAMC,kBAAkB,gBAAGJ,UAAU,CAInC,CACE;EACEK,QAAQ;EACRC,MAAM,EAAE;IAAEC,MAAM,GAAG,CAAC;IAAEC,MAAM,GAAG;EAAE,CAAC,GAAG,CAAC,CAAC;EACvCC,KAAK;EACLC,OAAO,GAAG,IAAI;EACd,GAAGC;AACL,CAAC,EACDC,GAAG,KACA;EACH,MAAM;IAAEC,MAAM;IAAEC;EAAS,CAAC,GAAGX,oBAAoB,CAAC,CAAC;EAEnD,MAAMG,MAAM,GAAGQ,QAAQ,CAACC,WAAW,CAAC;IAClCC,UAAU,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC;IAClBC,WAAW,EAAE,CAACV,MAAM,EAAEC,MAAM;EAC9B,CAAC,CAAC;EAEF,MAAMU,MAAM,GAAGjB,OAAO,CACpB,MAAM,CACJ;IACEkB,SAAS,EAAE,CACT;MAAEC,UAAU,EAAEV,OAAO,GAAGR,QAAQ,CAACmB,GAAG,CAACR,MAAM,EAAEP,MAAM,CAAC,GAAGC;IAAO,CAAC;EAEnE,CAAC,EACDE,KAAK,CACN,EACD,CAACF,MAAM,EAAEG,OAAO,EAAEG,MAAM,EAAEP,MAAM,EAAEG,KAAK,CACzC,CAAC;EAED,oBACEV,KAAA,CAAAuB,aAAA,CAACpB,QAAQ,CAACqB,IAAI,EAAAC,QAAA;IAACZ,GAAG,EAAEA,GAAI;IAACH,KAAK,EAAES;EAAO,GAAKP,KAAK,GAC9CN,QACY,CAAC;AAEpB,CACF,CAAC;AAED,eAAeD,kBAAkB","ignoreList":[]}
1
+ {"version":3,"names":["React","forwardRef","useMemo","Animated","useKeyboardAnimation","KeyboardStickyView","children","offset","closed","opened","style","enabled","props","ref","height","progress","interpolate","inputRange","outputRange","styles","transform","translateY","add","createElement","View","_extends"],"sources":["index.tsx"],"sourcesContent":["import React, { forwardRef, useMemo } from \"react\";\nimport { Animated } from \"react-native\";\n\nimport { useKeyboardAnimation } from \"../../hooks\";\n\nimport type { View, ViewProps } from \"react-native\";\n\nexport type KeyboardStickyViewProps = {\n /**\n * Specify additional offset to the view for given keyboard state.\n */\n offset?: {\n /**\n * Adds additional `translateY` when keyboard is close. By default `0`.\n */\n closed?: number;\n /**\n * Adds additional `translateY` when keyboard is open. By default `0`.\n */\n opened?: number;\n };\n\n /** Controls whether this `KeyboardStickyView` instance should take effect. Default is `true`. */\n enabled?: boolean;\n} & ViewProps;\n\n/**\n * A View component that sticks to the keyboard and moves with it when it appears or disappears.\n * The view can be configured with custom offsets for both closed and open keyboard states.\n *\n * @returns An animated View component that sticks to the keyboard.\n * @see {@link https://kirillzyusko.github.io/react-native-keyboard-controller/docs/api/components/keyboard-sticky-view|Documentation} page for more details.\n * @example\n * ```tsx\n * <KeyboardStickyView offset={{ closed: 0, opened: 20 }}>\n * <Button title=\"Submit\" />\n * </KeyboardStickyView>\n * ```\n */\nconst KeyboardStickyView = forwardRef<\n View,\n React.PropsWithChildren<KeyboardStickyViewProps>\n>(\n (\n {\n children,\n offset: { closed = 0, opened = 0 } = {},\n style,\n enabled = true,\n ...props\n },\n ref,\n ) => {\n const { height, progress } = useKeyboardAnimation();\n\n const offset = progress.interpolate({\n inputRange: [0, 1],\n outputRange: [closed, opened],\n });\n\n const styles = useMemo(() => {\n return [\n {\n transform: [\n { translateY: enabled ? Animated.add(height, offset) : closed },\n ],\n },\n style,\n ];\n }, [closed, enabled, height, offset, style]);\n\n return (\n <Animated.View ref={ref} style={styles} {...props}>\n {children}\n </Animated.View>\n );\n },\n);\n\nexport default KeyboardStickyView;\n"],"mappings":";AAAA,OAAOA,KAAK,IAAIC,UAAU,EAAEC,OAAO,QAAQ,OAAO;AAClD,SAASC,QAAQ,QAAQ,cAAc;AAEvC,SAASC,oBAAoB,QAAQ,aAAa;AAuBlD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAMC,kBAAkB,gBAAGJ,UAAU,CAInC,CACE;EACEK,QAAQ;EACRC,MAAM,EAAE;IAAEC,MAAM,GAAG,CAAC;IAAEC,MAAM,GAAG;EAAE,CAAC,GAAG,CAAC,CAAC;EACvCC,KAAK;EACLC,OAAO,GAAG,IAAI;EACd,GAAGC;AACL,CAAC,EACDC,GAAG,KACA;EACH,MAAM;IAAEC,MAAM;IAAEC;EAAS,CAAC,GAAGX,oBAAoB,CAAC,CAAC;EAEnD,MAAMG,MAAM,GAAGQ,QAAQ,CAACC,WAAW,CAAC;IAClCC,UAAU,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC;IAClBC,WAAW,EAAE,CAACV,MAAM,EAAEC,MAAM;EAC9B,CAAC,CAAC;EAEF,MAAMU,MAAM,GAAGjB,OAAO,CAAC,MAAM;IAC3B,OAAO,CACL;MACEkB,SAAS,EAAE,CACT;QAAEC,UAAU,EAAEV,OAAO,GAAGR,QAAQ,CAACmB,GAAG,CAACR,MAAM,EAAEP,MAAM,CAAC,GAAGC;MAAO,CAAC;IAEnE,CAAC,EACDE,KAAK,CACN;EACH,CAAC,EAAE,CAACF,MAAM,EAAEG,OAAO,EAAEG,MAAM,EAAEP,MAAM,EAAEG,KAAK,CAAC,CAAC;EAE5C,oBACEV,KAAA,CAAAuB,aAAA,CAACpB,QAAQ,CAACqB,IAAI,EAAAC,QAAA;IAACZ,GAAG,EAAEA,GAAI;IAACH,KAAK,EAAES;EAAO,GAAKP,KAAK,GAC9CN,QACY,CAAC;AAEpB,CACF,CAAC;AAED,eAAeD,kBAAkB","ignoreList":[]}
@@ -4,31 +4,55 @@ import { Platform } from "react-native";
4
4
  import Reanimated, { useAnimatedProps } from "react-native-reanimated";
5
5
  import { ClippingScrollView } from "../../bindings";
6
6
  import styles from "./styles";
7
- const ReanimatedClippingScrollView = Platform.OS === "android" ? Reanimated.createAnimatedComponent(ClippingScrollView) : ClippingScrollView;
7
+ const OS = Platform.OS;
8
+ const ReanimatedClippingScrollView = OS === "android" ? Reanimated.createAnimatedComponent(ClippingScrollView) : ClippingScrollView;
8
9
  const ScrollViewWithBottomPadding = /*#__PURE__*/forwardRef(({
9
10
  ScrollViewComponent,
10
11
  bottomPadding,
11
12
  contentInset,
13
+ scrollIndicatorInsets,
14
+ inverted,
15
+ contentOffsetY,
16
+ containerStyle,
12
17
  children,
18
+ style,
13
19
  ...rest
14
20
  }, ref) => {
15
- const animatedProps = useAnimatedProps(() => ({
16
- // iOS prop
17
- contentInset: {
18
- bottom: bottomPadding.value + ((contentInset === null || contentInset === void 0 ? void 0 : contentInset.bottom) || 0),
19
- top: contentInset === null || contentInset === void 0 ? void 0 : contentInset.top,
20
- right: contentInset === null || contentInset === void 0 ? void 0 : contentInset.right,
21
- left: contentInset === null || contentInset === void 0 ? void 0 : contentInset.left
22
- },
23
- // Android prop
24
- contentInsetBottom: bottomPadding.value
25
- }), [contentInset === null || contentInset === void 0 ? void 0 : contentInset.bottom, contentInset === null || contentInset === void 0 ? void 0 : contentInset.top, contentInset === null || contentInset === void 0 ? void 0 : contentInset.right, contentInset === null || contentInset === void 0 ? void 0 : contentInset.left]);
21
+ const animatedProps = useAnimatedProps(() => {
22
+ const bottom = inverted ? 0 : bottomPadding.value + ((contentInset === null || contentInset === void 0 ? void 0 : contentInset.bottom) || 0);
23
+ const top = !inverted ? 0 : bottomPadding.value + ((contentInset === null || contentInset === void 0 ? void 0 : contentInset.top) || 0);
24
+ const result = {
25
+ // iOS prop
26
+ contentInset: {
27
+ bottom: bottom,
28
+ top: top,
29
+ right: contentInset === null || contentInset === void 0 ? void 0 : contentInset.right,
30
+ left: contentInset === null || contentInset === void 0 ? void 0 : contentInset.left
31
+ },
32
+ scrollIndicatorInsets: {
33
+ bottom: bottom,
34
+ top: top,
35
+ right: scrollIndicatorInsets === null || scrollIndicatorInsets === void 0 ? void 0 : scrollIndicatorInsets.right,
36
+ left: scrollIndicatorInsets === null || scrollIndicatorInsets === void 0 ? void 0 : scrollIndicatorInsets.left
37
+ },
38
+ // Android prop
39
+ contentInsetBottom: bottomPadding.value
40
+ };
41
+ if (contentOffsetY) {
42
+ result.contentOffset = {
43
+ x: 0,
44
+ y: contentOffsetY.value
45
+ };
46
+ }
47
+ return result;
48
+ }, [contentInset === null || contentInset === void 0 ? void 0 : contentInset.bottom, contentInset === null || contentInset === void 0 ? void 0 : contentInset.top, contentInset === null || contentInset === void 0 ? void 0 : contentInset.right, contentInset === null || contentInset === void 0 ? void 0 : contentInset.left, scrollIndicatorInsets === null || scrollIndicatorInsets === void 0 ? void 0 : scrollIndicatorInsets.bottom, scrollIndicatorInsets === null || scrollIndicatorInsets === void 0 ? void 0 : scrollIndicatorInsets.top, scrollIndicatorInsets === null || scrollIndicatorInsets === void 0 ? void 0 : scrollIndicatorInsets.right, scrollIndicatorInsets === null || scrollIndicatorInsets === void 0 ? void 0 : scrollIndicatorInsets.left, inverted, contentOffsetY]);
26
49
  return /*#__PURE__*/React.createElement(ReanimatedClippingScrollView, {
27
50
  animatedProps: animatedProps,
28
- style: styles.container
51
+ style: [styles.container, OS === "android" ? containerStyle : undefined]
29
52
  }, /*#__PURE__*/React.createElement(ScrollViewComponent, _extends({
30
53
  ref: ref,
31
- animatedProps: animatedProps
54
+ animatedProps: animatedProps,
55
+ style: style
32
56
  }, rest), children));
33
57
  });
34
58
  export default ScrollViewWithBottomPadding;
@@ -1 +1 @@
1
- {"version":3,"names":["React","forwardRef","Platform","Reanimated","useAnimatedProps","ClippingScrollView","styles","ReanimatedClippingScrollView","OS","createAnimatedComponent","ScrollViewWithBottomPadding","ScrollViewComponent","bottomPadding","contentInset","children","rest","ref","animatedProps","bottom","value","top","right","left","contentInsetBottom","createElement","style","container","_extends"],"sources":["index.tsx"],"sourcesContent":["import React, { forwardRef } from \"react\";\nimport { Platform } from \"react-native\";\nimport Reanimated, { useAnimatedProps } from \"react-native-reanimated\";\n\nimport { ClippingScrollView } from \"../../bindings\";\n\nimport styles from \"./styles\";\n\nimport type { ScrollViewProps } from \"react-native\";\nimport type { SharedValue } from \"react-native-reanimated\";\n\nconst ReanimatedClippingScrollView =\n Platform.OS === \"android\"\n ? Reanimated.createAnimatedComponent(ClippingScrollView)\n : ClippingScrollView;\n\ntype AnimatedScrollViewProps = React.ComponentProps<\n typeof Reanimated.ScrollView\n>;\n\nexport type AnimatedScrollViewComponent = React.ForwardRefExoticComponent<\n AnimatedScrollViewProps & React.RefAttributes<Reanimated.ScrollView>\n>;\n\ntype ScrollViewWithBottomPaddingProps = {\n ScrollViewComponent: AnimatedScrollViewComponent;\n children?: React.ReactNode;\n bottomPadding: SharedValue<number>;\n} & ScrollViewProps;\n\nconst ScrollViewWithBottomPadding = forwardRef<\n Reanimated.ScrollView,\n ScrollViewWithBottomPaddingProps\n>(\n (\n { ScrollViewComponent, bottomPadding, contentInset, children, ...rest },\n ref,\n ) => {\n const animatedProps = useAnimatedProps(\n () => ({\n // iOS prop\n contentInset: {\n bottom: bottomPadding.value + (contentInset?.bottom || 0),\n top: contentInset?.top,\n right: contentInset?.right,\n left: contentInset?.left,\n },\n // Android prop\n contentInsetBottom: bottomPadding.value,\n }),\n [\n contentInset?.bottom,\n contentInset?.top,\n contentInset?.right,\n contentInset?.left,\n ],\n );\n\n return (\n <ReanimatedClippingScrollView\n animatedProps={animatedProps}\n style={styles.container}\n >\n <ScrollViewComponent ref={ref} animatedProps={animatedProps} {...rest}>\n {children}\n </ScrollViewComponent>\n </ReanimatedClippingScrollView>\n );\n },\n);\n\nexport default ScrollViewWithBottomPadding;\n"],"mappings":";AAAA,OAAOA,KAAK,IAAIC,UAAU,QAAQ,OAAO;AACzC,SAASC,QAAQ,QAAQ,cAAc;AACvC,OAAOC,UAAU,IAAIC,gBAAgB,QAAQ,yBAAyB;AAEtE,SAASC,kBAAkB,QAAQ,gBAAgB;AAEnD,OAAOC,MAAM,MAAM,UAAU;AAK7B,MAAMC,4BAA4B,GAChCL,QAAQ,CAACM,EAAE,KAAK,SAAS,GACrBL,UAAU,CAACM,uBAAuB,CAACJ,kBAAkB,CAAC,GACtDA,kBAAkB;AAgBxB,MAAMK,2BAA2B,gBAAGT,UAAU,CAI5C,CACE;EAAEU,mBAAmB;EAAEC,aAAa;EAAEC,YAAY;EAAEC,QAAQ;EAAE,GAAGC;AAAK,CAAC,EACvEC,GAAG,KACA;EACH,MAAMC,aAAa,GAAGb,gBAAgB,CACpC,OAAO;IACL;IACAS,YAAY,EAAE;MACZK,MAAM,EAAEN,aAAa,CAACO,KAAK,IAAI,CAAAN,YAAY,aAAZA,YAAY,uBAAZA,YAAY,CAAEK,MAAM,KAAI,CAAC,CAAC;MACzDE,GAAG,EAAEP,YAAY,aAAZA,YAAY,uBAAZA,YAAY,CAAEO,GAAG;MACtBC,KAAK,EAAER,YAAY,aAAZA,YAAY,uBAAZA,YAAY,CAAEQ,KAAK;MAC1BC,IAAI,EAAET,YAAY,aAAZA,YAAY,uBAAZA,YAAY,CAAES;IACtB,CAAC;IACD;IACAC,kBAAkB,EAAEX,aAAa,CAACO;EACpC,CAAC,CAAC,EACF,CACEN,YAAY,aAAZA,YAAY,uBAAZA,YAAY,CAAEK,MAAM,EACpBL,YAAY,aAAZA,YAAY,uBAAZA,YAAY,CAAEO,GAAG,EACjBP,YAAY,aAAZA,YAAY,uBAAZA,YAAY,CAAEQ,KAAK,EACnBR,YAAY,aAAZA,YAAY,uBAAZA,YAAY,CAAES,IAAI,CAEtB,CAAC;EAED,oBACEtB,KAAA,CAAAwB,aAAA,CAACjB,4BAA4B;IAC3BU,aAAa,EAAEA,aAAc;IAC7BQ,KAAK,EAAEnB,MAAM,CAACoB;EAAU,gBAExB1B,KAAA,CAAAwB,aAAA,CAACb,mBAAmB,EAAAgB,QAAA;IAACX,GAAG,EAAEA,GAAI;IAACC,aAAa,EAAEA;EAAc,GAAKF,IAAI,GAClED,QACkB,CACO,CAAC;AAEnC,CACF,CAAC;AAED,eAAeJ,2BAA2B","ignoreList":[]}
1
+ {"version":3,"names":["React","forwardRef","Platform","Reanimated","useAnimatedProps","ClippingScrollView","styles","OS","ReanimatedClippingScrollView","createAnimatedComponent","ScrollViewWithBottomPadding","ScrollViewComponent","bottomPadding","contentInset","scrollIndicatorInsets","inverted","contentOffsetY","containerStyle","children","style","rest","ref","animatedProps","bottom","value","top","result","right","left","contentInsetBottom","contentOffset","x","y","createElement","container","undefined","_extends"],"sources":["index.tsx"],"sourcesContent":["import React, { forwardRef } from \"react\";\nimport { Platform } from \"react-native\";\nimport Reanimated, { useAnimatedProps } from \"react-native-reanimated\";\n\nimport { ClippingScrollView } from \"../../bindings\";\n\nimport styles from \"./styles\";\n\nimport type { ScrollViewProps, StyleProp, ViewStyle } from \"react-native\";\nimport type { SharedValue } from \"react-native-reanimated\";\n\nconst OS = Platform.OS;\nconst ReanimatedClippingScrollView =\n OS === \"android\"\n ? Reanimated.createAnimatedComponent(ClippingScrollView)\n : ClippingScrollView;\n\ntype AnimatedScrollViewProps = React.ComponentProps<\n typeof Reanimated.ScrollView\n>;\n\nexport type AnimatedScrollViewComponent = React.ForwardRefExoticComponent<\n AnimatedScrollViewProps & React.RefAttributes<Reanimated.ScrollView>\n>;\n\ntype ScrollViewWithBottomPaddingProps = {\n ScrollViewComponent: AnimatedScrollViewComponent;\n children?: React.ReactNode;\n inverted?: boolean;\n bottomPadding: SharedValue<number>;\n /** Absolute Y content offset (iOS only, for ChatKit). */\n contentOffsetY?: SharedValue<number>;\n /** Style applied to the container wrapper (Android only, for ChatKit translateY). */\n containerStyle?: StyleProp<ViewStyle>;\n} & ScrollViewProps;\n\nconst ScrollViewWithBottomPadding = forwardRef<\n Reanimated.ScrollView,\n ScrollViewWithBottomPaddingProps\n>(\n (\n {\n ScrollViewComponent,\n bottomPadding,\n contentInset,\n scrollIndicatorInsets,\n inverted,\n contentOffsetY,\n containerStyle,\n children,\n style,\n ...rest\n },\n ref,\n ) => {\n const animatedProps = useAnimatedProps(() => {\n const bottom = inverted\n ? 0\n : bottomPadding.value + (contentInset?.bottom || 0);\n const top = !inverted\n ? 0\n : bottomPadding.value + (contentInset?.top || 0);\n\n const result: Record<string, unknown> = {\n // iOS prop\n contentInset: {\n bottom: bottom,\n top: top,\n right: contentInset?.right,\n left: contentInset?.left,\n },\n scrollIndicatorInsets: {\n bottom: bottom,\n top: top,\n right: scrollIndicatorInsets?.right,\n left: scrollIndicatorInsets?.left,\n },\n // Android prop\n contentInsetBottom: bottomPadding.value,\n };\n\n if (contentOffsetY) {\n result.contentOffset = { x: 0, y: contentOffsetY.value };\n }\n\n return result;\n }, [\n contentInset?.bottom,\n contentInset?.top,\n contentInset?.right,\n contentInset?.left,\n scrollIndicatorInsets?.bottom,\n scrollIndicatorInsets?.top,\n scrollIndicatorInsets?.right,\n scrollIndicatorInsets?.left,\n inverted,\n contentOffsetY,\n ]);\n\n return (\n <ReanimatedClippingScrollView\n animatedProps={animatedProps}\n style={[\n styles.container,\n OS === \"android\" ? containerStyle : undefined,\n ]}\n >\n <ScrollViewComponent\n ref={ref}\n animatedProps={animatedProps}\n style={style}\n {...rest}\n >\n {children}\n </ScrollViewComponent>\n </ReanimatedClippingScrollView>\n );\n },\n);\n\nexport default ScrollViewWithBottomPadding;\n"],"mappings":"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","ignoreList":[]}
@@ -2,4 +2,5 @@ export { default as KeyboardAvoidingView } from "./KeyboardAvoidingView";
2
2
  export { default as KeyboardStickyView } from "./KeyboardStickyView";
3
3
  export { default as KeyboardAwareScrollView } from "./KeyboardAwareScrollView";
4
4
  export { default as KeyboardToolbar, DefaultKeyboardToolbarTheme } from "./KeyboardToolbar";
5
+ export { default as ChatKit } from "./ChatKit";
5
6
  //# sourceMappingURL=index.js.map
@@ -1 +1 @@
1
- {"version":3,"names":["default","KeyboardAvoidingView","KeyboardStickyView","KeyboardAwareScrollView","KeyboardToolbar","DefaultKeyboardToolbarTheme"],"sources":["index.ts"],"sourcesContent":["export { default as KeyboardAvoidingView } from \"./KeyboardAvoidingView\";\nexport { default as KeyboardStickyView } from \"./KeyboardStickyView\";\nexport { default as KeyboardAwareScrollView } from \"./KeyboardAwareScrollView\";\nexport {\n default as KeyboardToolbar,\n DefaultKeyboardToolbarTheme,\n} from \"./KeyboardToolbar\";\nexport type { KeyboardAvoidingViewProps } from \"./KeyboardAvoidingView\";\nexport type { KeyboardStickyViewProps } from \"./KeyboardStickyView\";\nexport type {\n KeyboardAwareScrollViewProps,\n KeyboardAwareScrollViewRef,\n} from \"./KeyboardAwareScrollView\";\nexport type { KeyboardToolbarProps } from \"./KeyboardToolbar\";\n"],"mappings":"AAAA,SAASA,OAAO,IAAIC,oBAAoB,QAAQ,wBAAwB;AACxE,SAASD,OAAO,IAAIE,kBAAkB,QAAQ,sBAAsB;AACpE,SAASF,OAAO,IAAIG,uBAAuB,QAAQ,2BAA2B;AAC9E,SACEH,OAAO,IAAII,eAAe,EAC1BC,2BAA2B,QACtB,mBAAmB","ignoreList":[]}
1
+ {"version":3,"names":["default","KeyboardAvoidingView","KeyboardStickyView","KeyboardAwareScrollView","KeyboardToolbar","DefaultKeyboardToolbarTheme","ChatKit"],"sources":["index.ts"],"sourcesContent":["export { default as KeyboardAvoidingView } from \"./KeyboardAvoidingView\";\nexport { default as KeyboardStickyView } from \"./KeyboardStickyView\";\nexport { default as KeyboardAwareScrollView } from \"./KeyboardAwareScrollView\";\nexport {\n default as KeyboardToolbar,\n DefaultKeyboardToolbarTheme,\n} from \"./KeyboardToolbar\";\nexport { default as ChatKit } from \"./ChatKit\";\nexport type { KeyboardAvoidingViewProps } from \"./KeyboardAvoidingView\";\nexport type { KeyboardStickyViewProps } from \"./KeyboardStickyView\";\nexport type {\n KeyboardAwareScrollViewProps,\n KeyboardAwareScrollViewRef,\n} from \"./KeyboardAwareScrollView\";\nexport type { KeyboardToolbarProps } from \"./KeyboardToolbar\";\nexport type { ChatKitScrollViewProps } from \"./ChatKit/types\";\n"],"mappings":"AAAA,SAASA,OAAO,IAAIC,oBAAoB,QAAQ,wBAAwB;AACxE,SAASD,OAAO,IAAIE,kBAAkB,QAAQ,sBAAsB;AACpE,SAASF,OAAO,IAAIG,uBAAuB,QAAQ,2BAA2B;AAC9E,SACEH,OAAO,IAAII,eAAe,EAC1BC,2BAA2B,QACtB,mBAAmB;AAC1B,SAASL,OAAO,IAAIM,OAAO,QAAQ,WAAW","ignoreList":[]}
@@ -6,7 +6,7 @@ export * from "./constants";
6
6
  export * from "./module";
7
7
  export * from "./types";
8
8
  export * from "./compat";
9
- export { KeyboardAvoidingView, KeyboardStickyView, KeyboardAwareScrollView,
9
+ export { ChatKit, KeyboardAvoidingView, KeyboardStickyView, KeyboardAwareScrollView,
10
10
  // keyboard toolbar
11
11
  KeyboardToolbar, DefaultKeyboardToolbarTheme } from "./components";
12
12
  export { OverKeyboardView, KeyboardExtender } from "./views";
@@ -1 +1 @@
1
- {"version":3,"names":["KeyboardAvoidingView","KeyboardStickyView","KeyboardAwareScrollView","KeyboardToolbar","DefaultKeyboardToolbarTheme","OverKeyboardView","KeyboardExtender"],"sources":["index.ts"],"sourcesContent":["export * from \"./bindings\";\nexport * from \"./animated\";\nexport * from \"./context\";\nexport * from \"./hooks\";\nexport * from \"./constants\";\nexport * from \"./module\";\nexport * from \"./types\";\nexport * from \"./compat\";\n\nexport {\n KeyboardAvoidingView,\n KeyboardStickyView,\n KeyboardAwareScrollView,\n // keyboard toolbar\n KeyboardToolbar,\n DefaultKeyboardToolbarTheme,\n} from \"./components\";\nexport type {\n KeyboardAvoidingViewProps,\n KeyboardStickyViewProps,\n KeyboardAwareScrollViewProps,\n KeyboardAwareScrollViewRef,\n KeyboardToolbarProps,\n} from \"./components\";\nexport { OverKeyboardView, KeyboardExtender } from \"./views\";\n"],"mappings":"AAAA,cAAc,YAAY;AAC1B,cAAc,YAAY;AAC1B,cAAc,WAAW;AACzB,cAAc,SAAS;AACvB,cAAc,aAAa;AAC3B,cAAc,UAAU;AACxB,cAAc,SAAS;AACvB,cAAc,UAAU;AAExB,SACEA,oBAAoB,EACpBC,kBAAkB,EAClBC,uBAAuB;AACvB;AACAC,eAAe,EACfC,2BAA2B,QACtB,cAAc;AAQrB,SAASC,gBAAgB,EAAEC,gBAAgB,QAAQ,SAAS","ignoreList":[]}
1
+ {"version":3,"names":["ChatKit","KeyboardAvoidingView","KeyboardStickyView","KeyboardAwareScrollView","KeyboardToolbar","DefaultKeyboardToolbarTheme","OverKeyboardView","KeyboardExtender"],"sources":["index.ts"],"sourcesContent":["export * from \"./bindings\";\nexport * from \"./animated\";\nexport * from \"./context\";\nexport * from \"./hooks\";\nexport * from \"./constants\";\nexport * from \"./module\";\nexport * from \"./types\";\nexport * from \"./compat\";\n\nexport {\n ChatKit,\n KeyboardAvoidingView,\n KeyboardStickyView,\n KeyboardAwareScrollView,\n // keyboard toolbar\n KeyboardToolbar,\n DefaultKeyboardToolbarTheme,\n} from \"./components\";\nexport type {\n ChatKitScrollViewProps,\n KeyboardAvoidingViewProps,\n KeyboardStickyViewProps,\n KeyboardAwareScrollViewProps,\n KeyboardAwareScrollViewRef,\n KeyboardToolbarProps,\n} from \"./components\";\nexport { OverKeyboardView, KeyboardExtender } from \"./views\";\n"],"mappings":"AAAA,cAAc,YAAY;AAC1B,cAAc,YAAY;AAC1B,cAAc,WAAW;AACzB,cAAc,SAAS;AACvB,cAAc,aAAa;AAC3B,cAAc,UAAU;AACxB,cAAc,SAAS;AACvB,cAAc,UAAU;AAExB,SACEA,OAAO,EACPC,oBAAoB,EACpBC,kBAAkB,EAClBC,uBAAuB;AACvB;AACAC,eAAe,EACfC,2BAA2B,QACtB,cAAc;AASrB,SAASC,gBAAgB,EAAEC,gBAAgB,QAAQ,SAAS","ignoreList":[]}
@@ -0,0 +1,2 @@
1
+ export { useChatKeyboard } from "./useChatKeyboard";
2
+ export type { KeyboardLiftBehavior } from "./useChatKeyboard";
@@ -0,0 +1,14 @@
1
+ import React from "react";
2
+ import Reanimated from "react-native-reanimated";
3
+ declare const ChatKit: {
4
+ ScrollView: React.ForwardRefExoticComponent<{
5
+ ScrollViewComponent: import("../ScrollViewWithBottomPadding").AnimatedScrollViewComponent;
6
+ inverted?: boolean;
7
+ offset?: number;
8
+ keyboardLiftBehavior?: "always" | "never" | "whenAtEnd" | "persistent";
9
+ freeze?: boolean;
10
+ } & import("react-native").ScrollViewProps & {
11
+ children?: React.ReactNode | undefined;
12
+ } & React.RefAttributes<Reanimated.ScrollView>>;
13
+ };
14
+ export default ChatKit;
@@ -0,0 +1,49 @@
1
+ import type { AnimatedScrollViewComponent } from "../ScrollViewWithBottomPadding";
2
+ import type { ScrollViewProps } from "react-native";
3
+ type KeyboardLiftBehavior = "always" | "whenAtEnd" | "persistent" | "never";
4
+ export type ChatKitScrollViewProps = {
5
+ /** Custom component for `ScrollView`. Default is `ScrollView`. */
6
+ ScrollViewComponent: AnimatedScrollViewComponent;
7
+ /** Whether list are using `inverted` prop. Default is `false`. */
8
+ inverted?: boolean;
9
+ /**
10
+ * The distance (in pixels) between the bottom of the screen and the `ScrollView`.
11
+ * When the keyboard appears, the scroll view will only push content by the effective
12
+ * distance (`keyboardHeight - offset`) instead of the full keyboard height.
13
+ *
14
+ * Useful when the input is not at the very bottom of the screen (e.g., above safe area, above
15
+ * bottom tabs, etc. - in this case offset should be equal to the height of the elements between
16
+ * `ScrollView` and bottom of the screen).
17
+ *
18
+ * Default is `0`.
19
+ */
20
+ offset?: number;
21
+ /**
22
+ * Determines how the chat content should behave when the keyboard appears, specifically whether
23
+ * the scroll view should automatically lift its content to keep it visible above the keyboard.
24
+ *
25
+ * Possible values:
26
+ * - `'always'`: The content always lifts along with the keyboard, ensuring the messages from the bottom part of screen
27
+ * remain visible regardless of the current scroll position. This is the default behavior for most chat applications (used in Telegram).
28
+ * - `'whenAtEnd'`: The content lifts only if the scroll view is at the end (i.e., the last message
29
+ * is visible or near the bottom). This prevents unnecessary adjustments when the user is scrolling
30
+ * through older messages (ChatGPT mobile app behavior).
31
+ * - `'persistent'`: The content always lifts when the keyboard appears (similar to `'always'`), but
32
+ * does not reset (lower) when the keyboard hides. This mimics behaviors where the view remains adjusted
33
+ * after keyboard dismissal to maintain focus on the latest content without shifting back (Claude mobile app behavior).
34
+ * - `'never'`: The content does not lift at all when the keyboard appears. Use this for scenarios
35
+ * when you don't want to disturb user attention with animations (Perplexity mobile app behavior).
36
+ *
37
+ * Default is `'always'`.
38
+ */
39
+ keyboardLiftBehavior?: KeyboardLiftBehavior;
40
+ /**
41
+ * When `true`, freezes all keyboard-driven layout changes (padding, content offset, scroll position).
42
+ * Useful when dismissing the keyboard to open a bottom sheet — prevents visual disruption
43
+ * while the sheet is visible.
44
+ *
45
+ * Default is `false`.
46
+ */
47
+ freeze?: boolean;
48
+ } & ScrollViewProps;
49
+ export {};
@@ -0,0 +1,57 @@
1
+ type KeyboardLiftBehavior = "always" | "whenAtEnd" | "persistent" | "never";
2
+ /**
3
+ * Check whether the scroll view is at the end of its content.
4
+ *
5
+ * @param scrollOffset - Current vertical scroll offset.
6
+ * @param layoutHeight - Visible height of the scroll view.
7
+ * @param contentHeight - Total height of the scrollable content.
8
+ * @returns `true` if the scroll position is within the threshold of the content end.
9
+ * @example
10
+ * ```ts
11
+ * const atEnd = isScrollAtEnd(100, 800, 920); // true (100 + 800 >= 920 - 20)
12
+ * ```
13
+ */
14
+ export declare function isScrollAtEnd(scrollOffset: number, layoutHeight: number, contentHeight: number): boolean;
15
+ /**
16
+ * Decide whether content should be shifted based on the keyboard lift behavior.
17
+ *
18
+ * @param behavior - The configured keyboard lift behavior.
19
+ * @param isAtEnd - Whether the scroll view is currently at the end.
20
+ * @returns `true` if content should be shifted.
21
+ * @example
22
+ * ```ts
23
+ * shouldShiftContent("always", false); // true
24
+ * shouldShiftContent("whenAtEnd", false); // false
25
+ * ```
26
+ */
27
+ export declare function shouldShiftContent(behavior: KeyboardLiftBehavior, isAtEnd: boolean): boolean;
28
+ /**
29
+ * Compute the clamped scroll target for non-inverted lists.
30
+ *
31
+ * @param offsetBeforeScroll - Scroll position before keyboard appeared.
32
+ * @param keyboardHeight - Current keyboard height.
33
+ * @param contentHeight - Total height of the scrollable content.
34
+ * @param layoutHeight - Visible height of the scroll view.
35
+ * @returns Clamped scroll target between 0 and maxScroll.
36
+ * @example
37
+ * ```ts
38
+ * clampedScrollTarget(100, 300, 1000, 800); // 400
39
+ * ```
40
+ */
41
+ export declare function clampedScrollTarget(offsetBeforeScroll: number, keyboardHeight: number, contentHeight: number, layoutHeight: number): number;
42
+ /**
43
+ * Compute contentOffset.y for iOS lists.
44
+ *
45
+ * @param relativeScroll - Scroll position relative to current inset.
46
+ * @param keyboardHeight - Target keyboard height.
47
+ * @param contentHeight - Total height of the scrollable content.
48
+ * @param layoutHeight - Visible height of the scroll view.
49
+ * @param inverted - Whether the list is inverted.
50
+ * @returns The absolute contentOffset.y to set.
51
+ * @example
52
+ * ```ts
53
+ * computeIOSContentOffset(100, 300, 1000, 800, false); // 400
54
+ * ```
55
+ */
56
+ export declare function computeIOSContentOffset(relativeScroll: number, keyboardHeight: number, contentHeight: number, layoutHeight: number, inverted: boolean): number;
57
+ export {};
@@ -0,0 +1,36 @@
1
+ import type { AnimatedRef, SharedValue } from "react-native-reanimated";
2
+ import type Reanimated from "react-native-reanimated";
3
+ type KeyboardLiftBehavior = "always" | "whenAtEnd" | "persistent" | "never";
4
+ type UseChatKeyboardOptions = {
5
+ inverted: boolean;
6
+ keyboardLiftBehavior: KeyboardLiftBehavior;
7
+ freeze: boolean;
8
+ offset: number;
9
+ };
10
+ type UseChatKeyboardReturn = {
11
+ /** Extra scrollable space (= keyboard height). Used as contentInset on iOS, contentInsetBottom on Android. */
12
+ padding: SharedValue<number>;
13
+ /** Absolute Y content offset for iOS (set once in onStart). `undefined` on Android. */
14
+ contentOffsetY: SharedValue<number> | undefined;
15
+ /** TranslateY for the container wrapper on Android inverted lists. 0 otherwise. */
16
+ containerTranslateY: SharedValue<number>;
17
+ };
18
+ /**
19
+ * Hook that manages keyboard-driven scrolling for chat-style scroll views.
20
+ * Calculates padding (extra scrollable space) and content shift values,
21
+ * using the optimal strategy per platform.
22
+ *
23
+ * @param scrollViewRef - Animated ref to the scroll view.
24
+ * @param options - Configuration for inverted and keyboardLiftBehavior.
25
+ * @returns Shared values for padding, contentOffsetY (iOS), and containerTranslateY (Android inverted).
26
+ * @example
27
+ * ```tsx
28
+ * const { padding, contentOffsetY, containerTranslateY } = useChatKeyboard(ref, {
29
+ * inverted: false,
30
+ * keyboardLiftBehavior: "always",
31
+ * });
32
+ * ```
33
+ */
34
+ declare function useChatKeyboard(scrollViewRef: AnimatedRef<Reanimated.ScrollView>, options: UseChatKeyboardOptions): UseChatKeyboardReturn;
35
+ export { useChatKeyboard };
36
+ export type { KeyboardLiftBehavior };
@@ -1,12 +1,17 @@
1
1
  import React from "react";
2
2
  import Reanimated from "react-native-reanimated";
3
- import type { ScrollViewProps } from "react-native";
3
+ import type { ScrollViewProps, StyleProp, ViewStyle } from "react-native";
4
4
  import type { SharedValue } from "react-native-reanimated";
5
5
  type AnimatedScrollViewProps = React.ComponentProps<typeof Reanimated.ScrollView>;
6
6
  export type AnimatedScrollViewComponent = React.ForwardRefExoticComponent<AnimatedScrollViewProps & React.RefAttributes<Reanimated.ScrollView>>;
7
7
  declare const ScrollViewWithBottomPadding: React.ForwardRefExoticComponent<{
8
8
  ScrollViewComponent: AnimatedScrollViewComponent;
9
9
  children?: React.ReactNode;
10
+ inverted?: boolean;
10
11
  bottomPadding: SharedValue<number>;
12
+ /** Absolute Y content offset (iOS only, for ChatKit). */
13
+ contentOffsetY?: SharedValue<number>;
14
+ /** Style applied to the container wrapper (Android only, for ChatKit translateY). */
15
+ containerStyle?: StyleProp<ViewStyle>;
11
16
  } & ScrollViewProps & React.RefAttributes<Reanimated.ScrollView>>;
12
17
  export default ScrollViewWithBottomPadding;
@@ -2,7 +2,9 @@ export { default as KeyboardAvoidingView } from "./KeyboardAvoidingView";
2
2
  export { default as KeyboardStickyView } from "./KeyboardStickyView";
3
3
  export { default as KeyboardAwareScrollView } from "./KeyboardAwareScrollView";
4
4
  export { default as KeyboardToolbar, DefaultKeyboardToolbarTheme, } from "./KeyboardToolbar";
5
+ export { default as ChatKit } from "./ChatKit";
5
6
  export type { KeyboardAvoidingViewProps } from "./KeyboardAvoidingView";
6
7
  export type { KeyboardStickyViewProps } from "./KeyboardStickyView";
7
8
  export type { KeyboardAwareScrollViewProps, KeyboardAwareScrollViewRef, } from "./KeyboardAwareScrollView";
8
9
  export type { KeyboardToolbarProps } from "./KeyboardToolbar";
10
+ export type { ChatKitScrollViewProps } from "./ChatKit/types";
@@ -6,6 +6,6 @@ export * from "./constants";
6
6
  export * from "./module";
7
7
  export * from "./types";
8
8
  export * from "./compat";
9
- export { KeyboardAvoidingView, KeyboardStickyView, KeyboardAwareScrollView, KeyboardToolbar, DefaultKeyboardToolbarTheme, } from "./components";
10
- export type { KeyboardAvoidingViewProps, KeyboardStickyViewProps, KeyboardAwareScrollViewProps, KeyboardAwareScrollViewRef, KeyboardToolbarProps, } from "./components";
9
+ export { ChatKit, KeyboardAvoidingView, KeyboardStickyView, KeyboardAwareScrollView, KeyboardToolbar, DefaultKeyboardToolbarTheme, } from "./components";
10
+ export type { ChatKitScrollViewProps, KeyboardAvoidingViewProps, KeyboardStickyViewProps, KeyboardAwareScrollViewProps, KeyboardAwareScrollViewRef, KeyboardToolbarProps, } from "./components";
11
11
  export { OverKeyboardView, KeyboardExtender } from "./views";
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "react-native-keyboard-controller",
3
- "version": "1.21.0-beta.0",
3
+ "version": "1.21.0-beta.2",
4
4
  "description": "Keyboard manager which works in identical way on both iOS and Android",
5
5
  "main": "lib/commonjs/index",
6
6
  "module": "lib/module/index",
@@ -41,7 +41,7 @@
41
41
  "typescript": "tsc --noEmit --project tsconfig.build.json",
42
42
  "lint": "eslint --quiet \"**/*.{js,ts,tsx}\"",
43
43
  "lint-clang": "find ios/ -iname *.h -o -iname *.m -o -iname *.mm | grep -v -e Pods -e build | xargs clang-format -i -n --Werror",
44
- "prepare": "bob build",
44
+ "prepare": "bob build > /dev/null 2>&1",
45
45
  "release": "release-it",
46
46
  "example": "yarn --cwd example",
47
47
  "pods": "cd example && pod-install --quiet",
@@ -89,6 +89,7 @@
89
89
  "@react-native/eslint-config": "0.81.4",
90
90
  "@release-it/conventional-changelog": "^2.0.0",
91
91
  "@testing-library/react-hooks": "^8.0.1",
92
+ "@testing-library/react-native": "^13.3.3",
92
93
  "@types/jest": "^29.5.13",
93
94
  "@types/react": "^19.0.0",
94
95
  "@types/react-test-renderer": "^19.0.0",
@@ -115,7 +116,7 @@
115
116
  "react-native": "0.81.4",
116
117
  "react-native-builder-bob": "^0.18.0",
117
118
  "react-native-reanimated": "3.19.2",
118
- "react-test-renderer": "19.0.0",
119
+ "react-test-renderer": "19.1.0",
119
120
  "release-it": "^14.2.2",
120
121
  "typescript": "5.8.3"
121
122
  },
@@ -129,6 +130,12 @@
129
130
  "modulePathIgnorePatterns": [
130
131
  "<rootDir>/example/node_modules",
131
132
  "<rootDir>/lib/"
133
+ ],
134
+ "transformIgnorePatterns": [
135
+ "node_modules/(?!((jest-)?react-native|@react-native(-community)?|react-native-reanimated)/)"
136
+ ],
137
+ "setupFiles": [
138
+ "./jestSetup.js"
132
139
  ]
133
140
  },
134
141
  "commitlint": {
@@ -0,0 +1,20 @@
1
+ # Findings
2
+
3
+ 1. We can not translate whole `ScrollView` because interactive dismissal will have double scroll if we move it by `translateY` or content will be truncated if we don't do it (same with external container).
4
+ 2. So we need to move only content inside `ScrollView`.
5
+ 3. If we use a separate `scrollTo` we still may have a random jump. The only one way is to use `contentOffset` + `padding` on `ScrollView`.
6
+ 4. Input must be always in `KeyboardStickyView` because it's always pushing above the keyboard (unlike content, which may stay in place).
7
+ 5. Changing `contentOffset` on `ScrollView` will not work. On iOS it works, but on Android sometimes it doesn't scroll to correct position (when you scroll list to the end) and on paper architecture it is flickering.
8
+ 6. Next idea is to use `contentInset` on iOS and create custom `ClippingScrollView` on Android (with polyfill `contentInsetBottom` prop).
9
+
10
+ ## To Do
11
+
12
+ - [x] check how `ClippingScrollView` works in `KeyboardAwareScrollView` on Android (seems to be working well)
13
+ - [x] introduce `useCombinedRef` hook in separate PR
14
+ - [x] make sure, that style property doesn't affect the behavior with/without `ClippingScrollView` (test on a ScrollView that doesn't tke full screen?) <-- tested by comparing iOS with Android + `ClippingScrollView` (`contentInsetBottom` never override `paddingBottom` from `style`/`contentContainerStyle` even if ScrollView has `maxHeight=150` and we have only 2 inputs limitation + also tested `ScrollView` without height restrictions, in this case `paddingBottom` on `style` is not getting applied (it doesn't have an effect on both iOS/Android), but `contentContainerStyle` + `paddingBottom` works as expected and if I add `contentInsetBottom` to `ClippingScrollView` it doesn't overwrite a padding and increases scrollable area)
15
+ - [x] `ClippingScrollView` + `KeyboardAwareScrollView` check by e2e tests (seems to be working, though on Android emulator + e2e tests sometimes when keyboard disappear we still have keyboard space)
16
+ - [x] introduce `ClippingScrollView` in separate PR
17
+ - [x] create a polyfill-version of ScrollView `that` can add scrollable padding in the bottom of the content? How to wrap custom `ScrollView` with it (cause we may pass one from react-native-gesture-handler)? Should just adjust `contentInset` (scroll management should belong to `KeyboardAwareScrollView`) (ScrollViewWithKeyboardPadding/ScrollViewWithKeyboardSpace)
18
+ - [x] use `ClippingScrollView` in `KeyboardAwareScrollView` in separate PR
19
+ - [-] introduce `ChatKit`
20
+ - [] create issue in reanimated repo about `scrollTo` performance regression
@@ -0,0 +1,2 @@
1
+ export { useChatKeyboard } from "./useChatKeyboard";
2
+ export type { KeyboardLiftBehavior } from "./useChatKeyboard";
@@ -0,0 +1,63 @@
1
+ import React, { forwardRef } from "react";
2
+ import { useAnimatedRef, useAnimatedStyle } from "react-native-reanimated";
3
+ import Reanimated from "react-native-reanimated";
4
+
5
+ import useCombinedRef from "../hooks/useCombinedRef";
6
+ import ScrollViewWithBottomPadding from "../ScrollViewWithBottomPadding";
7
+
8
+ import { useChatKeyboard } from "./useChatKeyboard";
9
+
10
+ import type { ChatKitScrollViewProps } from "./types";
11
+
12
+ const ChatScrollView = forwardRef<
13
+ Reanimated.ScrollView,
14
+ React.PropsWithChildren<ChatKitScrollViewProps>
15
+ >(
16
+ (
17
+ {
18
+ children,
19
+ ScrollViewComponent = Reanimated.ScrollView,
20
+ inverted = false,
21
+ keyboardLiftBehavior = "always",
22
+ freeze = false,
23
+ offset = 0,
24
+ ...rest
25
+ },
26
+ ref,
27
+ ) => {
28
+ const scrollViewRef = useAnimatedRef<Reanimated.ScrollView>();
29
+ const onRef = useCombinedRef(ref, scrollViewRef);
30
+
31
+ const { padding, contentOffsetY, containerTranslateY } = useChatKeyboard(
32
+ scrollViewRef,
33
+ { inverted, keyboardLiftBehavior, freeze, offset },
34
+ );
35
+
36
+ const containerStyle = useAnimatedStyle(
37
+ () => ({
38
+ transform: [{ translateY: containerTranslateY.value }],
39
+ }),
40
+ [],
41
+ );
42
+
43
+ return (
44
+ <ScrollViewWithBottomPadding
45
+ ref={onRef}
46
+ {...rest}
47
+ bottomPadding={padding}
48
+ containerStyle={containerStyle}
49
+ contentOffsetY={contentOffsetY}
50
+ inverted={inverted}
51
+ ScrollViewComponent={ScrollViewComponent}
52
+ >
53
+ {children}
54
+ </ScrollViewWithBottomPadding>
55
+ );
56
+ },
57
+ );
58
+
59
+ const ChatKit = {
60
+ ScrollView: ChatScrollView,
61
+ };
62
+
63
+ export default ChatKit;
@@ -0,0 +1,50 @@
1
+ import type { AnimatedScrollViewComponent } from "../ScrollViewWithBottomPadding";
2
+ import type { ScrollViewProps } from "react-native";
3
+
4
+ type KeyboardLiftBehavior = "always" | "whenAtEnd" | "persistent" | "never";
5
+
6
+ export type ChatKitScrollViewProps = {
7
+ /** Custom component for `ScrollView`. Default is `ScrollView`. */
8
+ ScrollViewComponent: AnimatedScrollViewComponent;
9
+ /** Whether list are using `inverted` prop. Default is `false`. */
10
+ inverted?: boolean;
11
+ /**
12
+ * The distance (in pixels) between the bottom of the screen and the `ScrollView`.
13
+ * When the keyboard appears, the scroll view will only push content by the effective
14
+ * distance (`keyboardHeight - offset`) instead of the full keyboard height.
15
+ *
16
+ * Useful when the input is not at the very bottom of the screen (e.g., above safe area, above
17
+ * bottom tabs, etc. - in this case offset should be equal to the height of the elements between
18
+ * `ScrollView` and bottom of the screen).
19
+ *
20
+ * Default is `0`.
21
+ */
22
+ offset?: number;
23
+ /**
24
+ * Determines how the chat content should behave when the keyboard appears, specifically whether
25
+ * the scroll view should automatically lift its content to keep it visible above the keyboard.
26
+ *
27
+ * Possible values:
28
+ * - `'always'`: The content always lifts along with the keyboard, ensuring the messages from the bottom part of screen
29
+ * remain visible regardless of the current scroll position. This is the default behavior for most chat applications (used in Telegram).
30
+ * - `'whenAtEnd'`: The content lifts only if the scroll view is at the end (i.e., the last message
31
+ * is visible or near the bottom). This prevents unnecessary adjustments when the user is scrolling
32
+ * through older messages (ChatGPT mobile app behavior).
33
+ * - `'persistent'`: The content always lifts when the keyboard appears (similar to `'always'`), but
34
+ * does not reset (lower) when the keyboard hides. This mimics behaviors where the view remains adjusted
35
+ * after keyboard dismissal to maintain focus on the latest content without shifting back (Claude mobile app behavior).
36
+ * - `'never'`: The content does not lift at all when the keyboard appears. Use this for scenarios
37
+ * when you don't want to disturb user attention with animations (Perplexity mobile app behavior).
38
+ *
39
+ * Default is `'always'`.
40
+ */
41
+ keyboardLiftBehavior?: KeyboardLiftBehavior;
42
+ /**
43
+ * When `true`, freezes all keyboard-driven layout changes (padding, content offset, scroll position).
44
+ * Useful when dismissing the keyboard to open a bottom sheet — prevents visual disruption
45
+ * while the sheet is visible.
46
+ *
47
+ * Default is `false`.
48
+ */
49
+ freeze?: boolean;
50
+ } & ScrollViewProps;