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!
Related
I use this boilerplate. I nearly got React Native working on my Android device. But somehow it fails in the last step because it does not find an index.js file. But that file is located in my project.
So when I now run this in src/
yarn react-native run-android
this is the Node CLI window:
So my issue is:
Error: Unable to resolve module `./index` from ``:
None of these files exist:
* index(.native|.android.js|.native.js|.js|.android.json|.native.json|.json|.android.ts|.native.ts|.ts|.android.tsx|.native.tsx|.tsx)
From the console itself I cannot see any issue:
So somehow it does not find the index.js file for some reason.
I already tried yarn react-native start -- --reset-cache but it did not change anything.
Edit #1:
When I add a fake empty index.js file on root folder, the error is gone and in the emulator I get this one:
Edit #2:
I'm getting nearer to a solution. I just added this to the fake index.js in the root:
import {AppRegistry} from 'react-native';
import App from './src/components/App';
import {name as appName} from './src/app.json';
AppRegistry.registerComponent(appName, () => App);
and there I got:
Edit #3:
Now it helped me to overwrite the app.json with the following:
{
"name": "test",
"displayName": "test"
}
and new error is:
Edit #4:
I now moved all back to the src folder. So in the root there is no index.js anymore. Now this works pretty good. The usual react-scripts start is running. Also react-native start runs. And the issue with run-android was fixed with this in the MainApplication.java
protected String getJSMainModuleName() {
return "index.android";
}
to
protected String getJSMainModuleName() {
return "src/index.android";
}
I think this is another issue with the location...
So the main issue is fixed relatively easy. All that needs to be done is having a placeholder App.js file and another index.js file. How to do that in detail here. Here is the short description:
First move your existing App.js file to src/App.js.
Now create a new App.js in the main folder:
import React from 'react';
import HybridApp from './src/App';
const App = (props) => {
return (
<HybridApp />
);
}
export default App;
Also create a new src/index.js file:
import React from 'react';
import ReactDom from 'react-dom';
import App from './App';
ReactDom.render(<App />, document.getElementById("root"));
And all the other issues are related to using the wrong technology. Like you cannot use window in React Native. Here the code needs to be rewritten to be working again.
I'm building a react-native app that uses tensorflow to recognize images, I'm following the steps in this tutorial.
I did everything according to the explanations, including the part of "Fetching files". I created the assets folder and put the files in it (the path is correct).
But when I run this code:
const tfImageRecognition = new TfImageRecognition({
model: require('./assets/tensorflow_inception_graph.pb'),
labels: require('./assets/tensorflow_labels.txt'),
});
The app gives the following error:
I already tried to create a new project, I imported the react-native-tensorflow import { TfImageRecognition } from 'react-native-tensorflow';, I updated the cache, I deleted the folder node_modules and also I created the file "rn-cli.config.js" that is requested in the tutorial to give access to the files in the assets folder. Any idea how to fix this?
I'm using expo to run the app on mobile (android).
npm: 5.51
expo: 51.4.0
react-native: 0.54.0
react-native-cli: 2.0.1
This problem didn't occur with me. Try react-native start --reset-cache and then run the app again.
There is a better way to this.
import model from './assets/tensorflow_inception_graph.pb';
import labels from './assets/tensorflow_labels.txt';
const tfImageRecognition = new TfImageRecognition({
model,
labels
});
Restart your server.
I tried the same example as you mentioned I got accessed Image and Text.
I stored files inside assets in the same directory. Can you share code to produce an error that you faced?
async recognizeImage() {
try {
const tfImageRecognition = new TfImageRecognition({
model:require('./assets/tensorflow_inception_graph.pb'),
labels: require('./assets/tensorflow_labels.txt')
})
const results = await tfImageRecognition.recognize({
image: this.image
})
const resultText = `Name: ${results[0].name} - Confidence: ${results[0].confidence}`
this.setState({result: resultText})
await tfImageRecognition.close()
} catch(err) {
alert(err)
}
}
As you mentioned your using expo then I'm assuming that run npm eject already. As react-native-tensorflow this library require native changes
You must add extensions in your rn-cli.config.js, in order to require tensorflow_inception_graph.pb and tensorflow_labels.txt
module.exports = {
getAssetExts() {
return ['pb', 'txt']
}
}
Replace ./ with so ../ , so final code will be -
model: require('../assets/tensorflow_inception_graph.pb'),
labels: require('../assets/tensorflow_labels.txt')
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 */})
});
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
I am new to Ionic 2 and everything around. I'm tryng to setup my first mobile app: touching a button I would open native navigation (Google Maps for Android, for instance). I've installed launchnavigator plugin:
ionic plugin add uk.co.workingedge.phonegap.plugin.launchnavigator
and inside cremony.ts page:
import { Component } from '#angular/core';
import { NavController } from 'ionic-angular';
import { LaunchNavigator, LaunchNavigatorOptions } from 'ionic-native';
#Component({
selector: 'page-ceremony',
templateUrl: 'ceremony.html'
})
export class Ceremony {
constructor(public navCtrl: NavController) {
}
navigate() {
let options: LaunchNavigatorOptions = {
start: ""
};
LaunchNavigator.navigate("London, UK", options)
.then(
success => alert('Launched navigator'),
error => alert('Error launching navigator: ' + error)
);
}
}
make a build npm run buildand upload it to IonicView with ionic upload.
I've do everything like suggested in this link but with different luck.
But when I click the button (a simple <button ion-button (click)="navigate()">Navigate</button> in the ceremony.html) in the Ionic View an error say: Error launghing navigator: plugin_not_installed.
I inspected the project, the plugins directory contains uk.co.workingedge.phonegap.plugin.launchnavigatorlooks directory. So I look at package.json and config.xml and I've added the value uk.co.workingedge.phonegap.plugin.launchnavigator in the cordovaPlugins
and tag <plugin name="uk.co.workingedge.phonegap.plugin.launchnavigator" spec="~3.2.1" /> in the widget root. npm run build, ionic upload but nothing changed.
Where is my error?
New answer, there is something wrong with your project. Have you modified your index.html file? Is it still including cordova.js? If so what version of Ionic and Cordova are you using?
I made this sample application with your exact code and it works perfectly on both iOS and ANdroid: https://github.com/roblouie/navigator-plugin-test
Did a screen recording on iOS: https://giphy.com/gifs/xTiN0EEQV82aIXWnQI
Just grabbed an image on Android, but it works the same:
Please try the project from github.
Cordova plugins need to be called only once platform is ready.
constructor(public navCtrl: NavController,public platform:Platform) {//inject in constructor
}
In your function navigate()
this.platform.ready().then(()=>{
LaunchNavigator.navigate("London, UK", options)
.then(
success => alert('Launched navigator'),
error => alert('Error launching navigator: ' + error)
);
});
The reason for your error is that you are using Ionic View. Your Ionic app is just html, css, and javascript. However, any plugins you use are written in Java for Android and Objective C for iOS. That plugin source code is then compiled into your app for each platform.
With Ionic View, it only uploads your app, the html, css, and javascript. Nothing is compiled. Ionic View is the app itself, and it loads your code. So no plugins you have are included. Ionic View itself does have some plugins installed on it, and you can see that list here: https://docs.ionic.io/tools/view/#supported-plugins
Unfortunately you will not be able to test any plugin not in that list without building and deploying to a device or emulator.