The navigation Prop is missing for this navigator. In react-navigation 3 you must set up your navigation more directly. I took a look at the documentation regarding this but I'm still having trouble figuring out how I will implement this into my code. What is it that I am doing wrong and how would I fix it. Please provide some assistance.
This is my RootStack.js
import React from 'react';
import { createStackNavigator, createSwitchNavigator } from 'react-navigation';
import SignInScreen from './App/screens/SignInScreen';
import Account from './App/screens/Account';
import Inventory from './App/screens/Inventory';
import Settings from './App/screens/Settings';
import SignUp from './App/screens/SignUp';
import ForgotScreen from './App/screens/ForgotScreen';
import Tournament from './App/screens/Tournament';
import TournamentRsvp from './App/screens/TournamentRsvp';
import Shop from './App/screens/Shop';
import Game from './App/screens/Game';
const routes = {
SignInScreen: {
screen: SignInScreen
},
Account: {
screen: Account
},
Tournament: {
screen: Tournament
},
TournamentRsvp: {
screen: TournamentRsvp
},
Shop: {
screen: Shop
},
Game: {
screen: Game
},
SignUp: {
screen: SignUp
},
ForgotScreen: {
screen: ForgotScreen
},
Settings: {
screen: Settings
},
Inventory: {
screen: Inventory
}
};
class AuthLoadingScreen extends React.Component {
constructor() {
super();
}
}
const AppStack = createStackNavigator(routes, {
headerMode: 'none',
navigationOptions: {
headerVisible: false
},
initialRouteName: 'SignInScreen'
});
const AuthStack = createStackNavigator(
{
SignInScreen: {
screen: SignInScreen
}
},
{
headerMode: 'none',
navigationOptions: {
headerVisible: false
}
}
);
export default createSwitchNavigator(
{
AuthLoading: AppStack,
App: AppStack,
Auth: AuthStack
// AuthLoading: AppStack,
// Auth: AuthStack
},
{
initialRouteName: 'AuthLoading'
}
);
This is my App.js below
import React from 'react';
import { Platform, StatusBar, StyleSheet, View } from 'react-native';
import { AppLoading, Asset, Font, Icon } from 'expo';
import * as firebase from 'firebase';
import { createStackNavigator, createSwitchNavigator } from 'react-navigation';
import { firebaseConfig } from './config.js';
import RootStack from './RootStack';
firebase.initializeApp(firebaseConfig);
export default class App extends React.Component {
render() {
return (
<View style={{ flex: 1 }}>
<RootStack />
</View>
);
}
}
Try to wrap in createAppContainer.
import { createAppContainer, createStackNavigator } from 'react-navigation';
export default createAppContainer(createSwitchNavigator(
{
AuthLoading: AppStack,
App: AppStack,
Auth: AuthStack
// AuthLoading: AppStack,
// Auth: AuthStack
},
{
initialRouteName: 'AuthLoading'
}
));
Related
I am trying to view a story of an Angular Material Button. However, in the story, the button does not have any styles. I imported angular material using : ng add angular/material and these ara my files for my component :
This is the html file :
<button mat-button color="primary">Button Material</button>
This is the module of my lib :
import { NgModule } from '#angular/core';
import { CommonModule } from '#angular/common';
import { RouterModule, Route } from '#angular/router';
import { ElementComponent } from './element/element.component';
import {MatButtonModule} from '#angular/material/button';
import { MaterialComponent } from './material/material.component';
import { BrowserAnimationsModule } from '#angular/platform-browser/animations';
export const plateRoutes: Route[] = [];
#NgModule({
imports: [CommonModule, RouterModule,BrowserAnimationsModule, MatButtonModule],
declarations: [
ElementComponent,
MaterialComponent,
],
})
export class PlateModule {}
This is the component story :
As you can see the style does not apply to the mat button...
In your MaterialComponent you have to import the material module of Button
import { MatButtonModule } from '#angular/material/button';
import { Meta, moduleMetadata, Story } from '#storybook/angular';
import { ButtonComponent } from './button.component';
export default {
title: 'button',
component: ButtonComponent,
decorators: [
moduleMetadata({
imports: [MatButtonModule],
}),
],
} as Meta<ButtonComponent>;
And after this you will need to add the style in the build step of the storybook
{
...
"build-storybook": {
...
"options": {
"styles": [
// the style that you should import
"./node_modules/#angular/material/prebuilt-themes/indigo-pink.css"
]
},
}
...
}
My code works perfectly on Android but it shows an error in iOS.
Error in iOS:
I couldn’t understand this error; is it related to AsyncStorage?
Why this happening on iOS devices?
First File
My imports
import React, {Component} from 'react';
import { Alert, Dimensions, Image, TouchableOpacity, AsyncStorage } from 'react-native';
import { Container, Body, Footer, Header, Input, Item, Left, Text, Title, Right, View, Button, Label, Form} from 'native-base';
import { SimpleLineIcons, Ionicons } from '#expo/vector-icons';
import { NavigationActions } from 'react-navigation';
import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view';
import { LinearGradient } from 'expo';
import { StatusBar } from "react-native";
import { Grid, Row, Col } from 'react-native-easy-grid';
import Toast, {DURATION} from 'react-native-easy-toast';
import Strings from '../utils/Strings';
var width = Dimensions.get('window').width;
export default class Login extends Component {
static navigationOptions = {
header: null
};
constructor() {
super();
this.state = {
MobileNo: '',
};
}
login = () => {
AsyncStorage.setItem('mobileno', MobileNo);
const { MobileNo } = this.state;
console.log("Expected login number " + MobileNo);
fetch('http://demo.weybee.in/Backend/controller/User_Login.php', {
method: 'POST',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json',
},
body: JSON.stringify({
mobileno: MobileNo
})
}).then((response) => response.json())
.then((responseJson) => {
// If server response message same as Data Matched
if(responseJson != 'Enter valid phone number') {
const { navigation } = this.props;
// Then open Profile activity and send user email to profile activity.
this.props.navigation.navigate('ForgetPass');
} else {
this.refs.toast.show('Invalid Number', DURATION.LENGTH_LONG);
}
}).catch((error) => {
console.error(error);
});
}
}
Second File
My imports
import React, {Component} from 'react';
import { Alert, Dimensions, Image, TouchableOpacity, AsyncStorage } from 'react-native';
import { Container, Body, Footer, Header, Input, Item, Left, Text, Title, Right, View, Button, Label, Form} from 'native-base';
import { SimpleLineIcons, Ionicons } from '#expo/vector-icons';
import { NavigationActions } from 'react-navigation';
import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view';
import { LinearGradient } from 'expo';
import { StatusBar } from "react-native";
import { Grid, Row, Col } from 'react-native-easy-grid';
import Toast, {DURATION} from 'react-native-easy-toast'
import Strings from '../utils/Strings';
import OtpInputs from 'react-native-otp-inputs';
var width = Dimensions.get('window').width;
export default class Login extends Component {
static navigationOptions = {
header: null
};
constructor() {
super();
this.state = {
MobileNo: '',
mobileNumber: '',
code: '',
}
}
componentDidMount() {
AsyncStorage.getItem('mobileno').then((mobileNo) => {
if(mobileNo){
this.setState({ mobileNumber: mobileNo });
}
});
}
PTP = () => {
let mobileNumber = JSON.parse(this.state.mobileNumber);
console.log("login number " + mobileNumber);
let {code} = this.state;
console.log(code);
fetch('http://demo.weybee.in/Backend/controller/Get_PTP.php', {
method: 'POST',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json',
},
body: JSON.stringify({
mobileno: mobileNumber,
code: code,
})
}).then((response) => response.json())
.then((responseJson) => {
// If server response message same as Data Matched
if(responseJson != 'Enter valid phone number') {
const { navigation } = this.props;
// Then open Profile activity and send user email to profile activity.
this.props.navigation.navigate('Home');
} else {
this.refs.toast.show('Invalid PTP', DURATION.LENGTH_LONG);
}
}).catch((error) => {
console.error(error);
});
}
}
I think the problem might be with how you're saving MobileNo to AsyncStorage. Isn't MobileNo part of state and shouldn't it be referred to as this.state.MobileNo?
Inside FirstFile, This is where the problem is,
AsyncStorage.setItem('mobileno', MobileNo);
It should be,
AsyncStorage.setItem('mobileno', this.state.MobileNo);
I got this error when passing a null value to AsyncStorage.setItem:
AsyncStorage.setItem('user_id', null) // breaks!
To fix it, I just passed a string as the value of the setItem command:
AsyncStorage.setItem('user_id', 'tupac_without_a_nosering') // good!
I am trying to plot wind barb using my angular application. I used angular-highchart package but it's showing me below error -
Error: Highcharts error #17: www.highcharts.com/errors/17
import { Component } from '#angular/core';
import { Chart } from 'angular-highcharts';
import { MapChart } from 'angular-highcharts';
#Component({
selector: 'app-root',
template: `
<div [chart]="chart"></div>
`
})
export class AppComponent {
chart = new Chart({
title : { text : 'simple chart' },
xAxis: {
type: 'datetime',
offset: 40
},
series: [{
type: 'windbarb',
name:"Wind Direction",
data: [
[9.8, 177.9],
[10.1, 177.2]
]
}, {
type: 'area',
name:'WindSpeed',
data: [
[9.8, 177.9],
[10.1, 177.2]
],
}]
});
constructor() {
}
}
here
Check module.ts imports as per angular-highcharts docs
import { NgModule } from '#angular/core';
import { BrowserModule } from '#angular/platform-browser';
import { FormsModule } from '#angular/forms';
import { ChartModule, HIGHCHARTS_MODULES } from 'angular-highcharts';
import exporting from 'highcharts/modules/exporting.src';
import windbarb from 'highcharts/modules/windbarb.src';
export function highchartsModules() {
// apply Highcharts Modules to this array
return [ exporting,windbarb ];
}
import { AppComponent } from './app.component';
import { HelloComponent } from './hello.component';
#NgModule({
imports: [ BrowserModule, FormsModule,ChartModule ],
declarations: [ AppComponent, HelloComponent ],
providers: [
{ provide: HIGHCHARTS_MODULES, useFactory: highchartsModules } // add as factory to your providers
],
bootstrap: [ AppComponent ]
})
export class AppModule { }
Stackblitz demo
I, am using the Angular template in visual studio 2017. Then I updated to angular 5.2. I, tried to find the solution. But didn't got exact solution.
The service class is calling the http call.However I, am getting an error as
Service.TS
import { Injectable } from '#angular/core';
import { LoginViewModel as loginVM } from "../../viewmodel/app.viewmodel"
import { HttpClient, HttpHeaders } from "#angular/common/http";
#Injectable()
export class LoginService {
private loginUrl = "Account/Authentication";
private _httpClientModule: HttpClient;
constructor(httpClientModule: HttpClient) {
this._httpClientModule = httpClientModule;
}
public LoginHttpCall(_loginVM: loginVM) {
const headers = new HttpHeaders().set('Content-Type', 'application/json; charset=utf-8');
this._httpClientModule.post(this.loginUrl, _loginVM, { headers }).
subscribe(data => {
console.log(data);
},
err => {
console.log("Error occured.");
});
}
}
Here is my Component class
import { Component } from '#angular/core';
import { AppComponent } from "../app/app.component";
import { LoginService } from "../../service/account/app.service.account.login";
import { LoginViewModel } from "../../viewmodel/app.viewmodel";
declare var componentHandler: any;
#Component({
selector: 'login',
templateUrl: './login.component.html',
styleUrls: ['./login.component.css'],
providers: [LoginViewModel, LoginService]
})
export class LoginComponent {
private _appComponent: AppComponent;
private _loginService: LoginService;
constructor(private appComponent: AppComponent, loginService: LoginService) {
this._appComponent = appComponent;
this._appComponent.menulist = false;
this._loginService = loginService;
}
}
app.shared.module.ts
import { NgModule } from '#angular/core';
import { CommonModule } from '#angular/common';
import { FormsModule } from '#angular/forms';
import { HttpModule } from '#angular/http';
import { RouterModule } from '#angular/router';
import { AppComponent } from './components/app/app.component';
import { HomeComponent } from './components/home/home.component';
import { LoginComponent } from './components/login/login.component';
import { MobileComponent } from './components/mobile/mobile.component';
#NgModule({
declarations: [
AppComponent,
HomeComponent,
LoginComponent,
MobileComponent
],
imports: [
CommonModule,
HttpModule,
FormsModule,
RouterModule.forRoot([
{ path: '', redirectTo: 'home', pathMatch: 'full' },
{ path: 'home', component: HomeComponent },
{ path: 'login', component: LoginComponent },
{ path: 'mobile', component: MobileComponent },
{ path: '**', redirectTo: 'home' }
])
]
})
export class AppModuleShared {
}
I, don't know where I, am doing mistake. Since I , am new in angular. I tried to add HttpClient under #NgModule but gives some other error . Since As per my knowledge I don't need to add in app.shared.module.ts file. Since HttpClient is used in service and component level.
Can anyone please tell me where I, am doing wrong .
HttpClient needs for the module HttpClientModule instead of HttpModule to be imported and added in the imports of the module.
For more see Documentation
import { HttpClientModule } from '#angular/common/http';
#NgModule({
declarations: [
...
],
imports: [
...
HttpClientModule,
...
]
})
export class AppModuleShared { }
npm clear cache
npm update
rm -rf /node_modules
npm i --save
Then import same module into app root module.
Hope it works for you.
I'm using angular 2 and in this part (home page) I have a google autocomplete place input that if you click it goes another page(map) and it shows the map with that latitude and longitude user clicked previous page. However the point is I want in the URL, lat and long will be shown.It's complicated for me and don't know what to do,also I have read https://angular.io/tutorial/toh-pt5#parameterized-route but didn't understand.
app-routing.module:
import { NgModule } from '#angular/core';
import { RouterModule, Routes } from '#angular/router';
import { HomeComponent } from './home/home.component';
import { MapComponent } from './search/map.component';
const routes: Routes = [
{ path: '', redirectTo: '/home', pathMatch: 'full' },
{ path: 'home', component: HomeComponent },
{ path: 'map/'+this.latitude+','+this.longitude, component:
MapComponent },
];
#NgModule({
imports: [ RouterModule.forRoot(routes) ],
exports: [ RouterModule ]
})
export class AppRoutingModule {}
in the path I wrote like this but don't know is correct or not.
home.html:
<div class="col-md-8 col-md-push-2 container search-location">
<div class="form-group">
<input id="search" placeholder="select place"
autocorrect="off" autocapitalize="off" spellcheck="off" type="text"
class="form-control"
#search [formControl]="searchControl">
</div>
</div>
home.component.ts:
import { Component, ElementRef, NgModule, NgZone, OnInit, ViewChild } from
'#angular/core';
import { FormControl, FormsModule, ReactiveFormsModule } from
"#angular/forms";
import { BrowserModule } from "#angular/platform-browser";
import { AgmCoreModule, MapsAPILoader } from '#agm/core';
import { Router } from '#angular/router';
import {} from '#types/googlemaps';
declare let google: any;
import 'rxjs/add/observable/of';
#Component({
selector: 'home-search',
templateUrl: './home-search.html',
styles: [`
agm-map {
height: 300px;
}
`],
})
export class HomeSearchComponent implements OnInit {
public google:any;
public latitude: number;
public longitude: number;
public searchControl: FormControl;
public zoom: number;
#ViewChild("search")
public searchElementRef: ElementRef;
constructor(
private mapsAPILoader: MapsAPILoader,
private ngZone: NgZone,
private router:Router,
) {}
ngOnInit() {
let options = {
types: ["address"],
componentRestrictions: {country: "ir"}
};
//set google maps defaults
this.zoom = 4;
this.latitude = 39.8282;
this.longitude = -98.5795;
//create search FormControl
this.searchControl = new FormControl();
//set current position
this.setCurrentPosition();
//load Places Autocomplete
this.mapsAPILoader.load().then(() => {
let autocomplete = new
google.maps.places.Autocomplete(this.searchElementRef.nativeElement,
{options});
autocomplete.addListener("place_changed", () => {
this.ngZone.run(() => {
//get the place result
let place: google.maps.places.PlaceResult = autocomplete.getPlace();
//verify result
if (place.geometry === undefined || place.geometry === null) {
return;
}
//set latitude, longitude and zoom
this.latitude = place.geometry.location.lat();
this.longitude = place.geometry.location.lng();
this.zoom = 12;
this.router.navigate(['/map/'+this.latitude+','+this.longitude]);
});
});
});
}
private setCurrentPosition() {
if ("geolocation" in navigator) {
navigator.geolocation.getCurrentPosition((position) => {
this.latitude = position.coords.latitude;
this.longitude = position.coords.longitude;
this.zoom = 12;
});
}
}
}
map.html:
<div class="col-md-8 col-md-push-2 container search-location">
<agm-map [latitude]="latitude" [longitude]="longitude" [scrollwheel]="true"
[zoom]="zoom">
<agm-marker [latitude]="latitude" [longitude]="longitude"></agm-marker>
</agm-map>
</div>
map.component.ts:
import { Component, ElementRef, NgModule, NgZone, OnInit, ViewChild } from
'#angular/core';
import { FormControl, FormsModule, ReactiveFormsModule } from
"#angular/forms";
import { BrowserModule } from "#angular/platform-browser";
import { AgmCoreModule, MapsAPILoader } from '#agm/core';
import { Router } from '#angular/router';
import {} from '#types/googlemaps';
declare let google: any;
#Component({
selector: 'map',
templateUrl: './map.html',
styles: [`
agm-map {
height: 300px;
}
`],
})
export class MapComponent implements OnInit{
private google:any;
private latitude: number;
private longitude: number;
private searchControl: FormControl;
private zoom: number;
ngOnInit(){
}
}
It relates to parameters but I don't know how to write the code.
Could you please help me,I'm confused.
Thank you.