react-native-keyboard-controller 1.0.0-alpha.3 → 1.0.1
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.
- package/README.md +5 -56
- package/android/build.gradle +1 -1
- package/android/gradle.properties +2 -0
- package/android/src/main/java/com/reactnativekeyboardcontroller/EdgeToEdgeReactViewGroup.kt +2 -0
- package/android/src/main/java/com/reactnativekeyboardcontroller/KeyboardControllerPackage.kt +6 -6
- package/android/src/main/java/com/reactnativekeyboardcontroller/KeyboardControllerViewManager.kt +15 -2
- package/android/src/main/java/com/reactnativekeyboardcontroller/StatusBarManagerCompatModule.kt +95 -0
- package/android/src/main/java/com/reactnativekeyboardcontroller/TranslateDeferringInsetsAnimationCallback.kt +49 -43
- package/ios/.swift-version +1 -0
- package/ios/.swiftformat +5 -0
- package/ios/.swiftlint.yml +5 -0
- package/ios/KeyboardControllerModule.swift +17 -17
- package/ios/KeyboardControllerViewManager.swift +87 -59
- package/ios/KeyboardMoveEvent.swift +31 -27
- package/lib/commonjs/animated.js +14 -11
- package/lib/commonjs/animated.js.map +1 -1
- package/lib/commonjs/index.js +2 -0
- package/lib/commonjs/index.js.map +1 -1
- package/lib/commonjs/monkey-patch.js +44 -0
- package/lib/commonjs/monkey-patch.js.map +1 -0
- package/lib/module/animated.js +13 -12
- package/lib/module/animated.js.map +1 -1
- package/lib/module/index.js +1 -0
- package/lib/module/index.js.map +1 -1
- package/lib/module/monkey-patch.js +36 -0
- package/lib/module/monkey-patch.js.map +1 -0
- package/lib/typescript/animated.d.ts +5 -0
- package/lib/typescript/index.d.ts +1 -0
- package/lib/typescript/monkey-patch.d.ts +1 -0
- package/package.json +9 -6
- package/src/animated.tsx +20 -16
- package/src/index.ts +2 -0
- package/src/monkey-patch.tsx +36 -0
- package/android/.gradle/6.8/executionHistory/executionHistory.lock +0 -0
- package/android/.gradle/6.8/fileChanges/last-build.bin +0 -0
- package/android/.gradle/6.8/fileHashes/fileHashes.lock +0 -0
- package/android/.gradle/6.8/gc.properties +0 -0
- package/android/.gradle/buildOutputCleanup/buildOutputCleanup.lock +0 -0
- package/android/.gradle/buildOutputCleanup/cache.properties +0 -2
- package/android/.gradle/checksums/checksums.lock +0 -0
- package/android/.gradle/configuration-cache/gc.properties +0 -0
- package/android/.gradle/vcs-1/gc.properties +0 -0
- package/ios/KeyboardController.xcodeproj/project.xcworkspace/contents.xcworkspacedata +0 -7
- package/ios/KeyboardController.xcodeproj/project.xcworkspace/xcshareddata/IDEWorkspaceChecks.plist +0 -8
- package/ios/KeyboardController.xcodeproj/project.xcworkspace/xcuserdata/kiryl.xcuserdatad/UserInterfaceState.xcuserstate +0 -0
- package/ios/KeyboardController.xcodeproj/xcuserdata/kiryl.xcuserdatad/xcschemes/xcschememanagement.plist +0 -14
|
@@ -7,31 +7,35 @@
|
|
|
7
7
|
//
|
|
8
8
|
|
|
9
9
|
class KeyboardMoveEvent: NSObject, RCTEvent {
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
10
|
+
var viewTag: NSNumber!
|
|
11
|
+
var eventName: String = "onKeyboardMove"
|
|
12
|
+
var coalescingKey: UInt16 = 0
|
|
13
|
+
var height: NSNumber!
|
|
14
|
+
var progress: NSNumber!
|
|
15
|
+
|
|
16
|
+
func canCoalesce() -> Bool {
|
|
17
|
+
return false
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
func coalesce(with newEvent: RCTEvent!) -> RCTEvent! {
|
|
21
|
+
return newEvent
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
static func moduleDotMethod() -> String! {
|
|
25
|
+
return "RCTEventEmitter.receiveEvent"
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
func arguments() -> [Any]! {
|
|
29
|
+
return [
|
|
30
|
+
viewTag,
|
|
31
|
+
RCTNormalizeInputEventName(eventName),
|
|
32
|
+
["height": height, "progress": progress],
|
|
33
|
+
]
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
init(viewTag: NSNumber, height: NSNumber, progress: NSNumber) {
|
|
37
|
+
self.viewTag = viewTag
|
|
38
|
+
self.height = height
|
|
39
|
+
self.progress = progress
|
|
40
|
+
}
|
|
37
41
|
}
|
package/lib/commonjs/animated.js
CHANGED
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
|
-
exports.useReanimatedKeyboardAnimation = exports.useKeyboardAnimation = exports.styles = exports.KeyboardProvider = void 0;
|
|
6
|
+
exports.useReanimatedKeyboardAnimation = exports.useKeyboardAnimation = exports.styles = exports.KeyboardProvider = exports.KeyboardContext = void 0;
|
|
7
7
|
|
|
8
8
|
var _react = _interopRequireWildcard(require("react"));
|
|
9
9
|
|
|
@@ -36,6 +36,8 @@ const defaultContext = {
|
|
|
36
36
|
|
|
37
37
|
const KeyboardContext = /*#__PURE__*/_react.default.createContext(defaultContext);
|
|
38
38
|
|
|
39
|
+
exports.KeyboardContext = KeyboardContext;
|
|
40
|
+
|
|
39
41
|
const useKeyboardAnimation = () => {
|
|
40
42
|
(0, _native.useResizeMode)();
|
|
41
43
|
const context = (0, _react.useContext)(KeyboardContext);
|
|
@@ -87,8 +89,8 @@ const KeyboardProvider = _ref => {
|
|
|
87
89
|
children,
|
|
88
90
|
statusBarTranslucent
|
|
89
91
|
} = _ref;
|
|
90
|
-
const progress = (0, _react.
|
|
91
|
-
const height = (0, _react.
|
|
92
|
+
const progress = (0, _react.useRef)(new _reactNative.Animated.Value(0)).current;
|
|
93
|
+
const height = (0, _react.useRef)(new _reactNative.Animated.Value(0)).current;
|
|
92
94
|
const progressSV = (0, _reactNativeReanimated.useSharedValue)(0);
|
|
93
95
|
const heightSV = (0, _reactNativeReanimated.useSharedValue)(0);
|
|
94
96
|
const context = (0, _react.useMemo)(() => ({
|
|
@@ -101,6 +103,13 @@ const KeyboardProvider = _ref => {
|
|
|
101
103
|
height: heightSV
|
|
102
104
|
}
|
|
103
105
|
}), []);
|
|
106
|
+
const style = (0, _react.useMemo)(() => [styles.hidden, {
|
|
107
|
+
transform: [{
|
|
108
|
+
translateX: height
|
|
109
|
+
}, {
|
|
110
|
+
translateY: progress
|
|
111
|
+
}]
|
|
112
|
+
}], []);
|
|
104
113
|
const onKeyboardMove = (0, _react.useMemo)(() => _reactNative.Animated.event([{
|
|
105
114
|
nativeEvent: {
|
|
106
115
|
progress,
|
|
@@ -125,7 +134,7 @@ const KeyboardProvider = _ref => {
|
|
|
125
134
|
statusBarTranslucent: statusBarTranslucent,
|
|
126
135
|
style: styles.container
|
|
127
136
|
}, /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_reactNative.Animated.View, {
|
|
128
|
-
|
|
137
|
+
// we are using this small hack, because if the component (where
|
|
129
138
|
// animated value has been used) is unmounted, then animation will
|
|
130
139
|
// stop receiving events (seems like it's react-native optimization).
|
|
131
140
|
// So we need to keep a reference to the animated value, to keep it's
|
|
@@ -133,13 +142,7 @@ const KeyboardProvider = _ref => {
|
|
|
133
142
|
//
|
|
134
143
|
// To test why it's needed, try to open screen which consumes Animated.Value
|
|
135
144
|
// then close it and open it again (for example 'Animated transition').
|
|
136
|
-
|
|
137
|
-
transform: [{
|
|
138
|
-
translateX: height
|
|
139
|
-
}, {
|
|
140
|
-
translateY: progress
|
|
141
|
-
}]
|
|
142
|
-
}]
|
|
145
|
+
style: style
|
|
143
146
|
}), children)));
|
|
144
147
|
};
|
|
145
148
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["animated.tsx"],"names":["KeyboardControllerViewAnimated","Reanimated","createAnimatedComponent","Animated","KeyboardControllerView","defaultContext","animated","progress","Value","height","reanimated","value","KeyboardContext","React","createContext","useKeyboardAnimation","context","useReanimatedKeyboardAnimation","useAnimatedKeyboardHandler","handlers","dependencies","doDependenciesDiffer","event","onKeyboardMove","eventName","endsWith","styles","StyleSheet","create","container","flex","hidden","display","position","KeyboardProvider","children","statusBarTranslucent","progressSV","heightSV","
|
|
1
|
+
{"version":3,"sources":["animated.tsx"],"names":["KeyboardControllerViewAnimated","Reanimated","createAnimatedComponent","Animated","KeyboardControllerView","defaultContext","animated","progress","Value","height","reanimated","value","KeyboardContext","React","createContext","useKeyboardAnimation","context","useReanimatedKeyboardAnimation","useAnimatedKeyboardHandler","handlers","dependencies","doDependenciesDiffer","event","onKeyboardMove","eventName","endsWith","styles","StyleSheet","create","container","flex","hidden","display","position","KeyboardProvider","children","statusBarTranslucent","current","progressSV","heightSV","style","transform","translateX","translateY","nativeEvent","useNativeDriver","handler"],"mappings":"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","sourcesContent":["import React, { useContext, useMemo, useRef } from 'react';\nimport { Animated, StyleSheet, ViewStyle } from 'react-native';\nimport Reanimated, {\n useEvent,\n useHandler,\n useSharedValue,\n} from 'react-native-reanimated';\nimport {\n EventWithName,\n KeyboardControllerProps,\n KeyboardControllerView,\n NativeEvent,\n useResizeMode,\n} from './native';\n\nconst KeyboardControllerViewAnimated = Reanimated.createAnimatedComponent(\n Animated.createAnimatedComponent(\n KeyboardControllerView\n ) as React.FC<KeyboardControllerProps>\n);\n\ntype AnimatedContext = {\n progress: Animated.Value;\n height: Animated.Value;\n};\ntype ReanimatedContext = {\n progress: Reanimated.SharedValue<number>;\n height: Reanimated.SharedValue<number>;\n};\ntype KeyboardAnimationContext = {\n animated: AnimatedContext;\n reanimated: ReanimatedContext;\n};\nconst defaultContext: KeyboardAnimationContext = {\n animated: {\n progress: new Animated.Value(0),\n height: new Animated.Value(0),\n },\n reanimated: {\n progress: { value: 0 },\n height: { value: 0 },\n },\n};\nexport const KeyboardContext = React.createContext(defaultContext);\n\nexport const useKeyboardAnimation = (): AnimatedContext => {\n useResizeMode();\n const context = useContext(KeyboardContext);\n\n return context.animated;\n};\n\nexport const useReanimatedKeyboardAnimation = (): ReanimatedContext => {\n useResizeMode();\n const context = useContext(KeyboardContext);\n\n return context.reanimated;\n};\n\nfunction useAnimatedKeyboardHandler<TContext extends Record<string, unknown>>(\n handlers: {\n onKeyboardMove?: (e: NativeEvent, context: TContext) => void;\n },\n dependencies?: ReadonlyArray<unknown>\n) {\n const { context, doDependenciesDiffer } = useHandler(handlers, dependencies);\n\n return useEvent(\n (event: EventWithName<NativeEvent>) => {\n 'worklet';\n const { onKeyboardMove } = handlers;\n\n if (onKeyboardMove && event.eventName.endsWith('onKeyboardMove')) {\n onKeyboardMove(event, context);\n }\n },\n ['onKeyboardMove'],\n doDependenciesDiffer\n );\n}\n\ntype Styles = {\n container: ViewStyle;\n hidden: ViewStyle;\n};\n\nexport const styles = StyleSheet.create<Styles>({\n container: {\n flex: 1,\n },\n hidden: {\n display: 'none',\n position: 'absolute',\n },\n});\n\ntype KeyboardProviderProps = {\n children: React.ReactNode;\n /**\n * Set the value to `true`, if you use translucent status bar on Android.\n * If you already control status bar translucency via `react-native-screens`\n * or `StatusBar` component from `react-native`, you can ignore it.\n * Defaults to `false`.\n *\n * @see https://github.com/kirillzyusko/react-native-keyboard-controller/issues/14\n * @platform android\n */\n statusBarTranslucent?: boolean;\n};\n\nexport const KeyboardProvider = ({\n children,\n statusBarTranslucent,\n}: KeyboardProviderProps) => {\n const progress = useRef(new Animated.Value(0)).current;\n const height = useRef(new Animated.Value(0)).current;\n const progressSV = useSharedValue(0);\n const heightSV = useSharedValue(0);\n const context = useMemo(\n () => ({\n animated: { progress: progress, height: height },\n reanimated: { progress: progressSV, height: heightSV },\n }),\n []\n );\n const style = useMemo(\n () => [\n styles.hidden,\n { transform: [{ translateX: height }, { translateY: progress }] },\n ],\n []\n );\n\n const onKeyboardMove = useMemo(\n () =>\n Animated.event(\n [\n {\n nativeEvent: {\n progress,\n height,\n },\n },\n ],\n { useNativeDriver: true }\n ),\n []\n );\n\n const handler = useAnimatedKeyboardHandler(\n {\n onKeyboardMove: (event: NativeEvent) => {\n 'worklet';\n progressSV.value = event.progress;\n heightSV.value = event.height;\n },\n },\n []\n );\n\n return (\n <KeyboardContext.Provider value={context}>\n <KeyboardControllerViewAnimated\n onKeyboardMoveReanimated={handler}\n onKeyboardMove={onKeyboardMove}\n statusBarTranslucent={statusBarTranslucent}\n style={styles.container}\n >\n <>\n <Animated.View\n // we are using this small hack, because if the component (where\n // animated value has been used) is unmounted, then animation will\n // stop receiving events (seems like it's react-native optimization).\n // So we need to keep a reference to the animated value, to keep it's\n // always mounted (keep a reference to an animated value).\n //\n // To test why it's needed, try to open screen which consumes Animated.Value\n // then close it and open it again (for example 'Animated transition').\n style={style}\n />\n {children}\n </>\n </KeyboardControllerViewAnimated>\n </KeyboardContext.Provider>\n );\n};\n"]}
|
package/lib/commonjs/index.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["index.ts"],"names":[],"mappings":";;;;;;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA","sourcesContent":["
|
|
1
|
+
{"version":3,"sources":["index.ts"],"names":[],"mappings":";;;;;;AAAA;;AAEA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA","sourcesContent":["import './monkey-patch';\n\nexport * from './native';\nexport * from './animated';\nexport * from './replicas';\n"]}
|
|
@@ -0,0 +1,44 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _reactNative = require("react-native");
|
|
4
|
+
|
|
5
|
+
var NativeAndroidManager = _interopRequireWildcard(require("react-native/Libraries/Components/StatusBar/NativeStatusBarManagerAndroid"));
|
|
6
|
+
|
|
7
|
+
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
|
8
|
+
|
|
9
|
+
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
|
10
|
+
|
|
11
|
+
// @ts-expect-error because there is no corresponding type definition
|
|
12
|
+
const getConstants = NativeAndroidManager.default.getConstants;
|
|
13
|
+
const RCTStatusBarManagerCompat = _reactNative.NativeModules.StatusBarManagerCompat; // On Android < 11 RN uses legacy API which breaks EdgeToEdge mode in RN, so
|
|
14
|
+
// in order to use library on all available platforms we have to monkey patch
|
|
15
|
+
// default RN implementation and use modern `WindowInsetsControllerCompat`.
|
|
16
|
+
|
|
17
|
+
if (_reactNative.Platform.OS === 'android') {
|
|
18
|
+
NativeAndroidManager.default = {
|
|
19
|
+
getConstants,
|
|
20
|
+
|
|
21
|
+
setColor(color, animated) {
|
|
22
|
+
RCTStatusBarManagerCompat.setColor(color, animated);
|
|
23
|
+
},
|
|
24
|
+
|
|
25
|
+
setTranslucent(translucent) {
|
|
26
|
+
RCTStatusBarManagerCompat.setTranslucent(translucent);
|
|
27
|
+
},
|
|
28
|
+
|
|
29
|
+
/**
|
|
30
|
+
* - statusBarStyles can be:
|
|
31
|
+
* - 'default'
|
|
32
|
+
* - 'dark-content'
|
|
33
|
+
*/
|
|
34
|
+
setStyle(statusBarStyle) {
|
|
35
|
+
RCTStatusBarManagerCompat.setStyle(statusBarStyle);
|
|
36
|
+
},
|
|
37
|
+
|
|
38
|
+
setHidden(hidden) {
|
|
39
|
+
RCTStatusBarManagerCompat.setHidden(hidden);
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
};
|
|
43
|
+
}
|
|
44
|
+
//# sourceMappingURL=monkey-patch.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["monkey-patch.tsx"],"names":["getConstants","NativeAndroidManager","default","RCTStatusBarManagerCompat","NativeModules","StatusBarManagerCompat","Platform","OS","setColor","color","animated","setTranslucent","translucent","setStyle","statusBarStyle","setHidden","hidden"],"mappings":";;AAAA;;AAEA;;;;;;AADA;AAGA,MAAMA,YAAY,GAAGC,oBAAoB,CAACC,OAArB,CAA6BF,YAAlD;AAEA,MAAMG,yBAAyB,GAAGC,2BAAcC,sBAAhD,C,CAEA;AACA;AACA;;AACA,IAAIC,sBAASC,EAAT,KAAgB,SAApB,EAA+B;AAC7BN,EAAAA,oBAAoB,CAACC,OAArB,GAA+B;AAC7BF,IAAAA,YAD6B;;AAE7BQ,IAAAA,QAAQ,CAACC,KAAD,EAAgBC,QAAhB,EAAyC;AAC/CP,MAAAA,yBAAyB,CAACK,QAA1B,CAAmCC,KAAnC,EAA0CC,QAA1C;AACD,KAJ4B;;AAM7BC,IAAAA,cAAc,CAACC,WAAD,EAA6B;AACzCT,MAAAA,yBAAyB,CAACQ,cAA1B,CAAyCC,WAAzC;AACD,KAR4B;;AAU7B;AACJ;AACA;AACA;AACA;AACIC,IAAAA,QAAQ,CAACC,cAAD,EAAgC;AACtCX,MAAAA,yBAAyB,CAACU,QAA1B,CAAmCC,cAAnC;AACD,KAjB4B;;AAmB7BC,IAAAA,SAAS,CAACC,MAAD,EAAwB;AAC/Bb,MAAAA,yBAAyB,CAACY,SAA1B,CAAoCC,MAApC;AACD;;AArB4B,GAA/B;AAuBD","sourcesContent":["import { NativeModules, Platform } from 'react-native';\n// @ts-expect-error because there is no corresponding type definition\nimport * as NativeAndroidManager from 'react-native/Libraries/Components/StatusBar/NativeStatusBarManagerAndroid';\n\nconst getConstants = NativeAndroidManager.default.getConstants;\n\nconst RCTStatusBarManagerCompat = NativeModules.StatusBarManagerCompat;\n\n// On Android < 11 RN uses legacy API which breaks EdgeToEdge mode in RN, so\n// in order to use library on all available platforms we have to monkey patch\n// default RN implementation and use modern `WindowInsetsControllerCompat`.\nif (Platform.OS === 'android') {\n NativeAndroidManager.default = {\n getConstants,\n setColor(color: number, animated: boolean): void {\n RCTStatusBarManagerCompat.setColor(color, animated);\n },\n\n setTranslucent(translucent: boolean): void {\n RCTStatusBarManagerCompat.setTranslucent(translucent);\n },\n\n /**\n * - statusBarStyles can be:\n * - 'default'\n * - 'dark-content'\n */\n setStyle(statusBarStyle?: string): void {\n RCTStatusBarManagerCompat.setStyle(statusBarStyle);\n },\n\n setHidden(hidden: boolean): void {\n RCTStatusBarManagerCompat.setHidden(hidden);\n },\n };\n}\n"]}
|
package/lib/module/animated.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import React, { useContext, useMemo } from 'react';
|
|
1
|
+
import React, { useContext, useMemo, useRef } from 'react';
|
|
2
2
|
import { Animated, StyleSheet } from 'react-native';
|
|
3
3
|
import Reanimated, { useEvent, useHandler, useSharedValue } from 'react-native-reanimated';
|
|
4
4
|
import { KeyboardControllerView, useResizeMode } from './native';
|
|
@@ -17,7 +17,7 @@ const defaultContext = {
|
|
|
17
17
|
}
|
|
18
18
|
}
|
|
19
19
|
};
|
|
20
|
-
const KeyboardContext = /*#__PURE__*/React.createContext(defaultContext);
|
|
20
|
+
export const KeyboardContext = /*#__PURE__*/React.createContext(defaultContext);
|
|
21
21
|
export const useKeyboardAnimation = () => {
|
|
22
22
|
useResizeMode();
|
|
23
23
|
const context = useContext(KeyboardContext);
|
|
@@ -61,8 +61,8 @@ export const KeyboardProvider = _ref => {
|
|
|
61
61
|
children,
|
|
62
62
|
statusBarTranslucent
|
|
63
63
|
} = _ref;
|
|
64
|
-
const progress =
|
|
65
|
-
const height =
|
|
64
|
+
const progress = useRef(new Animated.Value(0)).current;
|
|
65
|
+
const height = useRef(new Animated.Value(0)).current;
|
|
66
66
|
const progressSV = useSharedValue(0);
|
|
67
67
|
const heightSV = useSharedValue(0);
|
|
68
68
|
const context = useMemo(() => ({
|
|
@@ -75,6 +75,13 @@ export const KeyboardProvider = _ref => {
|
|
|
75
75
|
height: heightSV
|
|
76
76
|
}
|
|
77
77
|
}), []);
|
|
78
|
+
const style = useMemo(() => [styles.hidden, {
|
|
79
|
+
transform: [{
|
|
80
|
+
translateX: height
|
|
81
|
+
}, {
|
|
82
|
+
translateY: progress
|
|
83
|
+
}]
|
|
84
|
+
}], []);
|
|
78
85
|
const onKeyboardMove = useMemo(() => Animated.event([{
|
|
79
86
|
nativeEvent: {
|
|
80
87
|
progress,
|
|
@@ -99,7 +106,7 @@ export const KeyboardProvider = _ref => {
|
|
|
99
106
|
statusBarTranslucent: statusBarTranslucent,
|
|
100
107
|
style: styles.container
|
|
101
108
|
}, /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Animated.View, {
|
|
102
|
-
|
|
109
|
+
// we are using this small hack, because if the component (where
|
|
103
110
|
// animated value has been used) is unmounted, then animation will
|
|
104
111
|
// stop receiving events (seems like it's react-native optimization).
|
|
105
112
|
// So we need to keep a reference to the animated value, to keep it's
|
|
@@ -107,13 +114,7 @@ export const KeyboardProvider = _ref => {
|
|
|
107
114
|
//
|
|
108
115
|
// To test why it's needed, try to open screen which consumes Animated.Value
|
|
109
116
|
// then close it and open it again (for example 'Animated transition').
|
|
110
|
-
|
|
111
|
-
transform: [{
|
|
112
|
-
translateX: height
|
|
113
|
-
}, {
|
|
114
|
-
translateY: progress
|
|
115
|
-
}]
|
|
116
|
-
}]
|
|
117
|
+
style: style
|
|
117
118
|
}), children)));
|
|
118
119
|
};
|
|
119
120
|
//# sourceMappingURL=animated.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["animated.tsx"],"names":["React","useContext","useMemo","Animated","StyleSheet","Reanimated","useEvent","useHandler","useSharedValue","KeyboardControllerView","useResizeMode","KeyboardControllerViewAnimated","createAnimatedComponent","defaultContext","animated","progress","Value","height","reanimated","value","KeyboardContext","createContext","useKeyboardAnimation","context","useReanimatedKeyboardAnimation","useAnimatedKeyboardHandler","handlers","dependencies","doDependenciesDiffer","event","onKeyboardMove","eventName","endsWith","styles","create","container","flex","hidden","display","position","KeyboardProvider","children","statusBarTranslucent","progressSV","heightSV","
|
|
1
|
+
{"version":3,"sources":["animated.tsx"],"names":["React","useContext","useMemo","useRef","Animated","StyleSheet","Reanimated","useEvent","useHandler","useSharedValue","KeyboardControllerView","useResizeMode","KeyboardControllerViewAnimated","createAnimatedComponent","defaultContext","animated","progress","Value","height","reanimated","value","KeyboardContext","createContext","useKeyboardAnimation","context","useReanimatedKeyboardAnimation","useAnimatedKeyboardHandler","handlers","dependencies","doDependenciesDiffer","event","onKeyboardMove","eventName","endsWith","styles","create","container","flex","hidden","display","position","KeyboardProvider","children","statusBarTranslucent","current","progressSV","heightSV","style","transform","translateX","translateY","nativeEvent","useNativeDriver","handler"],"mappings":"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","sourcesContent":["import React, { useContext, useMemo, useRef } from 'react';\nimport { Animated, StyleSheet, ViewStyle } from 'react-native';\nimport Reanimated, {\n useEvent,\n useHandler,\n useSharedValue,\n} from 'react-native-reanimated';\nimport {\n EventWithName,\n KeyboardControllerProps,\n KeyboardControllerView,\n NativeEvent,\n useResizeMode,\n} from './native';\n\nconst KeyboardControllerViewAnimated = Reanimated.createAnimatedComponent(\n Animated.createAnimatedComponent(\n KeyboardControllerView\n ) as React.FC<KeyboardControllerProps>\n);\n\ntype AnimatedContext = {\n progress: Animated.Value;\n height: Animated.Value;\n};\ntype ReanimatedContext = {\n progress: Reanimated.SharedValue<number>;\n height: Reanimated.SharedValue<number>;\n};\ntype KeyboardAnimationContext = {\n animated: AnimatedContext;\n reanimated: ReanimatedContext;\n};\nconst defaultContext: KeyboardAnimationContext = {\n animated: {\n progress: new Animated.Value(0),\n height: new Animated.Value(0),\n },\n reanimated: {\n progress: { value: 0 },\n height: { value: 0 },\n },\n};\nexport const KeyboardContext = React.createContext(defaultContext);\n\nexport const useKeyboardAnimation = (): AnimatedContext => {\n useResizeMode();\n const context = useContext(KeyboardContext);\n\n return context.animated;\n};\n\nexport const useReanimatedKeyboardAnimation = (): ReanimatedContext => {\n useResizeMode();\n const context = useContext(KeyboardContext);\n\n return context.reanimated;\n};\n\nfunction useAnimatedKeyboardHandler<TContext extends Record<string, unknown>>(\n handlers: {\n onKeyboardMove?: (e: NativeEvent, context: TContext) => void;\n },\n dependencies?: ReadonlyArray<unknown>\n) {\n const { context, doDependenciesDiffer } = useHandler(handlers, dependencies);\n\n return useEvent(\n (event: EventWithName<NativeEvent>) => {\n 'worklet';\n const { onKeyboardMove } = handlers;\n\n if (onKeyboardMove && event.eventName.endsWith('onKeyboardMove')) {\n onKeyboardMove(event, context);\n }\n },\n ['onKeyboardMove'],\n doDependenciesDiffer\n );\n}\n\ntype Styles = {\n container: ViewStyle;\n hidden: ViewStyle;\n};\n\nexport const styles = StyleSheet.create<Styles>({\n container: {\n flex: 1,\n },\n hidden: {\n display: 'none',\n position: 'absolute',\n },\n});\n\ntype KeyboardProviderProps = {\n children: React.ReactNode;\n /**\n * Set the value to `true`, if you use translucent status bar on Android.\n * If you already control status bar translucency via `react-native-screens`\n * or `StatusBar` component from `react-native`, you can ignore it.\n * Defaults to `false`.\n *\n * @see https://github.com/kirillzyusko/react-native-keyboard-controller/issues/14\n * @platform android\n */\n statusBarTranslucent?: boolean;\n};\n\nexport const KeyboardProvider = ({\n children,\n statusBarTranslucent,\n}: KeyboardProviderProps) => {\n const progress = useRef(new Animated.Value(0)).current;\n const height = useRef(new Animated.Value(0)).current;\n const progressSV = useSharedValue(0);\n const heightSV = useSharedValue(0);\n const context = useMemo(\n () => ({\n animated: { progress: progress, height: height },\n reanimated: { progress: progressSV, height: heightSV },\n }),\n []\n );\n const style = useMemo(\n () => [\n styles.hidden,\n { transform: [{ translateX: height }, { translateY: progress }] },\n ],\n []\n );\n\n const onKeyboardMove = useMemo(\n () =>\n Animated.event(\n [\n {\n nativeEvent: {\n progress,\n height,\n },\n },\n ],\n { useNativeDriver: true }\n ),\n []\n );\n\n const handler = useAnimatedKeyboardHandler(\n {\n onKeyboardMove: (event: NativeEvent) => {\n 'worklet';\n progressSV.value = event.progress;\n heightSV.value = event.height;\n },\n },\n []\n );\n\n return (\n <KeyboardContext.Provider value={context}>\n <KeyboardControllerViewAnimated\n onKeyboardMoveReanimated={handler}\n onKeyboardMove={onKeyboardMove}\n statusBarTranslucent={statusBarTranslucent}\n style={styles.container}\n >\n <>\n <Animated.View\n // we are using this small hack, because if the component (where\n // animated value has been used) is unmounted, then animation will\n // stop receiving events (seems like it's react-native optimization).\n // So we need to keep a reference to the animated value, to keep it's\n // always mounted (keep a reference to an animated value).\n //\n // To test why it's needed, try to open screen which consumes Animated.Value\n // then close it and open it again (for example 'Animated transition').\n style={style}\n />\n {children}\n </>\n </KeyboardControllerViewAnimated>\n </KeyboardContext.Provider>\n );\n};\n"]}
|
package/lib/module/index.js
CHANGED
package/lib/module/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAd;AACA,cAAc,YAAd;AACA,cAAc,YAAd","sourcesContent":["
|
|
1
|
+
{"version":3,"sources":["index.ts"],"names":[],"mappings":"AAAA,OAAO,gBAAP;AAEA,cAAc,UAAd;AACA,cAAc,YAAd;AACA,cAAc,YAAd","sourcesContent":["import './monkey-patch';\n\nexport * from './native';\nexport * from './animated';\nexport * from './replicas';\n"]}
|
|
@@ -0,0 +1,36 @@
|
|
|
1
|
+
import { NativeModules, Platform } from 'react-native'; // @ts-expect-error because there is no corresponding type definition
|
|
2
|
+
|
|
3
|
+
import * as NativeAndroidManager from 'react-native/Libraries/Components/StatusBar/NativeStatusBarManagerAndroid';
|
|
4
|
+
const getConstants = NativeAndroidManager.default.getConstants;
|
|
5
|
+
const RCTStatusBarManagerCompat = NativeModules.StatusBarManagerCompat; // On Android < 11 RN uses legacy API which breaks EdgeToEdge mode in RN, so
|
|
6
|
+
// in order to use library on all available platforms we have to monkey patch
|
|
7
|
+
// default RN implementation and use modern `WindowInsetsControllerCompat`.
|
|
8
|
+
|
|
9
|
+
if (Platform.OS === 'android') {
|
|
10
|
+
NativeAndroidManager.default = {
|
|
11
|
+
getConstants,
|
|
12
|
+
|
|
13
|
+
setColor(color, animated) {
|
|
14
|
+
RCTStatusBarManagerCompat.setColor(color, animated);
|
|
15
|
+
},
|
|
16
|
+
|
|
17
|
+
setTranslucent(translucent) {
|
|
18
|
+
RCTStatusBarManagerCompat.setTranslucent(translucent);
|
|
19
|
+
},
|
|
20
|
+
|
|
21
|
+
/**
|
|
22
|
+
* - statusBarStyles can be:
|
|
23
|
+
* - 'default'
|
|
24
|
+
* - 'dark-content'
|
|
25
|
+
*/
|
|
26
|
+
setStyle(statusBarStyle) {
|
|
27
|
+
RCTStatusBarManagerCompat.setStyle(statusBarStyle);
|
|
28
|
+
},
|
|
29
|
+
|
|
30
|
+
setHidden(hidden) {
|
|
31
|
+
RCTStatusBarManagerCompat.setHidden(hidden);
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
};
|
|
35
|
+
}
|
|
36
|
+
//# sourceMappingURL=monkey-patch.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["monkey-patch.tsx"],"names":["NativeModules","Platform","NativeAndroidManager","getConstants","default","RCTStatusBarManagerCompat","StatusBarManagerCompat","OS","setColor","color","animated","setTranslucent","translucent","setStyle","statusBarStyle","setHidden","hidden"],"mappings":"AAAA,SAASA,aAAT,EAAwBC,QAAxB,QAAwC,cAAxC,C,CACA;;AACA,OAAO,KAAKC,oBAAZ,MAAsC,2EAAtC;AAEA,MAAMC,YAAY,GAAGD,oBAAoB,CAACE,OAArB,CAA6BD,YAAlD;AAEA,MAAME,yBAAyB,GAAGL,aAAa,CAACM,sBAAhD,C,CAEA;AACA;AACA;;AACA,IAAIL,QAAQ,CAACM,EAAT,KAAgB,SAApB,EAA+B;AAC7BL,EAAAA,oBAAoB,CAACE,OAArB,GAA+B;AAC7BD,IAAAA,YAD6B;;AAE7BK,IAAAA,QAAQ,CAACC,KAAD,EAAgBC,QAAhB,EAAyC;AAC/CL,MAAAA,yBAAyB,CAACG,QAA1B,CAAmCC,KAAnC,EAA0CC,QAA1C;AACD,KAJ4B;;AAM7BC,IAAAA,cAAc,CAACC,WAAD,EAA6B;AACzCP,MAAAA,yBAAyB,CAACM,cAA1B,CAAyCC,WAAzC;AACD,KAR4B;;AAU7B;AACJ;AACA;AACA;AACA;AACIC,IAAAA,QAAQ,CAACC,cAAD,EAAgC;AACtCT,MAAAA,yBAAyB,CAACQ,QAA1B,CAAmCC,cAAnC;AACD,KAjB4B;;AAmB7BC,IAAAA,SAAS,CAACC,MAAD,EAAwB;AAC/BX,MAAAA,yBAAyB,CAACU,SAA1B,CAAoCC,MAApC;AACD;;AArB4B,GAA/B;AAuBD","sourcesContent":["import { NativeModules, Platform } from 'react-native';\n// @ts-expect-error because there is no corresponding type definition\nimport * as NativeAndroidManager from 'react-native/Libraries/Components/StatusBar/NativeStatusBarManagerAndroid';\n\nconst getConstants = NativeAndroidManager.default.getConstants;\n\nconst RCTStatusBarManagerCompat = NativeModules.StatusBarManagerCompat;\n\n// On Android < 11 RN uses legacy API which breaks EdgeToEdge mode in RN, so\n// in order to use library on all available platforms we have to monkey patch\n// default RN implementation and use modern `WindowInsetsControllerCompat`.\nif (Platform.OS === 'android') {\n NativeAndroidManager.default = {\n getConstants,\n setColor(color: number, animated: boolean): void {\n RCTStatusBarManagerCompat.setColor(color, animated);\n },\n\n setTranslucent(translucent: boolean): void {\n RCTStatusBarManagerCompat.setTranslucent(translucent);\n },\n\n /**\n * - statusBarStyles can be:\n * - 'default'\n * - 'dark-content'\n */\n setStyle(statusBarStyle?: string): void {\n RCTStatusBarManagerCompat.setStyle(statusBarStyle);\n },\n\n setHidden(hidden: boolean): void {\n RCTStatusBarManagerCompat.setHidden(hidden);\n },\n };\n}\n"]}
|
|
@@ -9,6 +9,11 @@ declare type ReanimatedContext = {
|
|
|
9
9
|
progress: Reanimated.SharedValue<number>;
|
|
10
10
|
height: Reanimated.SharedValue<number>;
|
|
11
11
|
};
|
|
12
|
+
declare type KeyboardAnimationContext = {
|
|
13
|
+
animated: AnimatedContext;
|
|
14
|
+
reanimated: ReanimatedContext;
|
|
15
|
+
};
|
|
16
|
+
export declare const KeyboardContext: React.Context<KeyboardAnimationContext>;
|
|
12
17
|
export declare const useKeyboardAnimation: () => AnimatedContext;
|
|
13
18
|
export declare const useReanimatedKeyboardAnimation: () => ReanimatedContext;
|
|
14
19
|
declare type Styles = {
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "react-native-keyboard-controller",
|
|
3
|
-
"version": "1.0.
|
|
4
|
-
"description": "
|
|
3
|
+
"version": "1.0.1",
|
|
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",
|
|
7
7
|
"types": "lib/typescript/index.d.ts",
|
|
@@ -23,8 +23,8 @@
|
|
|
23
23
|
],
|
|
24
24
|
"scripts": {
|
|
25
25
|
"test": "jest",
|
|
26
|
-
"typescript": "tsc --noEmit",
|
|
27
|
-
"lint": "eslint \"**/*.{js,ts,tsx}\"",
|
|
26
|
+
"typescript": "tsc --noEmit --project tsconfig.build.json",
|
|
27
|
+
"lint": "eslint --quiet \"**/*.{js,ts,tsx}\"",
|
|
28
28
|
"prepare": "bob build",
|
|
29
29
|
"release": "release-it",
|
|
30
30
|
"example": "yarn --cwd example",
|
|
@@ -33,6 +33,8 @@
|
|
|
33
33
|
},
|
|
34
34
|
"keywords": [
|
|
35
35
|
"react-native",
|
|
36
|
+
"keyboard",
|
|
37
|
+
"animation",
|
|
36
38
|
"ios",
|
|
37
39
|
"android"
|
|
38
40
|
],
|
|
@@ -42,7 +44,7 @@
|
|
|
42
44
|
"bugs": {
|
|
43
45
|
"url": "https://github.com/kirillzyusko/react-native-keyboard-controller/issues"
|
|
44
46
|
},
|
|
45
|
-
"homepage": "https://github.
|
|
47
|
+
"homepage": "https://kirillzyusko.github.io/react-native-keyboard-controller/",
|
|
46
48
|
"publishConfig": {
|
|
47
49
|
"registry": "https://registry.npmjs.org/"
|
|
48
50
|
},
|
|
@@ -118,7 +120,8 @@
|
|
|
118
120
|
"trailingComma": "es5",
|
|
119
121
|
"useTabs": false
|
|
120
122
|
}
|
|
121
|
-
]
|
|
123
|
+
],
|
|
124
|
+
"react-hooks/exhaustive-deps": "warn"
|
|
122
125
|
}
|
|
123
126
|
},
|
|
124
127
|
"eslintIgnore": [
|
package/src/animated.tsx
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import React, { useContext, useMemo } from 'react';
|
|
1
|
+
import React, { useContext, useMemo, useRef } from 'react';
|
|
2
2
|
import { Animated, StyleSheet, ViewStyle } from 'react-native';
|
|
3
3
|
import Reanimated, {
|
|
4
4
|
useEvent,
|
|
@@ -41,7 +41,7 @@ const defaultContext: KeyboardAnimationContext = {
|
|
|
41
41
|
height: { value: 0 },
|
|
42
42
|
},
|
|
43
43
|
};
|
|
44
|
-
const KeyboardContext = React.createContext(defaultContext);
|
|
44
|
+
export const KeyboardContext = React.createContext(defaultContext);
|
|
45
45
|
|
|
46
46
|
export const useKeyboardAnimation = (): AnimatedContext => {
|
|
47
47
|
useResizeMode();
|
|
@@ -112,8 +112,8 @@ export const KeyboardProvider = ({
|
|
|
112
112
|
children,
|
|
113
113
|
statusBarTranslucent,
|
|
114
114
|
}: KeyboardProviderProps) => {
|
|
115
|
-
const progress =
|
|
116
|
-
const height =
|
|
115
|
+
const progress = useRef(new Animated.Value(0)).current;
|
|
116
|
+
const height = useRef(new Animated.Value(0)).current;
|
|
117
117
|
const progressSV = useSharedValue(0);
|
|
118
118
|
const heightSV = useSharedValue(0);
|
|
119
119
|
const context = useMemo(
|
|
@@ -123,6 +123,13 @@ export const KeyboardProvider = ({
|
|
|
123
123
|
}),
|
|
124
124
|
[]
|
|
125
125
|
);
|
|
126
|
+
const style = useMemo(
|
|
127
|
+
() => [
|
|
128
|
+
styles.hidden,
|
|
129
|
+
{ transform: [{ translateX: height }, { translateY: progress }] },
|
|
130
|
+
],
|
|
131
|
+
[]
|
|
132
|
+
);
|
|
126
133
|
|
|
127
134
|
const onKeyboardMove = useMemo(
|
|
128
135
|
() =>
|
|
@@ -161,18 +168,15 @@ export const KeyboardProvider = ({
|
|
|
161
168
|
>
|
|
162
169
|
<>
|
|
163
170
|
<Animated.View
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
styles.hidden,
|
|
174
|
-
{ transform: [{ translateX: height }, { translateY: progress }] },
|
|
175
|
-
]}
|
|
171
|
+
// we are using this small hack, because if the component (where
|
|
172
|
+
// animated value has been used) is unmounted, then animation will
|
|
173
|
+
// stop receiving events (seems like it's react-native optimization).
|
|
174
|
+
// So we need to keep a reference to the animated value, to keep it's
|
|
175
|
+
// always mounted (keep a reference to an animated value).
|
|
176
|
+
//
|
|
177
|
+
// To test why it's needed, try to open screen which consumes Animated.Value
|
|
178
|
+
// then close it and open it again (for example 'Animated transition').
|
|
179
|
+
style={style}
|
|
176
180
|
/>
|
|
177
181
|
{children}
|
|
178
182
|
</>
|
package/src/index.ts
CHANGED
|
@@ -0,0 +1,36 @@
|
|
|
1
|
+
import { NativeModules, Platform } from 'react-native';
|
|
2
|
+
// @ts-expect-error because there is no corresponding type definition
|
|
3
|
+
import * as NativeAndroidManager from 'react-native/Libraries/Components/StatusBar/NativeStatusBarManagerAndroid';
|
|
4
|
+
|
|
5
|
+
const getConstants = NativeAndroidManager.default.getConstants;
|
|
6
|
+
|
|
7
|
+
const RCTStatusBarManagerCompat = NativeModules.StatusBarManagerCompat;
|
|
8
|
+
|
|
9
|
+
// On Android < 11 RN uses legacy API which breaks EdgeToEdge mode in RN, so
|
|
10
|
+
// in order to use library on all available platforms we have to monkey patch
|
|
11
|
+
// default RN implementation and use modern `WindowInsetsControllerCompat`.
|
|
12
|
+
if (Platform.OS === 'android') {
|
|
13
|
+
NativeAndroidManager.default = {
|
|
14
|
+
getConstants,
|
|
15
|
+
setColor(color: number, animated: boolean): void {
|
|
16
|
+
RCTStatusBarManagerCompat.setColor(color, animated);
|
|
17
|
+
},
|
|
18
|
+
|
|
19
|
+
setTranslucent(translucent: boolean): void {
|
|
20
|
+
RCTStatusBarManagerCompat.setTranslucent(translucent);
|
|
21
|
+
},
|
|
22
|
+
|
|
23
|
+
/**
|
|
24
|
+
* - statusBarStyles can be:
|
|
25
|
+
* - 'default'
|
|
26
|
+
* - 'dark-content'
|
|
27
|
+
*/
|
|
28
|
+
setStyle(statusBarStyle?: string): void {
|
|
29
|
+
RCTStatusBarManagerCompat.setStyle(statusBarStyle);
|
|
30
|
+
},
|
|
31
|
+
|
|
32
|
+
setHidden(hidden: boolean): void {
|
|
33
|
+
RCTStatusBarManagerCompat.setHidden(hidden);
|
|
34
|
+
},
|
|
35
|
+
};
|
|
36
|
+
}
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
File without changes
|
|
Binary file
|
|
Binary file
|
|
File without changes
|
|
File without changes
|