I'm new to react-native technology and I faced this issue as attached images after I created one component (Header) and tried to use it inside app.js and run iOS emulator. please any advice.
1
2
3
4
5
https://snack.expo.io/r1tmEEYs4 live basic sample
you return has a little mistake you must change you header codes like this
import React, { Component } from 'react';
import { Text } from 'react-native';
class Header extends Component {
constructor(props) {
super(props);
this.state = {
};
}
render() {
return (
<Text>
Header Text
</Text>
);
}
}
export default Header;
and you must call that like this
import * as React from 'react';
import { Text, View, StyleSheet } from 'react-native';
import Header from './components/Header';
export default class App extends React.Component {
render() {
return (
<View style={styles.container}>
<Header/>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
backgroundColor: '#ecf0f1',
padding: 8,
},
});
First you open a terminal and run
npm start -- --reset-cache
then
react-native run-ios
Related
I'm trying to implement themes (dark | light) in my expo react-native app. I've been reading their documentation on the dark and light themes on the expo page, and that works inside App.js. However, whenever I declare a component and import it in App.js, it won't work. My thought process is trying to "extend" the current theme to my component.
Here's the App.js code:
import { StatusBar } from 'expo-status-bar';
import React from 'react';
import { StyleSheet, Text, View, useColorScheme } from 'react-native';
//import firebase + config
import firebaseConfig from './config'
import firebase from 'firebase'
//initialize firebase application
if(!firebase.apps.length){
firebase.initializeApp(firebaseConfig)
} else{
firebase.app()
}
//import screens
import Overview from './screens/Overview'
export default function App() {
const colorScheme = useColorScheme();
const themeTextStyle = colorScheme === 'light' ? styles.lightThemeText : styles.darkThemeText;
const themeContainerStyle = colorScheme === 'light' ? styles.lightContainer : styles.darkContainer;
return (
<View style={[styles.container, themeContainerStyle]}>
<Overview />
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
},
lightContainer: {
backgroundColor: '#fff',
},
darkContainer: {
backgroundColor: '#101010',
},
lightThemeText: {
color: '#000000',
},
darkThemeText: {
color: '#ffffff',
},
});
And here's my simple component:
import React from 'react'
import {View, Text, useColorScheme} from 'react-native'
export default class App extends React.Component{
render(){
return(
<View>
<Text>OverView</Text>
</View>
)
}
}
All I'm trying to do is get that Overview component to follow the theme rules instead of needing to declare the style that's already been declared in App.js.
Now it's not reflected in the code, but I did try a lot of stuff before posting this question.
Firstly, install react-native-appearance from here
Create a folder called context where your App.js is located then inside it create a file called ThemeContext.js inside which will look like this
import React from "react";
const ThemeContext = React.createContext();
export default ThemeContext;
Then your App.js should look like this
import React from 'react';
import { StatusBar } from 'expo-status-bar';
import { StyleSheet, Text, View } from 'react-native';
import { AppearanceProvider, useColorScheme } from 'react-native-appearance';
//import firebase + config
import firebaseConfig from './config';
import firebase from 'firebase';
import ThemeContext from './context/ThemeContext'; // Imported Here
//initialize firebase application
if (!firebase.apps.length) {
firebase.initializeApp(firebaseConfig);
} else {
firebase.app();
}
//import screens
import Overview from './screens/Overview';
export default function App() {
const colorScheme = useColorScheme();
const themeValue =
colorScheme === 'light' ? styles.lightThemeText : styles.darkThemeText;
const themeContainerStyle =
colorScheme === 'light' ? styles.lightContainer : styles.darkContainer;
return (
<AppearanceProvider>
<ThemeContext.Provider value={themeValue}> // Wrapped Here
<View style={[styles.container, themeContainerStyle]}>
<Overview />
</View>
</ThemeContext.Provider>
</AppearanceProvider>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
},
lightContainer: {
backgroundColor: '#fff',
},
darkContainer: {
backgroundColor: '#101010',
},
lightThemeText: {
color: '#000000',
},
darkThemeText: {
color: '#ffffff',
},
});
Your Overview.js should look like this
import React from 'react';
import { View, Text } from 'react-native';
import ThemeContext from '../context/ThemeContext';
function Overview() {
const themeContext = React.useContext(ThemeContext);
console.log(themeContext); // You will get styles logged into the console here
return (
<View>
<Text>OverView</Text>
</View>
);
}
export default Overview;
Hi all i want to try implement react-native-dark-mode but not worked in my project.
"react-native": "0.61.5"
I Already try like this :
import { useDarkMode } from 'react-native-dark-mode'
export default class Login extends Component {
render(){
const isDarkMode = useDarkMode() // i think this make error
return(
<View style={{ backgroundColor: isDarkMode ? 'black' : 'white' }}></View>
)
}
}
This my error
error-output
any solutions?
In your scenario react hooks can only be used inside the functional components
Example of functional component usage:
import { useDarkMode } from 'react-native-dark-mode'
function Component() {
const isDarkMode = useDarkMode()
return <View style={{ backgroundColor: isDarkMode ? 'black' : 'white' }} />
}
Example of class component usage:
You can play around with DarkModeContext. Just make sure to wrap your application in a DarkModeProvider with no props to avoid getting a value of current.
1 - Setup context provider for the app.
// App.js or top of the hierarchy in your app
import React, {Component} from 'react';
import {DarkModeProvider} from 'react-native-dark-mode';
export default class App extends Component {
render() {
return (
<DarkModeProvider>
<YourApp />
</DarkModeProvider>
);
}
}
2 - Use the context with contextType or context consumer.
// class based component with contextType
import React, {Component} from 'react';
import {Text} from 'react-native';
import {DarkModeContext} from 'react-native-dark-mode';
export default class HelloWorldText extends Component {
static contextType = DarkModeContext;
render() {
const isDarkMode = this.context === 'dark';
return (
<Text style={{color: isDarkMode ? '#ffffff' : '#000000'}}>
{this.props.children}
</Text>
);
}
}
3 - Final class based component
// class based component with context consumer
import React, {Component} from 'react';
import {Text} from 'react-native';
import {DarkModeContext} from 'react-native-dark-mode';
export default class HelloWorldText extends Component {
render() {
return (
<DarkModeContext.Consumer>
{mode => (
<Text style={{color: mode === 'dark' ? '#ffffff' : '#000000'}}>
{this.props.children}
</Text>
)}
</DarkModeContext.Consumer>
);
}
}
If you want to know about the context, you can find more detail in context page. It is really useful feature for both, class and function components.
So i am new to react native and JS in general, i have a huge background in native mobile development and i want to know more about Web Apps. So i try to begin with react native to experience that.
I wanted to do a side menu using createDrawerNavigator, so i created the following component :
// code for the menu
import React from 'react';
import { Platform } from 'react-native';
import { createStackNavigator, createDrawerNavigator, createAppContainer, DrawerActions } from "react-navigation";
import HomeScreen from '../screens/HomeScreen';
import LinksScreen from '../screens/LinksScreen';
import SettingsScreen from '../screens/SettingsScreen';
const App = createDrawerNavigator({
HomeScreen: {
screen: HomeScreen
},
LinksScreen: {
screen: LinksScreen
},
SettingsScreen: {
screen: SettingsScreen
}
},
{
drawerWidth: 300
});
export default createAppContainer(App);
// HomeScreen.js
import React from 'react';
import {
Image,
Platform,
ScrollView,
StyleSheet,
Text,
TouchableOpacity,
View,
Dimensions,
} from 'react-native';
import { WebBrowser } from 'expo';
import { DrawerNavigator } from 'react-native-navigation';
import { MonoText } from '../components/StyledText';
import { createStackNavigator, createDrawerNavigator, createAppContainer, DrawerActions } from "react-navigation";
import Router from './MenuNavigator';
export default class HomeScreen extends React.Component {
static navigationOptions = {
header: 'Vapeself 2',
};
render() {
const App = createDrawerNavigator({
Home: {
screen: MyHomeScreen,
},
Notifications: {
screen: MyNotificationsScreen,
},
});
const MyApp = createAppContainer(App);
this.props.navigation.dispatch(DrawerActions.openDrawer());
return (
<Router/>
);
}
// LinkScreen.js
import React from 'react';
import { ScrollView, StyleSheet } from 'react-native';
import { ExpoLinksView } from '#expo/samples';
export default class LinksScreen extends React.Component {
static navigationOptions = {
title: 'Links',
};
render() {
return (
<ScrollView style={styles.container}>
{/* Go ahead and delete ExpoLinksView and replace it with your
* content, we just wanted to provide you with some helpful links */}
<ExpoLinksView />
</ScrollView>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
paddingTop: 15,
backgroundColor: '#fff',
},
});
// SettingsScreen.js
import React from 'react';
import { ExpoConfigView } from '#expo/samples';
export default class SettingsScreen extends React.Component {
static navigationOptions = {
title: 'app.json',
};
render() {
/* Go ahead and delete ExpoConfigView and replace it with your
* content, we just wanted to give you a quick view of your config */
return <ExpoConfigView />;
}
}
I don't know what happened because the code doesn't work, and i have this kind of error The component for route 'HomeScreen' must be a React component . But the thing is that its actually work with a TabNavigator. So i really don't understand.
Thank you in advance for the help.
I've looked at many different Stack Overflow posts about how to navigate screens in React Native but none of them seem to be working, perhaps because those posts were for older versions of React Native. Here is my code with the irrelevant parts taken out below. I'm trying to navigate from this screen to another screen called SubTasks. I made sure to say export default class SubTasks extends React.Component in SubTasks.js, by the way. The error I'm getting when I click on the button is "undefined is not an object (evaluating this.props.navigator.push'). Does anyone know where my error may be?
import React, { Component, PropTypes } from 'react';
import { StyleSheet,NavigatorIOS, Text, TextInput, View, Button}
from 'react-native';
import SubTasks from './SubTasks';
export default class App extends React.Component {
constructor(props) {
super(props);
}
renderScene(route, navigator) {
if(route.name == 'SubTasks') {
return <SubTasks navigator = {navigator} />
}
}
_navigate() {
this.props.navigator.push({
title: 'SubTasks',
})
}
render() {
return (
<View>
<NavigatorIOS
initialRoute= {{
title: 'SubTasks',
component: SubTasks,
}}
style = {{ flex: 1 }}
/>
<Button
title= 'SubTasks'
style = {{flexDirection: 'row', fontSize: 20, alignItems: 'flex-end'}}
color = 'blue'
onPress= {() => this._navigate()}>
styleDisabled = {{color: 'red'}}
</Button>
</View>
)}
}
Make sure you bind your _navigate function in your constructor:
constructor(props) {
super(props);
this._navigate = this._navigate.bind(this);
}
Or consider using arrow function
_navigate = () => {
this.props.navigator.push({
title: 'SubTasks',
})
}
I am a newbie in react native.
I have one similar problem in different projects. When I try to compile my project, I see this problem. Why this error is appear?
P.S. I am learning react-native by tutorials like a appcoda.com
Picture of my error
Featured.js
'use strict';
var React = require('react-native');
var{
StyleSheet,
View,
Text,
Component
} = React;
var styles = StyleSheet.create({
description:{
fontSize: 20,
backgroundColor: 'white'
},
container:{
flex: 1,
justifyContent: 'center',
alignItems: 'center'
}
});
class Featured extends Component{
render() {
return(
<View style = {styles.container}>
<Text style = {styles.description}>
Featured tab
</Text>
</View>
);
}
}
module.exports = Featured;
Change your import statement as below
import React, { Component } from 'react';
import {
StyleSheet,
View,
Text,
} from 'react-native';