Just started the project and sucked
Code:
import React, {Component} from 'react';
import { Text, View } from 'react-native';
export default class SignUp extends Component() {
constructor(props){
super(props);
}
render() {
return (
<View>
<Text>SignUp</Text>
</View>
);
}
}
stack navigator:
import { createStackNavigator } from "react-navigation";
import SignUp from "../screens/SignUpScreen";
export default AuthStackNavigator = createStackNavigator({
SignUp: SignUp,
})
Getting this error:
error pic
It’s because you should write
export default class SignUp extends Component { ... }
Instead of
export default class SignUp extends Component() { ... }
Related
I've got an error when creating new component in React Native
I don't know what causes this error because I already declare the View component
"react-native": "0.65.1"
the code in the component
import React from 'react';
import { Text, View } from 'react-native';
import Styles from './Styles';
import CommonUtils from '../../components/base/CommonUtils';
import Constant from '../../constants/Constant';
class FrequentlyAskedQuestion extends React.Component {
navigationOptions = (route, navigation) => {
return CommonUtils.getBackNavigationHeader(route, navigation, Constant.HEADER_TITLE.FAQ, 1, false, true);
};
constructor(props) {
super(props);
this.state = {
}
}
componentDidMount() {
this.props.navigation.setOptions(this.navigationOptions(this.props.route, this.props.navigation));
}
render() {
return (
<View>
<Text>
asda
</Text>
</View>
)
}
}
export default FrequentlyAskedQuestion;
Tried exactly with your code,couldnt replicate the error
https://snack.expo.dev/#gaurav1995/gnarly-marshmallows
import React from 'react';
import { Text, View } from 'react-native';
class FrequentlyAskedQuestion extends React.Component {
navigationOptions = (route, navigation) => {
return null
};
constructor(props) {
super(props);
this.state = {
}
}
componentDidMount() {
// this.props.navigation.setOptions(this.navigationOptions(this.props.route, this.props.navigation));
}
render() {
return (
<View>
<Text>
asda
</Text>
</View>
)
}
}
export default FrequentlyAskedQuestion;
My bad, I made a mistake in the stack navigator of importing the component, it already solved
from
import FrequentlyAskedQuestion from '../features/faq/faq';
to import FrequentlyAskedQuestion from '../features/faq/Faq';
I want to create navigation for my react native app, but it shows me this error. I don't know how to fix it. At the bottom I have my JS files:
I tried all the codes, for example, I write export className and import {className}
App.js:
import React, { Component } from 'react'
import { Text, View } from 'react-native'
import { createAppContainer } from 'react-navigation';
import { createStackNavigator } from 'react-navigation-stack'
import Login from './screens/Login'
import Signup from './screens/Signup'
import Home from './screens/home'
export default class App extends Component {
render() {
return (
<AppRoot />
)
}
}
const Container = createAppContainer({
Login: { screen: Login },
Signup: { screen: Signup },
Home: { screen: Home },
}, {
initialRouteName: 'Login'
})
const AppRoot = createStackNavigator(Container)
Login.js:
import React, { Component } from 'react'
import { Text, View } from 'react-native'
export default class Login extends Component {
render() {
return (
<View>
<Text> login </Text>
</View>
)
}
}
Signup.js
import React, { Component } from 'react'
import { Text, View } from 'react-native'
export default class Signup extends Component {
render() {
return (
<View>
<Text> Signup </Text>
</View>
)
}
}
home.js:
import React, { Component } from 'react'
import { Text, View } from 'react-native'
export default class Home extends Component {
render() {
return (
<View>
<Text> Home </Text>
</View>
)
}
}
I don't know what is the problem.
It seems you use react-navigation functions in wrong order. First you have to create stack navigator and then create app container with it:
const Container = createStackNavigator({
Login: { screen: Login },
Signup: { screen: Signup },
Home: { screen: Home },
}, {
initialRouteName: 'Login'
})
const AppRoot = createAppContainer(Container)
remove import { createStackNavigator } from 'react-navigation-stack' and use
import { createAppContainer,createStackNavigator } from 'react-navigation';
App.js
import React, { Component } from 'react'
import { Text, View } from 'react-native'
import { createAppContainer, createStackNavigator } from 'react-navigation';
import Login from './screens/Login'
import Signup from './screens/Signup'
import Home from './screens/home'
export default class App extends Component {
render() {
return (
<AppRoot />
)
}
}
let RootStack = createStackNavigator({
Login: Login,
Signup: Signup,
Home: Home,
})
const AppRoot = createAppContainer(RootStack)
Now Navigation props are present across all your screens Login,Signup,Home. To navigate from Login to home for example
Login.js
import React, { Component } from 'react'
import { Text, View, TouchableOpacity } from 'react-native'
export default class Login extends Component {
render() {
return (
<TouchableOpacity onPress={()=>this.props.navigation.navigate('Home')}>
<Text> Home </Text>
</TouchableOpacity>
)
}
}
Hope this helps. Let me know if you have any further queries.
I just start looking for changing theme globally, and found Context can do that,
but I've a problem to implement the example code to my react native project,
I've tried this code:
//themeContext.js
const themes = {
light: {
foreground: '#000000',
background: '#eeeeee',
},
dark: {
foreground: '#ffffff',
background: '#222222',
},
};
export const ThemeContext = React.createContext({
theme: themes.dark,
toggleTheme: () => {},
})
//App.js
import React, { Component } from 'react';
import {InitialScreen} from './routes/routes';
import { ThemeContext } from './Component/themeContext';
export default class App extends Component {
constructor(props) {
super(props);
this.state={
theme:themes.light,
toggleTheme:this.toggleTheme
}
this.toggleTheme=()=>{
this.setState(state=>({
theme:state.theme === themes.dark ? themes.light : themes.dark
}))
}
}
render() {
console.disableYellowBox = true;
return (
<ThemeContext.Provider value={this.state}>
//this is Login.js
<InitialScreen/>
</ThemeContext.Provider>
);
}
}
//Login.js
import React from 'react';
import { Text, TouchableOpacity, View } from 'react-native';
import { ThemeContext } from '../Component/themeContext';
export default class Login extends Component {
render() {
return (
<ThemeContext.Consumer>
{({theme, toggleTheme})=>{
<View style={{backgroundColor:theme.background}}>
<Text>{this.state}</Text>
</View>
}}
</ThemeContext.Consumer>
);
}
}
but i have an error Can't find variable: Component, i don't know where should i put import React from 'react'; cause i think I've add Component var in app.js and login.js
any help would be appreciate
Replace next string in the top of your Login.js instead of
import React from 'react';
with
import React, { Component } from 'react';
Another way is to replace
export default class Login extends Component {
}
with
export default class Login extends React.Component {
}
In App.js updated your App component class defintion by replacing Component with React.Component as shown:
export default class App extends React.Component {
/* existing component code */
}
Make the same change in Login.js as well:
export default class Login extends React.Component {
/* existing component code */
}
These changes will cause the Login and App components to extend from the Component class as defined on the React object exported from 'react'.
Your problem in themeContext.js file
you use createContext() but you don't import React so you will get can't find React
it's should be like this
import React from 'react';
export const themes = {
light: {
foreground: '#000000',
background: '#eeeeee',
},
dark: {
foreground: '#ffffff',
background: '#222222',
},
};
export const ThemeContext = React.createContext({
theme: themes.dark,
toggleTheme: () => {},
});
And in Login.js
import React,{Component} from 'react';
running my react app gives error in navigationOptions() but it is working fine in render() function
App.js
import React, { Component } from 'react';
import { AppRegistry, View } from 'react-native';
import AppNavigator from './routs.js'
class App extends Component {
render() {
return (
<AppNavigator />
)
}
}
export default App
routs.js
import React from 'react'
import Home from './home.js'
import Phone from './phone.js'
import PhoneScreen from './phoneScreen.js'
import {createStackNavigator, createAppContainer} from 'react-navigation';
const MainNavigator = createStackNavigator({
home: {screen: Home},
add: {screen: Phone},
userScreen: {screen: PhoneScreen},
});
const AppNavigator = createAppContainer(MainNavigator);
export default AppNavigator;
home.js
import React from 'react'
import { TouchableOpacity, Text, View, TouchableHighlight, StyleSheet, Button } from 'react-native';
import { Actions } from 'react-native-router-flux';
import {AsyncStorage} from 'react-native';
class Home extends React.Component {
constructor(props) {
super(props);
}
static navigationOptions = {
headerTitle: 'Contacts',
headerRight: (
<Button
onPress={() => this.props.navigation.navigate('add')}
title="create new contact"
color="#000000"
size="20"
/>
),
};
}
export default Home;
"undefind is not an object(evaluating '_this3.props.navigation')"
please give solution
From the React Navigation Docs:
The binding of this in navigationOptions is not the HomeScreen
instance, so you can't call setState or any instance methods on it.
This is pretty important because it's extremely common to want the
buttons in your header to interact with the screen that the header
belongs to.
So, as you can see, this is not what you think it is in this case. Here's more from the docs detailing a working example:
class HomeScreen extends React.Component {
static navigationOptions = ({ navigation }) => {
return {
headerTitle: <LogoTitle />,
headerRight: (
<Button
onPress={navigation.getParam('increaseCount')}
title="+1"
color="#fff"
/>
),
};
};
componentDidMount() {
this.props.navigation.setParams({ increaseCount: this._increaseCount });
}
state = {
count: 0,
};
_increaseCount = () => {
this.setState({ count: this.state.count + 1 });
};
/* later in the render function we display the count */
}
As you can see, changing navigationOptions from an object into a function allows you to grab the navigation reference. From there you can successfully navigate.
I'm getting below error when im trying to navigate to different screen from home screen. i defined initial loading screen in routes. From initial screen trying to navigate to different screen then getting below error.
this.props is returning just {}. Not really sure why.
login.component.js
import React, {Component} from 'react';
import {NavigationActions} from 'react-navigation';
import {
Platform,
StyleSheet,
Text,
View,
TextInput,
TouchableOpacity,
Touchable,
Image,
Button
} from 'react-native';
import { handleFbLogin } from '../../config/authConfig/';
class Login extends Component {
render () {
console.log("this.props")
console.log(this.props)
return (
<View style={{flex: 1,backgroundColor: '#37afa6'}}>
<Button
title="Go to Details"
onPress={() => this.props.navigation.navigate('setupProfile')}
/>
</View>
);
}
}
export default Login;
routes/index.js
import {StackNavigator} from 'react-navigation';
import Login from '../pages/Login.page';
import SetupProfile from '../pages/setupProfile.page';
const Config = {
navigation: {
login: {
screen: Login
},
setupProfile: {
screen: SetupProfile,
}
}
}
export default Config;
App.container.js
import React, {Component} from 'react';
import Login from './pages/Login.page';
import {connect} from 'react-redux';
import Router from './routes';
import {
Platform,
StyleSheet,
Text,
View,
TextInput
} from 'react-native';
class App extends Component {
render () {
return (
<Router />
);
}
}
export default App;
index.js(startup point):
import { AppRegistry } from 'react-native';
import { StackNavigator } from 'react-navigation';
import app from './app/index';
import Config from './app/routes/index';
export const AppNavigator = StackNavigator(Config.navigation,{initialRouteName : 'login'});
AppRegistry.registerComponent('BuddApp', () => AppNavigator);
export default app;
i'm able to load initalscreen after these changes but when trying to navigate still getting the same error.
EDIT :
I got it. You forgot the constructor in your login screen, that's why your props are empty :
constructor(props) {
super(props);
}
PREVIOUS ANSWER :
Without the full code, i can't see what the exact problem is, but i will give you an exemple of use of react-navigation :
In your index.js (start point of your app) :
import { AppRegistry } from 'react-native';
import { StackNavigator } from 'react-navigation';
export const AppNavigator = StackNavigator(Config.navigation);
AppRegistry.registerComponent('appName', () => AppNavigator);
In the navigation config :
const Config = {
navigation: {
login: {
screen: Login
},
setupProfile: {
screen: SetupProfile,
}
}
}
The first object found in the navigation config is the start of your app.
Now you can use your navigation function in the "login" page with navigate :
this.props.navigation.navigate('setupProfile')
If the AppRegistry is filled everything should run fine.
I hope it help !