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

• Expo (Like CRA for React but for React Native)
• React Navigation (Native)