This is my code
import React from 'react';
import {
AppRegistry,
Text,
} from 'react-native';
import { StackNavigator } from 'react-navigation';
class HomeScreen extends React.Component {
static navigationOptions = {
title: 'Welcome',
};
render() {
return <Text>Hello, Sahabat Koding Indonesia</Text>;
}
}
const Bar = StackNavigator({
Home: { screen: HomeScreen },
});
AppRegistry.registerComponent('Navigasi', () => Bar);
this is the error and the script screenshot
PLEASE HELP ME
Related
It's been two days that I'm stuck in this problem. I can't figure how to resolve this. I know the error is that I can't use this.porps there, but I don't know how to fix. I couldn't find a solution anywhere.
This is my Navigator config:
import React from 'react';
import {createStackNavigator, createAppContainer} from 'react-navigation';
import LoginScreen from './screens/auth/Login';
import CadastroScreen from './screens/auth/Cadastro';
class Login extends React.Component {
render() {
return (
<LoginScreen />
);
}
}
class Cadastro extends React.Component {
render()
{
return (
<CadastroScreen />
);
}
}
const AppNavigator = {
Cadastro: {
screen: Cadastro,
navigationOptions: { header: null }
},
Login: {
screen: Login,
navigationOptions: { header: null }
},
};
const Config = {
initialRouteName: 'Login'
}
const AppNavigation = createStackNavigator(AppNavigator, Config);
export default createAppContainer(AppNavigation);
This is how I'm trying to change screens:
import React from 'react';
import {Text, View, Button, Alert, TextInput, Image, TouchableOpacity} from 'react-native';
import { StackActions, NavigationActions } from 'react-navigation';
import Patern from '../style/Style';
class LoginScreen extends React.Component {
render() {
return (
<View style={Patern.container}>
<TouchableOpacity onPress={() =>
this.props.navigation.dispatch(
StackActions.reset({
routeName: 'Cadastro',
index: 0,
actions:
NavigationActions.navigate({ routeName: 'Cadastro' })
}))}>
</TouchableOpacity>
</View>
);
}
}
export default LoginScreen;
class Login extends React.Component {
render() {
return (
<LoginScreen navigatoin={this.props.navigation} />
);
}
}
You need to pass the props from Login to LoginScreen.
Navigation prop is only passed to one depth from Navigator.
I am new to React native and implementing react navigation but getting the component for route must be a react component even i exported my component
I have check all related answer but all in vain.
import {AppRegistry} from 'react-native';
import {name as appName} from './app.json';
import Launch from './Launch';
AppRegistry.registerComponent(appName, () => Launch);
Below is launch
import React from 'react';
import AppNavigator from './AppNavigator'
export default class Launch extends React.Component {
render() {
return (
<AppNavigator></AppNavigator>
);
}
}
App Navigator
//..........................
import React, { Component } from 'react';
import LoginScreen from './components/src/Login/LoginScreen'
import App from './components/src/App';
import Register from './components/src/Signup/Register';
import ViewPagerPage from './components/src/Settings/CPU/ViewPagerPage'
import TabIndicatorPage from './components/pages/TabIndicatorPage'
import TitleIndicatorPage from './components/pages/TitleIndicatorPage'
import {
createStackNavigator,
createAppContainer
} from 'react-navigation';
const RootStack = createStackNavigator({
LoginScreen: { screen: LoginScreen },
TabIndicatorPage: { screen: TabIndicatorPage },
TitleIndicatorPage: {
screen: TitleIndicatorPage, navigationOptions: {
header: null
}
},
ViewPagerPage: { screen: ViewPagerPage },
Register: {
screen: Register, navigationOptions: {
header: null
}
},
App: {
screen: App,
navigationOptions: {
header: null
}
},
ViewPagerPage: { screen: ViewPagerPage },
// Detail:{screen:Detail},
// SecondScreen:{screen:SecondScreen},
});
const AppNavigator = createAppContainer(RootStack);
export default AppNavigator;
Here it is Login Controller giving error I also used export.
import React, {Component} from 'react';
import {View,ScrollView,KeyboardAvoidingView,Animated,ImageBackground,
TouchableOpacity,TextInput, KeyboardAwareScrollView,StyleSheet,Image,Easing,Text,AsyncStorage,ToastAndroid} from 'react-native';
import App from '../App';
import bgSrc from './images/wallpaper.png';
import logoImg from './images/logo.png';
import { NavigationActions,StackActions } from 'react-navigation'
import usernameImg from './images/username.png';
import passwordImg from './images/password.png';
import spinner from './images/loading.gif';
const MARGIN = 40;
import Dimensions from 'Dimensions';
//Login Controller
export default class LoginScreen extends React.Component<{}> {
constructor(props) {
super(props);
this.state = { Login: false,showPass: true,
press: false,
isLoading: false,
navigator:this.props.navigator,
email:'',
Expected Login Screen should come
But I am getting red screen saying component must be react
My code is as follows:
import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View} from 'react-native';
import {LoginNavigator} from './src/components/login/LoginNavigator'
import {MainNavigator} from './src/components/main/MainNavigator'
import FBSDK from 'react-native-fbsdk'
import {createSwitchNavigator} from 'react-navigation'
const { AccessToken } = FBSDK
export default class App extends Component {
constructor(props) {
super(props)
this.state = {
accessToken: null
}
}
componentDidMount() {
AccessToken.getCurrentAccessToken()
.then((data) => {
this.setState({
accessToken: data.accessToken
})
})
.catch(error => {
console.log(error)
})
}
render() {
const Navigator = makeRootNavigator(this.state.accessToken)
return <Navigator />
}
}
const makeRootNavigator = (isLoggedIn) => {
return createSwitchNavigator(
{
LoginNavigator: {
screen: LoginNavigator
},
MainNavigator: {
screen: MainNavigator
}
},
{
initialRouteName: isLoggedIn ? "MainNavigator" : "LoginNavigator"
}
)
}
and I'm getting the error above. Since my Navigators depend on the variables created in construtor, I needed to do it via render(). Following react-native documentation on application containers didn't help.
In react-navigation v3, you must wrap makeRootNavigator with createAppContainer. Change your code to :
render() {
const Navigator = createAppContainer(makeRootNavigator(this.state.accessToken));
return <Navigator />
}
and don't forget to import createAppContainer on top of the file
import {createSwitchNavigator, createAppContainer} from 'react-navigation'
This is working solution for above problem
import { createStackNavigator } from 'react-navigation-stack'
import Login from './src/Login';
import Fruits from './src/Fruits';
import FruitZoom from './src/FruitZoom';
import {createAppContainer } from 'react-navigation';
import React from 'react';
const AppNavigator = createStackNavigator({
Login: { screen:Login},
Fruits: { screen: Fruits},
FruitZoom: { screen: FruitZoom}
}, {
initialRouteName: 'Login',
headerMode: 'none'
});
const Apps = createAppContainer(AppNavigator);
export default class App extends React.Component {
render() {
return <Apps />;
}
}
import React from 'react';
import { View, Text } from 'react-native';
import { StackNavigator } from 'react-navigation';
import HomeScreen from './Home.js';
import EntryPoint from './src/containers/EntryPoint.js';
import Stage2 from './src/containers/Stage2.js';
const RootNavigator = StackNavigator({
Home: {
screen: HomeScreen,
navigationOptions: {
headerTitle: 'Material Management',
},
},
EntryPoint: {
screen: EntryPoint,
navigationOptions: {
headerTitle: 'Entry Point'
}
},
Stage2 : {
screen : Stage2,
navigationOptions : {
headerTitle : 'Stage 2'
}
}
});
export default RootNavigator;
The above code is my App.js
I want to wrap the redux store around it. How do i do that . Couldn't find a proper documentation for redux setup with React-native.
import { createStore,bindActionCreators } from 'redux'
import { connect, Provider } from 'react-redux'
function mapStateToProps(state) {
return state;
}
function mapDispatchToProps(dispatch) {
return bindActionCreators(Actions, dispatch);
}
let Container = connect(mapStateToProps,mapDispatchToProps)(RootNavigator);
export default class APP extends Component{
render(){
return (<Provider store={store}>
<Container/>
</Provider>)
}
};
I am new to react native. Please help.
Below code is from https://reactnavigation.org/docs/intro/
import React from 'react';
import {
AppRegistry,
Text,
} from 'react-native';
import { StackNavigator } from 'react-navigation';
class HomeScreen extends React.Component {
static navigationOptions = {
title: 'Welcome',
};
render() {
return <Text>Hello, Navigation!</Text>;
}
}
export default const SimpleApp = StackNavigator({
Home: { screen: HomeScreen },
});
// if you are using create-react-native-app you don't need this line
AppRegistry.registerComponent('SimpleApp', () => SimpleApp);
and it show
C:/Users/user/Desktop/AwesomeProject/App.js: Unexpected token (42:15) at C:\Users\user\Desktop\AwesomeProject\App.js:42:15
you should remove export default
import React from 'react';
import {
AppRegistry,
Text,
} from 'react-native';
import { StackNavigator } from 'react-navigation';
class HomeScreen extends React.Component {
static navigationOptions = {
title: 'Welcome',
};
render() {
return <Text>Hello, Navigation!</Text>;
}
}
const SimpleApp = StackNavigator({ // remove export default
Home: { screen: HomeScreen },
});
// if you are using create-react-native-app you don't need this line
AppRegistry.registerComponent('SimpleApp', () => SimpleApp);