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';
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 am using React and Material-UI. Is there any way to export a class estended from React.Component? I want to use some React variables like state. If this is not possible, how can I use state?
Actual code (works):
import React from 'react';
import { Typography } from '#material-ui/core';
import { makeStyles } from '#material-ui/styles';
const styles = makeStyles(() => ({
style1: {
fontSize: '12px'
}
}));
const MyComponent = () => {
const classes = styles();
return(
<Typography className={classes.style1}>Hello World</Typography>
);
}
export default MyComponent;
What I am looking for:
import React, { Component } from 'react';
import { Typography } from '#material-ui/core';
import { makeStyles } from '#material-ui/styles';
export default class MyComponent extends Component {
constructor(props){
super(props);
this.classes = makeStyles(() => ({
style1: {
fontSize: '12px'
}
}));
}
render() {
return(
<Typography className={this.classes.style1}>Hello World</Typography>
);
}
}
You are using makeStyles(), which is used when your component is a functional component. makeStyles() is a Hooks API.
If you are using the Class component, then you must be using the HOC variant, which is withStyles
Example taken from here:
import React from 'react';
import { withStyles } from '#material-ui/core/styles';
const styles = {
root: {
backgroundColor: 'red',
},
};
function MyComponent(props) {
return <div className={props.classes.root} />;
}
export default withStyles(styles)(MyComponent);
withStyles() can be used for both functional and class components unlike makeStyles(), which can only be used for functional components.
You can also use decorator syntax for HOC variant like here. But you need to use this babel plugin like mentioned in the official material-ui docs:
import React from 'react';
import { withStyles } from '#material-ui/core/styles';
const styles = {
root: {
backgroundColor: 'red',
},
};
#withStyles(styles)
class MyComponent extends React.Component {
render () {
return <div className={this.props.classes.root} />;
}
}
export default MyComponent
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() { ... }
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.
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.