I'm using React Native 0.29 and developing for Android. I'm trying to lock the device orientation. What I need is to lock the screen in portrait mode. I tried with this repository https://github.com/yamill/react-native-orientation but it is not supporting RN 0.29 yet.
Is there any way I can lock the device orientation? Maybe any native Android hack with android studio?
Just add android:screenOrientation="portrait" to the activity in the AndroidManifest.xml.
2017 Update
Currently, there is also another way to do it once for both Android and iOS by adding:
"orientation": "portrait"
in app.json if you're using Expo:
{
"expo": {
"name": "My app",
"slug": "my-app",
"sdkVersion": "21.0.0",
"privacy": "public",
"orientation": "portrait"
}
}
Or at runtime:
ScreenOrientation.allow()
Example:
ScreenOrientation.allow(ScreenOrientation.Orientation.PORTRAIT);
Note that it only works if you're building with Expo but since this is currently (as of 2017) recommended in official guides on React Native Blog then probably a lot of people are using it so it's worth mentioning as an interesting solution in addition to hacking the Android-specific XML configuration files.
More info:
For more info see:
how to disable rotation in React Native?
There is a pull request for this to work on 0.29.2 and above:
https://github.com/yamill/react-native-orientation/pull/85
If you use his version, it should work on 0.29.2 and above:
https://github.com/youennPennarun/react-native-orientation
Steps:
unlink the previous installation with rnpm unlink react-native-orientation
rm -rf node_modules/react-native-orientation
in your package.json edit the entry of react-native-orientation to be as:
"react-native-orientation": "youennPennarun/react-native-orientation"
npm install
react-native link react-native-orientation
Things should work after this. You can track the progress of the PR and switch to main repo when it has been merged.
react-native-orientation - is no longer compatible with new version (I have tried 0.39.2). After linking this module I have the compiler's error.
As I got it, now we should use react-native-orientation-listener
npm install --save react-native-orientation-listener
rnpm link
Step:1
npm install git+https://github.com/yamill/react-native-orientation.git --save
Step2:
react-native link
Step:3
Modify the MainApplication.java file with:
import com.github.yamill.orientation.OrientationPackage;// import
#Override
protected List getPackages() {
return Arrays.asList(
new MainReactPackage(),
new OrientationPackage() //add this
);
}
You can use react-native-orientation-locker.
The 'react-native-orientation' has been deprecated.
Using the 'react-native-orientation-locker' component, you would be able to detect the current orientation, as well as locking it to Portrait/Landscape by using:
Orientation.lockToPortrait();
Orientation.lockToLandscapeLeft();
Even release the locks using
Orientation.unlockAllOrientations();
Related
I'm trying to add in a built-in application with react-native-expo a series of tools from firebase.I managed to add the following features Cloud Messaging and Firebase Analitycs.But I have to integrate In-app-messaging and Dynamic links
First time I install all firebase module/dependencies to do this task.
"#react-native-firebase/app": "^12.9.3",
"#react-native-firebase/in-app-messaging": "^12.9.3",
and my file looks like:
.......
import inAppMessaging from '#react-native-firebase/in-app-messaging
.......
useEffect(()=>{
await inAppMessaging().setMessagesDisplaySuppressed(true);
}[])
but I recive a warning:
]Unhandled promise rejection: Error: You attempted to use a firebase module that's not installed on your Android project by calling firebase.app().
After that I try to find a solution,I learn that expo allow to create plugins to extend expo functionality
I tty to salve problem fallow expo documentation but I couldn't figure out how to create these plugins.
Next I find a module that can help me with-rn-firebase but is not working and the module is depeciated.
Then I searched the internet until I discovered other people with the same problem this is the link I see in their app.json a basic config of plugin and I try to implement in my project,after I install dependencies that I need i add in my file:
"plugins": [
"#react-native-firebase/app",
"#react-native-firebase/analytics",
"#react-native-firebase/in-app-messaging"
],
But the fallowing error occure:
Package "#react-native-firebase/analytics" does not contain a valid config plugin.
Learn more: https://docs.expo.io/guides/config-plugins/#creating-a-plugin
Cannot use import statement outside a module
What I mean is, if anyone has ever faced this problem, I want in my project to be able to use in-app-messaging and dynamyc-links if someone has tried an implementation with expo and has any idea
Eventually I solved the problem,expo when I use the command expo:build android it only compiles my javascript files,but some of the code was written in java and other optional files in the android / ios folder.So instead of compiling with expo I used eas.
Faloowing command:
Run as administrator cmd and write this line npm install -g eas-cli.
Initialize new module in your expo/react native project with this line eas init.
Build aplication using this line for android: eas build --platform android
*For ios is a bit different you mast edit your file eas.json:
{
"cli": {
"version": ">= 0.43.0"
},
"build": {
"development": {
"distribution": "internal",
"android": {
"gradleCommand": ":app:assembleDebug"
},
"ios": {
"buildConfiguration": "Debug"
}
},
"preview": {
"distribution": "internal"
},
"production": {
"ios": {
"cocoapods": "1.11.2"
}
}
},
"submit": {
"production": {}
}
}
Build aplication using this line for ios: eas build --platform ios
Eas build include in complile all app file .gradle/.js/.java/.xml/.m/.h and this thing offer your posibility to build mobile app in expo with same functionality and complexity like react native cli.
Usefull Link
https://docs.expo.dev/build/setup/
React Native Expo Build Failing due to cocoapods version
I think you need to run locally using expo dev client
https://docs.expo.dev/development/getting-started/
Mostly, the package that is not supported by expo can run natively. But you need successfully built in eas build.
I have already make a build for android last week and everything works well. I have make some changes and now I want to make another build with expo build:android and I get this error.
Checking if this build already exists…
Entity Not Found.
It works well in ios but I couldn’t make the build for android. any thoughts?
thanks!
I fixed this error by changing the "slug" value to something else in the app.json file
I recently encountered this issue, tried a bunch of things. not sure which resolved it but here is a list.
How it started - a guess of how the issue originated
In app.json file I changed the value of android.package from "io.expo.client" to "com.mydomain.myapp"
"android": {
"package": "com.expo.client", // ---> "com.mydomain.myapp"
"adaptiveIcon": {
"foregroundImage": "./assets/adaptive-icon.png",
"backgroundColor": "#FFFFFF"
}
},
Then after that and a few other changes expo build:android resulted in an error Entity Not Found.
The fix - try the following to hopefully resolve your issue
delete all builds of the app from the project in expo
delete the project
create a new project
make sure the slug names match with that in your app.json file
run expo build:android -c on your app terminal to build with new credentials
accept to delete the old credentials
accept to have Keystore generated for you by expo
Deleting all builds of the app from the project in Expo alone helped me.
Don't forget to refresh the page between builds removal as changes do not immediatlety reflected
try to build with --clear-credentials flag...
or try in another expo account.
I am using this component https://github.com/wix/react-native-calendars. It Works good in iphone but having issue with android. When i open calendar page it gives me an error as
Incompatible receiver, Map required!
Environment
List of Packages Installed
"react-native": "^0.52.0",
"react-native-calendars": "^1.20.0"
Seems like there is an issue with core-js.I have also tried everything from this reference link https://github.com/zloirock/core-js/issues/368
Do anybody know, How to resolve this issue.
Thanks in advance!
Reverting back to v2.5.2 of core-js fixed it. We use core-js via babel-preset-env, in order to get it fixed the solution is to set the version hard in the resolutions property of the package.json file:
"resolutions": {
"core-js": "2.5.2"
}
the resolutions section of the package.json file is a yarn feature!
Recently I tried to update react native version from 0.48.4 to 0.49.0. I have read documentation about breaking changes.I installed react-native v0.49.0. When I am trying to run I got error like this
node_modules\react-native\local-cli\util\findSymlinkedModules.js:37
ignoredRoots? = [])
^
SyntaxError: Unexpected token ?
at createScript (vm.js:53:10)
at Object.runInThisContext (vm.js:95:10)
at Module._compile (module.js:543:28)
at loader (\node_modules\babel-register\lib\node.js:144:5)
at Object.require.extensions.(anonymous function) [as .js] (node_modules\babel-register\lib\node.js:154:7)
at Module.load (module.js:488:32)
at tryModuleLoad (module.js:447:12)
at Function.Module._load (module.js:439:3)
at Module.require (module.js:498:17)
at require (internal/module.js:20:19)
I tried to upgrade using react-native-git-upgrade and react-native upgrade.But getting errors like not recognized as an internal or external command.
I found one change in New features and Enhancements change log in RN 0.49.0 like this
Refactor how symlinks are discovered in local-cli, support scoped modules.
Is there anything to do with this
If you're using a git repo, try deleting the project folder then re-clone the repo. This worked for a friend who was having the same issue.
I found this solution here:
https://github.com/facebook/react-native/issues/16458
To fix this thing I had to use babel-plugin-transform-flow-strip-types plugin.
Steps :
npm install --save-dev babel-plugin-transform-flow-strip-types
In .babelrc
{
"plugins": ["transform-flow-strip-types"]
}
More details https://www.npmjs.com/package/babel-plugin-transform-flow-strip-types
Upgrading to "react-native": "0.54.1", fixed this for me.
Ran into the same issue updating to 0.54.
The root cause here is that Node is trying to interpret JS code with Flow types (in this case, ignoredRoots?).
Normally Babel would have removed these types via babel-plugin-transform-flow-strip-types, as Dinesh suggested. But that transform is contained in the standard react-native Babel preset, which does a bunch of other things too.
So what you really have to do is to make sure you have that preset setup. It should be under a devDependency in package.json:
"devDependencies": {
"babel-preset-react-native": "^4.0.0",
And then configured in .babelrc:
{
"presets": ["react-native"]
}
After that's setup you still may need to reset the packager cache:
npm start -- --reset-cache
This is what did it for me, hope it helps.
removing ? from findSymlinkedModules.js line no 37 worked for me
I'm having an issue with some android devices when changing the font-size display setting through configuration.
In web browser my app is simple ignoring this. This is true for some other mobiles too.
But with some specific mobiles (like Motorola G or X) changing this config also affects my Phonegap app.
I don't know how to avoid this to make the app look consistent
I've found a solution using this cordova plugin: com.phonegap.plugin.mobile-accessibility
You have to follow installation instructions for the plugin, and then you can use it inside Ionic app. You only have to ensure to call its functions after Cordova 'deviceready' callback (accesed by $ionicPlatform.ready in the example below):
angular.module('app').controller('IndexController', function ($ionicPlatform, $window) {
$ionicPlatform.ready(function(){
if($window.MobileAccessibility){
$window.MobileAccessibility.usePreferredTextZoom(false);
}
});
});
For anyone using Ionic. Documentation is here.
Install
$ ionic cordova plugin add phonegap-plugin-mobile-accessibility
$ npm install --save #ionic-native/mobile-accessibility
Add to module, i.e. app.module.ts
import { MobileAccessibility } from 'ionic-native';
#NgModule({
providers:[MobileAccessibility]
});
In app.component.ts
constructor( mobileAccessibility: MobileAccessibility, platform: Platform) {
platform
.ready()
.then(()=>{
mobileAccessibility.usePreferredTextZoom(false);
});
}