I'm new at React-nativ. And I cant solve problem.When I tried to hide a stack-navigator header and use :
Home :{
screen: Home,
navigationOptions: {
headerShown: false,
title: 'NO TITLE'
}
}
and after this content of Home, which is a simple Text inside View go to statusbar.
I think that is only CSS problem but i dont understand how it fix. I attach my code below.
App.js :
import 'react-native-gesture-handler';
import * as React from 'react';
//import { NavigationContainer } from '#react-navigation/native';
import { StyleSheet, Text, View } from 'react-native';
import Navigator from './routes/homeStack'
export default function App() {
return (
<Navigator />
);
}
homeStack.js :
import {createStackNavigator} from 'react-navigation-stack'
import {createAppContainer} from 'react-navigation'
import Home from '../components/Home'
import ReviewDetails from '../components/ReviewDetails'
const screens = {
Home :{
screen: Home,
navigationOptions: {
headerShown: false,
title: 'NO TITLE'
}
},
ReviewDetails :{
screen: ReviewDetails
}
}
const HomeStack = createStackNavigator(screens);
export default createAppContainer(HomeStack);
Home.js :
import React,{useState} from 'react';
import { TextInput, View, Button, Text } from 'react-native'
const Home = props => {
const [enteredGoal,setEnteredGoal] = useState('');
const goalInputHandler = (enteredText) => {
setEnteredGoal(enteredText);
}
return(
<View >
<Text>HOME PAGE</Text>
</View>
)
}
export default Home;
I understand that solve of this problem is add a padding to content but for me it hotfix not a bugfix. How to say for app dont use a space of Android statusbar.
you could try
let HomeStack=createStackNavigator(
{
Home:Home
},
{
initialRouteName:'Home',
headerMode:'none'
})
where headerMode:'none' is what your looking for
Use SafeAreaView in component.
Related
I'm trying to create a basic setup for react navigation, but for some reason, when I go to view the project, I get a blank screen and an error in terminal that says:
Error: The component for route 'screens' must be a React component. For example:
import MyScreen from './MyScreen';
...
screens: MyScreen,
}
You can also use a navigator:
import MyNavigator from './MyNavigator';
...
screens: MyNavigator,
}
I've looked at other Stack Overflow solutions, but none of them seem to apply in my case, so, is there something else I'm doing wrong here?
My App.js (Also importing fonts here, but these worked, it seems to be an issue with the routing)
import React, {useState} from 'react';
import * as Font from 'expo-font';
import AppLoading from 'expo-app-loading';
import Navigator from './routes/homeStack';
const getFonts = () => Font.loadAsync({
'raleway-regular': require('./assets/fonts/Raleway-Regular.ttf'),
'raleway-bold': require('./assets/fonts/Raleway-Bold.ttf')
});
export default function App() {
const [fontsLoaded, setFontsLoaded] = useState(false);
if (fontsLoaded) {
return (
<Navigator />
);
} else {
return (
<AppLoading
startAsync= {getFonts}
onFinish= {()=> setFontsLoaded(true)}
onError= {()=> console.log('error')}
/>
);
}
}
homeStack.js
import { createStackNavigator } from 'react-navigation-stack';
import { createAppContainer } from 'react-navigation';
import Home from '../screens/home';
import Scanner from '../screens/scanner';
const screens = {
Home: {
screen: Home
},
Scanner: {
screen: Scanner
},
};
const HomeStack = createStackNavigator({screens});
export default createAppContainer(HomeStack);
home.js
import React from 'react';
import { StyleSheet, View, Text, } from 'react-native';
import { globalStyles } from '../styles/global';
export default function Home() {
return (
<View style={globalStyles.container}>
<Text style={globalStyles.titleText}>Home Screen</Text>
</View>
);
}
scanner.js
import React from 'react';
import { StyleSheet, View, Text } from 'react-native';
import { globalStyles } from '../styles/global';
export default function Scanner() {
return (
<View style={globalStyles.container}>
<Text>About Screen</Text>
</View>
);
}
My file directory
Any help would be much appreciated!
The video you are following along with is really old and probably not up to date anymore. Please follow the installation guides and then follow along this guide. That should get you up and running in minutes.
I have been struggling with the code below.
Here is the error.
enter image description here
This is my OnboardPage.js
import React, { Component } from 'react';
import {
View,
StyleSheet,
Button,
Text
} from 'react';
import { render } from 'react-dom';
import { TouchableOpacity } from 'react-native';
const OnboardPage = () => {
return(
<View>
<Text>
OnboardPage
</Text>
</View>
);
};
export { OnboardPage };
This is my App.js
import { StatusBar } from 'expo-status-bar';
import * as React from 'react';
import { createStackNavigator } from '#react-navigation/stack';
import { NavigationContainer } from '#react-navigation/native';
import { StyleSheet, Text, View } from 'react-native';
import OnboardPage from './Screens/OnboardPage';
const Stack = createStackNavigator();
const App = () => {
return(
<NavigationContainer>
<Stack.Navigator initialRouteName= {"OnboardPage"}>
<Stack.Screen name = "OnboardPage" component = {OnboardPage} />
</Stack.Navigator>
</NavigationContainer>
)
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
});
export default App;
I don't know what's happening. I have tried several fixes from here and then decided to post myself as none of them are working.
This occur as a result of how you are exporting the OnboardingScreen.so basically when you use the "export default " you must import it using this syntax import Onboarding from ""./Onboarding
//pattern one
//Onboarding.js
export const OnboardPage = () => {
//your code goes here
};
//App.js
import {Onboarding} from './Onboarding'
//Pattern Two
//Onboarding.js
export default function(){}
//App.js
import Onboarding from './Onboarding';
Emphasis are on the import and export.I also do recommend looking up Named export vs default export
When I run my app I get the error: 'The component for route 'Camera' must be a react component'. I do not know what this means:
Here is my App.js:
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { createAppContainer } from 'react-navigation';
import {createStackNavigator} from 'react-navigation-stack';
import Home from './screens/Home';
import Camera from './screens/Camera'
const MainNavigator = createStackNavigator(
{
Home: {screen: Home},
Camera: { screen: Camera}
},
{
defaultNavigationOptions: {
headerTintColor: '#fff',
headerStyle: {
backgroundColor: '#b83227'
},
headerTitleStyle: {
color: '#fff'
}
}
}
);
Here is my home:
import React from 'react';
import { StyleSheet, Text, View, Image, Button } from 'react-native';
import Camera from './Camera'
export default class Home extends React.Component{
static navigationOptions = {
title: "PhotoClicker"
}
render(){
let photo = this.props.navigation.getParam("Photo", "empty")
const { navigate } = this.props.navigation;
return (
<View style={styles.container}>
<Image
resizeMode="center"
style = {styles.imageHolder}
source={
photo === "empty" ? require("../assets/viking.png") : photo
}
/>
<Button
title="Take Photo"
style={styles.button}
onPress={()=>{
this.props.navigation.navigate(Camera)
}}
/>
</View>
);
}
}
Here is Camera:
import React from 'react';
import { StyleSheet, Text, View, Image, Button } from 'react-native';
export default class Camera extends React.Component{
render(){
const { navigate } = this.props.navigation;
return (
<View style={styles.container}>
<Text>Camera Screen</Text>
</View>
);
}
}
It should just be a button that leads from home to Camera, but all I get is the above error. I have tried to change the imports but I just keep getting the same error. Could there be something wrong with my setup, I feel I get many more errors not directly related to code with React-native than I would with Java for Android.
Since you are adding Camera Screen to createStackNavigator. You can navigate to that screen directly through navigation props. So remove below unnecessary import code from your Home Screen
import Camera from './Camera'
change your navigation action
this.props.navigation.navigate('Camera')
I am new to react native and I was trying to connect reduxstore to my app so that my Menu component may fetch the dishes.
I have tried everything checked for the export errors but yet I couldn't find where is the route missing.
Please help I'm stuck
MenuComponent.js
import React, { Component } from "react";
import { FlatList } from "react-native";
import { Tile } from "react-native-elements";
import { connect } from "react-redux";
import { baseUrl } from "../shared/baseUrl";
const mapStateToProps = state => {
return {
dishes: state.dishes
}
};
class Menu extends Component {
static navigationOptions = {
title: "Menu"
};
render() {
const renderMenuItem = ({ item, index }) => {
return (
<Tile
key={index}
title={item.name}
subtitle={item.description}
featured
onPress={() => navigate("Dishdetail", { dishId: item.id })}
imageSrc={{ uri: baseUrl + item.image }}
/>
);
};
const { navigate } = this.props.navigation;
return (
<FlatList
data={this.props.dishes.dishes}
renderItem={renderMenuItem}
keyExtractor={item => item.id.toString()}
/>
);
}
}
export default connect(mapStateToProps)(Menu);
MainComponent.js
import React, { Component } from "react";
import Menu from "./MenuComponent";
import { DISHES } from "../shared/dishes";
import Dishdetail from "./DishdetailComponent";
import {
View,
Platform,
StyleSheet,
Image,
ScrollView,
Text
} from "react-native";
import {
createStackNavigator,
createDrawerNavigator,
DrawerItems,
SafeAreaView
} from "react-navigation";
import Home from "./HomeComponent";
import Contact from "./ContactComponent";
import About from "./AboutComponent";
import { Icon } from "react-native-elements";
import { connect } from "react-redux";
import {
fetchDishes,
fetchComments,
fetchPromos,
fetchLeaders
} from "../Redux/ActionCreators";
.....
const MenuNavigator = createStackNavigator(
{
Menu: {
screen: Menu,
navigationOptions: ({ navigation }) => ({
headerLeft: (
<Icon
name="menu"
size={24}
color="white"
onPress={() => navigation.toggleDrawer()}
/>
)
})
},
Dishdetail: { screen: Dishdetail }
},
{
initialRouteName: "Menu",
navigationOptions: {
headerStyle: {
backgroundColor: "#512DA8"
},
headerTintColor: "#fff",
headerTitleStyle: {
color: "#fff"
}
}
}
);
.....
export default connect(
mapStateToProps,
mapDispatchToProps
)(Main);
Error message
The component for route 'Menu' must be a React component for example:
import MyScreen from './Myscreen'
...
Menu : Myscreen,
}
you can also use a navigator:
import MyNavigator from './MyNavigator';
....
Menu : MyNavigator
}
validateRouteConfigMap
createStackNavigator
I dont understand why I'm getting error for menu component because I have exported it successfully.
The error has also something to do with createStackNavigator but I think the code looks fine, if not then what am I doing worng?
I don't think your screen is properly setting export default.
Could you change this code?
const MenuNavigator = createStackNavigator(
{
Menu: {
screen: () => <Menu />,
The specific error is "Route 'Camera' should declare a screen".
I have index.js which imports Camera.js and renders the camera component. Camera.js imports router.js which imports all of my screens and creates a StackNavigator. I'm new to React so there's probably something I'm not understanding. Here's the code...
Index.js
import React, { Component } from 'react';
import { CameraView } from './screens/Camera'
class App extends Component {
render() {
return <CameraView />;
}
}
export default App;
Camera.js
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View,
Button,
} from 'react-native';
import { AppStack } from '../config/router';
....
export default class CameraView extends Component {
viewProducts = () => {
this.props.navigation.navigate('Products');
};
render() {
const { navigate } = navigation;
return (
<View style={styles.container}>
<Camera
ref={(cam) => {
this.camera = cam;
}}
style={styles.preview}
aspect={Camera.constants.Aspect.fill}
onBarCodeRead={this.readBarcode}>
<Button
onPress={() => this.viewProducts}
title="Products"
/>
</Camera>
</View>
);
}
}
Router.js
import React from 'react';
import { StackNavigator } from 'react-navigation';
import { Icon } from 'react-native-elements';
import Products from '../screens/Products';
import ProductDetail from '../screens/ProductDetail';
import CameraView from '../screens/Camera';
export const Root = StackNavigator({
Camera: {
screen: CameraView,
},
ProductDetail: {
screen: ProductDetail,
navigationOptions: {
title: ({ state }) => `${state.params.name}}`
},
},
Products: {
screen: Products,
navigationOptions: {
title: 'Products',
},
},
});
I'm importing CameraView here and using it as the screen for my Camera route. Is CameraView not considered a screen? Thanks.
Figured the problem out. Instead of rendering
render() {
return <CameraView />;
}
in my index.js I needed to import the router.js and render
render() {
return <Root />;
}