├── .gitignore ├── App.js ├── 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 │ ├── California-backyard-1.webp │ ├── California-backyard-2.webp │ ├── California-backyard-3.webp │ ├── California-backyard-4.webp │ ├── Tuscanny-1.webp │ ├── Tuscanny-2.webp │ ├── Tuscanny-3.webp │ ├── Tuscanny-4.webp │ ├── english-countryside-1.webp │ ├── english-countryside-2.webp │ ├── english-countryside-3.webp │ ├── english-countryside-4.webp │ ├── mountain-meditate-1.webp │ ├── mountain-meditate-2.webp │ ├── mountain-meditate-3.webp │ ├── mountain-meditate-4.webp │ ├── night-sky-1.webp │ ├── night-sky-2.webp │ ├── night-sky-3.webp │ ├── night-sky-4.webp │ ├── oregon-1.webp │ ├── oregon-2.webp │ ├── oregon-3.webp │ ├── oregon-4.webp │ ├── relaxing-river-1.webp │ ├── relaxing-river-2.webp │ ├── relaxing-river-3.webp │ └── relaxing-river-4.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 │ ├── meditate-under-tree.webp │ ├── river.webp │ ├── trees.webp │ ├── waterfall.webp │ └── yosemite-stars.webp ├── simpleMeditationLogo.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 /.gitignore: -------------------------------------------------------------------------------- 1 | # Learn more https://docs.github.com/en/get-started/getting-started-with-git/ignoring-files 2 | 3 | # dependencies 4 | node_modules/ 5 | 6 | # Expo 7 | .expo/ 8 | dist/ 9 | web-build/ 10 | 11 | # Native 12 | *.orig.* 13 | *.jks 14 | *.p8 15 | *.p12 16 | *.key 17 | *.mobileprovision 18 | 19 | # Metro 20 | .metro-health-check* 21 | 22 | # debug 23 | npm-debug.* 24 | yarn-debug.* 25 | yarn-error.* 26 | 27 | # macOS 28 | .DS_Store 29 | *.pem 30 | 31 | # local env files 32 | .env*.local 33 | 34 | # typescript 35 | *.tsbuildinfo 36 | -------------------------------------------------------------------------------- /App.js: -------------------------------------------------------------------------------- 1 | import { StatusBar } from 'expo-status-bar'; 2 | import { StyleSheet, Text, View } from 'react-native'; 3 | 4 | export default function App() { 5 | return ( 6 | 7 | 8 | 9 | ); 10 | } 11 | 12 | const styles = StyleSheet.create({ 13 | container: { 14 | flex: 1, 15 | backgroundColor: '#fff', 16 | alignItems: 'center', 17 | justifyContent: 'center', 18 | }, 19 | }); 20 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 |
2 |
3 | 4 | Project Banner 5 | 6 |
7 | 8 |
9 | react.js 10 | expo 11 | nativewind 12 |
13 | 14 |

Meditation and Affirmations App

15 | 16 |
17 | Build this project step by step with our detailed tutorial on the StevenCodeCraft YouTube channel. 18 |
19 |
20 | 21 | ## 📋 Table of Contents 22 | 23 | 1. 🤖 [Introduction](#introduction) 24 | 2. ⚙️ [Tech Stack](#tech-stack) 25 | 3. 🔋 [Features](#features) 26 | 4. 🤸 [Quick Start](#quick-start) 27 | 5. 🕸️ [Snippets](#snippets) 28 | 6. 🔗 [Links](#links) 29 | 7. 🚀 [More](#more) 30 | 31 | ## 🚨 Tutorial 32 | 33 | This repository contains the code corresponding to an in-depth tutorial available on our YouTube channel, StevenCodeCraft. 34 | 35 | If you prefer visual learning, this is the perfect resource for you. Follow our tutorial to learn how to build projects like these step-by-step in a beginner-friendly manner! 36 | 37 | 38 | 39 | ## 🤖 Introduction 40 | 41 | Built with React Native to deliver seamless user experiences, this app features a clean design utilizing FlatLists, Linear Gradients, modals, tab bars, icons, and file-based routing with Expo Router. 42 | 43 | ## ⚙️ Tech Stack 44 | 45 | - React Native 46 | - Expo 47 | - NativeWind 48 | - JavaScript 49 | - TypeScript 50 | 51 | ## 🔋 Features 52 | 53 | 👉 **Onboarding Screen**: Welcome screen with a linear gradient to help users get started with the app. 54 | 55 | 👉 **Meditation List Screen with Flat List**: A flat list displays previews of various meditations with corresponding images. 56 | 57 | 👉 **Audio Playing Capability**: Control audio playback and manage a meditation countdown timer. 58 | 59 | 👉 **Tab Navigation**: Navigate between sections like the Meditation Screen and Affirmations screen with ease using tab navigation. 60 | 61 | 👉 **Responsiveness**: Smooth performance and adaptability across various devices and screen sizes for a consistent user experience. 62 | 63 | and many more, including code architecture and reusability 64 | 65 | ## 🤸 Quick Start 66 | 67 | Follow these steps to set up the project locally on your machine. 68 | 69 | **Prerequisites** 70 | 71 | Make sure you have the following installed on your machine: 72 | 73 | - [Git](https://git-scm.com/) 74 | - [Node.js](https://nodejs.org/en) 75 | - [npm](https://www.npmjs.com/) (Node Package Manager) 76 | 77 | **Cloning the Repository** 78 | 79 | ```bash 80 | git clone https://github.com/stevenGarciaDev/simple-meditation-app-expo-react-native.git 81 | cd simple-meditation-app-expo-react-native 82 | ``` 83 | 84 | **Updating Dependencies** 85 | To ensure your project is using the latest stable versions of Expo and React Native: 86 | 87 | Run the Expo upgrade command: 88 | 89 | ```bash 90 | expo upgrade 91 | ``` 92 | 93 | This will update package.json and install the correct versions of dependencies. 94 | 95 | **Installation** 96 | 97 | If you did not run, _expo upgrade_, then install the project dependencies manually using npm: 98 | 99 | ```bash 100 | npm install 101 | ``` 102 | 103 | **Fixing Vulnerabilities** 104 | 105 | If you see security vulnerabilities or warnings after running `npm install`, follow these steps: 106 | 107 | 1. **Check for vulnerabilities** 108 | 109 | ```bash 110 | npm audit 111 | ``` 112 | 113 | 2. **Fix vulnerabilities** 114 | 115 | ```bash 116 | npm audit fix 117 | ``` 118 | 119 | **Running the Project** 120 | 121 | The --clear flag clears the cache. 122 | 123 | ```bash 124 | npx expo start --clear 125 | ``` 126 | 127 | **Expo Go** 128 | 129 | Download the [Expo Go](https://expo.dev/go) app onto your device, then use it to scan the QR code from Terminal and run. 130 | 131 | **iOS Simulator** 132 | 133 | Navigate to the [Expo documentation](https://docs.expo.dev/workflow/ios-simulator/) to learn how to install and run your application on an iOS Simulator for local development. 134 | 135 | **Android Emulator** 136 | 137 | Navigate to the [Expo documentation](https://docs.expo.dev/workflow/android-studio-emulator/) to learn how to install and run your application on an Android Emulator for local development. 138 | 139 | ## 🕸️ Snippets 140 | 141 |
142 | tailwind.config.js 143 | 144 | ```javascript 145 | /** @type {import('tailwindcss').Config} */ 146 | module.exports = { 147 | content: [ 148 | "./App.{js,jsx,ts,tsx}", 149 | "./app/**/*.{js,jsx,ts,tsx}", // Include all JS, JSX, TS, and TSX files in the app folder 150 | "./components/**/*.{js,jsx,ts,tsx}", // Include all JS, JSX, TS, and TSX files in the components folder] 151 | "./app/(tabs)/meditate.tsx", 152 | ], 153 | theme: { 154 | extend: { 155 | fontFamily: { 156 | rmono: ["Roboto-Mono", "sans-serif"], 157 | }, 158 | }, 159 | }, 160 | plugins: [], 161 | }; 162 | ``` 163 | 164 |
165 | 166 |
167 | Font Loaded 168 | 169 | ```javascript 170 | const [fontsLoaded, error] = useFonts({ 171 | "Roboto-Mono": require("../assets/fonts/RobotoMono-Regular.ttf"), 172 | }); 173 | ``` 174 | 175 |
176 | 177 |
178 | TypeScript file for Affirmation Images 179 | 180 | ```javascript 181 | import californiaBackyardOne from "@/assets/affirmation-images/California-backyard-1.webp"; 182 | import californiaBackyardTwo from "@/assets/affirmation-images/California-backyard-2.webp"; 183 | import californiaBackyardThree from "@/assets/affirmation-images/California-backyard-3.webp"; 184 | import californiaBackyardFour from "@/assets/affirmation-images/California-backyard-4.webp"; 185 | 186 | import englishCountrysideOne from "@/assets/affirmation-images/english-countryside-1.webp"; 187 | import englishCountrysideTwo from "@/assets/affirmation-images/english-countryside-2.webp"; 188 | import englishCountrysideThree from "@/assets/affirmation-images/english-countryside-3.webp"; 189 | import englishCountrysideFour from "@/assets/affirmation-images/english-countryside-4.webp"; 190 | 191 | import mountainMeditateOne from "@/assets/affirmation-images/mountain-meditate-1.webp"; 192 | import mountainMeditateTwo from "@/assets/affirmation-images/mountain-meditate-2.webp"; 193 | import mountainMeditateThree from "@/assets/affirmation-images/mountain-meditate-3.webp"; 194 | import mountainMeditateFour from "@/assets/affirmation-images/mountain-meditate-4.webp"; 195 | 196 | import nightSkyOne from "@/assets/affirmation-images/night-sky-1.webp"; 197 | import nightSkyTwo from "@/assets/affirmation-images/night-sky-2.webp"; 198 | import nightSkyThree from "@/assets/affirmation-images/night-sky-3.webp"; 199 | import nightSkyFour from "@/assets/affirmation-images/night-sky-4.webp"; 200 | 201 | import oregonOne from "@/assets/affirmation-images/oregon-1.webp"; 202 | import oregonTwo from "@/assets/affirmation-images/oregon-2.webp"; 203 | import oregonThree from "@/assets/affirmation-images/oregon-3.webp"; 204 | import oregonFour from "@/assets/affirmation-images/oregon-4.webp"; 205 | 206 | import relaxingRiverOne from "@/assets/affirmation-images/relaxing-river-1.webp"; 207 | import relaxingRiverTwo from "@/assets/affirmation-images/relaxing-river-2.webp"; 208 | import relaxingRiverThree from "@/assets/affirmation-images/relaxing-river-3.webp"; 209 | import relaxingRiverFour from "@/assets/affirmation-images/relaxing-river-4.webp"; 210 | 211 | import tuscannyOne from "@/assets/affirmation-images/Tuscanny-1.webp"; 212 | import tuscannyTwo from "@/assets/affirmation-images/Tuscanny-2.webp"; 213 | import tuscannyThree from "@/assets/affirmation-images/Tuscanny-3.webp"; 214 | import tuscannyFour from "@/assets/affirmation-images/Tuscanny-4.webp"; 215 | 216 | export default { 217 | californiaBackyardOne, 218 | californiaBackyardTwo, 219 | californiaBackyardThree, 220 | californiaBackyardFour, 221 | englishCountrysideOne, 222 | englishCountrysideTwo, 223 | englishCountrysideThree, 224 | englishCountrysideFour, 225 | mountainMeditateOne, 226 | mountainMeditateTwo, 227 | mountainMeditateThree, 228 | mountainMeditateFour, 229 | nightSkyOne, 230 | nightSkyTwo, 231 | nightSkyThree, 232 | nightSkyFour, 233 | oregonOne, 234 | oregonTwo, 235 | oregonThree, 236 | oregonFour, 237 | relaxingRiverOne, 238 | relaxingRiverTwo, 239 | relaxingRiverThree, 240 | relaxingRiverFour, 241 | tuscannyOne, 242 | tuscannyTwo, 243 | tuscannyThree, 244 | tuscannyFour, 245 | }; 246 | ``` 247 | 248 |
249 | 250 |
251 | TypeScript file for Meditation images 252 | 253 | ```javascript 254 | import treeImage from "@/assets/meditation-images/trees.webp"; 255 | import meditatingUnderTree from "@/assets/meditation-images/meditate-under-tree.webp"; 256 | import riverImage from "@/assets/meditation-images/river.webp"; 257 | import beachImage from "@/assets/meditation-images/beach.webp"; 258 | import yosemiteStars from "@/assets/meditation-images/yosemite-stars.webp"; 259 | import waterfall from "@/assets/meditation-images/waterfall.webp"; 260 | 261 | export default [ 262 | treeImage, 263 | riverImage, 264 | meditatingUnderTree, 265 | beachImage, 266 | yosemiteStars, 267 | waterfall, 268 | ]; 269 | ``` 270 | 271 |
272 | 273 |
274 | TypeScript file for Meditation data 275 | 276 | ```javascript 277 | export interface MeditationType { 278 | id: number; 279 | title: string; 280 | image: string; 281 | audio: string; 282 | } 283 | 284 | export const MEDITATION_DATA: MeditationType[] = [ 285 | { 286 | id: 1, 287 | title: "Mountains", 288 | image: "trees.webp", 289 | audio: "trees.mp3", 290 | }, 291 | { 292 | id: 2, 293 | title: "Rivers", 294 | image: "river.webp", 295 | audio: "river.mp3", 296 | }, 297 | { 298 | id: 3, 299 | title: "Sunset", 300 | image: "meditate-under-tree.webp", 301 | audio: "meditate-under-tree.mp3", 302 | }, 303 | { 304 | id: 4, 305 | title: "Beaches", 306 | image: "beach.webp", 307 | audio: "beach.mp3", 308 | }, 309 | { 310 | id: 5, 311 | title: "Starry Night", 312 | image: "yosemite-stars.webp", 313 | audio: "yosemite-stars.mp3", 314 | }, 315 | { 316 | id: 6, 317 | title: "Waterfall", 318 | image: "waterfall.webp", 319 | audio: "waterfall.mp3", 320 | }, 321 | ]; 322 | 323 | export const AUDIO_FILES: { [key: string]: any } = { 324 | "trees.mp3": require("@/assets/audio/trees.mp3"), 325 | "river.mp3": require("@/assets/audio/river.mp3"), 326 | "meditate-under-tree.mp3": require("@/assets/audio/meditate-under-tree.mp3"), 327 | "beach.mp3": require("@/assets/audio/beach.mp3"), 328 | "yosemite-stars.mp3": require("@/assets/audio/yosemite-stars.mp3"), 329 | "waterfall.mp3": require("@/assets/audio/waterfall.mp3"), 330 | }; 331 | ``` 332 | 333 |
334 | 335 |
336 | TypeScript file for Affirmation Gallery 337 | 338 | ```javascript 339 | import images from "@/constants/affirmation-images"; 340 | 341 | const AFFIRMATION_GALLERY = [ 342 | { 343 | title: "Positivity", 344 | data: [ 345 | { 346 | id: 1, 347 | text: "Every day brings new opportunities to grow and excel. I am constantly evolving and improving. My positive mindset attracts abundance and success. I am grateful for the journey and the lessons it brings.", 348 | image: images.californiaBackyardOne, 349 | }, 350 | { 351 | id: 2, 352 | text: "I am the architect of my destiny, and I build it with positivity and determination. Challenges are stepping stones to my greatness. I embrace each moment with enthusiasm and confidence. My future is bright and limitless.", 353 | image: images.californiaBackyardTwo, 354 | }, 355 | { 356 | id: 3, 357 | text: "I radiate positivity and inspire those around me. My energy is contagious, and it fuels my drive to succeed. I focus on solutions, not problems, and I am resilient in the face of adversity. I am committed to living a life of purpose and joy.", 358 | image: images.californiaBackyardThree, 359 | }, 360 | { 361 | id: 4, 362 | text: "I believe in my potential and trust the process of life. Every setback is a setup for a greater comeback. I choose to see the good in every situation and remain optimistic. My passion and persistence are the keys to my unstoppable success.", 363 | image: images.californiaBackyardFour, 364 | }, 365 | ], 366 | }, 367 | { 368 | title: "Reduce Anxiety", 369 | data: [ 370 | { 371 | id: 5, 372 | text: "I am in control of my thoughts, and I choose peace over worry. Each breath I take calms my mind and soothes my soul. I release the need to stress over what I cannot control. I am strong, capable, and at ease in all situations.", 373 | image: images.englishCountrysideOne, 374 | }, 375 | { 376 | id: 6, 377 | text: "I embrace calmness and serenity as my natural state of being. My mind is clear, my heart is light, and I am present in this moment. Anxiety has no power over me, for I am resilient and grounded. I trust in my ability to handle whatever comes my way.", 378 | image: images.englishCountrysideTwo, 379 | }, 380 | { 381 | id: 7, 382 | text: "Every day, I grow more confident in managing my stress and anxiety. I focus on positive thoughts and let go of fears that do not serve me. I am surrounded by support and love, and I embrace the peace within me. My inner strength guides me through any challenge with grace and calm.", 383 | image: images.englishCountrysideThree, 384 | }, 385 | { 386 | id: 8, 387 | text: "I release tension and embrace relaxation in my mind and body. I am safe, I am loved, and I am free from the grip of anxiety. Each step I take is filled with confidence and tranquility. I choose to live in the present moment, where peace and joy reside.", 388 | image: images.englishCountrysideFour, 389 | }, 390 | ], 391 | }, 392 | { 393 | title: "Success", 394 | data: [ 395 | { 396 | id: 9, 397 | text: "I am destined for greatness, and every step I take leads me closer to success. My dedication and hard work are the building blocks of my achievements. I see opportunities where others see obstacles. Success is my journey, and I embrace it with passion and perseverance.", 398 | image: images.mountainMeditateOne, 399 | }, 400 | { 401 | id: 10, 402 | text: "I am a powerful creator of my destiny, and I attract success effortlessly. My vision is clear, my goals are set, and my actions are aligned with my highest purpose. I celebrate each victory, no matter how small, as a stepping stone to my ultimate triumph. I am unstoppable, and my potential is limitless.", 403 | image: images.mountainMeditateTwo, 404 | }, 405 | { 406 | id: 11, 407 | text: "I believe in my abilities and trust the process of achieving success. Challenges are opportunities for growth and refinement. I am focused, driven, and committed to my goals. Success flows to me naturally because I am prepared and deserving.", 408 | image: images.mountainMeditateThree, 409 | }, 410 | { 411 | id: 12, 412 | text: "I am a magnet for success and abundance in all areas of my life. My mindset is positive, and my actions are intentional. I learn from every experience and continuously improve. Success is not a destination but a journey I enjoy every day.", 413 | image: images.mountainMeditateFour, 414 | }, 415 | ], 416 | }, 417 | { 418 | title: "Self-Belief", 419 | data: [ 420 | { 421 | id: 13, 422 | text: "I believe in my infinite potential and trust my inner wisdom. Every day, I grow more confident in my abilities and my purpose. I am capable of achieving greatness and worthy of all my dreams. My self-belief is the foundation of my success.", 423 | image: images.nightSkyOne, 424 | }, 425 | { 426 | id: 14, 427 | text: "I trust myself and my journey, knowing I have everything I need within me. My unique strengths and talents guide me towards my goals. I am resilient and can overcome any challenge that comes my way. My belief in myself fuels my determination and courage.", 428 | image: images.nightSkyTwo, 429 | }, 430 | { 431 | id: 15, 432 | text: "I am confident in who I am and what I have to offer the world. Each step I take is filled with purpose and self-assurance. I embrace my individuality and celebrate my achievements. My self-belief empowers me to create the life I desire.", 433 | image: images.nightSkyThree, 434 | }, 435 | { 436 | id: 16, 437 | text: "I am the master of my destiny and believe in my ability to shape my future. My thoughts are powerful, and I choose to think positively about myself. I am worthy of success and happiness. With each passing day, my self-belief grows stronger and unwavering.", 438 | image: images.nightSkyFour, 439 | }, 440 | ], 441 | }, 442 | { 443 | title: "Mental Health", 444 | data: [ 445 | { 446 | id: 17, 447 | text: "I prioritize my mental health and nurture my mind with positivity and care. I am resilient and capable of overcoming any challenge that comes my way. Each day, I grow stronger, more balanced, and more at peace. My mental well-being is a cornerstone of my overall success.", 448 | image: images.oregonOne, 449 | }, 450 | { 451 | id: 18, 452 | text: "I embrace the journey of healing and growth, knowing that my mental health is worth every effort. I am patient with myself and recognize my progress, no matter how small. Positive thoughts and actions uplift my spirit and renew my strength. I am in control of my mental well-being and choose to thrive.", 453 | image: images.oregonTwo, 454 | }, 455 | { 456 | id: 19, 457 | text: "I am mindful of my thoughts and choose to focus on what brings me joy and peace. My mind is a powerful tool, and I use it to create a life of happiness and fulfillment. I am deserving of self-care and take time to nurture my mental health daily. With each breath, I release stress and embrace calmness.", 458 | image: images.oregonThree, 459 | }, 460 | { 461 | id: 20, 462 | text: "I am committed to maintaining a healthy mind and nurturing my emotional well-being. I surround myself with positive influences and seek support when needed. My mental health is a priority, and I take proactive steps to protect and enhance it. I am grateful for my resilience and the strength it brings to my life.", 463 | image: images.oregonFour, 464 | }, 465 | ], 466 | }, 467 | { 468 | title: "Law of Attraction", 469 | data: [ 470 | { 471 | id: 21, 472 | text: "I am a powerful magnet for all that I desire, attracting abundance and success effortlessly. My thoughts are aligned with positivity, and I visualize my goals with clarity and conviction. The universe responds to my optimistic energy, bringing opportunities and blessings into my life. I am grateful for the manifestations that unfold each day.", 473 | image: images.relaxingRiverOne, 474 | }, 475 | { 476 | id: 22, 477 | text: "I attract success, love, and prosperity with every positive thought I have. My mind is a beacon of positivity, drawing the best into my life. I focus on what I want, not on what I fear, and the universe aligns to make it happen. I am worthy of all the good that comes my way, and I embrace it fully.", 478 | image: images.relaxingRiverTwo, 479 | }, 480 | { 481 | id: 23, 482 | text: "I am in harmony with the universal laws and trust that everything I desire is on its way to me. My energy is vibrant and magnetic, attracting abundance in all areas of my life. I believe in the power of my intentions and the certainty of their manifestation. Every day, I see evidence of my desires becoming reality.", 483 | image: images.relaxingRiverThree, 484 | }, 485 | { 486 | id: 24, 487 | text: "I consciously create my reality through my thoughts, feelings, and actions. I attract people and circumstances that support my growth and happiness. My positive mindset and unwavering belief in my dreams set the stage for their manifestation. I am grateful for the abundance and joy that flow into my life effortlessly.", 488 | image: images.relaxingRiverFour, 489 | }, 490 | ], 491 | }, 492 | { 493 | title: "Limiting Beliefs", 494 | data: [ 495 | { 496 | id: 25, 497 | text: "I release all limiting beliefs and embrace my limitless potential. My mind is free from doubts, and I trust in my ability to achieve greatness. Each day, I replace negative thoughts with empowering beliefs. I am capable, worthy, and destined for success.", 498 | image: images.tuscannyOne, 499 | }, 500 | { 501 | id: 26, 502 | text: "I am no longer held back by past limitations; I create my own reality. My beliefs shape my future, and I choose to believe in my strength and potential. I break through barriers and achieve what I once thought impossible. My life is a reflection of my powerful, positive mindset.", 503 | image: images.tuscannyTwo, 504 | }, 505 | { 506 | id: 27, 507 | text: "I am the master of my thoughts, and I choose to eliminate all limiting beliefs. I see challenges as opportunities for growth and success. My potential is boundless, and I am constantly evolving into the best version of myself. I believe in my power to create a life of abundance and joy.", 508 | image: images.tuscannyThree, 509 | }, 510 | { 511 | id: 28, 512 | text: "I replace limiting beliefs with thoughts of possibility and greatness. My mind is a fertile ground for positive, empowering beliefs. I attract success and happiness because I believe I deserve them. Every step I take is guided by confidence and self-assurance, leading me to my highest potential.", 513 | image: images.tuscannyFour, 514 | }, 515 | ], 516 | }, 517 | ]; 518 | 519 | export default AFFIRMATION_GALLERY; 520 | ``` 521 | 522 |
523 | 524 | ## 🔗 Links 525 | 526 | Assets and constants used in the project can be found [here](https://drive.google.com/drive/folders/1ZNn-26vUkscU4Bx08BQsyY_i0HkbuzH5?usp=sharing) 527 | 528 | ## 🚀 More 529 | 530 | **Advance your skills with StevenCodeCraft Courses** 531 | 532 | Enjoyed creating this project? Dive deeper into web development fundamentals with our PRO courses, offering beginner-friendly learning material. Give it a go!" 533 | 534 | 535 | StevenCodeCraft.com 536 | 537 | -------------------------------------------------------------------------------- /app.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /app.json: -------------------------------------------------------------------------------- 1 | { 2 | "expo": { 3 | "name": "my-app", 4 | "newArchEnabled": true, 5 | "slug": "my-app", 6 | "version": "1.0.0", 7 | "orientation": "portrait", 8 | "icon": "./assets/icon.png", 9 | "scheme": "simplemeditation", 10 | "userInterfaceStyle": "light", 11 | "splash": { 12 | "image": "./assets/simpleMeditationLogo.png", 13 | "resizeMode": "contain", 14 | "backgroundColor": "#ffffff" 15 | }, 16 | "assetBundlePatterns": ["**/*"], 17 | "ios": { 18 | "supportsTablet": true 19 | }, 20 | "android": { 21 | "adaptiveIcon": { 22 | "foregroundImage": "./assets/adaptive-icon.png", 23 | "backgroundColor": "#ffffff" 24 | } 25 | }, 26 | "web": { 27 | "favicon": "./assets/favicon.png" 28 | }, 29 | "plugins": ["expo-router", "expo-font"] 30 | } 31 | } 32 | -------------------------------------------------------------------------------- /app/(modal)/adjust-meditation-duration.tsx: -------------------------------------------------------------------------------- 1 | import AppGradient from "@/components/AppGradient"; 2 | import CustomButton from "@/components/CustomButton"; 3 | import { TimerContext } from "@/context/TimerContext"; 4 | import { AntDesign } from "@expo/vector-icons"; 5 | import { router } from "expo-router"; 6 | import React, { useContext } from "react"; 7 | import { Pressable, Text, View } from "react-native"; 8 | 9 | const AdjustMeditationDuration = () => { 10 | const { setDuration } = useContext(TimerContext); 11 | 12 | const handlePress = (duration: number) => { 13 | setDuration(duration); 14 | router.back(); 15 | }; 16 | 17 | return ( 18 | 19 | 23 | router.back()} 25 | className="absolute top-8 left-6 z-10" 26 | > 27 | 28 | 29 | 30 | 31 | 32 | Adjust your meditation duration 33 | 34 | 35 | 36 | 37 | handlePress(10)} 40 | containerStyles="mb-5" 41 | /> 42 | handlePress(5 * 60)} 45 | containerStyles="mb-5" 46 | /> 47 | handlePress(10 * 60)} 50 | containerStyles="mb-5" 51 | /> 52 | handlePress(15 * 60)} 55 | containerStyles="mb-5" 56 | /> 57 | 58 | 59 | 60 | 61 | ); 62 | }; 63 | 64 | export default AdjustMeditationDuration; 65 | -------------------------------------------------------------------------------- /app/(tabs)/_layout.tsx: -------------------------------------------------------------------------------- 1 | import { Entypo, MaterialCommunityIcons } from "@expo/vector-icons"; 2 | import { Tabs } from "expo-router"; 3 | import Colors from "@/constants/Colors"; 4 | import React from "react"; 5 | 6 | export const unstable_settings = { 7 | // Ensure that reloading on `/modal` keeps a back button present. 8 | initialRouteName: "(tabs)", 9 | }; 10 | 11 | const Page = () => { 12 | return ( 13 | 19 | ( 24 | 29 | ), 30 | }} 31 | /> 32 | ( 37 | 38 | ), 39 | }} 40 | /> 41 | 42 | ); 43 | }; 44 | 45 | export default Page; 46 | -------------------------------------------------------------------------------- /app/(tabs)/affirmations/[itemId].tsx: -------------------------------------------------------------------------------- 1 | import { AntDesign } from "@expo/vector-icons"; 2 | import { GalleryPreviewData } from "@/constants/models/AffirmationCategory"; 3 | import { router, useLocalSearchParams } from "expo-router"; 4 | import { 5 | View, 6 | Text, 7 | ImageBackground, 8 | Pressable, 9 | ScrollView, 10 | } from "react-native"; 11 | import AFFIRMATION_GALLERY from "@/constants/affirmation-gallary"; 12 | import AppGradient from "@/components/AppGradient"; 13 | import React, { useEffect, useState } from "react"; 14 | 15 | const AffirmationPractice = () => { 16 | const { itemId } = useLocalSearchParams(); 17 | 18 | const [affirmation, setAffirmation] = useState(); 19 | const [sentences, setSentences] = useState([]); 20 | 21 | useEffect(() => { 22 | for (let idx = 0; idx < AFFIRMATION_GALLERY.length; idx++) { 23 | const affirmationData = AFFIRMATION_GALLERY[idx].data; 24 | 25 | const affirmationToStart = affirmationData.find( 26 | (a) => a.id === Number(itemId) 27 | ); 28 | 29 | if (affirmationToStart) { 30 | setAffirmation(affirmationToStart); 31 | 32 | const affirmationsArray = affirmationToStart.text.split("."); 33 | 34 | // Remove the last element if it's an empty string 35 | if (affirmationsArray[affirmationsArray.length - 1] === "") { 36 | affirmationsArray.pop(); 37 | } 38 | 39 | setSentences(affirmationsArray); 40 | return; 41 | } 42 | } 43 | }, []); 44 | 45 | return ( 46 | 47 | 52 | 53 | router.back()} 55 | className="absolute top-16 left-6 z-10" 56 | > 57 | 58 | 59 | 60 | 64 | 65 | 66 | {sentences.map((sentence, idx) => ( 67 | 71 | {sentence}. 72 | 73 | ))} 74 | 75 | 76 | 77 | 78 | 79 | 80 | ); 81 | }; 82 | 83 | export default AffirmationPractice; 84 | -------------------------------------------------------------------------------- /app/(tabs)/affirmations/_layout.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { Stack } from "expo-router"; 3 | 4 | const AffirmationsLayout = () => { 5 | return ( 6 | 7 | 13 | 19 | 20 | ); 21 | }; 22 | 23 | export default AffirmationsLayout; 24 | -------------------------------------------------------------------------------- /app/(tabs)/affirmations/index.tsx: -------------------------------------------------------------------------------- 1 | import GuidedAffirmationsGallery from "@/components/GuidedAffirmationsGallery"; 2 | import AFFIRMATION_GALLERY from "@/constants/affirmation-gallary"; 3 | import images from "@/constants/affirmation-images"; 4 | import { LinearGradient } from "expo-linear-gradient"; 5 | import { StatusBar } from "expo-status-bar"; 6 | import React from "react"; 7 | import { ScrollView, StyleSheet, Text, View } from "react-native"; 8 | import { useSafeAreaInsets } from "react-native-safe-area-context"; 9 | 10 | const Page = () => { 11 | const insets = useSafeAreaInsets(); 12 | 13 | return ( 14 | 15 | 21 | 22 | 23 | Change your beliefs with affirmations 24 | 25 | 26 | {AFFIRMATION_GALLERY.map((g) => ( 27 | 32 | ))} 33 | 34 | 35 | 36 | 37 | 38 | ); 39 | }; 40 | 41 | const galleryData = [ 42 | { 43 | title: "Positivity", 44 | data: [ 45 | { 46 | id: 1, 47 | name: "test", 48 | image: images.californiaBackyardOne, 49 | }, 50 | { 51 | id: 2, 52 | name: "test", 53 | image: images.californiaBackyardTwo, 54 | }, 55 | { 56 | id: 3, 57 | name: "test", 58 | image: images.californiaBackyardThree, 59 | }, 60 | { 61 | id: 4, 62 | name: "test", 63 | image: images.californiaBackyardFour, 64 | }, 65 | ], 66 | }, 67 | { 68 | title: "Reduce Anxiety", 69 | data: [ 70 | { 71 | id: 1, 72 | name: "test", 73 | image: images.englishCountrysideOne, 74 | }, 75 | { 76 | id: 2, 77 | name: "test", 78 | image: images.englishCountrysideTwo, 79 | }, 80 | { 81 | id: 3, 82 | name: "test", 83 | image: images.englishCountrysideThree, 84 | }, 85 | { 86 | id: 4, 87 | name: "test", 88 | image: images.englishCountrysideFour, 89 | }, 90 | ], 91 | }, 92 | { 93 | title: "Success", 94 | data: [ 95 | { 96 | id: 1, 97 | name: "test", 98 | image: images.mountainMeditateOne, 99 | }, 100 | { 101 | id: 2, 102 | name: "test", 103 | image: images.mountainMeditateTwo, 104 | }, 105 | { 106 | id: 3, 107 | name: "test", 108 | image: images.mountainMeditateThree, 109 | }, 110 | { 111 | id: 4, 112 | name: "test", 113 | image: images.mountainMeditateFour, 114 | }, 115 | ], 116 | }, 117 | { 118 | title: "Self-Belief", 119 | data: [ 120 | { 121 | id: 1, 122 | name: "test", 123 | image: images.nightSkyOne, 124 | }, 125 | { 126 | id: 2, 127 | name: "test", 128 | image: images.nightSkyTwo, 129 | }, 130 | { 131 | id: 3, 132 | name: "test", 133 | image: images.nightSkyThree, 134 | }, 135 | { 136 | id: 4, 137 | name: "test", 138 | image: images.nightSkyFour, 139 | }, 140 | ], 141 | }, 142 | { 143 | title: "Mental Health", 144 | data: [ 145 | { 146 | id: 1, 147 | name: "test", 148 | image: images.oregonOne, 149 | }, 150 | { 151 | id: 2, 152 | name: "test", 153 | image: images.oregonTwo, 154 | }, 155 | { 156 | id: 3, 157 | name: "test", 158 | image: images.oregonThree, 159 | }, 160 | { 161 | id: 4, 162 | name: "test", 163 | image: images.oregonFour, 164 | }, 165 | ], 166 | }, 167 | { 168 | title: "Law of Attraction", 169 | data: [ 170 | { 171 | id: 1, 172 | name: "test", 173 | image: images.relaxingRiverOne, 174 | }, 175 | { 176 | id: 2, 177 | name: "test", 178 | image: images.relaxingRiverTwo, 179 | }, 180 | { 181 | id: 3, 182 | name: "test", 183 | image: images.relaxingRiverThree, 184 | }, 185 | { 186 | id: 4, 187 | name: "test", 188 | image: images.relaxingRiverFour, 189 | }, 190 | ], 191 | }, 192 | { 193 | title: "Limiting Beliefs", 194 | data: [ 195 | { 196 | id: 1, 197 | name: "test", 198 | image: images.tuscannyOne, 199 | }, 200 | { 201 | id: 2, 202 | name: "test", 203 | image: images.tuscannyTwo, 204 | }, 205 | { 206 | id: 3, 207 | name: "test", 208 | image: images.tuscannyThree, 209 | }, 210 | { 211 | id: 4, 212 | name: "test", 213 | image: images.tuscannyFour, 214 | }, 215 | ], 216 | }, 217 | ]; 218 | 219 | const styles = StyleSheet.create({ 220 | container: { 221 | flex: 1, 222 | }, 223 | background: { 224 | flex: 1, 225 | }, 226 | }); 227 | 228 | export default Page; 229 | -------------------------------------------------------------------------------- /app/(tabs)/nature-meditate.tsx: -------------------------------------------------------------------------------- 1 | import { LinearGradient } from "expo-linear-gradient"; 2 | import { StatusBar } from "expo-status-bar"; 3 | import { router } from "expo-router"; 4 | import React from "react"; 5 | import { 6 | FlatList, 7 | ImageBackground, 8 | Pressable, 9 | StyleSheet, 10 | Text, 11 | View, 12 | } from "react-native"; 13 | 14 | import MEDITATION_IMAGES from "@/constants/meditation-images"; 15 | 16 | import { MEDITATION_DATA, MeditationType } from "@/constants/MeditationData"; 17 | import AppGradient from "@/components/AppGradient"; 18 | 19 | const Page = () => { 20 | return ( 21 | 22 | 26 | 27 | 28 | Welcome Steven 29 | 30 | 31 | Start your meditation practice today 32 | 33 | 34 | 35 | item.id.toString()} 39 | showsVerticalScrollIndicator={false} 40 | renderItem={({ item }) => ( 41 | 43 | router.push(`/meditate/${item.id}`) 44 | } 45 | className="h-48 my-3 rounded-md overflow-hidden" 46 | > 47 | 52 | 60 | 61 | {item.title} 62 | 63 | 64 | 65 | 66 | )} 67 | /> 68 | 69 | 70 | 71 | 72 | ); 73 | }; 74 | 75 | const styles = StyleSheet.create({ 76 | container: { 77 | flex: 1, 78 | }, 79 | background: { 80 | flex: 1, 81 | }, 82 | backgroundImage: { 83 | flex: 1, 84 | borderRadius: 10, 85 | justifyContent: "center", 86 | }, 87 | gradient: { 88 | alignItems: "center", 89 | height: "100%", 90 | justifyContent: "center", 91 | width: "100%", 92 | }, 93 | list: { 94 | paddingBottom: 150, 95 | }, 96 | }); 97 | 98 | export default Page; 99 | -------------------------------------------------------------------------------- /app/[...unmatched].tsx: -------------------------------------------------------------------------------- 1 | import { Link } from "expo-router"; 2 | import React from "react"; 3 | import { View, StyleSheet } from "react-native"; 4 | 5 | const Page = () => { 6 | return ( 7 | 8 | Ready to meditate 9 | 10 | ); 11 | }; 12 | 13 | const styles = StyleSheet.create({ 14 | container: {}, 15 | }); 16 | 17 | export default Page; 18 | -------------------------------------------------------------------------------- /app/_layout.tsx: -------------------------------------------------------------------------------- 1 | import TimerProvider from "@/context/TimerContext"; 2 | import { useFonts } from "expo-font"; 3 | import { SplashScreen, Stack } from "expo-router"; 4 | import { useEffect } from "react"; 5 | import { SafeAreaProvider } from "react-native-safe-area-context"; 6 | 7 | // this will prevent the flash screen from auto hiding until loading all the assets is complete 8 | SplashScreen.preventAutoHideAsync(); 9 | 10 | export default function RootLayout() { 11 | const [fontsLoaded, error] = useFonts({ 12 | "Roboto-Mono": require("../assets/fonts/RobotoMono-Regular.ttf"), 13 | }); 14 | 15 | useEffect(() => { 16 | if (error) throw error; 17 | if (fontsLoaded) SplashScreen.hideAsync(); 18 | }, [fontsLoaded, error]); 19 | 20 | if (!fontsLoaded) { 21 | return null; 22 | } 23 | 24 | if (!fontsLoaded && !error) { 25 | return null; 26 | } 27 | 28 | return ( 29 | 30 | 31 | 32 | 36 | 40 | 44 | 48 | 49 | 50 | 51 | ); 52 | } 53 | -------------------------------------------------------------------------------- /app/index.tsx: -------------------------------------------------------------------------------- 1 | import { View, Text, Image, ImageBackground } from "react-native"; 2 | import React from "react"; 3 | import { SafeAreaView } from "react-native-safe-area-context"; 4 | import { StatusBar } from "expo-status-bar"; 5 | import CustomButton from "@/components/CustomButton"; 6 | import AppGradient from "@/components/AppGradient"; 7 | import { useRouter } from "expo-router"; 8 | import Animated, { 9 | FadeInDown, 10 | FadeInUp, 11 | withSpring, 12 | } from "react-native-reanimated"; 13 | 14 | import beachImage from "@/assets/meditation-images/beach.webp"; 15 | 16 | const App = () => { 17 | const router = useRouter(); 18 | 19 | return ( 20 | 21 | 26 | 30 | 31 | 37 | 38 | Simple Meditation 39 | 40 | 41 | Simplifying Meditation for Everyone 42 | 43 | 44 | 45 | 51 | router.push("/nature-meditate")} 53 | title="Get Started" 54 | /> 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | ); 63 | }; 64 | 65 | export default App; 66 | -------------------------------------------------------------------------------- /app/meditate/[id].tsx: -------------------------------------------------------------------------------- 1 | import AppGradient from "@/components/AppGradient"; 2 | import { router, useLocalSearchParams } from "expo-router"; 3 | import React, { useContext, useEffect, useState } from "react"; 4 | import { ImageBackground, Pressable, Text, View } from "react-native"; 5 | import { AntDesign } from "@expo/vector-icons"; 6 | import { Audio } from "expo-av"; 7 | import CustomButton from "@/components/CustomButton"; 8 | 9 | import MEDITATION_IMAGES from "@/constants/meditation-images"; 10 | import { TimerContext } from "@/context/TimerContext"; 11 | import { MEDITATION_DATA, AUDIO_FILES } from "@/constants/MeditationData"; 12 | 13 | const Page = () => { 14 | const { id } = useLocalSearchParams(); 15 | 16 | const { duration: secondsRemaining, setDuration } = 17 | useContext(TimerContext); 18 | 19 | const [isMeditating, setMeditating] = useState(false); 20 | const [audioSound, setSound] = useState(); 21 | const [isPlayingAudio, setPlayingAudio] = useState(false); 22 | 23 | useEffect(() => { 24 | let timerId: NodeJS.Timeout; 25 | 26 | // Exit early when we reach 0 27 | if (secondsRemaining === 0) { 28 | if (isPlayingAudio) audioSound?.pauseAsync(); 29 | setMeditating(false); 30 | setPlayingAudio(false); 31 | return; 32 | } 33 | 34 | if (isMeditating) { 35 | // Save the interval ID to clear it when the component unmounts 36 | timerId = setTimeout(() => { 37 | setDuration(secondsRemaining - 1); 38 | }, 1000); 39 | } 40 | 41 | // Clear timeout if the component is unmounted or the time left changes 42 | return () => { 43 | clearTimeout(timerId); 44 | }; 45 | }, [secondsRemaining, isMeditating]); 46 | 47 | useEffect(() => { 48 | return () => { 49 | setDuration(10); 50 | audioSound?.unloadAsync(); 51 | }; 52 | }, [audioSound]); 53 | 54 | const initializeSound = async () => { 55 | const audioFileName = MEDITATION_DATA[Number(id) - 1].audio; 56 | 57 | const { sound } = await Audio.Sound.createAsync( 58 | AUDIO_FILES[audioFileName] 59 | ); 60 | setSound(sound); 61 | return sound; 62 | }; 63 | 64 | const togglePlayPause = async () => { 65 | const sound = audioSound ? audioSound : await initializeSound(); 66 | 67 | const status = await sound?.getStatusAsync(); 68 | 69 | if (status?.isLoaded && !isPlayingAudio) { 70 | await sound?.playAsync(); 71 | setPlayingAudio(true); 72 | } else { 73 | await sound?.pauseAsync(); 74 | setPlayingAudio(false); 75 | } 76 | }; 77 | 78 | async function toggleMeditationSessionStatus() { 79 | if (secondsRemaining === 0) setDuration(10); 80 | 81 | setMeditating(!isMeditating); 82 | 83 | await togglePlayPause(); 84 | } 85 | 86 | const handleAdjustDuration = () => { 87 | if (isMeditating) toggleMeditationSessionStatus(); 88 | 89 | router.push("/(modal)/adjust-meditation-duration"); 90 | }; 91 | 92 | // Format the timeLeft to ensure two digits are displayed 93 | const formattedTimeMinutes = String( 94 | Math.floor(secondsRemaining / 60) 95 | ).padStart(2, "0"); 96 | const formattedTimeSeconds = String(secondsRemaining % 60).padStart(2, "0"); 97 | 98 | return ( 99 | 100 | 105 | 106 | router.back()} 108 | className="absolute top-16 left-6 z-10" 109 | > 110 | 111 | 112 | 113 | 114 | 115 | 116 | {formattedTimeMinutes}.{formattedTimeSeconds} 117 | 118 | 119 | 120 | 121 | 122 | 126 | 131 | 132 | 133 | 134 | 135 | ); 136 | }; 137 | 138 | export default Page; 139 | -------------------------------------------------------------------------------- /assets/adaptive-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stevenGarciaDev/simple-meditation-app-expo-react-native/b650ff74a04b30af7419afb219ed00bb3b2008e3/assets/adaptive-icon.png -------------------------------------------------------------------------------- /assets/affirmation-images/California-backyard-1.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stevenGarciaDev/simple-meditation-app-expo-react-native/b650ff74a04b30af7419afb219ed00bb3b2008e3/assets/affirmation-images/California-backyard-1.webp -------------------------------------------------------------------------------- /assets/affirmation-images/California-backyard-2.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stevenGarciaDev/simple-meditation-app-expo-react-native/b650ff74a04b30af7419afb219ed00bb3b2008e3/assets/affirmation-images/California-backyard-2.webp -------------------------------------------------------------------------------- /assets/affirmation-images/California-backyard-3.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stevenGarciaDev/simple-meditation-app-expo-react-native/b650ff74a04b30af7419afb219ed00bb3b2008e3/assets/affirmation-images/California-backyard-3.webp -------------------------------------------------------------------------------- /assets/affirmation-images/California-backyard-4.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stevenGarciaDev/simple-meditation-app-expo-react-native/b650ff74a04b30af7419afb219ed00bb3b2008e3/assets/affirmation-images/California-backyard-4.webp -------------------------------------------------------------------------------- /assets/affirmation-images/Tuscanny-1.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stevenGarciaDev/simple-meditation-app-expo-react-native/b650ff74a04b30af7419afb219ed00bb3b2008e3/assets/affirmation-images/Tuscanny-1.webp -------------------------------------------------------------------------------- /assets/affirmation-images/Tuscanny-2.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stevenGarciaDev/simple-meditation-app-expo-react-native/b650ff74a04b30af7419afb219ed00bb3b2008e3/assets/affirmation-images/Tuscanny-2.webp -------------------------------------------------------------------------------- /assets/affirmation-images/Tuscanny-3.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stevenGarciaDev/simple-meditation-app-expo-react-native/b650ff74a04b30af7419afb219ed00bb3b2008e3/assets/affirmation-images/Tuscanny-3.webp -------------------------------------------------------------------------------- /assets/affirmation-images/Tuscanny-4.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stevenGarciaDev/simple-meditation-app-expo-react-native/b650ff74a04b30af7419afb219ed00bb3b2008e3/assets/affirmation-images/Tuscanny-4.webp -------------------------------------------------------------------------------- /assets/affirmation-images/english-countryside-1.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stevenGarciaDev/simple-meditation-app-expo-react-native/b650ff74a04b30af7419afb219ed00bb3b2008e3/assets/affirmation-images/english-countryside-1.webp -------------------------------------------------------------------------------- /assets/affirmation-images/english-countryside-2.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stevenGarciaDev/simple-meditation-app-expo-react-native/b650ff74a04b30af7419afb219ed00bb3b2008e3/assets/affirmation-images/english-countryside-2.webp -------------------------------------------------------------------------------- /assets/affirmation-images/english-countryside-3.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stevenGarciaDev/simple-meditation-app-expo-react-native/b650ff74a04b30af7419afb219ed00bb3b2008e3/assets/affirmation-images/english-countryside-3.webp -------------------------------------------------------------------------------- /assets/affirmation-images/english-countryside-4.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stevenGarciaDev/simple-meditation-app-expo-react-native/b650ff74a04b30af7419afb219ed00bb3b2008e3/assets/affirmation-images/english-countryside-4.webp -------------------------------------------------------------------------------- /assets/affirmation-images/mountain-meditate-1.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stevenGarciaDev/simple-meditation-app-expo-react-native/b650ff74a04b30af7419afb219ed00bb3b2008e3/assets/affirmation-images/mountain-meditate-1.webp -------------------------------------------------------------------------------- /assets/affirmation-images/mountain-meditate-2.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stevenGarciaDev/simple-meditation-app-expo-react-native/b650ff74a04b30af7419afb219ed00bb3b2008e3/assets/affirmation-images/mountain-meditate-2.webp -------------------------------------------------------------------------------- /assets/affirmation-images/mountain-meditate-3.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stevenGarciaDev/simple-meditation-app-expo-react-native/b650ff74a04b30af7419afb219ed00bb3b2008e3/assets/affirmation-images/mountain-meditate-3.webp -------------------------------------------------------------------------------- /assets/affirmation-images/mountain-meditate-4.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stevenGarciaDev/simple-meditation-app-expo-react-native/b650ff74a04b30af7419afb219ed00bb3b2008e3/assets/affirmation-images/mountain-meditate-4.webp -------------------------------------------------------------------------------- /assets/affirmation-images/night-sky-1.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stevenGarciaDev/simple-meditation-app-expo-react-native/b650ff74a04b30af7419afb219ed00bb3b2008e3/assets/affirmation-images/night-sky-1.webp -------------------------------------------------------------------------------- /assets/affirmation-images/night-sky-2.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stevenGarciaDev/simple-meditation-app-expo-react-native/b650ff74a04b30af7419afb219ed00bb3b2008e3/assets/affirmation-images/night-sky-2.webp -------------------------------------------------------------------------------- /assets/affirmation-images/night-sky-3.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stevenGarciaDev/simple-meditation-app-expo-react-native/b650ff74a04b30af7419afb219ed00bb3b2008e3/assets/affirmation-images/night-sky-3.webp -------------------------------------------------------------------------------- /assets/affirmation-images/night-sky-4.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stevenGarciaDev/simple-meditation-app-expo-react-native/b650ff74a04b30af7419afb219ed00bb3b2008e3/assets/affirmation-images/night-sky-4.webp -------------------------------------------------------------------------------- /assets/affirmation-images/oregon-1.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stevenGarciaDev/simple-meditation-app-expo-react-native/b650ff74a04b30af7419afb219ed00bb3b2008e3/assets/affirmation-images/oregon-1.webp -------------------------------------------------------------------------------- /assets/affirmation-images/oregon-2.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stevenGarciaDev/simple-meditation-app-expo-react-native/b650ff74a04b30af7419afb219ed00bb3b2008e3/assets/affirmation-images/oregon-2.webp -------------------------------------------------------------------------------- /assets/affirmation-images/oregon-3.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stevenGarciaDev/simple-meditation-app-expo-react-native/b650ff74a04b30af7419afb219ed00bb3b2008e3/assets/affirmation-images/oregon-3.webp -------------------------------------------------------------------------------- /assets/affirmation-images/oregon-4.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stevenGarciaDev/simple-meditation-app-expo-react-native/b650ff74a04b30af7419afb219ed00bb3b2008e3/assets/affirmation-images/oregon-4.webp -------------------------------------------------------------------------------- /assets/affirmation-images/relaxing-river-1.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stevenGarciaDev/simple-meditation-app-expo-react-native/b650ff74a04b30af7419afb219ed00bb3b2008e3/assets/affirmation-images/relaxing-river-1.webp -------------------------------------------------------------------------------- /assets/affirmation-images/relaxing-river-2.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stevenGarciaDev/simple-meditation-app-expo-react-native/b650ff74a04b30af7419afb219ed00bb3b2008e3/assets/affirmation-images/relaxing-river-2.webp -------------------------------------------------------------------------------- /assets/affirmation-images/relaxing-river-3.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stevenGarciaDev/simple-meditation-app-expo-react-native/b650ff74a04b30af7419afb219ed00bb3b2008e3/assets/affirmation-images/relaxing-river-3.webp -------------------------------------------------------------------------------- /assets/affirmation-images/relaxing-river-4.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stevenGarciaDev/simple-meditation-app-expo-react-native/b650ff74a04b30af7419afb219ed00bb3b2008e3/assets/affirmation-images/relaxing-river-4.webp -------------------------------------------------------------------------------- /assets/audio/beach.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stevenGarciaDev/simple-meditation-app-expo-react-native/b650ff74a04b30af7419afb219ed00bb3b2008e3/assets/audio/beach.mp3 -------------------------------------------------------------------------------- /assets/audio/meditate-under-tree.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stevenGarciaDev/simple-meditation-app-expo-react-native/b650ff74a04b30af7419afb219ed00bb3b2008e3/assets/audio/meditate-under-tree.mp3 -------------------------------------------------------------------------------- /assets/audio/river.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stevenGarciaDev/simple-meditation-app-expo-react-native/b650ff74a04b30af7419afb219ed00bb3b2008e3/assets/audio/river.mp3 -------------------------------------------------------------------------------- /assets/audio/trees.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stevenGarciaDev/simple-meditation-app-expo-react-native/b650ff74a04b30af7419afb219ed00bb3b2008e3/assets/audio/trees.mp3 -------------------------------------------------------------------------------- /assets/audio/waterfall.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stevenGarciaDev/simple-meditation-app-expo-react-native/b650ff74a04b30af7419afb219ed00bb3b2008e3/assets/audio/waterfall.mp3 -------------------------------------------------------------------------------- /assets/audio/yosemite-stars.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stevenGarciaDev/simple-meditation-app-expo-react-native/b650ff74a04b30af7419afb219ed00bb3b2008e3/assets/audio/yosemite-stars.mp3 -------------------------------------------------------------------------------- /assets/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stevenGarciaDev/simple-meditation-app-expo-react-native/b650ff74a04b30af7419afb219ed00bb3b2008e3/assets/favicon.png -------------------------------------------------------------------------------- /assets/fonts/RobotoMono-Regular.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stevenGarciaDev/simple-meditation-app-expo-react-native/b650ff74a04b30af7419afb219ed00bb3b2008e3/assets/fonts/RobotoMono-Regular.ttf -------------------------------------------------------------------------------- /assets/icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stevenGarciaDev/simple-meditation-app-expo-react-native/b650ff74a04b30af7419afb219ed00bb3b2008e3/assets/icon.png -------------------------------------------------------------------------------- /assets/meditation-destress.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stevenGarciaDev/simple-meditation-app-expo-react-native/b650ff74a04b30af7419afb219ed00bb3b2008e3/assets/meditation-destress.png -------------------------------------------------------------------------------- /assets/meditation-graphic.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stevenGarciaDev/simple-meditation-app-expo-react-native/b650ff74a04b30af7419afb219ed00bb3b2008e3/assets/meditation-graphic.png -------------------------------------------------------------------------------- /assets/meditation-images/beach.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stevenGarciaDev/simple-meditation-app-expo-react-native/b650ff74a04b30af7419afb219ed00bb3b2008e3/assets/meditation-images/beach.webp -------------------------------------------------------------------------------- /assets/meditation-images/meditate-under-tree.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stevenGarciaDev/simple-meditation-app-expo-react-native/b650ff74a04b30af7419afb219ed00bb3b2008e3/assets/meditation-images/meditate-under-tree.webp -------------------------------------------------------------------------------- /assets/meditation-images/river.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stevenGarciaDev/simple-meditation-app-expo-react-native/b650ff74a04b30af7419afb219ed00bb3b2008e3/assets/meditation-images/river.webp -------------------------------------------------------------------------------- /assets/meditation-images/trees.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stevenGarciaDev/simple-meditation-app-expo-react-native/b650ff74a04b30af7419afb219ed00bb3b2008e3/assets/meditation-images/trees.webp -------------------------------------------------------------------------------- /assets/meditation-images/waterfall.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stevenGarciaDev/simple-meditation-app-expo-react-native/b650ff74a04b30af7419afb219ed00bb3b2008e3/assets/meditation-images/waterfall.webp -------------------------------------------------------------------------------- /assets/meditation-images/yosemite-stars.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stevenGarciaDev/simple-meditation-app-expo-react-native/b650ff74a04b30af7419afb219ed00bb3b2008e3/assets/meditation-images/yosemite-stars.webp -------------------------------------------------------------------------------- /assets/simpleMeditationLogo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stevenGarciaDev/simple-meditation-app-expo-react-native/b650ff74a04b30af7419afb219ed00bb3b2008e3/assets/simpleMeditationLogo.png -------------------------------------------------------------------------------- /assets/splash.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stevenGarciaDev/simple-meditation-app-expo-react-native/b650ff74a04b30af7419afb219ed00bb3b2008e3/assets/splash.png -------------------------------------------------------------------------------- /babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = function(api) { 2 | api.cache(true); 3 | return { 4 | presets: ["babel-preset-expo"], 5 | plugins: ["nativewind/babel", 'react-native-reanimated/plugin'], 6 | }; 7 | }; 8 | -------------------------------------------------------------------------------- /components/AppGradient.tsx: -------------------------------------------------------------------------------- 1 | import { LinearGradient } from "expo-linear-gradient"; 2 | import React from "react"; 3 | import { View, StyleSheet } from "react-native"; 4 | import Content from "./Content"; 5 | 6 | const AppGradient = ({ 7 | children, 8 | colors, 9 | }: { 10 | children: any; 11 | colors: string[]; 12 | }) => { 13 | return ( 14 | 15 | {children} 16 | 17 | ); 18 | }; 19 | 20 | export default AppGradient; 21 | -------------------------------------------------------------------------------- /components/AppScreen.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { View, StyleSheet } from "react-native"; 3 | import { 4 | SafeAreaView, 5 | useSafeAreaInsets, 6 | } from "react-native-safe-area-context"; 7 | 8 | const AppScreen = ({ children }: any) => { 9 | return {children}; 10 | }; 11 | 12 | const styles = StyleSheet.create({ 13 | container: { 14 | flex: 1, 15 | }, 16 | }); 17 | 18 | export default AppScreen; 19 | -------------------------------------------------------------------------------- /components/Content.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { StyleSheet } from "react-native"; 3 | import { SafeAreaView } from "react-native-safe-area-context"; 4 | 5 | const Content = ({ children }: any) => { 6 | return {children}; 7 | }; 8 | 9 | const styles = StyleSheet.create({ 10 | container: { 11 | flex: 1, 12 | paddingHorizontal: 20, // Approximate conversion of TailwindCSS px-5 13 | paddingVertical: 12, // Approximate conversion of TailwindCSS py-3 14 | }, 15 | }); 16 | 17 | export default Content; 18 | -------------------------------------------------------------------------------- /components/CustomButton.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { View, Text, Pressable, TouchableOpacity } from "react-native"; 3 | 4 | interface CustomButtonProps { 5 | onPress: () => void; 6 | title: string; 7 | textStyles?: string; 8 | containerStyles?: string; 9 | } 10 | 11 | const CustomButton = ({ 12 | onPress, 13 | title, 14 | textStyles = "", 15 | containerStyles = "", 16 | }: CustomButtonProps) => { 17 | return ( 18 | 23 | 26 | {title} 27 | 28 | 29 | ); 30 | }; 31 | 32 | export default CustomButton; 33 | -------------------------------------------------------------------------------- /components/GuidedAffirmationsGallery.tsx: -------------------------------------------------------------------------------- 1 | import { Image, View, Text, FlatList, Pressable } from "react-native"; 2 | import images from "@/constants/affirmation-images"; 3 | import { GalleryPreviewData, Product } from "@/constants/models/Product"; 4 | import { Link } from "expo-router"; 5 | 6 | interface GuidedAffirmationsGalleryProps { 7 | title: string; 8 | products: GalleryPreviewData[]; 9 | } 10 | 11 | const GuidedAffirmationsGallery = ({ 12 | title, 13 | products, 14 | }: GuidedAffirmationsGalleryProps) => { 15 | return ( 16 | 17 | 18 | {title} 19 | 20 | 21 | item.id.toString()} 25 | renderItem={({ item, index }) => ( 26 | 27 | 28 | 29 | 34 | ProductGallery 35 | 36 | 37 | 38 | )} 39 | horizontal 40 | /> 41 | 42 | 43 | ); 44 | }; 45 | 46 | export default GuidedAffirmationsGallery; 47 | -------------------------------------------------------------------------------- /components/MeditationPreview.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { View, StyleSheet, Text } from "react-native"; 3 | 4 | const Page = () => { 5 | return ( 6 | 7 | Meditation Preview 8 | 9 | ); 10 | }; 11 | 12 | const styles = StyleSheet.create({ 13 | container: {}, 14 | }); 15 | 16 | export default Page; 17 | -------------------------------------------------------------------------------- /components/ProductPreview.tsx: -------------------------------------------------------------------------------- 1 | import { View, Text } from "react-native"; 2 | import React from "react"; 3 | 4 | const ProductPreview = () => { 5 | return ( 6 | 7 | ProductPreview 8 | 9 | ); 10 | }; 11 | 12 | export default ProductPreview; 13 | -------------------------------------------------------------------------------- /components/SearchInput.tsx: -------------------------------------------------------------------------------- 1 | import { View, Text, TextInput } from "react-native"; 2 | import React, { useState } from "react"; 3 | 4 | const SearchInput = () => { 5 | const [query, setQuery] = useState(""); 6 | 7 | return ( 8 | 9 | setQuery(e)} 15 | /> 16 | 17 | ); 18 | }; 19 | 20 | export default SearchInput; 21 | -------------------------------------------------------------------------------- /constants/Colors.js: -------------------------------------------------------------------------------- 1 | export default { 2 | primary: "#0a4d4a", 3 | grey: "#5E5D5E", 4 | dark: "#1A1A1A", 5 | }; -------------------------------------------------------------------------------- /constants/MeditationData.ts: -------------------------------------------------------------------------------- 1 | export interface MeditationType { 2 | id: number; 3 | title: string; 4 | image: string; 5 | audio: string; 6 | } 7 | 8 | export const MEDITATION_DATA: MeditationType[] = [ 9 | { 10 | id: 1, 11 | title: "Mountains", 12 | image: "trees.webp", 13 | audio: "trees.mp3", 14 | }, 15 | { 16 | id: 2, 17 | title: "Rivers", 18 | image: "river.webp", 19 | audio: "river.mp3", 20 | }, 21 | { 22 | id: 3, 23 | title: "Sunset", 24 | image: "meditate-under-tree.webp", 25 | audio: "meditate-under-tree.mp3", 26 | }, 27 | { 28 | id: 4, 29 | title: "Beaches", 30 | image: "beach.webp", 31 | audio: "beach.mp3", 32 | }, 33 | { 34 | id: 5, 35 | title: "Starry Night", 36 | image: "yosemite-stars.webp", 37 | audio: "yosemite-stars.mp3", 38 | }, 39 | { 40 | id: 6, 41 | title: "Waterfall", 42 | image: "waterfall.webp", 43 | audio: "waterfall.mp3", 44 | }, 45 | ]; 46 | 47 | export const AUDIO_FILES: { [key: string]: any } = { 48 | "trees.mp3": require("@/assets/audio/trees.mp3"), 49 | "river.mp3": require("@/assets/audio/river.mp3"), 50 | "meditate-under-tree.mp3": require("@/assets/audio/meditate-under-tree.mp3"), 51 | "beach.mp3": require("@/assets/audio/beach.mp3"), 52 | "yosemite-stars.mp3": require("@/assets/audio/yosemite-stars.mp3"), 53 | "waterfall.mp3": require("@/assets/audio/waterfall.mp3"), 54 | }; 55 | -------------------------------------------------------------------------------- /constants/affirmation-gallary.ts: -------------------------------------------------------------------------------- 1 | import images from "@/constants/affirmation-images"; 2 | 3 | const AFFIRMATION_GALLERY = [ 4 | { 5 | title: "Positivity", 6 | data: [ 7 | { 8 | id: 1, 9 | text: "Every day brings new opportunities to grow and excel. I am constantly evolving and improving. My positive mindset attracts abundance and success. I am grateful for the journey and the lessons it brings.", 10 | image: images.californiaBackyardOne, 11 | }, 12 | { 13 | id: 2, 14 | text: "I am the architect of my destiny, and I build it with positivity and determination. Challenges are stepping stones to my greatness. I embrace each moment with enthusiasm and confidence. My future is bright and limitless.", 15 | image: images.californiaBackyardTwo, 16 | }, 17 | { 18 | id: 3, 19 | text: "I radiate positivity and inspire those around me. My energy is contagious, and it fuels my drive to succeed. I focus on solutions, not problems, and I am resilient in the face of adversity. I am committed to living a life of purpose and joy.", 20 | image: images.californiaBackyardThree, 21 | }, 22 | { 23 | id: 4, 24 | text: "I believe in my potential and trust the process of life. Every setback is a setup for a greater comeback. I choose to see the good in every situation and remain optimistic. My passion and persistence are the keys to my unstoppable success.", 25 | image: images.californiaBackyardFour, 26 | }, 27 | ], 28 | }, 29 | { 30 | title: "Reduce Anxiety", 31 | data: [ 32 | { 33 | id: 5, 34 | text: "I am in control of my thoughts, and I choose peace over worry. Each breath I take calms my mind and soothes my soul. I release the need to stress over what I cannot control. I am strong, capable, and at ease in all situations.", 35 | image: images.englishCountrysideOne, 36 | }, 37 | { 38 | id: 6, 39 | text: "I embrace calmness and serenity as my natural state of being. My mind is clear, my heart is light, and I am present in this moment. Anxiety has no power over me, for I am resilient and grounded. I trust in my ability to handle whatever comes my way.", 40 | image: images.englishCountrysideTwo, 41 | }, 42 | { 43 | id: 7, 44 | text: "Every day, I grow more confident in managing my stress and anxiety. I focus on positive thoughts and let go of fears that do not serve me. I am surrounded by support and love, and I embrace the peace within me. My inner strength guides me through any challenge with grace and calm.", 45 | image: images.englishCountrysideThree, 46 | }, 47 | { 48 | id: 8, 49 | text: "I release tension and embrace relaxation in my mind and body. I am safe, I am loved, and I am free from the grip of anxiety. Each step I take is filled with confidence and tranquility. I choose to live in the present moment, where peace and joy reside.", 50 | image: images.englishCountrysideFour, 51 | }, 52 | ], 53 | }, 54 | { 55 | title: "Success", 56 | data: [ 57 | { 58 | id: 9, 59 | text: "I am destined for greatness, and every step I take leads me closer to success. My dedication and hard work are the building blocks of my achievements. I see opportunities where others see obstacles. Success is my journey, and I embrace it with passion and perseverance.", 60 | image: images.mountainMeditateOne, 61 | }, 62 | { 63 | id: 10, 64 | text: "I am a powerful creator of my destiny, and I attract success effortlessly. My vision is clear, my goals are set, and my actions are aligned with my highest purpose. I celebrate each victory, no matter how small, as a stepping stone to my ultimate triumph. I am unstoppable, and my potential is limitless.", 65 | image: images.mountainMeditateTwo, 66 | }, 67 | { 68 | id: 11, 69 | text: "I believe in my abilities and trust the process of achieving success. Challenges are opportunities for growth and refinement. I am focused, driven, and committed to my goals. Success flows to me naturally because I am prepared and deserving.", 70 | image: images.mountainMeditateThree, 71 | }, 72 | { 73 | id: 12, 74 | text: "I am a magnet for success and abundance in all areas of my life. My mindset is positive, and my actions are intentional. I learn from every experience and continuously improve. Success is not a destination but a journey I enjoy every day.", 75 | image: images.mountainMeditateFour, 76 | }, 77 | ], 78 | }, 79 | { 80 | title: "Self-Belief", 81 | data: [ 82 | { 83 | id: 13, 84 | text: "I believe in my infinite potential and trust my inner wisdom. Every day, I grow more confident in my abilities and my purpose. I am capable of achieving greatness and worthy of all my dreams. My self-belief is the foundation of my success.", 85 | image: images.nightSkyOne, 86 | }, 87 | { 88 | id: 14, 89 | text: "I trust myself and my journey, knowing I have everything I need within me. My unique strengths and talents guide me towards my goals. I am resilient and can overcome any challenge that comes my way. My belief in myself fuels my determination and courage.", 90 | image: images.nightSkyTwo, 91 | }, 92 | { 93 | id: 15, 94 | text: "I am confident in who I am and what I have to offer the world. Each step I take is filled with purpose and self-assurance. I embrace my individuality and celebrate my achievements. My self-belief empowers me to create the life I desire.", 95 | image: images.nightSkyThree, 96 | }, 97 | { 98 | id: 16, 99 | text: "I am the master of my destiny and believe in my ability to shape my future. My thoughts are powerful, and I choose to think positively about myself. I am worthy of success and happiness. With each passing day, my self-belief grows stronger and unwavering.", 100 | image: images.nightSkyFour, 101 | }, 102 | ], 103 | }, 104 | { 105 | title: "Mental Health", 106 | data: [ 107 | { 108 | id: 17, 109 | text: "I prioritize my mental health and nurture my mind with positivity and care. I am resilient and capable of overcoming any challenge that comes my way. Each day, I grow stronger, more balanced, and more at peace. My mental well-being is a cornerstone of my overall success.", 110 | image: images.oregonOne, 111 | }, 112 | { 113 | id: 18, 114 | text: "I embrace the journey of healing and growth, knowing that my mental health is worth every effort. I am patient with myself and recognize my progress, no matter how small. Positive thoughts and actions uplift my spirit and renew my strength. I am in control of my mental well-being and choose to thrive.", 115 | image: images.oregonTwo, 116 | }, 117 | { 118 | id: 19, 119 | text: "I am mindful of my thoughts and choose to focus on what brings me joy and peace. My mind is a powerful tool, and I use it to create a life of happiness and fulfillment. I am deserving of self-care and take time to nurture my mental health daily. With each breath, I release stress and embrace calmness.", 120 | image: images.oregonThree, 121 | }, 122 | { 123 | id: 20, 124 | text: "I am committed to maintaining a healthy mind and nurturing my emotional well-being. I surround myself with positive influences and seek support when needed. My mental health is a priority, and I take proactive steps to protect and enhance it. I am grateful for my resilience and the strength it brings to my life.", 125 | image: images.oregonFour, 126 | }, 127 | ], 128 | }, 129 | { 130 | title: "Law of Attraction", 131 | data: [ 132 | { 133 | id: 21, 134 | text: "I am a powerful magnet for all that I desire, attracting abundance and success effortlessly. My thoughts are aligned with positivity, and I visualize my goals with clarity and conviction. The universe responds to my optimistic energy, bringing opportunities and blessings into my life. I am grateful for the manifestations that unfold each day.", 135 | image: images.relaxingRiverOne, 136 | }, 137 | { 138 | id: 22, 139 | text: "I attract success, love, and prosperity with every positive thought I have. My mind is a beacon of positivity, drawing the best into my life. I focus on what I want, not on what I fear, and the universe aligns to make it happen. I am worthy of all the good that comes my way, and I embrace it fully.", 140 | image: images.relaxingRiverTwo, 141 | }, 142 | { 143 | id: 23, 144 | text: "I am in harmony with the universal laws and trust that everything I desire is on its way to me. My energy is vibrant and magnetic, attracting abundance in all areas of my life. I believe in the power of my intentions and the certainty of their manifestation. Every day, I see evidence of my desires becoming reality.", 145 | image: images.relaxingRiverThree, 146 | }, 147 | { 148 | id: 24, 149 | text: "I consciously create my reality through my thoughts, feelings, and actions. I attract people and circumstances that support my growth and happiness. My positive mindset and unwavering belief in my dreams set the stage for their manifestation. I am grateful for the abundance and joy that flow into my life effortlessly.", 150 | image: images.relaxingRiverFour, 151 | }, 152 | ], 153 | }, 154 | { 155 | title: "Limiting Beliefs", 156 | data: [ 157 | { 158 | id: 25, 159 | text: "I release all limiting beliefs and embrace my limitless potential. My mind is free from doubts, and I trust in my ability to achieve greatness. Each day, I replace negative thoughts with empowering beliefs. I am capable, worthy, and destined for success.", 160 | image: images.tuscannyOne, 161 | }, 162 | { 163 | id: 26, 164 | text: "I am no longer held back by past limitations; I create my own reality. My beliefs shape my future, and I choose to believe in my strength and potential. I break through barriers and achieve what I once thought impossible. My life is a reflection of my powerful, positive mindset.", 165 | image: images.tuscannyTwo, 166 | }, 167 | { 168 | id: 27, 169 | text: "I am the master of my thoughts, and I choose to eliminate all limiting beliefs. I see challenges as opportunities for growth and success. My potential is boundless, and I am constantly evolving into the best version of myself. I believe in my power to create a life of abundance and joy.", 170 | image: images.tuscannyThree, 171 | }, 172 | { 173 | id: 28, 174 | text: "I replace limiting beliefs with thoughts of possibility and greatness. My mind is a fertile ground for positive, empowering beliefs. I attract success and happiness because I believe I deserve them. Every step I take is guided by confidence and self-assurance, leading me to my highest potential.", 175 | image: images.tuscannyFour, 176 | }, 177 | ], 178 | }, 179 | ]; 180 | 181 | export default AFFIRMATION_GALLERY; 182 | -------------------------------------------------------------------------------- /constants/affirmation-images.ts: -------------------------------------------------------------------------------- 1 | import californiaBackyardOne from "@/assets/affirmation-images/California-backyard-1.webp"; 2 | import californiaBackyardTwo from "@/assets/affirmation-images/California-backyard-2.webp"; 3 | import californiaBackyardThree from "@/assets/affirmation-images/California-backyard-3.webp"; 4 | import californiaBackyardFour from "@/assets/affirmation-images/California-backyard-4.webp"; 5 | 6 | import englishCountrysideOne from "@/assets/affirmation-images/english-countryside-1.webp"; 7 | import englishCountrysideTwo from "@/assets/affirmation-images/english-countryside-2.webp"; 8 | import englishCountrysideThree from "@/assets/affirmation-images/english-countryside-3.webp"; 9 | import englishCountrysideFour from "@/assets/affirmation-images/english-countryside-4.webp"; 10 | 11 | import mountainMeditateOne from "@/assets/affirmation-images/mountain-meditate-1.webp"; 12 | import mountainMeditateTwo from "@/assets/affirmation-images/mountain-meditate-2.webp"; 13 | import mountainMeditateThree from "@/assets/affirmation-images/mountain-meditate-3.webp"; 14 | import mountainMeditateFour from "@/assets/affirmation-images/mountain-meditate-4.webp"; 15 | 16 | import nightSkyOne from "@/assets/affirmation-images/night-sky-1.webp"; 17 | import nightSkyTwo from "@/assets/affirmation-images/night-sky-2.webp"; 18 | import nightSkyThree from "@/assets/affirmation-images/night-sky-3.webp"; 19 | import nightSkyFour from "@/assets/affirmation-images/night-sky-4.webp"; 20 | 21 | import oregonOne from "@/assets/affirmation-images/oregon-1.webp"; 22 | import oregonTwo from "@/assets/affirmation-images/oregon-2.webp"; 23 | import oregonThree from "@/assets/affirmation-images/oregon-3.webp"; 24 | import oregonFour from "@/assets/affirmation-images/oregon-4.webp"; 25 | 26 | import relaxingRiverOne from "@/assets/affirmation-images/relaxing-river-1.webp"; 27 | import relaxingRiverTwo from "@/assets/affirmation-images/relaxing-river-2.webp"; 28 | import relaxingRiverThree from "@/assets/affirmation-images/relaxing-river-3.webp"; 29 | import relaxingRiverFour from "@/assets/affirmation-images/relaxing-river-4.webp"; 30 | 31 | import tuscannyOne from "@/assets/affirmation-images/Tuscanny-1.webp"; 32 | import tuscannyTwo from "@/assets/affirmation-images/Tuscanny-2.webp"; 33 | import tuscannyThree from "@/assets/affirmation-images/Tuscanny-3.webp"; 34 | import tuscannyFour from "@/assets/affirmation-images/Tuscanny-4.webp"; 35 | 36 | export default { 37 | californiaBackyardOne, 38 | californiaBackyardTwo, 39 | californiaBackyardThree, 40 | californiaBackyardFour, 41 | englishCountrysideOne, 42 | englishCountrysideTwo, 43 | englishCountrysideThree, 44 | englishCountrysideFour, 45 | mountainMeditateOne, 46 | mountainMeditateTwo, 47 | mountainMeditateThree, 48 | mountainMeditateFour, 49 | nightSkyOne, 50 | nightSkyTwo, 51 | nightSkyThree, 52 | nightSkyFour, 53 | oregonOne, 54 | oregonTwo, 55 | oregonThree, 56 | oregonFour, 57 | relaxingRiverOne, 58 | relaxingRiverTwo, 59 | relaxingRiverThree, 60 | relaxingRiverFour, 61 | tuscannyOne, 62 | tuscannyTwo, 63 | tuscannyThree, 64 | tuscannyFour, 65 | }; 66 | -------------------------------------------------------------------------------- /constants/meditation-images.ts: -------------------------------------------------------------------------------- 1 | import treeImage from "@/assets/meditation-images/trees.webp"; 2 | import meditatingUnderTree from "@/assets/meditation-images/meditate-under-tree.webp"; 3 | import riverImage from "@/assets/meditation-images/river.webp"; 4 | import beachImage from "@/assets/meditation-images/beach.webp"; 5 | import yosemiteStars from "@/assets/meditation-images/yosemite-stars.webp"; 6 | import waterfall from "@/assets/meditation-images/waterfall.webp"; 7 | 8 | export default [ 9 | treeImage, 10 | riverImage, 11 | meditatingUnderTree, 12 | beachImage, 13 | yosemiteStars, 14 | waterfall, 15 | ]; 16 | -------------------------------------------------------------------------------- /constants/models/AffirmationCategory.ts: -------------------------------------------------------------------------------- 1 | export interface AffirmationCategory { 2 | title: string; 3 | data: GalleryPreviewData[]; 4 | } 5 | 6 | export interface GalleryPreviewData { 7 | id: number; 8 | text: string; 9 | image: any; 10 | } 11 | -------------------------------------------------------------------------------- /context/TimerContext.tsx: -------------------------------------------------------------------------------- 1 | import { 2 | Dispatch, 3 | ReactNode, 4 | SetStateAction, 5 | createContext, 6 | useState, 7 | } from "react"; 8 | 9 | interface TimerContextProps { 10 | duration: number; 11 | setDuration: Dispatch>; 12 | } 13 | 14 | export const TimerContext = createContext({ 15 | duration: 10, 16 | setDuration: () => {}, 17 | }); 18 | 19 | interface TimerProviderProps { 20 | children: ReactNode; 21 | } 22 | 23 | const TimerProvider = ({ children }: TimerProviderProps) => { 24 | const [duration, setDuration] = useState(10); 25 | 26 | return ( 27 | 28 | {children} 29 | 30 | ); 31 | }; 32 | 33 | export default TimerProvider; 34 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "my-app", 3 | "version": "1.0.0", 4 | "main": "expo-router/entry", 5 | "scripts": { 6 | "start": "expo start", 7 | "android": "expo start --android", 8 | "ios": "expo start --ios", 9 | "web": "expo start --web", 10 | "ts:check": "tsc" 11 | }, 12 | "dependencies": { 13 | "@expo/vector-icons": "^14.0.2", 14 | "@types/react": "~18.3.12", 15 | "expo": "^52.0.0", 16 | "expo-av": "~15.0.2", 17 | "expo-constants": "~17.0.7", 18 | "expo-font": "~13.0.4", 19 | "expo-linear-gradient": "~14.0.2", 20 | "expo-linking": "~7.0.5", 21 | "expo-router": "~4.0.17", 22 | "expo-status-bar": "~2.0.1", 23 | "nativewind": "^2.0.11", 24 | "react": "18.3.1", 25 | "react-dom": "18.3.1", 26 | "react-native": "0.76.7", 27 | "react-native-reanimated": "~3.16.1", 28 | "react-native-safe-area-context": "4.12.0", 29 | "react-native-screens": "~4.4.0", 30 | "react-native-web": "~0.19.13", 31 | "typescript": "^5.3.3" 32 | }, 33 | "devDependencies": { 34 | "@babel/core": "^7.25.2", 35 | "tailwindcss": "3.3.2" 36 | }, 37 | "overrides": { 38 | "@xmldom/xmldom": "0.8.10" 39 | }, 40 | "private": true 41 | } 42 | -------------------------------------------------------------------------------- /tailwind.config.js: -------------------------------------------------------------------------------- 1 | // tailwind.config.js 2 | 3 | module.exports = { 4 | content: [ 5 | "./App.{js,jsx,ts,tsx}", 6 | "./app/**/*.{js,jsx,ts,tsx}", // Include all JS, JSX, TS, and TSX files in the app folder 7 | "./components/**/*.{js,jsx,ts,tsx}", // Include all JS, JSX, TS, and TSX files in the components folder] 8 | "./app/(tabs)/meditate.tsx" 9 | ], 10 | theme: { 11 | extend: { 12 | fontFamily: { 13 | rmono: ['Roboto-Mono', 'sans-serif'] 14 | } 15 | }, 16 | }, 17 | plugins: [], 18 | } -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "expo/tsconfig.base", 3 | "compilerOptions": { 4 | "strict": true, 5 | "paths": { 6 | "@/*": ["./*"] 7 | } 8 | }, 9 | "include": ["**/*.ts", "**/*.tsx", "app.d.ts"] 10 | } 11 | --------------------------------------------------------------------------------