dev-react-cordova
v1.0.5
Published
Used for initialization statusBar NavBar padding, full screen and used for working with keyboard.
Downloads
22
Readme
CordovaAppControl
Used for initialization statusBar NavBar padding, full screen and used for working with keyboard.
const startApp = () => {
ReactDOM.createRoot(document.getElementById("root")!).render(<App />);
};
if (window.cordova) {
document.addEventListener(
"deviceready",
() => {
startApp();
// let isKeyboardHeight = false;
CordovaAppControl.keyboard.onWatch((data) => {
console.log("onWatch (data)", data); //{height: number, isShow: boolean }
// if (!isKeyboardHeight && data.isShow) {
// isKeyboardHeight = true;
// // store.dispatch(setKeyboardHeight(data.height));
// }
// store.dispatch(setKeyboardInfo(data));
});
CordovaAppControl.dynamicMetaContentProperty();
CordovaAppControl.initFullScreen({
isFullScreen: true,
isPaddingBottomAndroid: true,
isPaddingBottomIos: true,
onHeightBars: (data) => {
console.log("onHeightBars (data)", data); //{heightStatus: number, heightNav: number }
// store.dispatch(setMobileHeightBars({
// heightStatusBar: heightStatus,
// heightNavBar: heightNav
// }));
},
});
},
false
);
} else {
startApp();
}
export function App() {
return (
<>
<div>Other Component...with auto padding</div>
<p>For Elements with style position fixed use component ControlHeightBoxMobile. Example Modal, Dialog @mui components</p>
<ControlHeightBoxMobile >
<Dialog>
...
</Dialog>
</ControlHeightBoxMobile>
</>
)
}
install plugins for cordova
- cordova-plugin-android-bars I created a plugin because cordova-plugin-statusbar behaves strangely on android
- cordova-plugin-device
- cordova-plugin-statusbar used for ios
- cordova-plugin-keyboard used for ios