dev-react-cordova
v1.0.5
Published
Used for initialization statusBar NavBar padding, full screen and used for working with keyboard.
Downloads
9
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