Transcript for:
Create a Meditation App with React Native

improve your react native skills by building a meditation app using Expo Steven Garcia teaches this course which utilizes typescript react native wind react native and Expo to develop a simple mobile app in this course we'll be building a simple meditation app in Expo react native so here if I refresh the screen and press reload we get this icon on the splash screen and then we see this initial page we can click get started and this takes us to a screen where we have different meditation previews so here we can scroll vertically we can click on one of the items and here we see a duration of 10 seconds we can click the adjust duration which brings up this modal and we can select to change the duration such as 5 minutes now when we click the start button this will start the countdown timer and play a song in the background you can press stop and the back button now here in the bottom tab we also have a screen for positive affirmations so here when we click on that we see different categories and we can scroll horizontally let's see if we click on one then here we see a positive affirmation in a scroll view I can scroll down and select other ones as well also notice that in this background we are using a linear gradient and so in this project this will tie in your skills of HTML 5 and CSS 3 as well as JavaScript react and tailwind and Expo react native so this will showcase what you can build once you learn all these skills so before we get started be sure to check out the GitHub repository associated with this course and I'll be providing that link in the description so if I scroll down to the read me section this will provide the instructions of how to clone this repository as well as how to install the project dependencies there is a section for Snippets so when we get to this part of the course I will reference and let you know which part you want to copy to save you from having to type all this out also to download all the assets you can click on this link here which will open up a folder in my Google Drive and here you can download the images fonts and audio files as well as the logo for the splash screen another quick tip one way to view the project files is to press the period key and this will open up visual studio code in your browser this provides a convenient way to view the project without having to clone the project so before we get started one thing that I wanted to make note of is that this course is not beginner friendly it does make a lot of assumptions that you have a solid understanding of web development fundamentals so if I click on courses on my website at stepcraft tocom I'm currently working on creating more beginner friendly courses which teaches you all the fundamentals that you would need so upcoming courses that I'm working on include HTML 5 and CSS 3 the command line JavaScript Pro typescript Mastery Tailwind CSS react Mastery and Expo react native before we get started if you're interested in supporting my courses and projects you can follow me on my new YouTube channel and Instagram at@ Steven codra and if you're looking to enhance your health and fitness routine check out my workout planning app at fitfuel planner.com the app offers over 100 recipes workout plans meal plans and a grocery list feature it's designed to make tracking your calories and macronutrients straightforward and stressfree I appreciate your support and I'll see you in the next [Music] section so when building an app in Expo react native during local development you will run the application on a simulator so if you're working on a MacBook you would use xcode in order to run an iOS simulator you could also run Android Studio and run an Android emulator so if you're on Mac OS go to the App Store and search xcode so this is an integrated development environment for developing iOS applications and then install this application so since this is a large application it'll take about 30 minutes to download So after you download it click open so sode open do the drop down and then settings so select locations and ensure that you have the command line tools installed so once you have ensured that with s code go to open developer tool and then simulator so our simulator opens up you can also go to file and new simulator you can select the device type open up and create a new simulator now for running an Android emulator you need to install Android Studio so navigate to developer.android.com for SL studio so open up Android Studio so then click on the drop down of more actions and then SDK manager so here when you have Android SDK selected you want to install the latest version so for me that's Android 14 on SDK tools you want to install the Android emulator the Android SDK platform tools and here the Intel emulator accelerator so once you select these check boxes then click apply now for specific information on how to run your Expo application on a simulator navigate to the GitHub repository for this project so scroll down so right before the Snippets I have a section for the iOS simulator and the Android emulator so when I click on this link this opens up the Expo documentation and this provides information on how you can get it installed and the different commands to run also for the Android Studio emulator the instructions are different whether you are working on a Mac OS or on windows so be sure to select the one for your operating system and follow the commands on this documentation so before we get started with Visual Studio code open go to the extensions icon and search for the prettier extension so this code formatter you want to install this after installing it you want to open up your settings which you can do by clicking on this icon or the keyboard shortcut is command and comma or control and comma and then search format on Save and you want to ensure that this checkbox is checked so when this enabled whenever you save a file Visual Studio code will use the prettier extension to format your code this helps you stay organized [Music] so with a visual Studio C open right click on your desktop and create a new folder you can name the server you like I'll name this meditations we'll just name it meditation now you can drag and drop it into Visual Studio code to open up this folder then click on the extensions icon now these extensions are not absolutely necessary but it does improve your productivity so let's expand it to be the full screen also I'll list in in the description of this video all the extensions that I recommend going through the ones that I have installed already so you want to install es7 plus react Redux react native Snippets and this will allow you to use keyboard shortcuts we also want to install Expo tools the prettier code formatter extension rack native tools Tailwind CSS intellisense for our styles and optional one is vs code icons if you do install this one then bring up your command pallet which will be control shift p or command shift p and then type in icons activate vs code icons so now you did that let's refer to the Expo documentation which is at the URL of docs. Expo Dev SL router SL installation so because the Expo framework is constantly being updated be sure to refer to the latest documentation to know which commands to run to start your project so here we see the First Command we want to run which will create the boilerplate folders and files that we need to run an expo react native project is MPX create Expo app and we want to install the latest version of the framework so we can just copy this I can show the command prompt with command J or control and backtick then simply paste that in here so node package execute this will create our new project so we want to name this simple meditation so here we see created a new folder now it's installing the necessary dependencies so our new project has been successfully created so here we can clear this out and let's expand that generated For Us close this out now I'm going to make this larger so I'll go to my settings with command and comma so you don't have to do this this is just so it's easier for you to see the code in the video I'll change the zoom level to two making it larger so here we see we have the app directory and in this folder will contain all the source code for our application we also have the assets folder which contains static assets components which contains reusable react native components constants we have react hooks scripts and other configuration files so scrolling back if we want to start our project we would do that with MPX Expo start so now let's open up our command prompt list everything out and we'll change into simple meditation and then we'll run MPX so no package execute expose start and then pass in the flag dash dash clear to clear the cache so here we see it's showing a QR code so we can scan it with our device and we can see our application on our phone now in order for us to do this we need to download EXP Expo go so I go back here Expo go which is free it's available on the App Store and the Google Play Store so once you download this application based on your device you'll be able to view it on a physical device now you can also run it in local development you can either run it in the web browser by pressing W you can run it on iOS simulator by pressing I now in order for this to work you need to have X code installed and you also need to be developing on a map you can also press a to open on an Android virtual device and this assumes that you have Android Studio installed so I'll run it on my iOS simulator so I'll press I this brings up the simulator so also you're bound to see errors during development so if you do encounter any error in this process be sure to copy this and paste it into either Google stack Overflow or chat GPT to help resolve that this just says that the simulator is taking a long time to start up the operation has timed out so we're just waiting for it so here we see this is the initial start page so here I'll do control and back tick to close the terminal so here if I expand the app directory I see that it's created so many new boiler plate files for me see if I click into one of them such as the index one so this is the component that is being used to display the current screen now since it is displaying a lot of content we want to clear everything out and start from scratch we'll go through and we'll delete everything we also delete all these Styles view component and then text I'll just say hello world now you want to import this so do control and Dot update and also we want to install text so I'll just manually do that here and I will remove this because we aren't using those components now if I save it this will perform hot reloading and so here I see Hello World is displayed in the top left but it's being cut off so I want to install some more Styles let's say if I do container and I do Flex one and I do justify content and we'll do Center how to apply this I do style and then styles do container this applies that style and here I see it's displayed uh vertically centered I also want it horizontally centered so I'll do a line items Center and this completely centers it in the center of the screen now I like sorting this alphabetically so I'll bring up the command pallet command shift p and I'll do sort and this sorts these key value pairs for me help me stay organized so here we see we have a tab layout and we have updated our initial screen now one thing I want to do I want to clear out all the B plate files that generated for us so this also includes these test files go here and we'll just delete all of it cuz we want to create it from scratch so we have better understanding of our source code likewise what we just did in this index file we copy everything here and we want to clear everything out we'll just delete this tab directory and everything in here as well so deleting everything so in the app directory in Expo react native we're using Expo router which provides file based routing so this is similar to how it would be in a framework such as nextjs and it makes it more similar to web development when it comes to achieving navigation so the home would be index. jsx we'll paste that in here we'll save it let's expand here now that we refreshed it we see Hello World and without the tab [Music] bar so now let's add all the asset files that we're going to need for this project so once again in the GitHub repo click on this link to open up to Google Drive then this drop down and we can download that so after it's downloaded let's copy all of this and we'll drag and drop it into assets we'll replace it to the fonts directory so we'll close the assets directory and now we want to add our constant files let's go back and we'll go back to the repo and this is where we use our Snippets so here if we do this this is the TP scrip file which Imports our affirmation images we'll copy this and in constants We'll add a new file and we'll name this affirmation hyphen images. typescript then we will paste that in here so looking at this file we see that we import all the assets for the affirmation images and we export it as a JavaScript object we can close this going back we'll close this out now we copy for our meditation images we'll name this meditation images. typescript paste that in here now for our meditation data we'll copy this and we'll name this meditation data pasting that and so here we see we've defined an interface and typescript for our meditation type and this specifies the ID title image name and audio name we also create an array of this type and these Define the previews that we're going to be showing on the meditation screen now we also Define an object for our audio files and so this is a key mapping pair which Maps the name of the audio file with the import statement and the actual audio file now let's update our colorscript file so here we'll just clear this out and we'll simplify it to be export default and we'll say primary that would be 0 a 4 D4 a we'll do gray which is 5 e 5D 5e and dark which is 1 a 1 a 1 a saving that so let's curl these files and so one thing I named this with the jsx extension I can change that to be TSX since we're using typescript so one more file that we want to add is a t script file for the affirmations Gallery so we can copy this in our constant file we will add affirmations High in gallery. typescript we'll paste this in here so let's look over this file here we see we import the affirmation images object that we had to find in affirmation images so if I go there just to remind you that this is where we imported and exported all these image files so back in affirmations Gallery then I Define an array consisting of JavaScript objects which Define the affirmation title so this is the title of the CATE ategory and an array which we access with the data key or data property this defines the IDS the text and the image to use so next we want to install native wind so this uses Tailwind CSS and allows us to use the Tailwind class names in our react native projects so we want to click on the Expo quick starts which will let us know what commands we will have to run in the terminal so we've already ran these commands to create our Expo app and we're using mpm as our package manager so we can do mpm install native win we'll close this and run it that was successful now we install Tailwind as a developer dependency going back so now we run MPX Tailwind CSS andit in order to initialize our configuration file we'll run that closing this terminal and navigating to our Tailwind config file once again you want to navigate to the GitHub repository which will be here and here in the snippet section you want to copy this file and we will replace it here so here we specify what component files we want to use native wi and we also specify the font family for the custom fonts that we added going back let's refer back to these docs now we also need to add this in the plugin section is native wi/ Babble and our Babel config file so here in the sidebar appable config and then we will add plugins p in that here so let's run our project again we do MPX Expo start closing this out press I to open up in the iOS simulator let's refresh this so command D and then reload so now let's close this and we'll navigate to our homepage again again and we'll apply a native wind style So currently we're using style sheets built into react native so let's remove this and we'll specify class name we'll say Flex one we'll say justify Center and item Center and here we see the same styles are being applied so order to get rid of this squiggly line in vs code We'll add a declaration file in simple meditation so at. D.S we see vs code is no longer showing that squiggly line when we specify the class name so let's Implement our home screen so I'll clear everything out here and we'll start from scratch and we use a snippet and keyboard shortcut which is react native function export then tab and will name this app let's save that I open up this and press I open up the simulator again so here we see our text app is displayed in the top left so now we'll apply a class name here say it's Flex one to take up the entire height and we want to use a background image so we go into assets and then meditation images is we want to use this image of the beach so we'll use that here we'll use the image background component bu into react native and we'll apply the props so let's import name a beach image from at which means from the root then assets meditation images and then beach. webp save that now we'll apply source to that image the resize mode will be cover and we'll apply a class name of Flex one save that so now the image is being displayed but we see it's still showing y above and white below and the text is on the bottom so first we'll move the text within those opening closing tags of the image background component so now app is being displayed within it so now let's add a shared layout route so add a new file and we'll name it uncore layout. TSS and the nameing convention is important so in Expo router we can add a layout file at every single directory and this will Define shared user interface components for every file within that directory so I'll name this as export default function and I'll name this root layout and then we will simply return the component slot from Expo router so import that import slot from Expo router so this component acts the same as the children prop in web applications and basically this will render the child route in its place so in this case it will render this index index page this app component so we'll save this and here we see the image now spans the entire height so we want to apply a linear gradient on the screen and we need to import a library so click this plus icon and we'll change to our directory so now we go here for Expo linear gradient which is the package we'll be using we can copy this to install that paste it in here okay so close this close that out closing the terminal so now we can utilize that component here so it'll be linear gradient move this up be within it let's import that so we're not getting the Auto Import right now so we'll just do it manually so it'll be import linear gradient from xfo linear gradient I we use the class name of Flex one and we'll apply the color prop we'll specify the array RGB a of 0 0 0 and 0.4 and then rgba of 0 0 and 0.8 and this with a parentheses we can save that and here we see our linear gradient is being applied so we know that our text is still being displayed on the top left so let's use a safe area view safe area view see we get this import and move the text within it and so now we see our text is being displayed here so we'll use class name text Center Center text y we'll make it bold and for XL so now it's more visible and let's highlight this and let's wrap it in a view so we'll bring up the command pet and then emit wrap with abbreviation View and here we will name this simple meditation let's apply some styles to our safe area view so we'll say FX one horizontal padding of one and justify between and let's add our subtext text so that would be text and it's simplifying simplifying meditation for everyone apply a class name this will also be text Center text white the size is 2 XL and we'll apply margin top with three so now we have this being displayed as the header now think if you notice the time as well as the battery is currently dark so let's apply the status bar so we can do that just before the closing element or closing component of the safe area view so it'll be status bar from react native the style prop of light and it soft closing see status bar save that so actually from Expo status bar so we're not using that from react native instead it's supposed to be import status bar from Expo status bar and that makes it white for us good so now after this text we add another view and we can create a button so because we'll be creating buttons throughout this course we can make it a reusable component so we going into to components new file we'll call this custom button. TSX so once again we would do react native function export and tab now we do a touchable opacity touchable opacity now we want to specify an interface for our props so it be interface custom button props so we can specify the onpress function which will return void the title which would be a string optional text Styles which should be string and optional container Styles how we can destructure that from the props so specify on press title text styles which by default be an empty string container Styles which by default is an empty string we specify custom button props save that so now we specify the title here we specify the active opacity to be 0.7 and we'll specify classes put this on a new line here class name and we'll use a back tick so we can use interpolation here so the background will be white will'll be rounded XL we specify a minimum height of 62 pixels or Justify Center and item Center and here we will apply the container Styles we is pass in as a prop and we'll also set the onpress event handler so onpress so for text app class name once again we'll use the cly brackets back to Ser specify font semi bold text large and applying text Styles save that so now let's utilize this custom component in our homepage so now we can utilize this custom button in our homepage so we'll specify this here custom button to import that we'll specify on press for now to just be a console log so console.log say tap and the title will be get started see here and it's s closing save that and here we see our get started button is displayed on the bottom and so here we see our button is spanning the entire width of the screen so instead of using horizontal padding for the safe area view let's make it a margin MX and we'll speci that to be five so now it's no longer spanding the entire width so now we'll set a margin horizontal and let's make that eight how we try 12 okay so that's more visible so another we want to do go to the sidebar go into app. Json we want to specify what we want our Splash image to be so go into our assets we want it to be the simple meditation logo we'll specify that here simple meditation logo now we can save that and it's not in the images it's actually at the root of the assets so we can save that so let's close the sidebar and let's do command D and then reload and now we see our splash screen logo being [Music] displayed so let's make sure that when we actually press this button that it's properly calling the console statement so we'll show that let's just clear everything out so we can easily see that now when we perform a click on it we see that we are getting our expected output so rather than simply logging into the console we want to route to another file so for now let's just add another file and we'll just call it test. TSX R native function export and it's just test so now it has that and now we will utilize the used router hook so const router Ed router from Expo router and now we can use this to navigate to that file so we can call router. Push n OB test so this route name that we use is based on the name of the file that we just created which is test. TSX so now when we click get started this takes us to the test page now the text is being displayed in the top left so once again we'll just apply that class name of Flex one justify Center and item Center and here we see test is being displayed in the center of the screen so now we'll do command d reload this go back to the home screen so now we want to add a tab navigation so open up the sidebar and we'll add a new directory and we'll put it in parentheses so an explore router this defines a group so we'll call it tabs and so essentially a group is a directory where we can organize different files and this name of the directory tabs will not show in the URL so in other words when we navigate to it we don't have to include tabs in the path so now we can add a new file here and I'll name this nature nature meditate TSX react native function export and tab I'll just name this nature meditate saving that so now instead of navigating to this test file we can navigate to Nature meditate and because we wrapped it in a group we don't have to include tabs in this path so now when we click get started it takes us to the nature meditate page rather than this test page so let's remove this we no longer need it so one thing to know we will also be using a linear gradient in this nature meditate component so rather than having to duplicate that as well as the safe area view within it let's create a reusable component which we can use for both of these components so in the components directory we can add we'll name it app gradient. TSX react native function export app gradient so in here this will take in props of children which is the content that will be placed within it and colors and we just specify children to be any and colors could be an array of strings and save it and it's formatted for us now for the view we can use a linear gradient here linear gradient from Expo linear gradient adding that here and we'll pass in the colors prop and we'll specify a class name of Flex one now within it you can render the children and for the content so let's add another component here and I'll name this content. TSX react native function export and this will be we can clear this out a safe area View and once again this will take in children any pass that in here and we'll specify class name we'll say Flex one see horizontal padding of five and vertical padding setting that to three so now to utilize that within our app gradient and we'll import that clear these Imports up so now we Define our app gradian let's utilize that in our homepage so I'll be index TSX so rather than doing all this for now I'm just going to do uh gradient actually a better thing to do let's highlight all this be linear gradient bring up the command pallet command shift p wrap with the deviation and we would do app gradient let's import this and we need to pass in this colors property pass that in and so now we can remove the linear gradient is no longer needed save that now we can also can remove this margin that we specified let's just make it px1 okay good so now that we Define a reusable component with app gradient we can utilize that in our new file which is nature meditate so here we can specify a class name a flex one and let's actually navigate to it so we can actually see the changes so now we'll wrap everything in app gradient and we'll put this text in here so option and the up Arrow to move it and we need to pass in the colors which takes in an array of strings so we'll pass this in and we'll use the hexad decimal value of 161 B2 e then we can do our hashtag 0 A4 D4 a and then hash 766 e67 let's save that and here we see this gradient being applied so now let's wrap this so bring up the command pallet with command shift and P we'll wrap it in a view and we'll specify a class name and I'll say margin bottom of six in this text we would do class name of text R I can do control and space bar to see the different options and I'll say 200 now margin bottom of three make the font bold change the size to be text for Excel and I'll say text let so the text Aline is to the left so we can also update this text to be welcome welcome and I'll just add my name here then one another text and I'll say start your meditation practice today now let's specify our Styles so this could be Tex Indigo and and I'll say 100 I'll do text XL for the size and the font medium okay so after add gradient I want to add say status bar status bar from Expo status bar style light soft closing so that makes it display white we want to add another view here and so we want to use the the flat list component and so this is the component that we will use for rendering either a vertical list or a horizontal list so we can do flat list and is self closing so let's import that command and Dot update import now we want to import the meditation data so we have that stored in constants so constants meditation data and so this is the array that we'll be using and we will be rendering this so just copy this and I can say import meditation data from so from the root so the at symbol and then constants and then meditation data so we got that and so we'll specify data to be the meditation data and save that so we can also say so if we do class name margin bottom and let's see the different options here let's just say 20 for now and we need to specify a key extractor so actually let me add these props on their own line so it's more readable so now we can do key extractor because every item in the list needs to be uniquely identifiable so pass in an item and we'll use item. ID and it has to be a string data type so two string now we don't want to show the vertical line as we're scrolling so I can say show vertical scroll indicator to false and then we'll do render item so in this prop we will specify what we want to display for each item in the list so we can destructure the item so parentheses and then destructure with curly braces the item let's press in the arrow function so this would be a pressable from react native and for now we to specify the onpress to console log console.log I'll just say press for now then we can specify let's add this on a new line so it's more readable add that here the class name the height 48 horizontal margin of three it'll be rounded and the Overflow is hidden okay so now within it we'll use the image background component so image background from react native add on its own line so the source of it will be let's import the meditation images as well so this is from constants meditation images so this array is what we'll be using so let's just make a copy of this so I'll just name it meditation images meditation images so here we can specify from this array item. ID minus one as it's index from zero specify the resize mode we cover we can specify a class name a flex one so we can specify the Border radius with rounded and let's see do large and then justify Center so now we can specify text to display within it so we'll do text and then the item. title save that so now we see our images being displayed you can scroll vertically so now let's also apply some Styles so let's say class name is text Gray 100 then we'll do text 3XL we'll make it bold and we'll Center it so here we see our text being displayed in the center of each image and then we want to wrap our text with the linear gradient so let's just specify that here so I'll say linear gradient from Expo linear gradient let's highlight all this and then option and then up arrow and let's specify colors so this takes an array of strings so we'll say transparent and then rgba of 0 0 0 and then 0.8 so the parentheses goes within it save that and then let's do a class name of say if I do Flex one then we can do justify Center and then item Center and so now text is being centered and we are applying our linear gradient for all the items so now let's add our tab bar we do this within the tabs group or tabs directory and let's add a layout file so naming convention is important it's layout. TSX so I can do react native function export and tab and I'll just call this tabs layout saving that and so here let me clear this out and I would do tabs from explor router and I specify the props so I can say screen options pass Javas object so header shown to be false and I'll say tab bar active tint color to be colors. primary so color just import that with command and Dot and that's from our constants file that we specified earlier we click into it just to remind you it's just this very simple JavaScript object so I close that now we can specify our tabs within it so I can do tabs. screen and this is a soft closing component so let's say we do name so the name will be the name of the file and so the one file that we have here is nature meditate so we can specify that here nature meditate this specifies what component we want to use when we navigate to this tab save that and let's specify the options passing in that JavaScript object so the tab bar label that we want to display is meditate let's save that so also let's go to get started let's reload it so command in reload go back to our index page see what we get here in order to get this a display let's up dat the layout in our route and we need to specify stack screens and so this enables another screen to be displayed on top of the current one so rather than using slot we were rendering our child routes previously let's specify stack from XO router then stack. screen and I'll say name being the tabs directory the options being header shown false and that's stoft closing so we can save that also let's just copy this with command shift and down arrow so we want to specify our index page so index so that's all for now so now that we specified that let's click the get started button now and this performs the navigation that we wanted so now we see the same meditation preview page and now we see this very simple tab bar being displayed so this tab bar is Now display because of the tabs layout component that I have in the underscore layout file in the tabs directory so now let's specify what icon we want to use so if I go to package Json we have Expo Vector icons installed as a dependency search that Expo Vector icons so this shows different icons that we can use within our application so let's search for flower to lip and this is one we'll use for our meditation tab so let's copy this we can paste that in here Expo Vector icons and then so another option let's add this on a new line so it's more readable so I'll do here I need do a comma actually first then we can do tab bar icon we'll destructure color pass again our Arrow function now want to do this component here so we just copy that and paste that in here now instead of the color being black we want to specify that to be the color that is passed in that that we destructured let's save that and now we see that icon being displayed for the meditate tab now we also want to create another tab for affirmations So within the tabs directory we can just specify another file for now and I'll call this affirmations TSX react native function export to say affirmations for now and then we can specify down here to make it simple let's just copy all this shift option and down arrow so the name we want to specify the name of the file we just created which is our affirmations and the label it's just that but capitalize the a now for the icon we want to use let's search for open and we're going to use this open book icon so we can copy that and paste that we can actually simplify this import so we can instead do import some material Community icons anden typo see from at XO SL Vector icons so that simplifies our Imports so now we just use e n typo and then we're using open book and so now we see in our tab bar we have meditate and we have affirmations and we can click between them so now let's work on the new affirmations component I click get started and then navigate to the affirmation screen so first we'll apply a class name here we'll set it to flex one let's close the sidebar just so we can see it better so now let's specify an app gradient now within it we'll specify the colors prop passing in an array of strings so we'll do # 2e1 f58 then we do # 544 26b and then we'll do # a7908 F let's move this text up so I it's read this quickly line and here we see our gradient being applied so let's wrap this in a scroll view so command shift and P to bring up the command pallet and we'll wrap it with scroll view let's import that period from react native so let's specify the prop of shows vertical scroll indicator and we'll set that to false so now let's change this text to be change your beliefs with affirmations save that and we'll specify a style for it so the class name we'll apply text zinc 50 for the color text 3XL for the size and we'll make it bold so now it's displ there so let's create a view and within this view we're going to show our horizontal list showing the affirmation previews so all the images so rather than implementing all that here I'm going to create that in the components file so let's bring up our sidebar so here in components new file and let's call this guided affirmations gallery. TSX so react function export and tab so we can close the sidebar here so we can see it better so let's define the interface for the props that we're going to want to structure so we'll call it interface and let me just copy this and then props so we'll take in a title which will be a string data type and we'll say we can call it previews so in constants let's just create a directory we'll call it models and within it we'll create a new file and we'll call it affirmation category. typescript and within it we will export an interface we can call this affirmation category this will be a title and a string and data and we'll say it's a gallery preview data and it takes in specify it to be an array now let's define that so export interface Gallery preview data so that will be an ID which is a number text which is a string and image and we'll say that it is any so now that we Define this we want to import these interfaces so here we'll specify this to be Gallery preview data and it's an array of data so now let's destructure this here so title and previews specify this here and save it so now let's specify a class name here class name of margin vertical five let's wrap this text in a view bring up the command pallet emit WP and then view so we'll specify class name margin bottom of two with this text is where we would render the title of this category uh class name to apply Styles so we'll make the text white we'll make it Bold and the size is eile so let's create another view and this is where we will render our list so let's apply a class name here class name of space vertical of two and here we will use our flatlist component but rather than rendering it vertical as we did on the meditate screen we'll be rendering it horizontal so we'll specify flat list from react native and it's self closing so the data that it takes is previews based on this prop now show horizontal scroll indicator we'll set that to false now for the key extractor which is used to uniquely identify each item in the list specify that take the item and then item. ID and it has to be a string now we'll render item so we need to destructure the item here we'll pass in and specify we'll use the link element which is from Expo router and here we do hre so hyper text reference and we'll specify that in back ticks so it will be slash affirmations slash and then interpolation of item. ID and then we'll pass in the prop of as child so the link element typically has we would specify text as this for example and it would treat it as text but since we are specifying a more complex child component within it that's why we need to pass in and specify the as child prop so here we use pressible from react native and then view so we'll use class name the height of 36 a width of 32 we make the borders border radius rounded and I'll say margin right of four and within this view we want to specify our image so image from react native so the source will be the item. image the resize mode will be cover and we'll specify our styles to be the width full and the height of full and it's stop closing and the last prop that we need to specify for our flat list is we're going to make it a horizontal list so we Define this now we can use utilize that in the affirmations component so here we want to import the affirmations gallery and that's specified in our constants directory in this file so we'll be utilizing this array let's go to affirmations now let's just use it here affirmations and we'll import that and we will map that so map G our Arrow function and we will utilize guided affirmations gallery and we need to pass in the key prop to uniquely identify it so let's just say it's g. tile to uniquely identify that affirmation category we'll pass in the title which is g. tile again and call it the previews which is g. dat save that and here we see all of the affirmation previews have been displayed horizontally so everything that we specified in affirmations Gallery in our constant directory is now being displayed on the affirmation [Music] screen so here in the guided affirmations component in our flat list where we specify how we want to render the item we're using the link element or link component rather so if I click on one of these preview items this will navigate to affirmations slash and then the item ID ID and here this is currently an un mouch route so we need to create a file for this so I'm going to change the structure how I have the files in the tabs component So currently I have nature meditate for this screen and affirmations for this one but because I need to have nested routes for this affirmation screen I'm instead going to make this a folder so right click that and I'll name this affirmations and I will drag and drop this file to this directory and I'll rename it to be the index file so we'll be able to access it the same way through going to for SL affirmations so here it's refreshing let's reload the app reload get started so to get this to display let's create a new layout file in this directory so it'll be layout. TSX so react native function export I'll just call this affirmations layout so let's clear this out and we'll use the stack component again from XO router and within it we'll say stack. screen the name of that file is index and the options will be the header shown false and it stop closing so now let's reload this again so we click get started and now we see the icon displaying properly again so we need to create a new layout file within the affirmations directory so we also want to specify a dynamic route in this affirmations directory so we can name that with square brackets and then item id. TSX so I can do react native function export and then tab I'll name this affirmation practice and so with this route it'll be accessible through for slash affirmations for Slash and then passing in an ID value so this is the file that we will navigate to here if I go into guided Gallery so when a user clicks on this element it will navigate to that new component that we just created so let me resize this again and we will navigate back to that new file that we want to work on close in the sidebar so we can see it in order to access that ID that is passed in through the route we will use the use local search prams hook so use local search prams from Expo router so we call that here and we can D structure that so it's item ID so now we can use that now let's do class name which is flex one now let's use a use State hook to determine which affirmation we want to use so if I go to affirmations Gallery so this is where all of our affirmations are specified so we need to go through all the data Properties or data keys to find the ID that matches based on the ID that was included in the route so this will make more sense once I implement it let's create a use effect from react and the dependency list just an empty array so this is just called when we first navigate to this component and we'll specify our state so we can say use State let's import that and react and this will be Gallery preview data so we'll specify this to be affirmation to use and set affirmation got that now to determine which information we want to display when a user clicks on one of the previews let's just create a for Loop so I'll say let index sign a zero all the index is less than the affirmations gallery. length update that index value so we'll get the current array of the affirmation data equals affirmation Gallery at that ID specified here data so now that we got this array let's find if that ID is found in this list so const off information to start we getting the object that matches our information data got find and it we can specify this to be a if the a. ID is equal to and need to cast this to a number CU this is a string so we specify item id here save that and so now if this is truthy then we can update our state affirmation to start and return to break out of this for Loop currently when we click on an item we still get this unmatched route so let update our layout in the affirmations directory close this let's just copy this with shift option and down arrow and we'll update this to be square brackets and then item id save that so now we click on it let's refresh this command D reload so if I click get started if I navigate to affirmations and then click on one of these previews I now get the affirmation practice page so this component that we're currently working on close that terminal so now let's update what we are rendering here so let's use the image background component background from react native The Source will be the affirmation that we found here and so make it optional the image the resize mode is cover and the class name is flex one so let's save this so now our image is being displayed so now and currently I'm this is a self closing tag but I actually don't want that so we'll do app gradient here and then once again we'll pass in our colors which is an array of strings so we'll do rgba 0 0 0 and 0.3 and then rgba 0 0 0 and 0.9 now let's close this tag just for now just have some text I'll just say test for now just to get rid of that squidly line let's save that so now we see our linear gradient is being applied so now let's specify our back button so that we can navigate back to the affirmations index page so we'll do a pressable from react native and let's use our user router hook so going back to the top so here we can just import let's include the router in the import and we'll specify the onpress method pass in this Arrow function and I'll do router. back now within it so let's go to Expo Vector icons click on here and let's say if I do left Circle then click on this one so I can copy this and we'll use that icon let's copy the component and we'll pass it in here and let's update the color to be white and I'll make the size 50 so let's update the class name so I'll say class name absolute top of 16 left six let me try refreshing this or reloading rather so now we see the icon being displayed if we click on it then it navigates back to this affirmations index page so let's continue displaying the information that we need on the affirmations detail screen or the item id screen rather so we can specify a scroll view which we use to display our text and that's from react native and let's actually specify a class name here of margin top margin top of 20 and shows vertical scroll indicator vertical to be false and within it I'll just specify this here specify view save that so does the formatting for us so I'll specify a class name and I'll say the height to be full and then justify center now within this you can specify another view for this class name the height would be 4 fths and then justify Center so now we can just render affirmations do text so we'll display this for now Ser says text strings must be rendered within a text component and the text and we will move this up dismiss let's reload it get started affirmation screen click on one of these previews and now we see this text being displayed but it's all in black so let's update class name so make it white we'll make the text larger so you can say margin bottom of 12 we'll make it bold and we will Center the text save that and now we see this text being properly displayed in white but currently it's all bundel together so to update this here in the use effect hook I want to split each sentence based on period so here once I find the affirmation that I want to display let's say const affirmation array is equal to affirmation to start. text. spit on the period character I'll say remove the last element if it's an empty string so if affirmations array so the last element affirmations array do length minus one that's equal to an empty string then I I'll just remove that one affirmations array pop because that last element in this case is just an empty string which we don't want to include then I'll say I'll create a new state hook here so I can say use state which would be an array of strings for the sentences to display and I can say cons sentences set sentences here and then I will set that so it'll be affirmations array that I'm setting so let's save this and we're good so rather than just rendering the text all at once let's instead map over the sentences array so I can say sentences do map so it will specify a sentence and the index value passing in our Arrow function and this text let's move it up so highlight it and then option up Arrow we need to specify our key to uniquely identify each text element or component so that would be the index let's did I spell this right sentences sent is possibly undefined so when I specify the hook I'll pass in an empty it right here so that gets rid of that Sly line so for rendering this I'm going to specify the current sentence and because we split it based on period I'm going to include the period here so let's save that so currently hot reloading isn't working for my simulator so I'll have to manually reload it navigating here let's go to one of these and here I see each sentence is being displayed on its own line and I can scroll to read all them so let's see if I do another one such as this preview so we've implemented our affirmation screen and the affirmations detail screen [Music] so now we implemented our affirmations page so let's continue with the meditation screen so when we click on one of these items we want to navigate to The Meditation screen so let's add that so here in the tabs directory we could just add meditate. TSX and let's do react native function export in tab we just name this meditate and save that so now we need to update our layout file in the root of the app directory so it be this one next to the index file let's close the sidebar so option shift and down arrow not to say meditate so let's navigate to the nature meditate file so currently when the user performs a press on this it just logs out press now I want to update that so let's use router from Expo router so let's say router let import that. push and here we can use back ticks I'll say for slash meditate so now after I click on one of these items it takes me to that new component that we just created so now let's work and improve the styles for this component so we'll apply a class name of Flex one so it spans the entire height of the screen let's do image background from react native and we'll pass in the props so we'll say the source now for now we're going to import meditation images meditation images so let's import that first you can say import meditation images from that constant file that we created now I'm going to name this differently say meditation uncore images so I know it's a constant so I'm just going to click into here just to remind you that we imported all these images from our assets directory and exported it as an array so now that we have this array for now let's just use the first one in that array as the background Source now other props that we need to set are the resize mode so we'll do resize mode of cover do class name of Flex one and within image background for now let's just do text and we'll just say test or example so now we're expanding the entire height with the background image that we selected let's remove this text we don't need that great so let's use an app gradient so this will make sure that our text does not span above where the time in the battery is so it's actually readable for the user so we'll say app gradient and we need to let's move this up with option up arrow and we need to specify the prop of colors so colors is an array of strings so first we'll do transparent and then we would do rgba 0 0 0 and 0.8 save that so now we get our linear gradient applied and our text is now visible so one thing I want to add a back button so I can say pressable from react native and so when I do onpress I want to use router from Expo router doback and I'll say the class name is absolute top 16 left six and I'll just apply a zindex as well so I and save that so for the element that I'm going to use within the pressable component I'm going to use the Expo Vector icons Library again so we'll use the left Circle select this one now we'll copy the import statement I can just add that here and then I will copy how we're going to render this component so I paste that in for the size I'll update this to be 50 and for the color I'll use white let's say that and here we see our back button is shown here now before continuing when we look at the tabs we see that the meditation tab the affirmations Tab and we have another tab here for this meditation screen but we just want to show two tabs and instead have this meditation screen be nested for this meditate tab so let's change the structure here we currently have this file within the tabs directory so let's now create a folder and I'll name this meditate and so this meditate file let's drag and drop it into here and rather than it being meditate. typescript or TSX let's rename it to be a dynamic route and I'll just say ID and this ID will help determine which meditation image we want to use as well as what audio file we want to use so with this we need update our layout file so rather than just being meditate it's meditate slid and save that so now after reloading the app when I click get started looking at the tabs I just see meditate and affirmations now if I Go Back To Nature meditate currently we are just navigating to/ meditate but in order to get to this file I need to pass s an ID as it's slm meditate SL the ID to specify or the ID of the meditation that we want to show to the user so let's do for Slash and then interpolation item. ID so now so now after reloading the app click to get started so now I going to click on one of these meditation previews so if I click on this one so now it navigates to this meditate screen so this component that we Define here and when I click on the back button it takes us back to the meditation index screen so here back in this file in order to utilize that ID that was passed to us we have to use the use local search progams again so do const we destructure that ID and then use local search prams and now we can use that ID to specify what image we want to display rather than just doing the one at the zero index all the time so we need to cast it to a number and we do minus one because arrays our index from zero let's save this so now we going to click on Rivers let's reload this so now I'm going to click on Rivers this shows the corresponding image for the one that we just clicked on let's continue working on this component so after pressible let's add a view now let's just give it a class name of Flex one and justify Center let's navigate there just so we can see it with hot reloading we'll specify another view and within it a text so for now we'll just say 0 0 now let the class name of the horizontal margin of Auto the background neutral 200 the Border radius is rounded so the width of 44 and the height of 44 and we'll say justify Center and item Center save this so now we see this white circle being displayed and let's apply some styles for our text so the class name of text for XL will make the text blue blue 800 so we can save that so now it's more visible and so this represents the meditation time or the duration to display to the user so after this view let's add another view container which will contain our buttons to start the meditation session so we'll use let's apply a class name first actually so class name so margin bottom of five and then we will use our custom button that we created earlier we just stop closing let's see the props that we need is title so we'll just say start meditation and it needs an onpress event handler so for now we'll just console log and say meditate we can save that and now we see our meditation button is displaying here so to implement a simple version of this let's scroll up and let's use a use State hook so I'll say const I'll say seconds remaining and then set seconds remaining equal to use State and let's just say 10 seconds for example now we need import this so command dot it's here so let's just utilize this here for example just to show the countdown timer so now it's showing 10 seconds so when we click on the the start meditation button we want to start this countdown timer so the way we can do this is we can use the use effect hook pass in our call back as the first argument and for now just an empty array so let's say let timer ID which is of the type node js. timeout now we'll say exit so in the case when seconds remaining is equal to zero then we can just return otherwise we can do timer ID is equal to set timeout passing in a call back and this will call set seconds remaining whatever the seconds remaining are minus one and this will be called every second so because the second argument of the set timeout method is in milliseconds we pass in a th000 so that's 1 second and another thing we want to do in the use effect Hook is we will return this error function and this will be called whenever the component unmounts so for example if the user were to click the back button before the timeout were to complete so here we would do clear timeout passing in the timer ID so in order for this use effect functionality to be called we don't just want it called when the component first mounts we want to call whenever the seconds remaining State changes now to actually start it let's add a another use state so I can say const is meditating and then set meditating meditating equal to use state of false and let use use this here as well in the dependency list of the use effect hook and when the seconds remaining is zero we will also say set meditating to false now when a user clicks on the start meditating button instead of just console logging it we will say set meditating to True let's save this and so now when we click on this button we should see this countdown being performed until it reaches zero so we're going to improve this this is just a simple implementation now another thing we don't want to call the timeout when the component first mounts we just want to call it in the case when the user has started the meditation session so let's highlight this and move it up with option up arrow and save that so if we restart it right it starts at 10 seconds based on the initial value pass into this used State hook we call start meditation and it starts the timeout so one thing to notice since this is just in single digits right now this text has changed its size and we want it to display the same size whether it's single digits or double digits so let's work on updating that so let's navigate to the layout file in the app directories rout so here we'll use the use Font hook so we'll specify this here say cons fonts loaded and then air equal to use fonts so this is actually specified in the gith repo on the readme file so let's navigate there click on the drop down in the Snippets so you can just copy this and we will paste it here save it now let's import the use Font hook command dot let's do it manually let's do import use fonts from Expo font save that so that gets rid of the eror for us now if we navigate to our Tailwind configuration file here we specifi in our theme to utilize this font with our mono so we can utilize that in this component so still need to add a bit more setup in our root layout so here we'll use a use effect hook pass then our call back and for the dependency list we'll specify fonts loaded and airor now we can say if there's an error then we'll throw that error in the case when the font is not accessible now we can do if fonts loaded then we can do the splash screen. hiide now we also want to prevent the splash screen from being hidden until all the assets are loaded so in this case when all the fonts are loaded so I can say splash screen so we Define this outside of this component do prevent autohide Asing let's add a comment just to provide more context so this will prevent the splash screen from Auto hiding until loading all the font assets after here if the fonts have not loaded return null now I can also do if font's loaded and no error return null get started now we want to utilize this font in this component so we can use that using Tailwind let's scroll to this text component and we will use Font our Mona so click on this we now see this font being used and we do start meditation this one update we need to do let's format it so we can do format the time left to ensure two digits are displayed so I can do const formatted time minutes equal to cast it to a string and we'll call math. Floor seconds remaining / 6 and then we'll do pad start of two digits with zero so we can save that and now so this is for the minutes to display on the left side of the colon now on the right side of the colon we'll display the seconds so fronts formatted time in seconds is equal to cast it to a string seconds remaining and we use the modular operator 60 pad start and passing in those same arguments so now we will use these in our component so on the left side this format of time and minutes and on the right side is format of time and seconds let's save that so now we click on here again so even though it is single digits we are padding it with a zero so now we want to play the associated audio file with the meditation that the user selects so let's create a function here here we'll name it const toggle meditation session status and it will be a synchronous so we're using the arrow function syntax so in the case when the user has already started the meditation and then when it goes to zero we'll reset it so it's at least 10 seconds so in the case when the seconds remaining is zero then I'll set the duration let's say set seconds remaining to be 10 seconds and then this will toggle the meditation state so set meditating and then we toggle is meditating so did that so now for the actual audio let's add another state variable so I can say const audio sound I'll say set sound is currently undefined we'll Define the type to be audio. sound let's update this it's supposed to be audio and we'll import this let's see import audio from Expo AV so let's install this Library so here in Expo we can copy this open up a new terminal change into simple meditation and then we'll run this command so now it's installed we can close out of this terminal and close it with control and backtick and so now this import is available for us so for the toggle meditation session status this will also call a method which will start playing the sound so let's just say const initialize sound it's also asynchronous so I can say const so for this let's first import the meditation data so I can do import meditation data so let me go to this constant file I've defined and so here we defined our interface previously and an object object of the different meditation types and the audio files so now we're utilizing this I also want to import the audio files object so those key value pairs so now in the initialize method that we're working on I can say const sound is equal to the audio sound if it's truthy then we will return it otherwise so now in initialize sound I can do con audio file name is equal to the meditation data and let's cast it to a number ID minus one do AIO so the name of that audio file so then we can do const we D structure sound from a way of audio. sound. create async and we'll use audio files with the key key of the audio file name and then we can say set sound and let's return that as well so for actually calling this function I want to create another function add this here cons and I'll name this Poggle play and pause acing better name would be toggle sound so now I can do cons sound is equal to if the audio sound is truthy then we will utilize it if it's falsy then we will call initialize sound so we can get the status of it asynchronously with sound. getet status async so now we can call the play Method based on the status so if the status is loow then I can do a soundplay asynchronous play sync else a wait sound. pause now another thing we can do we add another state variable to determine whether the audio is playing so we can do const is playing audio and then set playing audio equal to use state so the initial state is false so here in the toggle sound we can call set playing audio to true and otherwise it'll be false we can also include it in this conditional statement so if the status is loaded and we are not playing the audio then in that case we want to start playing the sound so now we want to utilize toggle sound here in the toggle meditation session status function so wait toggle sound so now let's utilize this method when the user clicks the start meditation button so we just add a reference to this so now let's say if I Navigate to this item and I start the meditation this starts playing the sound associated with this meditation up and go back so now when we click the back button the audio is still playing so one thing I need to implement as well I can add another use effect hook so use effect and for the dependency I will specify the audio sound object so when we click the back button and when the component unmounts it will call this function this eror function that we were returning and so I will say audio sound optional. unload async do that so now we click into it and we'll go into another meditation session let's go on this one now when we press the start meditation button it starts playing the associated sound and when we click the back button button it stops playing the audio sound so now when we click on one of these meditation previews we go to the meditate screen and we see that it always is 10 seconds so we want to adjust that so let's add another button you scroll down here I'll just copy this and shift option and down arrow to copy it so now I'll name this adjust duration let's save that let me add another prop here for container Styles and I'll say margin top of four just to add more spacing so now we need to add another component and I want this to be a modal so here in the app directory I'm going to right click and add a new folder and this will be a group so in parenthesis do modal and I will name this adjust meditation duration. TSX so then react native function export and then tab let's close this so adjust meditation duration so now in the root layout of the app directory let's add copy this shift option down arrow and so the name is Modell and then adjust duration actually it's adjust meditation duration let's add to this options object so I'll add presentation and it's a Modell save that so now if we navigate back to the meditate component so when a user clicks on this button to adjust the duration I want to call a method so I'll Define that here and I'll name it handle adjust duration so if the users started the meditation session then we will toggle the status to stop it and it'll be router. push so slash Modell and then adjust ation duration duration and we will add that here for the on press so we add a reference to this function so now if to click on this ad just duration it brings up the modal so now we can work on this component so let's add a class name here class name Flex one and we'll just say relative now let's define it app gradient app gradient and we'll apply the colors so we will do the string array so # 161 v2e then we'll do # 0 A4 d4a and then # 766 e67 and within it that's just Define just for now just so we can see it text and I'll just say test save this so now we click on it we now see that gradient is being applied so we can get rid of this text component outside of it so let's add a back button which we can use to more easily close that mod out so within it here if I go into this component and I just copy here I can paste that in let's import that save now we would do on press so that will call router from Expo router. back and we'll do a class name of absolute top 8 left six I'll just apply Z index there so when we do adjust duration we see that back button here and we can also click on it to close that modal or we can drag this down to close it so it's more user friendly so now let's add a view let's bring it up so we can see those changes that we're making so then let's define a class name of just Define Center and the height is four fths so within it we can do a text where we say adjust your meditation duration so we see that here in Black so let's apply styles to it class name and I'll say text Center we'll make it bold we'll change the font size to text 3XL we'll make the Tex white and we'll do a margin bottom of a so we get that now let's add a view so we're going to add different buttons here so we'll use our custom button component that we made earlier custom button so let's define our props so the title I'll just say it's 10 seconds and on press for now we just console log it console.log 10 seconds and container styles is margin bottom of five let's save that so now we get our button displaying so let's create more copies of this button so highlight it option or shift option and down arrow so we'll create four buttons and let's just update this so 5 minutes all overc case either minutes 10 minutes and 15 minutes so now we have it displaying as we wanted it to and we can click on these buttons but now we can update and we'll add a function here so con handle press Tak in the duration which will be a number and this will do router. back and so rather than console logging it we can update this so we'll do handle press that's 10 seconds handle press of this is 5 minutes so we can Define it like that so it's more easily readable here this is 10 minutes and this is 15 minutes 15 times so we have this connected but we need a way so that the user can select the duration that they want and it closes out the modal but we also need to update the time remaining on this meditation screen to display the time that they selected So currently the state is being stored in this component but we need a way to set that state in the modal so we're going to use that using react context so let's close all this let's create a directory in simple meditation and I'll name this context and within it I'll create a file and I'll name it timer context. TSX so here context acts as a wrapper around my project files so so by utilizing react context this enables me to have different components and have them share State without having to utilize prop drilling so here let's define our interface for the shape of our context so we do timer context type and I'll do duration which is a number and set duration to update it and this will be of type dispatch from react and set State action and it's a number which is the value that we're setting so now we can do export cons ker context is equal to react. create context so we can just import that from react the shape of it is timer context type and we'll pass in our initial object so the duration will be initially 10 seconds and set duration is just this Arrow function so now we can Define the interface so timer provider props the children is react node so let's define this qu timer provider so we'll destructure children see this children so we do colon Define the type now we'll Define our state here so we'll say cons duration set duration equal to use State see and we import this command and Dot then we will return timer context. provider so this is the wrapper component then the value say duration and set duration and then the children we render within it so we defined our context and now let's export the timer provider export default timer provider and we want to utilize it in our root layout which wraps our application so let's just highlight all this and then bring up command shift p so the command pallet and we'll wrap it with timer provider import that so since we wrapped everything I go back to our my context go up here so the duration and the set duration is now accessible for all of the children components so I can access it with the use of a hook so if I go into the Modell we want to set the duration so we could do that here say cons set duration we use the use context Hook from react and we pass in the context and so now we can call this here set duration to this duration argument so we're now able to set it in this model and we want to utilize it on this meditate component so we go here meditate So currently we have the duration set with seconds remaining using the use State hook but now we want to use the react context that we created so for now we can just comment this out then we can do const so we the structure duration and set duration use context and then the timer context and so rather than naming iteration let's rename it to be seconds remaining so now we go and set seconds remaining let's update this to be set duration and this is also set duration so now let's see if I go to adjust duration and I click on 5 minutes now it's updated and I see this duration set because that is being shared between these two components so when I do start meditation does the drop down so let's go back I'm going to refresh it so command and D let's reload it now another thing I want to do I scroll down currently it always says start meditating but I want to conditionally render what I display here so use our curly braces so if the user is meditating then I'll say stop otherwise I'll say start meditation okay good so now let's play it and we can stop it and continue it let's adjust the duration here 5 minutes and let's play it so now it's working as expected we go back and it stops playing the sound so one thing I click back and then when I click back into the meditate screen it's still at 4 minutes and 54 seconds so let's update this use effect hook so we can do it a set duration so the default is 10 seconds so if we click the back button and then go back into it by default it will start as a 10-second meditation before we get started if you're interested in supporting my courses and projects you can follow me on my new YouTube channel and Instagram at Steven codecraft you can also explore my courses at stepen codecraft tocom and if you're looking to enhance your health and fitness routine check out my workout and meal planning app at fitfuel planner.com the app offers off 100 recipes workout plans meal plans and a grocery list feature it's designed to make tracking your calories and macronutrients straightforward and stressfree I appreciate your support and I'll see you in the next section