Develop Reference

Hidden header from stack-navigation go to statusbar

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.

The Component for route must be a react component error in React native expo

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 />,

TabNavigator CustomTabComponent onPress not navigating to AddCar page

I am using A TabNavigator inside Stack navigator. Stack Navigator Contains 2 Pages Tab Navigator page and AddCar Page, inside TabNavigator I am using Custom Tab Bar Component which uses a custom Button Component when I press on that button it's not routing to Add Car Page,
I have tried to launch the page which is in the tabNavigator also but not working
here is the stack navigator code:
import React, { Component } from 'react';
import { View, Text, StyleSheet } from 'react-native';
import { createAppContainer, createStackNavigator } from 'react-navigation';
//Screens
import MainTabs from '../navigators/mainTabNavigator';
import AddCar from '../add_car/container/addCar';
class Navigator extends Component {
render() {
return (
<AppNavigator />
);
}
}
const navigator = createStackNavigator({
MainTabs: { screen: MainTabs },
AddCar: { screen: AddCar }
}, {
initialRouteName: 'MainTabs',
headerMode: 'none'
});
const AppNavigator = createAppContainer(navigator);
export default Navigator;
here is the tabNavigator:
/* eslint-disable no-undef */
/* eslint-disable max-len */
/* eslint-disable no-unused-expressions */
/* eslint-disable react/require-extension */
import React, { Component } from 'react';
import { StyleSheet } from 'react-native';
import { createAppContainer, createBottomTabNavigator, withNavigation, NavigationActions, getActiveChildNavigationOptions } from 'react-navigation';
import Icons from 'react-native-vector-icons/Ionicons';
import { OpacityButton } from '../utilities/buttons';
import Colors from '../Metrics/colors';
//Screens
import CarsList from '../cars_list/container/carsList';
import AddCar from '../add_car/container/addCar';
import Screen from '../screen';
class MainTabNavigator extends Component {
render() {
return (
<AppContainer />
);
}
}
const size = 25;
const routeConfigs = {
CarsList: {
screen: CarsList,
navigationOptions: () => ({
tabBarIcon: ({ tintColor }) => (
<Icons
name="ios-information-circle"
color={tintColor}
size={size}
/>
),
}),
},
AppovedList: {
screen: Screen,
navigationOptions: () => ({
tabBarIcon: ({ tintColor }) => (
<Icons
name="ios-options"
color={tintColor}
size={size}
/>
),
}),
},
AddCars: {
screen: AddCar,
navigationOptions: () => ({
tabBarButtonComponent: () => (
<OpacityButton
name="ios-add-circle-outline"
onPress={() => NavigationActions.navigate('addCar')}
size={size}
color={Colors.brandColor}
containerStyle={{ borderWidth: StyleSheet.hairlineWidth, borderColor: Colors.light, backgroundColor: Colors.white }}
/>
)
})
},
NavList: {
screen: CarsList,
navigationOptions: () => ({
tabBarIcon: ({ tintColor }) => (
<Icons
name="ios-albums"
color={tintColor}
size={size}
/>
),
}),
},
Profile: {
screen: CarsList,
navigationOptions: () => ({
tabBarIcon: ({ tintColor }) => (
<Icons
name="ios-contact"
color={tintColor}
size={size}
/>
),
}),
},
};
const navigationOptions = {
tabBarOptions: {
activeTintColor: Colors.brandColor,
inactiveTintColor: Colors.lightBlack,
showLabel: false,
animation: true
},
headerMode: 'none'
};
const navigator = createBottomTabNavigator(routeConfigs, navigationOptions);
const AppContainer = createAppContainer(navigator);
export default MainTabNavigator;
I Want To navigate to AddCarPage which is there in the stacknavigator, On press of that Custom Tab Component Button ,
Like instagram plus icon opens new page.

for the custom component, you can just call it under tabBarIcon
AddCars: {
screen: AddCar,
navigationOptions: () => ({
tabBarIcon:
<OpacityButton
name="ios-add-circle-outline"
size={size}
color={Colors.brandColor}
containerStyle={{ borderWidth: StyleSheet.hairlineWidth, borderColor: Colors.light, backgroundColor: Colors.white }}
/>
})
},

React native - React Navigation for multiple routes

I am wondering is there any way to make StackNavigator inside TabNavigator with react-navigation, Right now I have TabNavigator like that in Router.js. I want app inside Add.js (Add screen) to make StackNavigator inside ListItem. Every element of ListItem Should get user to other screen. So If I press first option it should get me to "AddCalendarEvent" etc. Like you see in Add.js file on addList constant
Router.js
import React from 'react';
import {
AppRegistry,
Text,
View,
Button
} from 'react-native';
import {StackNavigator, TabNavigator} from 'react-navigation';
import FontAwesomeIcon from 'react-native-vector-icons/FontAwesome';
import EntypoIcon from 'react-native-vector-icons/Entypo';
import Login from './Login';
import Menu from './Menu';
import Desktop from './Desktop';
import Notifications from './Notifications';
import Today from './Today';
import Add from './Add';
const onClickNavigation = StackNavigator({
Login: {screen: Login}
});
const estimobileapplication = TabNavigator({
Add: {
screen: Add, navigationOptions: {
title: 'Dodaj',
label: 'Dodaj',
tabBarIcon: ({tintColor}) => (<FontAwesomeIcon name="plus-circle" size={24} color="#666"/>)
}
},
Desktop: {
screen: Desktop, navigationOptions: {
title: 'Pulpit',
label: 'Pulpit',
tabBarIcon: ({tintColor}) => (<FontAwesomeIcon name="th-large" size={24} color="#666"/>)
}
},
Notifications: {
screen: Notifications, navigationOptions: {
title: 'Powiadomienia',
label: 'Powiadomienia',
tabBarIcon: ({tintColor}) => (<FontAwesomeIcon name="envelope" size={24} color="#666"/>)
}
},
Today: {
screen: Today, navigationOptions: {
title: 'Na dziś',
label: 'Na dziś',
tabBarIcon: ({tintColor}) => (<FontAwesomeIcon name="check-square" size={24} color="#666"/>)
}
},
Menu: {
screen: Menu, navigationOptions: {
title: 'Menu',
label: 'Menu',
tabBarIcon: ({tintColor}) => (<EntypoIcon name="menu" size={24} color="#666"/>),
}
}
}, {
tabBarOptions: {
activeTintColor: '#26b7ff',
inactiveTintColor: '#ffffff',
activeBackgroundColor: '#2E3035',
style: {
backgroundColor: '#14191f',
}
}
});
AppRegistry.registerComponent('estimobileapplication', () => estimobileapplication);
Add.js
import React, {Component} from 'react';
import {
ScrollView,
Text,
View,
NavigatorIOS
} from 'react-native';
import {List, ListItem} from 'react-native-elements';
import AddCalendarEvent from './add_offer_components/AddCalendarEvent';
import AddOfferFull from './add_offer_components/AddOfferFull';
import AddOfferQuick from './add_offer_components/AddOfferQuick';
import AddQuestion from './add_offer_components/AddQuestion';
import AddUser from './add_offer_components/AddUser';
import GetInvoice from './add_offer_components/GetInvoice';
import SellBuyTransaction from './add_offer_components/SellBuyTransaction';
import SendEmailToClient from './add_offer_components/SendEmailToClient';
import SendNotification from './add_offer_components/SendNotification';
import FontAwesomeIcon from 'react-native-vector-icons/FontAwesome';
class Add extends Component {
onShowMore() {
this.props.navigation.navigate('AddCalendarEvent');
};
render() {
const addList = [
{
title: 'Nowa oferta lub zlecenie - szybkie dodanie',
component: AddOfferQuick
},
{
title: 'Nowa oferta lub zlecenie - pełne dodanie',
component: AddOfferFull
},
{
title: 'Nowe zapytanie',
component: AddQuestion
},
{
title: 'Nowy termin w kalendarzu',
component: AddCalendarEvent
},
{
title: 'Wyślij e-mail do klienta',
component: SendEmailToClient
},
{
title: 'Transakcja kupna/najmu',
component: SellBuyTransaction
},
{
title: 'Wystaw fakturę',
component: GetInvoice
},
{
title: 'Wyślij powiadomienie',
component: SendNotification
},
{
title: 'Dodaj użytkownika',
component: AddUser
}
];
return (
<ScrollView style={{marginTop: 50, paddingLeft: 20}}>
<View style={{flexDirection: 'row', flexWrap: 'wrap'}}>
<FontAwesomeIcon name="plus-circle" size={30} color="#26b7ff"/>
<Text style={{textAlign: 'left', fontSize: 30, color: '#444444', marginLeft: 10}}>
Dodaj
</Text>
</View>
<List>
{addList.map((item, i) => (
<ListItem
key={i}
title={item.title}
onPress={() => this.onShowMore()}
/>
))}
</List>
</ScrollView>
);
}
}
export default Add;

According tho the react navigation docs you can nest as many navigators as you need. Just instead of defining a component for your tab in "screen", define a StackNavigator. This way, it will display the first component that your StakNavigator Shows.
Then in each item you define a navigate() to the next screen you need (I assume is the same screen for every item in the list) and pass the required data as a prop.

Issue with StackNavigator: Route 'X' should declare a screen

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 />;
}