Simple Meditation App Made Using React Native

Tech Stack

Technologies Used :

• React Native
• NativeWind
• TypeScript
• Expo
• JavaScript

Folder structure

Here is the folder structure of the repository :

├─ .github
│  └─ FUNDING.yml
├─ App.js
├─ LICENSE
├─ QRCode.png
├─ README.md
├─ app.d.ts
├─ app.json
├─ app
│  ├─ (modal)
│  │  └─ adjust-meditation-duration.tsx
│  ├─ (tabs)
│  │  ├─ _layout.tsx
│  │  ├─ affirmations
│  │  │  ├─ [itemId].tsx
│  │  │  ├─ _layout.tsx
│  │  │  └─ index.tsx
│  │  └─ nature-meditate.tsx
│  ├─ [...unmatched].tsx
│  ├─ _layout.tsx
│  ├─ index.tsx
│  └─ meditate
│     └─ [id].tsx
├─ assets
│  ├─ adaptive-icon.png
│  ├─ affirmation-images
│  │  ├─ img1.webp
│  │  ├─ img11.webp
│  │  ├─ img12.webp
│  │  ├─ img13.webp
│  │  ├─ img14.webp
│  │  ├─ img2.webp
│  │  ├─ img21.webp
│  │  ├─ img22.webp
│  │  ├─ img23.png
│  │  ├─ img24.jpg
│  │  ├─ img3.webp
│  │  └─ img4.webp
│  ├─ audio
│  │  ├─ beach.mp3
│  │  ├─ meditate-under-tree.mp3
│  │  ├─ river.mp3
│  │  ├─ trees.mp3
│  │  ├─ waterfall.mp3
│  │  └─ yosemite-stars.mp3
│  ├─ favicon.png
│  ├─ fonts
│  │  └─ RobotoMono-Regular.ttf
│  ├─ icon.png
│  ├─ meditation-destress.png
│  ├─ meditation-graphic.png
│  ├─ meditation-images
│  │  ├─ beach.webp
│  │  ├─ im1.webp
│  │  ├─ im2.webp
│  │  ├─ im3.webp
│  │  ├─ im5.webp
│  │  └─ im6.webp
│  ├─ simpleMeditationLogo-ChangeAccToNeed.png
│  └─ splash.png
├─ babel.config.js
├─ components
│  ├─ AppGradient.tsx
│  ├─ AppScreen.tsx
│  ├─ Content.tsx
│  ├─ CustomButton.tsx
│  ├─ GuidedAffirmationsGallery.tsx
│  ├─ MeditationPreview.tsx
│  ├─ ProductPreview.tsx
│  └─ SearchInput.tsx
├─ constants
│  ├─ Colors.js
│  ├─ MeditationData.ts
│  ├─ affirmation-gallary.ts
│  ├─ affirmation-images.ts
│  ├─ meditation-images.ts
│  └─ models
│     └─ AffirmationCategory.ts
├─ context
│  └─ TimerContext.tsx
├─ package-lock.json
├─ package.json
├─ tailwind.config.js
├─ tsconfig.json
└─ yarn.lock

Quick Start

Cloning the Repository

git clone https://github.com/Soumilgit/Meditation-App_React-Native.git
cd simple-meditation-app-expo-react-native

Installation

Navigate to the project directory:

cd simple-meditation-app-expo-react-native

Install the project dependencies using npm:

npm install

Running the Project

Start the development server:

npx expo start --tunnel

Deployment Options

Expo Go

• Download the Expo Go app onto your device
• Scan the QR code from the terminal to run the app

iOS Simulator

• Navigate to the Expo documentation for instructions on setting up and running the app on an iOS Simulator for local development

Android Emulator

• Navigate to the Expo documentation for instructions on setting up and running the app on an Android Emulator for local development