hello i tried to use react Navigation from its docs but i have a problem.the error is navigation.navigate is undefined here is my declaration my routes:
import 'react-native-gesture-handler';
import React from 'react';
import {
SafeAreaView,
StyleSheet,
} from 'react-native';
import { createStackNavigator } from '#react-navigation/stack'
import { createAppContainer } from 'react-navigation';
import { NavigationContainer } from '#react-navigation/native';
import AboutUs from './AboutUs'
import Navigations from './Navigations'
const App: () => React$Node = () => {
const Stack = createStackNavigator();
return (
<NavigationContainer>
<Stack.Navigator>
<Stack.Screen name="App" component={App} />
<Stack.Screen name="AboutUs" component={AboutUs} />
<Stack.Screen name="Navigations" component={Navigations} />
</Stack.Navigator>
</NavigationContainer>
);
};
and here is my Button to navigate:
import React from 'react'
import {
View, Text,
Button
} from 'react-native'
const AboutUs = ({ navigation }) => {
return <View>
<Text>About us page</Text>
<Button title='press me' onPress={() => { navigation.navigate('Navigations', name = 'aliiiiiiiiis') }} />
</View>
}
export default AboutUs;
Related
I have used createStackNavigator for Normal navigation and createMaterialTopTabNavigator for Tab navigation
Nested navigation is acting strangely. I have a StackNavigator in App.tsx that contains ProfileHome.tsx. The ProfileHome.tsx contains Tab navigations that have four screens. I wanted to navigate to the PastWorkDetail.tsx screen which is a part of the StackNavigator from PastWork.tsx (Tab)
Whenever I navigate from PastWork (Tab) to PastWorkDetail, the screen PastWorkDetail appears and automatically redirects to the previous screen, which is PastWork (Tab)
App.tsx
import { NavigationContainer } from "#react-navigation/native";
import { createStackNavigator } from "#react-navigation/stack";
import React, { useState } from "react";
import { SafeAreaProvider } from "react-native-safe-area-context";
import { RootStackParamList } from "./navigation/types";
import LoginHome from "./screens/login/LoginHome";
import SplashScreen from "./screens/login/SplashScreen";
import SocialMediaSelectPage from "./screens/preference/SocialMediaSelectPage";
import PastWorkDetail from "./screens/profile/PastWorkDetail";
import ProfileHome from "./screens/profile/ProfileHome";
const RootStack = createStackNavigator<RootStackParamList>();
const App = () => {
return (
<SafeAreaProvider>
<NavigationContainer>
<RootStack.Navigator
initialRouteName="LoginHome">
<RootStack.Screen name="LoginHome" component={LoginHome} />
<RootStack.Screen name="SocialMediaSelectPage" component={SocialMediaSelectPage}/>
<RootStack.Screen name="ProfileHome" component={ProfileHome} />
<RootStack.Screen name="PastWorkDetail" component={PastWorkDetail} />
<RootStack.Screen name="Test" component={Test} />
</RootStack.Navigator>
</NavigationContainer>
</SafeAreaProvider>
);
};
export default App;
ProfileHome.tsx
import { createMaterialTopTabNavigator } from "#react-navigation/material-top-tabs";
import React from "react";
import { View } from "react-native";
import HeaderProfile from "../../components/header/HeaderProfile";
import PastWork from "./PastWork";
import Preferences from "./Preferences";
import Profile from "./Profile";
import TopTabBar from "./shared/TopTabBar";
import Stats from "./Stats";
interface TabItem {
name: string;
component: React.ComponentType<any>;
}
const tabs: TabItem[] = [
{ name: "Profile", component: Profile },
{ name: "Stats", component: Stats },
{ name: "Preferences", component: Preferences },
{ name: "Pastwork", component: PastWork },
];
const ProfileHome = () => {
const Tab = createMaterialTopTabNavigator();
return (
<View style={styles.container}>
<Tab.Navigator backBehavior="history" nitialRouteName="Profile" tabBar={(props) => <TopTabBar {...props} />}>
{
// Populating tabs
tabs.map((item: TabItem, index: number) => {
return (
<Tab.Screenkey={index} name={item.name} component={item.component}
options={{
tabBarLabel: item.name,
}}
/>
);
})
}
</Tab.Navigator>
</View>
);
};
export default ProfileHome;
PastWork.tsx
import { useNavigation } from "#react-navigation/native";
import React from "react";
import { Image, ImageSourcePropType, StyleSheet, View } from "react-native";
const images = [
require("../../assets/images/pastWork1.jpeg"),
require("../../assets/images/pastWork2.png")
];
const PastWork = () => {
const navigation = useNavigation();
const onPress = () => {
navigation.navigate("PastWorkDetail");
};
return (
<View style={styles.container}>
<View style={{ width: Utils.getWidth(45) }}>
{
images.map((item, index) => {
return (
<ImageView key={index} source={item} onPress={onPress} />
);
})
}
</View>
</View>
);
};
export default PastWork;
PastWorkDetail.tsx
import React from "react";
import { StyleSheet, View } from "react-native";
import Header from "../../components/header/Header";
const PastWorkDetail = () => {
return (
<View style={styles.container}>
<Header name="Pastwork Info" />
</View>
);
};
export default PastWorkDetail;
This is my first React Native project and I am stuck and need help. Following is my code. What I am trying to do is following.
Landing screen will have list of all projects and bottom tab menu.
Once someone clicks on project, it will open project details page.
App.Js
/**
* Sample React Native App
* https://github.com/facebook/react-native
*
* #format
* #flow strict-local
*/
import React from 'react';
import App from './src';
import { Provider as PaperProvider } from 'react-native-paper';
export default App;
src/navigations/index.js
import * as React from 'react';
import { Text, View, StyleSheet, FlatList, SafeAreaView } from 'react-native';
import { List, Button, TextInput, FAB, Avatar, Card, Title, Paragraph } from 'react-native-paper';
import { NavigationContainer } from '#react-navigation/native';
import { createBottomTabNavigator } from '#react-navigation/bottom-tabs';
import { createStackNavigator} from '#react-navigation/stack';
import ProjectList from '_scenes/projects';
import NewProject from '_scenes/projects/addproject';
import ProjectDetail from '_scenes/projects/projectdetails';
import Settings from '_scenes/settings';
const Tab = createBottomTabNavigator();
const Projects = ({ navigation }) => (
<ProjectList navigation={navigation} />
);
function SettingsScreen( { navigation} ) {
return (
<Settings />
);
}
export default function App() {
return (
<NavigationContainer>
<Tab.Navigator initialRouteName="HomeScreen">
<Tab.Screen name="Home" component={Projects} options={{ tabBarBadge: 3 }}/>
<Tab.Screen name="Settings" component={SettingsScreen} options={{ tabBarBadge: 2 }}/>
</Tab.Navigator>
</NavigationContainer>
);
}
src/scenes/projects/index.js
import React, { useEffect, useState } from 'react';
import { ActivityIndicator, FlatList, Text, View } from 'react-native';
import { Item, List, Button } from 'react-native-paper';
import { NavigationContainer } from '#react-navigation/native';
import { createBottomTabNavigator } from '#react-navigation/bottom-tabs';
import { createStackNavigator} from '#react-navigation/stack';
import NewProject from '_scenes/projects/addproject';
import ProjectDetail from './projectdetails';
ProjectList = ({ navisation }) => {
const [isLoading, setLoading] = useState(true);
const [data, setData] = useState([]);
useEffect(() => {
fetch('http://xxx.xxx.xxx.xxx/projects')
.then((response) => response.json())
.then((json) => setData(json))
.catch((error) => console.error(error))
.finally(() => setLoading(false));
}, []);
function Projects ( {navigation }) {
return (
<View style={{ flex: 1, padding: 24 }}>
<FlatList
data={data}
keyExtractor={({ id }, index) => id}
renderItem={renderProject}
/>
</View>
)
}
const renderProject = ({ navigation, item }) => (
<List.Item
title={item.title}
description={item.description}
onPress={() => navigation.navigate('ProjectDetails')}
/>
);
const AddProject = ({ navigation }) => (
<NewProject />
);
function ProjectDetails({navigation}) {
return (
<ProjectDetail />
);
}
function Chat({navigation}) {
return (
<View>
<Text>Chat</Text>
</View>
);
}
const Stack = createStackNavigator();
return (
<Stack.Navigator>
<Stack.Screen title="Home" name="Home" component={Projects} options={{headerShown: false}}/>
<Stack.Screen title="Add Project" name="AddProject" component={AddProject} />
<Stack.Screen title="Project Details" name="ProjectDetails" component={ProjectDetails} />
<Stack.Screen title="Chat" name="Chat" component={Chat} />
</Stack.Navigator>
);
};
export default ProjectList;
if you see "renderProject" I want to navigate to "ProjectDetails" when clicked. but I receive error 'TypeError: undefined is not an object (evaluating 'navigation.navigate')' let me know what is wrong?
App.js:
import React, { useState } from "react";
import { Text } from "react-native";
import { NavigationContainer } from "#react-navigation/native";
import Stack from "./navigation/Stack";
export default function App() {
const [isReady, setIsReady] = useState(true);
const onFinish = () => setIsReady(true);
return isReady ? (
<NavigationContainer>
<Stack />
</NavigationContainer>
) : (
<Text>Loading...</Text>
);
}
Trying to navigate to a screen through a custom component:
import React from "react";
import { createStackNavigator } from "#react-navigation/stack";
import Home from "../screens/Home";
import Detail from "../screens/Detail";
const Stack = createStackNavigator();
export default () => (
<Stack.Navigator>
<Stack.Screen name="Home" component={Home} />
<Stack.Screen name="Detail" component={Detail} />
</Stack.Navigator>
);
Im getting an error:
Invariant Violation: Invalid hook call. Hooks can only be called
inside of the body of a function component.
Can someone have a look on it?
Background:
I've created a Screens.js file which contains each separate screen as a function. Then I'm calling the screens from App.js.
What I have tried
This is a mockup of what I have in the Screens.js file.
import React from 'react';
import {StyleSheet, View, Text, Image, Button, TextInput} from 'react-native';
import { NavigationContainer } from '#react-navigation/native';
import { createBottomTabNavigator } from '#react-navigation/bottom-tabs';
import { createStackNavigator} from '#react-navigation/stack';
export const LoginScreen = ({ navigation }) => {
return (
<View>
<Text> This is a Login Screen </Text>
<Button
title="Go to Home"
onPress={() => navigation.navigate('Home')}
/>
</View>
)
}
export const HomeScreen = ({ navigation }) => {
return (
<View>
<Text> This is a Home Screen </Text>
</View>
)
}
And this is App.js
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { NavigationContainer } from '#react-navigation/native';
import { createBottomTabNavigator } from '#react-navigation/bottom-tabs';
import { createStackNavigator} from '#react-navigation/stack';
import { LoginScreen, HomeScreen } from './app/Screens.js';
const Stack = createStackNavigator();
function App() {
return (
<NavigationContainer>
<Stack.Navigator initialRouteName="Home">
<Stack.Screen name="Login" component={ LoginScreen } />
<Stack.Screen name="Home" component={ HomeScreen } />
</Stack.Navigator>
</NavigationContainer>
);
}
export default App;
Problem
When I try and run the app in expo, I get the following error message: "Invariant Violation: Module RCTEventEmitter is not a registered callable Module (calling recieveTouches)" I have absolutely no idea what any of this means, I don't even know what an RCTEventEmitter or recieveTouches actually is.
Question
Is this the correct method to import a function from a separate file? Is there any better way? Maybe the problem isn't even related to the calling of the functions? (Note: I've tried other methods in the past but they all failed, so it probably is an export-import issue.)
Thanks a lot!
you can't do that.
try this
exports.default = {
LoginScreen : ({ navigation }) => {
return (
<View>
<Text> This is a Login Screen </Text>
<Button
title="Go to Home"
onPress={() => navigation.navigate('Home')}
/>
</View>
)
},
HomeScreen : ({ navigation }) => {
return (
<View>
<Text> This is a Home Screen </Text>
</View>
)
}
}
this is a hint, not exact code.
I am newbie to react-native and I will like implement correctly the Drawer in native-base with react native stack navigation. I am sorry my question might be too basic. I just need the proper way to implement it.
Below is my App.js
import React, {Component} from 'react';
import { AppLoading } from 'expo';
import { Container, Text } from 'native-base';
import * as Font from 'expo-font';
import { Ionicons } from '#expo/vector-icons';
import { Header, Title,Accordion, Content, Footer, FooterTab, Button, Left, Right, Body, Icon } from 'native-base';
import FirstScreen from './src/FirstScreen';
import Screen1 from './src/Screen1';
import Screen2 from './src/Screen2';
import Screen3 from './src/Screen3';
import {
createDrawerNavigator,
createStackNavigator,
createAppContainer,
createSwitchNavigator,
DrawerItems
} from 'react-navigation';
const DrawerContent = (props) =>(
<View style={{backgroundColor:'red'}}>
<View style={{
backgroundColor:'#f50057',
height:140,
alignItems: 'center',
justifyContent:'center'
}}>
<Text style={{color: 'white',fontSize:30}}>
Header
</Text>
</View>
<DrawerItems/>
</View>
);
const HomeScreenRouter = createDrawerNavigator(
{
Screen1: { screen: Screen1 },
Screen2: { screen: Screen2 },
Screen3: { screen: Screen3 },
},
{
contentComponent: <DrawerContent/>,
}
);
const AuthStack = createStackNavigator(
{
FirstScreen: FirstScreen
}
);
const AppContainer = createAppContainer(createSwitchNavigator(
{
App: HomeScreenRouter,
Auth: AuthStack
},{
initialRouteName: 'Auth',
}
));
export default class App extends Component{
constructor(props){
super(props)
this.state = {
isReady: false
}
}
async componentDidMount(){
await Font.loadAsync({
Roboto: require('native-base/Fonts/Roboto.ttf'),
Roboto_medium: require('native-base/Fonts/Roboto_medium.ttf'),
}).then((err) =>{
this.setState({ isReady: true });
})
}
render(){
if(!this.state.isReady){
return(
<AppLoading/>
)
}
return(
<AppContainer/>
)
}
}
Below is my FirstScreen.js
import React, {Component} from 'react';
import { AppLoading } from 'expo';
import { Container, Text } from 'native-base';
import * as Font from 'expo-font';
import { Ionicons } from '#expo/vector-icons';
import { Header, Title,Accordion, Content, Footer, FooterTab, Button, Left, Right, Body, Icon } from 'native-base';
export default class FirstScreen extends Component{
constructor(props){
super(props);
this.state = {
isReady: false
}
}
render(){
if(!this.state.isReady){
return(
<AppLoading/>
)
}
return (
<Container>
<Header>
<Left>
<Button transparent onPress={() this.props.navigation.openDrawer() }>
<Icon name="menu"/>
</Button>
</Left>
<Body>
<Title>Be in</Title>
</Body>
<Right/>
</Header>
<Content>
</Content>
</Container>
);
}
}
The app doesnt output any error but I got a blank white page with header.
I expect the output to like this
Thanks in advance.
Simple solution for react-navigation v5
import * as React from 'react';
import {NavigationContainer} from '#react-navigation/native';
import {createDrawerNavigator} from '#react-navigation/drawer';
import {createStackNavigator} from '#react-navigation/stack';
// screens
import HomeScreen from '../screens/HomeScreen';
import CategoryScreen from '../screens/CategoryScreen';
import CartScreen from '../screens/CartScreen';
import MapScreen from '../screens/MapScreen';
import ProfileScreen from '../screens/ProfileScreen';
import SettingsScreen from '../screens/SettingsScreen';
const Drawer = createDrawerNavigator();
const Stack = createStackNavigator();
function MainStackNavigator() {
return (
<Stack.Navigator headerMode="none" initialRouteName="Home">
<Stack.Screen name="Home" component={HomeScreen} />
<Stack.Screen name="Cart" component={CartScreen} />
<Stack.Screen name="Category" component={CategoryScreen} />
<Stack.Screen name="Map" component={MapScreen} />
<Stack.Screen name="Profile" component={ProfileScreen} />
<Stack.Screen name="Settings" component={SettingsScreen} />
</Stack.Navigator>
);
}
export default function AppRouter() {
return (
<NavigationContainer>
<Drawer.Navigator initialRouteName="Home">
<Drawer.Screen name="Home" component={MainStackNavigator} />
</Drawer.Navigator>
</NavigationContainer>
);
}