Scribd
Upload
14 views4 pages

React Native Recipe App

The React Native Recipes App allows users to browse recipes, view details, and use timers, featuring categories, ingredient lists, and a photo gallery. The document outlines the app's structure, including key files and directories, as well as installed libraries with their purposes and usage examples. It also provides commands for installing necessary libraries and managing dependencies.

Uploaded by

laibakhann6785
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
14 views4 pages

React Native Recipe App

The React Native Recipes App allows users to browse recipes, view details, and use timers, featuring categories, ingredient lists, and a photo gallery. The document outlines the app's structure, including key files and directories, as well as installed libraries with their purposes and usage examples. It also provides commands for installing necessary libraries and managing dependencies.

Uploaded by

laibakhann6785
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 4

REACT NATIVE RECIPES APP

This app allows users to browse through various recipes, view detailed information, and utilize
timers for recipe preparation. It also offers features like categories, ingredients lists, and a
photo gallery.
1. App.js: This is the entry point of the React Native application. It typically contains the
main component that sets up the navigation and renders the initial UI.

2. assets/: This directory stores static assets such as images, fonts, and other media used in
the app.

3. src/: Contains the source code of the application. This is where you'll find components,
screens, navigation configurations, and other logic.

4. .expo-shared/ and .expo/: These directories are related to Expo, a framework and
platform for universal React applications. They store configuration and project-specific
data for Expo.

5. babel.config.js: This file contains Babel configuration, which is used to transpile modern
JavaScript code into a format compatible with various environments.

6. package.json: Manages project dependencies and scripts. It includes metadata about


the project and lists the packages required for the app to function.

7. yarn.lock: Locks the versions of dependencies to ensure consistent installs across


different environments.

Here's a breakdown of all the libraries installed in your React Native Recipe App, including what
each library is for and how to use it with example commands or code snippets.

Installed Libraries & Their Usages


1. expo
 Purpose: Core SDK for building apps using Expo.
REACT NATIVE RECIPES APP
 Command:
 npx expo start

2. expo-status-bar
 Purpose: Customize the status bar appearance.
 Usage:
 import { StatusBar } from 'expo-status-bar';

 <StatusBar style="auto" />

3. react
 Purpose: Core React library.
 Usage: Used throughout the app in every component.
 import React from 'react';

4. react-native
 Purpose: Core framework for building native apps with React.
 Usage:
 import { View, Text, StyleSheet } from 'react-native';

5. @react-navigation/native
 Purpose: Navigation container and core navigation utilities.
 Command:
 npm install @react-navigation/native
 Usage:
 import { NavigationContainer } from '@react-navigation/native';
 <NavigationContainer>{/* Screens go here */}</NavigationContainer>
REACT NATIVE RECIPES APP

6. @react-navigation/stack
 Purpose: Stack navigator (like a page stack).
 Usage:
 import { createStackNavigator } from '@react-navigation/stack';

 const Stack = createStackNavigator();

7. @react-navigation/drawer
 Purpose: Sidebar navigation drawer.
 Usage:
 import { createDrawerNavigator } from '@react-navigation/drawer';

 const Drawer = createDrawerNavigator();

8. react-native-gesture-handler
 Purpose: Enables gesture support in navigation (must-have for React Navigation).
 Usage: Place this at the top of index.js or App.js:
 import 'react-native-gesture-handler';

9. react-native-reanimated
 Purpose: Animations library; used with gesture-based navigation or UI.
 Usage:
 import Animated from 'react-native-reanimated';

10. react-native-reanimated-carousel
 Purpose: A performant carousel slider.
REACT NATIVE RECIPES APP
 Usage:
 import Carousel from 'react-native-reanimated-carousel';

11. react-native-safe-area-context
 Purpose: Handle safe area padding on devices (like notches).
 Usage:
 import { SafeAreaProvider, SafeAreaView } from 'react-native-safe-area-context';

12. @react-native-community/cli-server-api
 Purpose: Internal API used mostly for development server in React Native CLI (not
directly used in code).

13. @babel/core, @babel/preset-flow


 Purpose: JavaScript compilation tools; used during development (not needed to import
manually).

Summary of Install Commands (If needed to reinstall)


1. npx expo install expo expo-status-bar
2. npm install react react-native
3. npm install @react-navigation/native @react-navigation/stack
@react-navigation/drawer
4. npx expo install react-native-gesture-handler react-native-reanimated react-native-safe-
area-context
5. npm install react-native-reanimated-carousel
6. If you're using Yarn (as your packageManager suggests), replace npm install with yarn
add.

You might also like