sunhat / react-native-extra-dimensions-android Goto Github PK
View Code? Open in Web Editor NEWAccess additional display metrics on Android devices: status bar height, soft menu bar height, real screen size.
License: ISC License
Access additional display metrics on Android devices: status bar height, soft menu bar height, real screen size.
License: ISC License
Hey there ,
using this package and files like :
\node_modules\react-native-extra-dimensions-android\android\build\intermediates\exploded-aar\com.android.support\appcompat-v7\22.2.0\res\drawable-ldrtl-xxxhdpi\abc_ic_menu_copy_mtrl_am_alpha.png
are just too long. (given we don't want to force the devs to place the repository in a very short path)
we get annoying errors in android studio :
file path too long on windows keep below 240 characters
do you think it'll be possible to shorten stuff? we can start with the package name itself (right now it's : react-native-extra-dimensions-android which is 37 chars...
Thanks
While testing in Pixel 3a XL device the SOFT_MENU_BAR_HEIGHT
is returning 0. It is working fine in Version 1.2.2.
I am using Meizu for test.
Thank you for this library!
I can see there is already a type definition but not in npm distribution. Could you publish that one too?
Thanks!
I get this error when run react-native run-android
ExtraDimensionsPackage is not abstract and does not override abstract method createJSModules() in ReactPackage
public class ExtraDimensionsPackage implements ReactPackage {
React-native version 0.61.1
I am using the https://github.com/react-native-community/react-native-modal.
const deviceWidth = ExtraDimensions.get('window').width;
const deviceHeight =
Platform.OS === 'ios'
? ExtraDimensions.get('window').height
: ExtraDimensions.getRealWindowHeight();
Hey!
I think for this library it would be really handy to have a method that return true or false wether the soft buttons are active or not since it is not possible to know with react native alone.
This is the code I have found to create such method:
DetectHardwareModule.java
package com.companyname.appname.detecthardware;
import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.bridge.ReactContextBaseJavaModule;
import com.facebook.react.bridge.Callback;
import com.facebook.react.bridge.ReactMethod;
import java.util.List;
public class DetectHardwareModule extends ReactContextBaseJavaModule {
public DetectHardwareModule(ReactApplicationContext reactContext) {
super(reactContext);
}
@Override
public String getName() {
return "DetectHardware";
}
@ReactMethod
public void hasHardwareButtons(final Callback callback) {
callback.invoke(ViewConfiguration.get(getReactApplicationContext()).hasPermanentMenuKey());
}
}
DetectHardwarePackage.java
package com.companyname.appname.detecthardware;
import com.facebook.react.ReactPackage;
import com.facebook.react.bridge.JavaScriptModule;
import com.facebook.react.bridge.NativeModule;
import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.uimanager.ViewManager;
import java.util.ArrayList;
import java.util.Collections;
import java.util.List;
public class DetectHardwarePackage implements ReactPackage {
@Override
public List<NativeModule> createNativeModules(ReactApplicationContext reactContext) {
List<NativeModule> modules = new ArrayList<>();
modules.add(new DetectHardwareModule(reactContext));
return modules;
}
@Override
public List<Class<? extends JavaScriptModule>> createJSModules() {
return Collections.emptyList();
}
@Override
public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) {
return Collections.emptyList();
}
}
Hi
Thank you for provide this open source library! I have enjoyed using it.
I was wondering if you could add typescript declaration file that we could download as part of npm.
My project is using typescript and I get warning to download declaration type with the command below but it doesn't exist.
npm install @types/react-native-extra-dimensions-android
Thank you!
With the latest patch and the fix for notched devices i get mixed results. I want the available screen height with a translucent statusbar. So that should be the actual screen height minus the softmenu bar.
Samsung s10
Has a soft menu.
ExtraDimensions.getSoftMenuBarHeight( ) -> 48 -> seems ok
ExtraDimensions.isSoftMenuBarEnabled() -> false -> not ok
ExtraDimensions.getRealWindowHeight() -> gives the device height - soft menu bar height
Samsung J5
Has no soft menu
ExtraDimensions.getSoftMenuBarHeight( ) -> 0 -> seems ok
ExtraDimensions.isSoftMenuBarEnabled() -> true -> not ok
ExtraDimensions.getRealWindowHeight() -> gives the device height
Simulator Nexus 5x
Has a soft menu
ExtraDimensions.getSoftMenuBarHeight( ) -> 0 -> not ok
ExtraDimensions.isSoftMenuBarEnabled() -> true -> seems ok
ExtraDimensions.getRealWindowHeight() -> gives the device height
I'm not a native dev otherwise i would dive in and try to fix it myself.
The current release does not compile against 0.48.3. The rules have changed about @OverRide and I am not a java person, so I am not sure what this change is about. I have noticed that many libraries are simply removing the override attribute and re-publishing.
A problem occurred configuring project ':app'.
Cannot evaluate module ExtraDimensions : Configuration with name 'default' not found.
this happened after I went through installation steps.
I use the plugin 'react-native-gifted-messenger',the example use '"react-native-extra-dimensions-android": "^0.17.0",',but i run the project in android platform.the error like 'undefined is not an object(evaluating 'ExtraDimensions[dim]')'.
ExtraDimensions.get('STATUS_BAR_HEIGHT ') returns undefined
ExtraDimensions.get('REAL_WINDOW_HEIGHT') working fine
react-native-cli: 2.0.1
react-native: 0.50.4
Hi,
we get warning The following packages use deprecated "rnpm" config that will stop working from next release
...
I see you have setup the new config file in master, but the latest tagged version does not contain it.
When ive tried updating via npm / yarn I always get version that does not have the new config
When you have a style in your project like so:
const styles = StyleSheet.create({
container: {
height: ExtraDimensions.get('REAL_WINDOW_HEIGHT'),
},
});
all keyboard events will be broken. When app starts, you will receive keyboardDidShow
event right away, with some random relatively small value (for example, Samsung S20 has 81.52381134033203 value). However, no keyboard is shown, so this event should not even be dispatched. This can potentially break bottom tab bar if you set it to auto-hide on keyboard. Be aware!
Also, when you actually do focus some text input, the height of keyboard within the event will be wrong - it will be more than it actually is, by the value that comes when you hide the keyboard. And when you hide the keyboard, no keyboardDidHide
event will be dispatched. Instead, you will receive keyboardDidShow
.
This behavior occurs on some devices, not all of them. For example, I've seen it on Samsung S20 when navigation is setup to use 3-button navigation (soft navigation bar at the bottom).
Start a new react native project, then install this package, and add code above. I've setup a repo for convenience
just a question...are you still maintaining this module?
Whenever the platform is not on android, there is a warning that displays:
console.warn node_modules/react-native-extra-dimensions-android/index.js:11
react-native-extra-dimensions-android is only available on Android
This is not needed and only serves to clutter the console. Anyone with a brain knows that this package is only going to be applicable/used on android. This warning message shows up even on tests.
"react-native": "^0.37.0"
import ExtraDimensions from 'react-native-extra-dimensions-android';
ExtraDimensions is {} object
Project need add file react-native.config.js to update "rnpm" props in packages.json.
Can't use library without declaration of compile/minimum/target build versions
Please, provide minimum required default versions inside android/build.gradle
https://github.com/react-native-community/react-native-linear-gradient/blob/master/android/build.gradle
Can get the real device height value. using ExtraDimensions.getRealWindowHeight()
return empty string. Was tested on Pocophone f1.
import ExtraDimensions from 'react-native-extra-dimensions-android'
console.log(JSON.stringify(ExtraDimensions)) // return {}, should be returning device height.
React native version 0.59
Redmi Note 7 pro
Has a soft menu.
ExtraDimensions.isSoftMenuBarEnabled() gives false
The hook useWindowDimensions
automatically updates width and height values when screen size changes.
https://reactnative.dev/docs/usewindowdimensions
Thanks!
when react-native run-android build fails with message above
error: package com.jaysoo.extradimensions does not exist
I created a brand new app using React Native version 0.44.0, followed the install steps for react-native-extra-dimensions-android
, and added the following code to the index.android.js
:
import React, { Component } from 'react';
import {
AppRegistry,
Dimensions,
Text,
View
} from 'react-native';
import ExtraDimensions from 'react-native-extra-dimensions-android';
export default class HelloWorld extends Component {
render() {
return (
<View style={{flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: '#F5FCFF'}}>
<Text style={{fontSize: 20, textAlign: 'center', margin: 10}}>Welcome to React Native!</Text>
<Text>To get started, edit index.android.js</Text>
<View style={{margin: 20}}>
<Text style={{marginTop: 20, fontWeight: 'bold'}}>Dimensions.get('screen')</Text>
<Text>width: {Dimensions.get('screen').width}</Text>
<Text>height: {Dimensions.get('screen').height}</Text>
<Text style={{marginTop: 20, fontWeight: 'bold'}}>Dimensions.get('window')</Text>
<Text>width: {Dimensions.get('window').width}</Text>
<Text>height: {Dimensions.get('window').height}</Text>
<Text style={{marginTop: 20, fontWeight: 'bold'}}>ExtraDimensions</Text>
<Text>REAL_WINDOW_HEIGHT: {ExtraDimensions.get('REAL_WINDOW_HEIGHT')}</Text>
<Text>REAL_WINDOW_WIDTH: {ExtraDimensions.get('REAL_WINDOW_WIDTH')}</Text>
<Text>STATUS_BAR_HEIGHT: {ExtraDimensions.get('STATUS_BAR_HEIGHT')}</Text>
<Text>SOFT_MENU_BAR_HEIGHT: {ExtraDimensions.get('SOFT_MENU_BAR_HEIGHT')}</Text>
<Text>SMART_BAR_HEIGHT: {ExtraDimensions.get('SMART_BAR_HEIGHT')}</Text>
</View>
</View>
);
}
}
AppRegistry.registerComponent('HelloWorld', () => HelloWorld);
This is what renders to the screen:
I expected that the react-native-extra-dimensions-android
values to be whole integers.
If I visit http://whatismyscreenresolution.com/ I see that the screen resolution is: 412 x 732
Am I doing something wrong?
I'm struggling with gradle when building my app.
It says:
error: method does not override or implement a method from a supertype
My gradle script hasn't change since previous versions, it's properly linked:
settings.gradle:
include ':ExtraDimensions'
project(':ExtraDimensions').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-extra-dimensions-android/android')
build.gradle:
dependencies {
configurations.all {
exclude group: 'com.facebook.react', module: 'react-native'
}
compile fileTree(dir: "libs", include: ["*.jar"])
compile 'com.android.support:appcompat-v7:26.1.0'
compile 'com.yqritc:android-scalablevideoview:1.0.4'
compile 'com.amazonaws:aws-android-sdk-core:2.3.0'
compile 'com.amazonaws:aws-android-sdk-cognito:2.3.0'
compile 'com.amazonaws:aws-android-sdk-s3:2.3.0'
compile 'com.google.zxing:core:3.3.0'
compile 'com.facebook.fresco:animated-gif:0.13.0'
compile project(':react-native-video')
compile project(':react-native-fs')
compile project(':react-native-orientation')
compile project(':react-native-image-picker')
compile project(':reactdate')
compile(project(':react-native-maps')) {
exclude group: 'com.google.android.gms', module: 'play-services-base'
exclude group: 'com.google.android.gms', module: 'play-services-maps'
}
compile(project(':react-native-push-notification')) {
exclude group: 'com.google.android.gms', module: 'play-services-gcm'
}
compile project(':ExtraDimensions')
compile project(':react-native-vector-icons')
compile project(':react-native-fbsdk')
compile project(':react-native-camera')
compile project(':react-native-blur')
compile project(':react-native-linear-gradient')
compile project(':react-native-fcm')
compile project(':react-native-sentry')
compile 'com.google.android.gms:play-services-base:11.8.0'
compile 'com.google.android.gms:play-services-maps:11.8.0'
compile 'com.google.android.gms:play-services-gcm:11.8.0'
compile 'com.google.android.gms:play-services-location:11.8.0'
compile 'com.android.support:multidex:1.0.2'
compile 'com.google.firebase:firebase-core:11.8.0'
compile 'com.google.firebase:firebase-crash:11.8.0'
compile project(':ReactAndroid') // make sure to keep this dependency last in the list
}
Tip: I'm compiling React-Native from source. ExtraDimension is the only project that I'm stuggling with 😢
I'd like to be able to find the current height of the Android toolbar, which is 56 on phones and 64 on tablets. But this doesn't look to be supported by this library. Would this be difficult to implement? Or do you know a way to detect if I'm on a tablet?
Thanks for making/maintaining this library.
I've run into an issue where SOFT_MENU_BAR_HEIGHT seems to be double the value it should be when running on a Pixel 3 XL with the notch activated (default behavior).
See screenshots for more information:
This is running on a Pixel 3 XL with the notch deactivated (display cutout hidden in developer options).
This is running on a Pixel 3 XL with the notch activated (display cutout set to "Device default" in developer options)
As you can see, SOFT_MENU_BAR_HEIGHT is reported as ~96, which is wrong since it's the exact same height as it was with the notch deactivated.
Let me know if you need any more information and I'd be happy to provide it.
Android build fail, please help
A problem occurred evaluating project ':react-native-extra-dimensions-android'.
Cannot get property 'compileSdkVersion' on extra properties extension as it do
es not exist
Environment:
OS: Windows 7
Node: 8.12.0
Yarn: 1.9.4
npm: 6.4.1
Watchman: Not Found
Xcode: N/A
Android Studio: Not Found
Packages: (wanted => installed)
react: 16.3.1 => 16.3.1
react-native: ^0.55.4 => 0.55.4
customizations has been moved to MainApplication.java
warn The following packages use deprecated "rnpm" config that will stop working from next release:
i tried in android Emulator and XiaoMi 8 both, this method always returns false, and android_real_height still returns the actual height + soft_bar_height when i turn off the soft bar.which means i will never know whether the user turns off the soft bar.
React-native-modal still references to use this package in their ReadMe
I have followed all instructions, but got
undefined is not an object (evaluating '_reactNative.NativeModules.ExtraDimensions[dim]'
My code is:
import ExtraDimensions from 'react-native-extra-dimensions-android';
...
console.log(ExtraDimensions.get('REAL_WINDOW_WIDTH'));
I have RN ver 0.42
react-native : 0.46.4
' new ExtraDimensionsPackage()', No duplicate
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.