Expo client app reload/restart after selecting file via DocumentPicker!
Expo SDK Version: 32.0.0
Sample code trying to run, https://snack.expo.io/HkuSxz6Sf
It doesn't provide an error either, it just restarts again!
Please add the code below
async componentDidMount() {
const { status } = await Permissions.askAsync(Permissions.CAMERA_ROLL);
}
Related
Below is the steps implemented in React Native code -
Do i have to add any steps or methods in iOS side?
Certificate is APNS enable.
Step 1:
# Install & setup the app module
yarn add #react-native-firebase/app
# Install the messaging module
yarn add #react-native-firebase/messaging
# If you're developing your app using iOS, run this command
cd ios/ && pod install
const getDeviceToken = firebase.messaging().getAPNSToken();
if (getDeviceToken) {
console.log('getDeviceToken:', getDeviceToken);
}
But the result i am getting in console is : { _U: 0, _V: 0, _W: null, _X: null }
Note: I am running the project in Actual iOS device.
Notification permission is already granted.
You need to make it async in order to wait for the token to be fetched from firebase
use async await and it will work
const getDeviceToken = await firebase.messaging().getAPNSToken();
if (getDeviceToken) {
console.log('getDeviceToken:', getDeviceToken);
}
I'm creating a React Native/Expo app that uses Deno on the backend. I've created an API in the backend that I can run locally on localhost:4000. When I try to use fetch to call the API in the Expo app, however, I keep getting an error
[Unhandled promise rejection: TypeError: Network request failed] at node_modules/whatwg-fetch/dist/fetch.umd.js:535:17 in setTimeout$argument_0
Here is how I set up the backend
import { Application } from "https://deno.land/x/oak/mod.ts";
import { oakCors } from "https://deno.land/x/cors/mod.ts";
import { APP_HOST, APP_PORT } from "./config.ts";
import router from "./routes.ts";
import _404 from "./controllers/404.ts";
import errorHandler from "./controllers/errorHandler.ts";
const app = new Application();
app.use(oakCors());
app.use(errorHandler);
app.use(router.routes());
app.use(router.allowedMethods());
app.use(_404);
console.log(`Listening on port:${APP_PORT}...`);
And how I use fetch to call the API
const App = () => {
const getData = async () => {
const response = await fetch("http://localhost:4000/something");
const data = await response.json();
console.log(data);
};
useEffect(() => {
getData();
}, []);
return (
...
);
};
Note
Some answers on StackOverflow suggest fetching http://[IP_ADDRESS]:4000/something instead of localhost. I've tried that with no luck.
I've verified that the API is working. I can call it successfully in VSCode's Thunder Client and I can also see the data by going to http://localhost:4000 in the browser.
I found a solution to this issue. I'm running my Expo app on a physical device while my server is running on my computer, on localhost. It makes sense that I'm unable to make requests to localhost on my device, because localhost is not running there.
I fixed this issue by using ngrok, a tool that forwards localhost to a cloud URL, and fetching that URL in the app.
Use the local IP assign to your device, like: http://192.168.20.109:port/api/x
find the local IP using the command "ipconfig" in windows or ifconfig in linux
I am trying to use a in app browser in react native using expo and came across the react-native-inappbrowser-reborn package and I tried to use the given code example but always get this error when I alert it:
My code:
async function handleLink(link) {
try {
const url = link;
if (await InAppBrowser.isAvailable()) {
} else Linking.openURL(url);
} catch (error) {
alert(error.message)
}
}
I was wondering if any of you know this error or if there is a working alternative?
This solution from expo works well for me:
import * as WebBrowser from 'expo-web-browser';
const openLink = WebBrowser.openBrowserAsync('https://google.com')
// JSX...
Here are the docs for expo-web-browser
There is a solution which i found few weeks ago
here: How To Add A In-App Browser In React-Native
i'm integrating flurry with my react-native app. I use react-native-flurry-sdk#3.7.0 with react-native#0.59.9. I did everything acсording with https://www.npmjs.com/package/react-native-flurry-sdk, but i couldn't send events. Most of them(events) doesn't received by platform. Only a few part of them reach the target with a big delay(a couple of hours).
This is my flurry settings:
import Flurry from "react-native-flurry-sdk";
const FLURRY_ANDROID_API_KEY = "...";
const FLURRY_IOS_API_KEY = "...";
new Flurry.Builder()
.withCrashReporting(true)
.withLogEnabled(true)
.withLogLevel(Flurry.LogLevel.DEBUG)
.build(FLURRY_ANDROID_API_KEY, FLURRY_IOS_API_KEY);
Flurry.logEvent("1", { param: "true" }, true);
Flurry.endTimedEvent("React Native Timed Event");
What is wrong?
This is a known issue, please see,
https://github.com/flurry/react-native-flurry-sdk/issues/17
https://github.com/flurry/react-native-flurry-sdk/issues/19
It has been resolved in 5.3.0 release with the session delay fix.
I have updated my app on app and play store and I want to force my app users to update the new version of app in App store and playstore.
You can check for the App Store / Play Store version of your app by using this library
react-native-appstore-version-checker.
In expo app you can get the current bundle version using Constants.nativeAppVersion. docs.
Now in your root react native component, you can add an event listener to detect app state change. Every time the app transitions from background to foreground, you can run your logic to determine the current version and the latest version and prompt the user to update the app.
import { AppState } from 'react-native';
class Root extends Component {
componentDidMount() {
AppState.addEventListener('change', this._handleAppStateChange);
}
_handleAppStateChange = (nextState) => {
if (nextState === 'active') {
/**
Add code to check for the remote app version.
Compare it with the local version. If they differ, i.e.,
(remote version) !== (local version), then you can show a screen,
with some UI asking for the user to update. (You can probably show
a button, which on press takes the user directly to the store)
*/
}
}
componentWillUnmount() {
AppState.removeEventListener('change', this._handleAppStateChange);
}
}
import VersionCheck from 'react-native-version-check';
i have used version check lib for this purpose and approach i used is below. if version is lower i'm opening a modal on which an update button appears, and that button redirects to app store/google play
componentDidMount() {
this.checkAppUpdate();
}
checkAppUpdate() {
VersionCheck.needUpdate().then(res => {
if (res.isNeeded) {
setTimeout(() => {
this.setState({openModal: true});
});
}
});
}
updateApp = () => {
VersionCheck.getStoreUrl({
appID: 'com.showassist.showassist',
appName,
})
.then(url => {
Linking.canOpenURL(url)
.then(supported => {
if (!supported) {
} else {
return Linking.openURL(url);
}
})
.catch(err => console.error('An error occurred', err));
})
.catch(err => {
console.log(`error is: ${err}`);
});
};
For future readers.
If you are using Expo managed workflow, install this package react-native-version-check-expo using yarn add react-native-version-check-expo or npm install react-native-version-check-expo.
Consult the package documentation on Github for usage guidelines.
I'm using react-native-version-check-expo library to achieve this. Working fine for me.
if you are looking for an easy to integrate built in solution. You can use App Upgrade https://appupgrade.dev/ service to force update your mobile apps.
Create new version entry for your app version that you want to update in the app upgrade service and select whether you want to force it or just want to let users know that new version is available.
Integrate your app with App Upgrade using available SDK. Official SDK are available for React Native, Flutter, Expo, Android and iOS(Swift).
The SDK will take care of the rest.
Whenever you want to force upgrade a version just create a version entry in app upgrade dashboard.
You can also integrate using API. Just call the appupgrade api from your app with the required details such as your app version, platform, environment and app name.
The API will return you the details.. that this app needs to be updated or not.
Based on the response you can show popup in your app.You can call this API when app starts or periodically to check for the update. You can even provide a custom message.
API response:
See the response has force update true. So handle in the app by showing popup.
You can find the complete user documentation here. https://appupgrade.dev/docs
Thanks.