Section 7 app wide state management with redux and context api #29
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
…re Components, Styling & Colors - More Information)
…Of Course Goals (in our Demo App)
…d Ripple Effect & iOS alternative)
- Added basic screens (StartGameScreen, GameScreen and GameOverScreen) - Started implementing StartGameScreen - Added a PrimaryButton component
- installed package expo-linear-gradient
…tions with the SafeAreaView) - added switching screens programmatically (StartGameScreen / GameScreen) - Started implementing (layout) GameScreen - added SafeAreaView
- Added a Title component - Moved Colors to a separate file so they can be used globally
…- to the App) - Moved components PrimaryButton & Title to the components/ui folder - Added the NumberContainer component - Added the + & - buttons to the GameScreen - Added logic to generate a random number between 2 values + handle next guesses
… React Native Apps) - Installed expo-fonts & expo-app-loading package - Added and defined the custom fonts - Replaced + & - text with icons for the buttons in GameScreen
- Added the layout & styling for the GameOverScreen including a foreground image
…isplaying a summary screen)
- Logged game rounds - Outputted log data with FlatList - Created a GuessLogItem and added styling
…fferent orientation) - Changed orientation to "default" - Used the dimensions API for static dimensions - Used the useWindowDimensions hook for dynamic dimensions (eg screen rotation)
…oardAvoidingView)
- Conditionally change the layout of the GameScreen depenÏding on the available width
…owDimensions) - used useWindowDimensions on the GameOverScreen to change image styling and made the whole view scrollable
- Added different ways of writing/using platform specific code (files with <fileName>.ios.js/.android.js or the Platform API
- Added models and dummy data - Added CategoriesScreen & output meal categories - Added component CategoryGridTile and setup layout and styling - Set background color in App.json - Set status bar style to light in App.js and show CategoriesScreen
- @react-native/native - react-native-screens - react-native-safe-area-context
…avigation Package) - installed package @react-navigation/native-stack - Added NavigationContainer, createNativeStackNavigator in App.js to create a navigation stack in App.js
…two screens) - Added MealsOverviewScreen - Handled navigation to MealsOverviewScreen when pressing a CategoryGridItem
… pass data) - Passed the categoryId to the MealsOverviewScreen with the route parameter
… done via the useRoute hook instead of properties
- Added FlatList to MealsOverViewScreen to display all the different meals for a category - Added MealItem component & set layout and styling including image from the internet
…ils screen) - Added the MealDetailsScreen - Handled navigation with params to this MealDetailsScreen using the useNavigationHook
- Created List, Subtitle & MealDetails reusable components - Made MealDetailsScreen scrollable & updated styling
- Added a button to the navigation bar for the MealDetailsScreen
- Changed the navigation button on the MealsDetailScreen to a IconButton
- installed the following packages @react-navigation/drawer, react-native-gesture-handler && react-native-reanimated
… the drawer) - Created a drawer navigation (createDrawerNavigation() ) and used it to setup navigation with 2 screens - used the navigation.toggleDrawer() method to programmatically open the drawer
- Added a bottom tab bar
- reinstalled the packages @react-navigation/drawer @react-navigation/native @react-navigation/native-stack with the correct version (6 instead of 7) - installed the packages react-native-gesture-handler & react-native-animated - Nested a DrawerNavigator inside the Stack Navigator for the CategoriesScreen - Added a basic FavoriteScreen
- Added styling to the drawer and some icons to the respective screens in the drawer
…ontext API) - Created a MealsList component - Created a FavoritesContext with property: ids, methods: add/removeFavorite - Added a FavoritesScreen and displayed the favorites meals using the FavoritesContext - Added functionality to toggle a meal as favorite in the MealDetailScreen - Use the MealsList component in the MealsOverviewScreen
- installed the packages @reduxjs/toolkit & react-redux
- Configured a store and added the favoritesReducers - Created a favoriteSlice using "createSlice", give it a name, initialState and the reducers - Wrapped the Provider around the NavigationContainer and passed it the store we created - Updated the FavoritesScreen & MealDetailsScreen to use Redux using the useDispatch and useSelector hooks and commented the Context API code
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
No description provided.