https://github.com/aaronksaunders/hello-world-v3-stacknavigator-context-api

Focus is on react-navigation StackNavigator handling click event to move to the next page when the user selects a item from a FlatList Component. We show the FlatList Component, the use of the StackNavigator but instead of passing parameters between pages, we use the Context API to update the state to show the current item on the detail page
https://github.com/aaronksaunders/hello-world-v3-stacknavigator-context-api

context-api expo flatlist javascript react react-native react-navigation reactjs stacknavigator

Last synced: 4 months ago
JSON representation

Focus is on react-navigation StackNavigator handling click event to move to the next page when the user selects a item from a FlatList Component. We show the FlatList Component, the use of the StackNavigator but instead of passing parameters between pages, we use the Context API to update the state to show the current item on the detail page

• Host: GitHub
• URL: https://github.com/aaronksaunders/hello-world-v3-stacknavigator-context-api
• Owner: aaronksaunders
• Created: 2018-10-16T04:12:32.000Z (over 7 years ago)
• Default Branch: master
• Last Pushed: 2018-10-18T15:12:36.000Z (over 7 years ago)
• Last Synced: 2025-03-15T04:26:38.271Z (11 months ago)
• Topics: context-api, expo, flatlist, javascript, react, react-native, react-navigation, reactjs, stacknavigator
• Language: JavaScript
• Homepage:
• Size: 1.2 MB
• Stars: 3
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# React Native App w/StackNavigator & Context API

>Focus is on [react-navigation StackNavigator](https://reactnavigation.org/docs/en/hello-react-navigation.html#creating-a-stack-navigator) handling click event to move to the next page when the user selects a item from a 

FlatList Component. We show the [FlatList Component](https://facebook.github.io/react-native/docs/flatlist), the use of the StackNavigator but instead of passing parameters between pages,

we use the [Context API](https://reactjs.org/docs/context.html) to update the state to show the current item on the detail page

---

> See the same application implemented with React Redux - [hello-world-v3-stacknavigator-redux](https://github.com/aaronksaunders/hello-world-v3-stacknavigator-redux)

---

![](https://raw.githubusercontent.com/aaronksaunders/hello-world-v3-stacknavigator-context-api/master/readme.images/Screen%20Shot%202018-10-16%20at%2011.30.48%20AM.png)

### See Video for the first building out sample without Context API - React Native - React Navigation StackNavigator Expo.io Snack - PART 2 https://youtu.be/qe-yU7E9Snc via @YouTube

### More Information on React

- [React Native FlatList](https://facebook.github.io/react-native/docs/flatlist)

- [React Context API](https://reactjs.org/docs/context.html)

- [React Navigation](https://reactnavigation.org/)