I've been working on a react-native app and have been running it on both IOS and Android simulators as well as on devices in debug mode.
I've packaged it and signed release versions in preparation for putting into the app store and play stores.
The IOS version seems to work fine, but the Android apk gives me the following error:
"redux-persist: cannot process cyclical state. Consider changing your state structure to have no cycles. Alternatively blacklist the corresponding reducer key. Cycle encountered at key "/feed" with value "[object Object]"."
Can anyone tell me what this means and how to fix it?
I'm using redux-persist and ex-navigation for routing in my main app file as follows:
<Provider store={ store }>
<NavigationProvider context={ navigationContext }>
<StackNavigation id="root" navigatorUID="root" initialRoute={ Router.getRoute('splash') } />
</NavigationProvider>
</Provider>
and my init-store file:
import { AsyncStorage } from 'react-native';
import { createStore, applyMiddleware, compose } from 'redux';
import { createNavigationEnabledStore } from '#exponent/ex-navigation';
import thunkMiddleware from 'redux-thunk';
import devTools from 'remote-redux-devtools';
import { persistStore, autoRehydrate } from 'redux-persist';
import rootReducer from './reducers/';
const createStoreWithNavigation = createNavigationEnabledStore({
createStore,
navigationStateKey: 'navigation'
});
export function initStore (initialState) {
return createStoreWithNavigation(
rootReducer,
initialState,
compose(
applyMiddleware(thunkMiddleware),
autoRehydrate({ log: true }),
devTools()
)
);
}
error
Related
I need to install downloaded .apk file from within the Expo app (it's for update functionality). This is my code:
import React from "react";
import { Button, View } from "react-native";
import * as FileSystem from "expo-file-system";
import { startActivityAsync } from "expo-intent-launcher";
export function Updater() {
async function updateApk() {
const uri = "https://expo.dev/artifacts/eas/my_apk_name.apk";
const localUri = FileSystem.documentDirectory + "test.apk";
try {
await FileSystem.downloadAsync(uri, localUri);
await startActivityAsync("android.intent.action.INSTALL_PACKAGE", {
data: localUri,
flags: 1,
});
} catch (error) {
alert(`Error during installing APK: ${error}`);
}
}
return (
<View>
<Button title="Reset APK" onPress={updateApk} />
</View>
);
}
It downloads the file, stores it, but then there is an error during startActivityAsync:
Encountered an exception while calling native method:
Exception occurred while executing exported method startActivity on module ExpoIntentLauncher:
file://data/user/0/com.my.app.id/files/test.apk exposed beyond app through Intent.getData()
I tried passing uri first to FileSystem.getContentUriAsync() but then there is no error, the intent result is 0 but nothing happens.
My permissions in app.json:
"permissions": [
"READ_EXTERNAL_STORAGE",
"WRITE_EXTERNAL_STORAGE",
"CAMERA"
]
Do I need any additional permissions to get it to work? Or is it completely impossible with Expo? Maybe I should save the file to different location to be able to use this intent?
I also tried android.intent.action.VIEW with no luck.
I test it on Android 13, on physical device. App is built with EAS.
Maybe you can use this command to build release build.
expo:build android
For that you have to signup in Expo's website.
After that you can get apk in Expo's server.
I finally got it to work. The funny part is that I got the answer from the AI that is now banned here. But I just tested this solution on a real android device and it works. Anyway there are two changes needed:
REQUEST_INSTALL_PACKAGES must be added to app.json file.
Uri for intent must be a content uri so: localUri = await FileSystem.getContentUriAsync(localUri)
I have a "small" problem trying to use realm in combination with my react-native app.
I just started with react native and I have installed and updated everything I need for development.
I installed first realm with the command
npm install realm
after that I followed the tutorial given by MongoDB.
But all I get is this error:
Unexpected identifier 'realm'. Expected ';' after variable declaration
After that I tried to look at a template provided by #realm/react.
I installed it and started to build the aplication on my phone via react-native run-android
But I get the exact same error without changing anything.
does realm only work with a specific version of react-native?
or am I doing somthing wrong?
I am getting that error even by just declaring a scheme.
import React, { useState } from 'react';
import { View, Text, StyleSheet, TouchableOpacity,ScrollView, Image, Alert } from 'react-native';
import { NavigationContainer } from '#react-navigation/native';
import { createStackNavigator, TransitionPresets, CardStyleInterpolators } from '#react-navigation/stack';
import { Icon, Button } from "#rneui/themed";
import { styles } from './CSS/style';
import Realm from "realm";
const TaskSchema = {
name: "Task",
properties: {
_id: "int",
name: "string",
status: "string?",
},
primaryKey: "_id",
};
native. I want to active StackNavigator in App.js file. Please note my App.js file in different folder named 'app' and under app there is components folder under this I want to make all component file. here is my App.js
import React, { Component } from "react";
import { StackNavigator } from "react-navigation";
import Attendence from "./components/Attendence";
const Application = StackNavigator(
{
Home: { screen: Attendence }
},
{
navigationOptions: {
header: false
}
}
);
export default class App extends React.Component {
render() {
return <Application />;
}
}
As you said you have downloaded an old project ! it means you are about to tackle different node dependency packages errors on the route to get it running!
My tips to get your self saved from errors are like this
1: go into the package.json
2: note down every dependency names and versions
(the reason why to do that is simple ! you gonna need some awesome code that were in old version is now deprecated in new versions of those libs running!) so installing old ones would help you with that
3: if the point 2 does not work! please do check the version number of react native that you have and the one the real coder of the app used! and install the older version of react native in newer version there are some new things than old versions!
PRO TIP::: USE YARN
instead of NPM to save your self from the problems!
I'm trying to add In App Purchases (or as Google likes to call it; "In App Billing") to my React Native App.
What I've done:
Created a product in Google Play Console (with identifier "unlock_premium"
yarn add react-native-iap (this library)
Added the code below to a component in my app
Tested both with react-native run-android on a physical device, and through publishing it to an Alpha test from Google Play Console
Notes: The app is signed and billing permissions are enabled in the manifest file, and the version of react-native-iap is 0.3.23.
The issue:
When running a debug build the console.log() just prints that the product is undefined, and the productInfo does not display on screen when running the Alpha deployed version (so the product was also undefined there). The products variable is just an empty array.
(The try-statement seems to succeed since I see no errors printed from it.)
import InAppPurchase from "react-native-iap";
const itemSKUs = Platform.select({
android: [
"com.kimer.unlock_premium" // I've also tried just "unlock_premium"
]
})
...
constructor(props) {
super(props);
this.state = {
modalVisible: false,
premiumProduct: undefined
};
}
...
async componentDidMount() {
try {
await InAppPurchase.prepare();
const products = await InAppPurchase.getProducts(itemSKUs);
console.log("finished call to get products");
console.log(products[0]);
this.setState({premiumProduct: products[0]});
} catch (err) {
console.warn(err);
}
}
...
render() {
let productInfo;
if (this.state.premiumProduct !== undefined) {
productInfo = (
<Text>{this.state.premiumProduct}
{this.state.premiumProduct.localizedPrice}
{this.state.premiumProduct.currency} {this.state.premiumProduct.productID}
{this.state.premiumProduct.title}
{this.state.premiumProduct.description}</Text>
);
}
return (
<View>
...
{productInfo}
...
</View>
);
}
SOLVED:
It is now working for me 😄! I tried a couple of things but I'm not sure what was key to getting it to work 🤔 This is anyways what I did:
Reinstalled the package
Changed my import statement from import InAppPurchase from "react-native-iap;" to "import * as InAppPurchase from 'react-native-iap';"
Changed my SKU in the code from "com.kimer.unlock_premium" to "unlock_premium"
Due to certain reasons I can't download android studio. And I recently incorporated sqlite DB in my app. As far as i know, ionic serve cannot run a sqlite DB. I wanted to know if it's possible to test my ionic 3.x app on an android device without having android studio.
You don't need Android studio at all to work on Ionic development. Any editor + a terminal will do.
Having said that it is strongly recommended to work with the free Visual Studio Code editor, as it's built by Microsoft, the same team that built Typescript which makes coding there a great experience.
I also suggest this set of plugins to get you started.
Unfortunately you cannot work on SQLite in the browser but I strongly recommend you use ionic-storage anyway, which provides a single API and will use automatically whatever best storage method is available in the current platform, with no additional effort from you.
Ionic Storage is a package created and maintained by the ionic team to abstract development from the specifics of each browser or platform and automatically use the best storage solution available.
1. Installing Dependencies
In your case for SQLite you need to first install the dependencies for both Angular and Cordova:
npm install #ionic/storage --save
and
cordova plugin add cordova-sqlite-storage --save
Then edit your NgModule declaration in src/app/app.module.ts to add IonicStorageModule as an import:
import { IonicStorageModule } from '#ionic/storage';
#NgModule({
declarations: [...],
imports: [
IonicModule.forRoot(MyApp),
IonicStorageModule.forRoot({
name: '__mydb',
driverOrder: ['indexeddb', 'sqlite', 'websql'],
})
],
bootstrap: [...],
entryComponents: [...],
providers: [...],
})
export class AppModule { }
2. Inject Storage module into your component
import { Component } from '#angular/core';
import { Storage } from '#ionic/storage';
#Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage {
constructor(public storage: Storage) {}
}
3. Using Ionic Storage
Whenever you access storage, make sure to always wrap your code in the following:
storage.ready().then(() => { /* code here safely */});
3.1 Saving a key-value pair
storage.ready().then(() => {
storage.set('some key', 'some value');
});
3.2 Retrieving a value
storage.ready().then(() => {
storage.get('age').then((val: string) => {
console.log('Your age is', val);
});
});
3.3 Deleting a key-value pair
storage.ready().then(() => {
storage.remove('key').then((key: string) => { /* do something after deletion */})
});