React Native Expo app crashing on android apk file when ask location permission - react-native

I have problem with expo standalone app. the problem is with the ask permissions for locations. in the development mode, app asks for location permissions and works well. there is no bugs. after build the app using expo build:android, it creates a android standalone app. and after installing that APK and try to access the same page that asks for location permissions, the app is crashed and restarted.
Expo CLI 4.7.3 environment info:
System:
OS: Windows 10 10.0.19042
Binaries:
Node: 14.15.4 - C:\Program Files\nodejs\node.EXE
Yarn: 1.22.10 - C:\Users\ISLAMSOFT\AppData\Roaming\npm\yarn.CMD
npm: 7.6.3 - C:\Program Files\nodejs\npm.CMD
IDEs:
Android Studio: Version 4.2.0.0 AI-202.7660.26.42.7486908
npmPackages:
expo: ~40.0.0 => 40.0.1
react: 16.13.1 => 16.13.1
react-dom: 16.13.1 => 16.13.1
react-native: https://github.com/expo/react-native/archive/sdk-40.0.1.tar.gz => 0.63.2
react-native-web: ~0.13.12 => 0.13.18
Expo Workflow: managed
in app.json I added this but not solve the problem
"android": {
"permissions":[
"ACCESS_COARSE_LOCATION",
"ACCESS_FINE_LOCATION",
"CAMERA",
"READ_EXTERNAL_STORAGE",
"WRITE_EXTERNAL_STORAGE"
]
},
I don't know how to test the apk file to check the error

Possible reason 1
I had same problem in my expo app few days earlier. There I needed AUDIO_RECORDING permission for my app. The app was fine in development but crashing on the production.
I have found the I missed the await keyword befor taking the permission in useEffect. Something like this:
useEffect(() => {
Permissions.askAsync(Permissions.AUDIO_RECORDING)
}, [])
Then I completely removed the above code. Then the permission was taken from an onPressIn event of a TouchableOpacity button. The code was something like this:
const startRecording = async () => {
const { status } = await Permissions.getAsync(Permissions.AUDIO_RECORDING);
if (status !== 'granted') return;
// Other codes...
}
You should double check how you took your permission.
Possible reason 2
Sometimes the expo app crashed because of wrong css value like this:
{flex: '1'}
Instead of
{flex: 1}
This kind of small mistakes crashed my apps many times. You should check all of your css property values.

Related

appState doesn't work on android (foreground, inactive, background)

How do I expect a user to close a react native (android platform) app. I'm already using appState but it doesn't work like on iOS. Is there any other way?
It works the exact same way for me in Android & iOS.
const app_state = useRef(AppState.currentState);
const [app_state_visible, set_app_state_visible] = useState(app_state.current);
const app_state_subscription = AppState.addEventListener("change", next_app_state => {
set_app_state_visible(next_app_state)
})
useEffect(() => {
console.log(app_state_visible)
}, [app_state_visible])
console.log outputs the exact same in the exact same circumstances
SDKs:
iOS SDK:
Platforms: DriverKit 22.2, iOS 16.2, macOS 13.1, tvOS 16.1, watchOS 9.1
Android SDK:
Android NDK: 22.1.7171670
react: 18.2.0 => 18.2.0
react-native: ^0.68.3 => 0.68.3```

Expo and metro bundler: external module cannot resolve react import

I configured metro.config.js with the extraNodeModules setting so metro will find my shared modules from outside my project (a 'monorepo' configuration).
Metro is finding my external module (see dumb-module below), but I'm getting an error when that external module tries to import react. I get no error when the imported module does not import react.
Here's the error:
Unable to resolve module #babel/runtime/helpers/interopRequireDefault from /Users/jim/.../modules/dumb-module/index.js: #babel/runtime/helpers/interopRequireDefault could not be found within the project.
If you are sure the module exists, try these steps:
1. Clear watchman watches: watchman watch-del-all
2. Delete node_modules and run yarn install
3. Reset Metro's cache: yarn start --reset-cache
4. Remove the cache: rm -rf /tmp/metro-*
> 1 | import React from 'react';
2 | import { Text } from 'react-native';
3 |
4 | const DumbModule = () => {
Because it's showing the contents of dumb-module, it's clearly able to find my external modules. But it looks like it can't resolve that module trying to import react.
I've tried, as you might expect, everything. Would love to get some ideas here.
metro.config.js
const path = require('path');
const extraNodeModules = {
'modules': path.resolve(path.join(__dirname, '../../modules'))
};
const watchFolders = [
path.resolve(path.join(__dirname, '../../modules'))
];
const nodeModulesPaths = [path.resolve(path.join(__dirname, './node_modules'))];
module.exports = {
transformer: {
getTransformOptions: async () => ({
transform: {
experimentalImportSupport: true,
inlineRequires: true,
},
}),
},
resolver: {
extraNodeModules,
nodeModulesPaths
},
watchFolders
};
dumb-module/index.js
import React from 'react';
import { Text } from 'react-native';
const DumbModule = () => {
return (
<Text>I am useless.</Text>
);
};
export default DumbModule;
expo diagnostics:
expo diagnostics
Expo CLI 4.12.0 environment info:
System:
OS: macOS 11.6
Shell: 5.8 - /bin/zsh
Binaries:
Node: 14.16.1 - ~/.nvm/versions/node/v14.16.1/bin/node
Yarn: 1.22.11 - ~/.nvm/versions/node/v14.16.1/bin/yarn
npm: 7.24.0 - ~/.nvm/versions/node/v14.16.1/bin/npm
Managers:
CocoaPods: 1.11.2 - /usr/local/bin/pod
SDKs:
iOS SDK:
Platforms: iOS 15.0, DriverKit 20.4, macOS 11.3, tvOS 15.0, watchOS 8.0
IDEs:
Xcode: 13.0/13A233 - /usr/bin/xcodebuild
npmPackages:
expo: ~42.0.1 => 42.0.4
react: 16.13.1 => 16.13.1
react-dom: 16.13.1 => 16.13.1
react-native: https://github.com/expo/react-native/archive/sdk-42.0.0.tar.gz => 0.63.2
react-native-web: ~0.13.12 => 0.13.18
npmGlobalPackages:
expo-cli: 4.12.0
Expo Workflow: managed
So, this actually works fine, and my issue was I wasn't resetting the metro cache properly.
I'll leave this post up because this metro.config.js is part of the solution to getting an expo app to work inside a monorepo and utilized shared components.
The other part is using yarn's nohoist option on the expo app folder so its dependencies are kept within its node_modules.

How to configure with create-react-native-app metro bundler

I'm new to react-native, this community is awesome.
but i'm having an issue with configuring https://github.com/terrylinla/react-native-sketch-canvas with npx create-react-native-app .
all I've done so far is edit the metro.config.js
const extraNodeModules = {
'#terrylinla/react-native-sketch-canvas': './node_modules/#terrylinla\react-native-sketch-canvas/'
}
const resolverMainFields = ['browser','main'];
module.exports = {
resolver: {
extraNodeModules,
resolverMainFields
},
transformer: {
getTransformOptions: async () => ({
transform: {
experimentalImportSupport: false,
inlineRequires: false,
},
}),
},
};
then cmd react-native run-android it bundles correctly but it never loads onto the emulator:
this is what it says in shell:
info Running jetifier to migrate libraries to AndroidX. You can disable it using "--no-jetifier" flag.
(node:8712) Warning: Accessing non-existent property 'padLevels' of module exports inside circular dependency
(Use node --trace-warnings ... to show where the warning was created)
Jetifier found 987 file(s) to forward-jetify. Using 4 workers...
info Starting JS server...
info Launching emulator...
info Successfully launched emulator.
info Installing the app...
Configure project :terrylinla_react-native-sketch-canvas
WARNING: Configuration 'provided' is obsolete and has been replaced with 'compileOnly'.
It will be removed soon. For more information see: http://d.android.com/r/tools/update-dependency-configurations.html
Task :app:stripDebugDebugSymbols UP-TO-DATE
Compatible side by side NDK version was not found.
<============-> 99% EXECUTING [10m 30s]
IDLE
IDLE
:app:installDebug
IDLE
So I just got metro to bundle my js files correctly. I discovered it was something to do with the react-native android gradle it's very confusing. But I just restarted my computer and ran the same commands. That fixed it.
these stackoverflow answers worked before for me to get my build working:
Stuck on info starting JS server
React-native run-android stuck at 99% appDebug
I hope this helps to anyone using create-react-native-app & metro-bundler

Check if device is jailbroken/rooted using Jail Monkey in React Native fails module is 'undefined'

In React Native I found two plugins to check if a device (iOS/Android) is jailbroken/rooted:
Jail Monkey
react-native-is-device-rooted
I have firstly tried the npm package react-native-is-device-rooted but it doesn't work and it seems to be outdated. So I tried Jail Monkey, but I get this following error:
The code is:
import JailMonkey from 'jail-monkey'
export default class Welcome extends Component {
render() {
return (
...
<View style={styles.lowerView}>
<CustomButton text={"Jail Monkey"} onPress={() => this.printJailMonkey()}/>
</View>
...
);
}
printJailMonkey = () => {
console.log("Jail Monkey library content: " + JailMonkey.isJailBroken())
}
}
I have checked carefully the manual link of the package (using Xcode, pod install, and so on...). Nothing worked, does someone can help me?
JailMonkey uses Native Modules and thus cannot run in an Expo managed app. You need to eject it to ExpoKit for JailMonkey to work.
Solved but doing manually the linking.
Try following steps for manual linking.
Navigate to root folder in terminal enter commands:
react-native link
cd ios
pod update

How to disable autolinking on iOS?

I've installed react-native-localization in my react native project (v0.6). Library is not supporting autolinker yet so I need to disable it for iOS and Android in react-native.config.js.
I already tried to add dependencies in react-native.config.js. After that, I did react-native link react-native-localization command and build an app.
This is my react-native.config.js file:
'use strict';
const ios = require('#react-native-community/cli-platform-ios');
const android = require('#react-native-community/cli-platform-android');
module.exports = {
dependencies: {
'react-native-localization': {
platforms: {
android: null, // disable Android platform, other platforms will still autolink if provided
ios: null,
},
},
},
commands: [...ios.commands, ...android.commands],
platforms: {
ios: {
linkConfig: ios.linkConfig,
projectConfig: ios.projectConfig,
dependencyConfig: ios.dependencyConfig,
},
android: {
linkConfig: android.linkConfig,
projectConfig: android.projectConfig,
dependencyConfig: android.dependencyConfig,
},
},
/**
* Used when running RNTester (with React Native from source)
*/
reactNativePath: '.',
project: {
ios: {
project: './RNTester/RNTester.xcodeproj',
},
android: {
sourceDir: './RNTester',
},
},
};
Error in simulator says:
"Please check your configuration. Did you run 'react-native link'?
As now, react-native has added the support for CocoaPods inside of his projects. (https://github.com/facebook/react-native/releases)
Sadly, i don't know why, but the autolinking feature never works for me on iOS but always goes trough in Android. The only solution i found is to do a react-native link only for iOS (renaming the android folder to something else), then do cd ios and pod install. After that, in the majority of the cases, it would work out of the box, while other libs needs still to be updated to have a full integration with RN 0.60.
Hope all this will be fixed soon but until that we only have to wait and hope that the libs work without any other complications