Skip to content

Commit

Permalink
fix: android build fail with rnx kit & treeShaking enabled (#380)
Browse files Browse the repository at this point in the history
## 馃摐 Description

Fixed build issues when using `@rnx-kit`.

## 馃挕 Motivation and Context
When using tools like @rnx-kit from microsoft, which uses esbuild to
handle bundling and also enables treeShaking, the build fails

## 馃摙 Changelog
- instead of direct export of type Ex: export { KeyboardToolbarProps }
we export using "type": export { type KeyboardToolbarProps }


## 馃摳 Screenshots (if appropriate):



<img width="1249" alt="Screenshot 2024-03-07 at 23 01 07"
src="https://github.com/kirillzyusko/react-native-keyboard-controller/assets/10183866/6d2b5476-aadd-4736-98d2-22e5b53d68f3">
<img width="870" alt="Screenshot 2024-03-07 at 23 00 53"
src="https://github.com/kirillzyusko/react-native-keyboard-controller/assets/10183866/3c252693-a220-4ebb-bd77-e606b0139756">
  • Loading branch information
ashwin1014 committed Mar 9, 2024
1 parent ae5d4f0 commit 5a516aa
Show file tree
Hide file tree
Showing 4 changed files with 37 additions and 29 deletions.
5 changes: 4 additions & 1 deletion .gitignore
Expand Up @@ -64,4 +64,7 @@ lib/
.metro-health-check*

# testing
/coverage
/coverage

# yarn cache folder (v2+)
.yarn
2 changes: 1 addition & 1 deletion src/components/index.ts
Expand Up @@ -4,5 +4,5 @@ export { default as KeyboardAwareScrollView } from "./KeyboardAwareScrollView";
export {
default as KeyboardToolbar,
DefaultKeyboardToolbarTheme,
KeyboardToolbarProps,
} from "./KeyboardToolbar";
export type { KeyboardToolbarProps } from "./KeyboardToolbar";
2 changes: 1 addition & 1 deletion src/index.ts
Expand Up @@ -12,5 +12,5 @@ export {
// keyboard toolbar
KeyboardToolbar,
DefaultKeyboardToolbarTheme,
KeyboardToolbarProps,
} from "./components";
export type { KeyboardToolbarProps } from "./components";
57 changes: 31 additions & 26 deletions src/monkey-patch.android.ts
@@ -1,39 +1,44 @@
// @ts-expect-error because there is no corresponding type definition
import * as NativeAndroidManager from "react-native/Libraries/Components/StatusBar/NativeStatusBarManagerAndroid";

const DefaultNativeAndroidManager = NativeAndroidManager.default;
const getConstants = NativeAndroidManager.default.getConstants;
const RCTStatusBarManagerCompat =
// eslint-disable-next-line @typescript-eslint/no-var-requires
require("./specs/NativeStatusBarManagerCompat").default;

// Copy original default manager to keep its original state and methods
const OriginalNativeAndroidManager = { ...NativeAndroidManager.default };

// Create a new object that modifies the necessary methods
// On Android < 11 RN uses legacy API which breaks EdgeToEdge mode in RN, so
// in order to use library on all available platforms we have to monkey patch
// default RN implementation and use modern `WindowInsetsControllerCompat`.
export const applyMonkeyPatch = () => {
NativeAndroidManager.default = {
getConstants,
setColor(color: number, animated: boolean): void {
RCTStatusBarManagerCompat.setColor(color, animated);
},

setTranslucent(translucent: boolean): void {
RCTStatusBarManagerCompat.setTranslucent(translucent);
},

/**
* - statusBarStyles can be:
* - 'default'
* - 'dark-content'
*/
setStyle(statusBarStyle?: string): void {
RCTStatusBarManagerCompat.setStyle(statusBarStyle);
},
const ModifiedNativeAndroidManager = {
...NativeAndroidManager.default, // Spread original properties to keep existing functionality
setColor: (color: number, animated: boolean): void => {
RCTStatusBarManagerCompat.setColor(color, animated);
},
setTranslucent: (translucent: boolean): void => {
RCTStatusBarManagerCompat.setTranslucent(translucent);
},
/**
* - statusBarStyles can be:
* - 'default'
* - 'dark-content'
*/
setStyle: (statusBarStyle?: string): void => {
RCTStatusBarManagerCompat.setStyle(statusBarStyle);
},
setHidden: (hidden: boolean): void => {
RCTStatusBarManagerCompat.setHidden(hidden);
},
};

setHidden(hidden: boolean): void {
RCTStatusBarManagerCompat.setHidden(hidden);
},
};
// Define a function to apply the monkey patch
export const applyMonkeyPatch = () => {
Object.assign(NativeAndroidManager.default, ModifiedNativeAndroidManager);
};

// Define a function to revert changes back to the original state
export const revertMonkeyPatch = () => {
NativeAndroidManager.default = DefaultNativeAndroidManager;
Object.assign(NativeAndroidManager.default, OriginalNativeAndroidManager);
};

0 comments on commit 5a516aa

Please sign in to comment.