getting-started-react-navigation's People
Forkers
junedomingo phpsmarter justinal64 aamlle abhinavbajpai dfstoneburner hchenfred sellmeadog yeelerg tribemedia castrike cikai tueht mel-oka huynhminhtien doronzzz lewis831 camtes mcarthurnick skalstad2105 xernagawang fesp21 leesanghun0226 orenelad aponter royisch andrewkmin yossilbox khadorkin mumulinw thainh107 toriki07 suryakolli wenhaokho manuinnovations joysawang dexterlv bvanleeuwen1995 anh01 capella55 lukkyjoe thespeakable sjoenh damoguyan8844 sean-e-dietrich clementpeihengtan vaidyanathanas kevingatera robinbeechey rockinrone rafaaseddik mboldireff dseerapu houce lucasrocali gnyylm ajinkyadivekar tonytofugear thomasglachant gdsouza1992 albert-carreras emad-rahman pasza01 chefarchitekt aksland timdost kyle-lam zahironebook albertahn wholfeld jennyh-jy shivani72 harishnandan triptipant01 anigupta1121 eazymation grainerycafe kenput3r grim-reapper georgezhenzhao kingpro immortalvlad dilansadeep sola-bg jjmax75 minasa1 ninjavungve scerreto firman123 hossam-eldin juanunix rooleary omuomugin alexhwoods satbirdd theogumilang unlimitedes egabrielnunes oseifrimpong atafsgetting-started-react-navigation's Issues
what are the navigationsoptions
I watched your video about react navigaiton it s so clear to understand because the documentation of react navigations ,as i understand , is not easy.
I have a question to you I hope dont bother you .where can i find full feature of navigationoptions .I have just learnt 2 of them title and so on but there must be many . I checked the documentaions of react navigations but nothing
Thank you in Advance
Could not find iPhone simulator
I try to run it via react-native run-ios and here is the result :
Also tried with --simulator="iPhone X" with no success.
XCode is already installed, other projects working fine with iOS simulator.
Step to reproduce:
- git clone this repo
- cd to getting-started-react-navigation
- npm install
- react-native run-ios
Double Header showing on StackNavigator nested in TabNavigator
Hello, I have followed your nice tutorial, it's working fine but i am facing an issue with header. It's showing double header. Can you tell how can i fix this issue please?
but if i add this param ({ headerMode: 'none' } )in stackNavigator it works but in my event details page the back button disappears
Errors while running project
While running the project in Android Emulator I am getting multiple errors.
When starting the error
_reactNative.Dimensions.addEventListener is not a function
is thrown.
Every time I press any Button the error
Cannot read property 'getScrollableNode' of undefined
is thrown.
The only thing that works correctly is dragging the views from feed and me back and forth.
How to use Tab Navigator
React-Navigation v3 Update Error
Where's the problem?
router.js Update React-Navigation v3
import React from 'react';
import { createBottomTabNavigator, createStackNavigator } from 'react-navigation';
import { Icon } from 'react-native-elements';
import Feed from '../screens/Feed';
import Settings from '../screens/Settings';
import UserDetail from '../screens/UserDetail';
import Me from '../screens/Me';
const FeedStack = createStackNavigator({
Feed: {
screen: Feed,
navigationOptions: {
title: 'Feed',
},
},
Details: {
screen: UserDetail,
navigationOptions: ({ navigation }) => ({
title: ${navigation.state.params.name.first.toUpperCase()} ${navigation.state.params.name.last.toUpperCase()},
}),
},
});
export const Tabs = createBottomTabNavigator({
Feed: {
screen: FeedStack,
navigationOptions: {
tabBarLabel: 'Feed',
tabBarIcon: ({ tintColor }) => ,
},
},
Me: {
screen: Me,
navigationOptions: {
tabBarLabel: 'Me',
tabBarIcon: ({ tintColor }) =>
},
},
});
const SettingsStack = createStackNavigator({
Settings: {
screen: Settings,
navigationOptions: {
title: 'Settings',
},
},
});
const Root = createStackNavigator({
Tabs: {
screen: Tabs,
},
Settings: {
screen: SettingsStack,
},
}, {
mode: 'modal',
headerMode: 'none',
});
software | version |
---|---|
react-navigation | ^3.0.0" |
react-native | 0.59.3 |
node | 10.15.3 |
npm or yarn | 1.13.0 |
react navigation displaying white screen
Home.js
import React, { Component } from "react";
import { View, Text } from "react-native";
class Home extends Component {
render() {
return (
<View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>
<Text>Home</Text>
</View>
);
}
}
export default Home;
Profile.js
import React, { Component } from "react";
import { View, Text } from "react-native";
class Profile extends Component {
render() {
return (
<View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>
<Text>Profile</Text>
</View>
);
}
}
export default Profile;
route.js
import { StackNavigator } from "react-navigation";
import HomeScreen from "./components/Home";
import ProfileScreen from "./components/Profile";
export default MainStack = StackNavigator(
{
Home: {
screen: HomeScreen
},
Profile: {
screen: ProfileScreen
}
},
{
initialRouteName: "Home"
}
);
App.js
* Sample React Native App
* https://github.com/facebook/react-native
* @flow
*/
import React, { Component } from "react";
import { Platform, StyleSheet, Text, View } from "react-native";
import Mainstack from "./app/route";
const instructions = Platform.select({
ios: "Press Cmd+R to reload,\n" + "Cmd+D or shake for dev menu",
android:
"Double tap R on your keyboard to reload,\n" +
"Shake or press menu button for dev menu"
});
export default class App extends Component {
render() {
// alert(Mainstack);
return (
<View style={styles.container}>
<Mainstack />
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: "center",
alignItems: "center",
backgroundColor: "#F5FCFF"
},
welcome: {
fontSize: 20,
textAlign: "center",
margin: 10
},
instructions: {
textAlign: "center",
color: "#333333",
marginBottom: 5
}
});
expected output -
Home screen should be displayed
Actual output -
white screen
software | version |
---|---|
react-navigation | "^1.5.8" |
react-native | "0.54.4" |
node | v9.5.0 |
npm or yarn | 4.6.1 |
UserDetail defined twice
You have class UserDetail being defined in both Me.js and UserDetail.js. Is this correct?
Error when run project
Getting the following non-fatal error when opening the project
Unable to run this Project
How to run it?
How to run it?
Running
react-native run-ios
- `react-native run-androi
installation works just fine though, please advice.
error _reactNative.Dimensions.addEventListener is not a function
I got the error _reactNative.Dimensions.addEventListener is not a function
I have fixed with the following steps
-
remove the node_modules folder
-
update package.json with
"dependencies": { "react": "16.0.0-alpha.6", "react-native": "0.43.0", "react-native-elements": "0.14.0", "react-native-vector-icons": "4.4.2", "react-navigation": "^1.0.0-beta.6" },
- npm install
Excellent article,
https://hackernoon.com/getting-started-with-react-navigation-the-navigation-solution-for-react-native-ea3f4bd786a4
Can I translate the article into Chinese? Share it with other partners through the social platform, and of course I will add my original address
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.