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```
Related
Plugin Url
this below code doesn't allow durationLimit filter.
Image Picker version: 4.6.0
React Native version: 0.66.3
Platform: iOS
Development Operating System: MacOS
Dev tools: Xcode, iOS
mediaType: 'video',
videoQuality: 'medium',
durationLimit: 30,
allowsEditing: true,
};
launchImageLibrary(options, async res => {
});
durationLimit only works for videos taken from camera
For video Duration Limit in iOS
ImagePicker.launchCamera(
{
mediaType: 'video',
durationLimit: 30,
},
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.
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.
I want to add gif images in splash screen but it is not wokring. I am using ionic version 5.0.7
Please help if anybody knows.
Better use Lottie for animations in splash-screen.
install:
ionic cordova plugin add cordova-plugin-lottie-splashscreen
npm install #ionic-native/lottie-splash-screen
Code:
import { LottieSplashScreen } from '#ionic-native/lottie-splash-screen/ngx';
constructor(private lottieSplashScreen: LottieSplashScreen) { }
...
this.lottieSplashScreen.show('www/lottie/animation.json', false, 1024, 768)
.then((res: any) => console.log(res))
.catch((error: any) => console.error(error));
See an example here
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