This React Native app is configured for both Android and iOS. This sample app can be used as a template in any app that has a structure like this:
- Categories (e.g. Hamburgers, Salads, Pizza)
- Items (elements inside a category, array of items)
- Item details (a piece of item, e.g. Pizza Margharita)
- User can filter items
- User can add items as favorites
All styles are connected to UI using constants/theme.js
file and by editing this file the style of the whole app will update on all screens.
If you want to add custom fonts, remember to load them in App.js first. This sample application uses Montserrat as a custom font.
The data setup in Redux is mock data and can be connected to actual data source.
- ๐ผ Categories Overview (Grid)
- ๐ Items inside a category (FlatList)
- ๐ Item Details
- ๐ Filters
- โญ Favorites (FlatList)
yarn install
yarn start
Create project
expo init react-native-recipes-app
Basic config
expo install react-native-gesture-handler react-native-reanimated react-native-screens react-native-safe-area-context @react-native-community/masked-view
State navigation and state management
yarn add @react-navigation/native react-navigation-stack react-navigation-tabs react-navigation-drawer react-navigation-header-buttons react-navigation-material-bottom-tabs react-native-paper react-native-vector-icons redux react-redux @react-native-community/checkbox
Optional dev tools
yarn add redux-devtools-extension --dev