Creating Custom Reusable Message Modals in React Native

hello in this video we'll be looking at how to create custom usable models in react native we'll create various types including ones for regular messages having just a button and also once for decisions having two buttons for all the models we'll handle clicking on the background so that can be used to close the model or do something else also to make it easier to reuse the model we'll create a custom move for it and we'll talk a bit about switching themes in this project we'll be working with typescript from the start however if there isn't pure JavaScript you can just ignore the types that will be adding also I'll put links to the source code in the description for both JavaScript and typescript to start the work I'll create a plain typescript project using Expo so on the command line I'll make use of the command NPS create Expo up and I'll call this message model and this would be Dash codes and I'll pass the template flag gear so that we can choose our templates so I'll make use of the blank typescript template this will go through the process and create a project for us with this done I navigate into the project and then I can open it in a code editor while it's opening the code editor I can make use of the S post art command to start the project and then proceed to open it in them later we are also required to install some typescript dependencies so we hit Y to do that the first thing I want to do here is to define a set of colors that I'll be using in this project so I'll create a new directory and call it config so in the project directory I'll create a new directory and call it config now in this config directory I'll create another file and call it theme Now using typescript so we need to give it to the extension so in this file I'll paste a set of colors that I've already created so over here I have an object and in this object I have a set of light colors and also a set of dark colors and at the bottom I'm choosing the light colors to be exported as the colors for app so we can import this anywhere and have access to all these colors I'll leave a link to this particular file in the description so you can download it easily if you want to use the same colors in your projects what is done let's create a set of basic components that we'll be using throughout the project so for this we'll create a new directory and call it components over here the first component will be targeting is the text so we create a subdirectory and we'll call it text now under the text directory we'll create a new file and call it styled text and then we also have some types for the text to create a types file here and I'll call it types dot CSX now we started working the style text file so over here we'll create a function component and we'll call it style text so style text will be a function and then this function we'll start by returning just a fragment and at the bottom we export this as the default so we export default start text now to make our Imports clean when we are using the components let's create an index file in the components directory so create a new file here and we'll call this index.tsx now in this file we import our star text here and Export it again so we import style text like so from the text directory and then at the bottom we export style text in an object now to be able to monitor the progress of our style test here let's go back to our app file and import the style text so at the top we import style text from the component and then replace the text here with the style text so make use of the style text here and over here we can say something like custom message models so say custom message models now back in the style test file let's import text from react native so we import text from react native and replace the fragments here with a text and we'll close it off just like so next we the structure the children property from the component so we open our curly braces and they structure their children property we can then copy the objects and paste it between the text here once we do that we should see the text here now let's style this a bit so we start by bringing in our colors from the theme file so we import app colors from our theme file like so and then to the test component here we pass the style for this you make use of an array before you bring the object we'll start by setting a color for the text so over here we make use of the tint color for my app colors next we want to set the font size for our text and for consistency across the app we'll take some additional properties we'll first take the small property and then we'll take the big property Now using these properties we want to set the font size so over here we set the font size property and then first we check if the size is small in that case we want to set the font size to 13. otherwise we check if the size is big and in that case we'll set the size to 24. otherwise in the case that we don't get any of these properties it means we want the regular size and we'll set the size to 16. with this done we also want to set the front weight of our text and for this as well we'll take an additional property of both so after the font size we set the font to its property and for this as well we'll first check if the board property was provided so if boot is provided we want to set the value to both otherwise we set the value to normal now in addition to the styles that we've defined here we want to accept some additional Styles if provided so take an additional property which will call Style now to use this we'll pass it as the second element in the array over here so bring the comma and then we pass the style now let's work on the types to fix the errors we have here so heading to the types file where Sports and create a type for style text props now this will continue the properties expected by our star text so we can go to the style text here and copy all the properties we have here and then paste them here now starting with the children property here it will be a react node so we import react node from react so we import react node from react like so and then we assign react node to the children property here now the small property will be a Boolean so for that as well we set the type to Boolean and the same thing will apply to the big property here so that would be Boolean as well and then similarly the board here will be Boolean as well now for that style here we need to bring in the style prop from react native so we import style prop from react native in addition we need to import the textile from rehat native so over here we first assign the style prop and then we set the actual type to textile so for this property it will be a style property and the Styles will be tailored towards the text so we can save this and then we can go back to the style test components over here at the top we import the style text props so import style text props from the types here and then at the point of distraction the properties you can just put the colon and assign the style text props once we do that and save the error should be no more now back in our app file we can start a text here by applying the big property and also the Bold property now we still have this error here because I forgot to make some of the properties optional so back in the size file here we don't expect all the properties to be given while using the style text so make the small property here optional the big here optional the both property optional as well and also the style property optional so the only thing we're expecting here is the children property if the address are not provided we have no issue with that so once we do that then we go back to the app file we see that the error is no more now we can get rid of the text here since we are not using it any longer the next basic component on our list is a button so back in the components directory here let's create a new directory for buttons now for our main file we'll call it styled button and this also have a file for the types now in this start button component will first create a function component so call this start button and we'll assign it to an arrow function and this will just return the fragment for the start and then at the bottom we export as default the start button now let's expose this component in the index file of the components so in the index file we import the start button so import start button here and then in the objects we add style button to the exports when it's done let's go to the app file and import the start button so we can add it to the import here and then below the text here let's make use of it so use the start button and let's say we use this button to trigger the film model so we put fill here once again we don't see anything here and it's completely fine so let's go back to the style button and continue over here the first thing we import is attachable opacity from react native so at the top we import touchable opacity from react native this will be the first component that we return so over here we return the touchable opacity then we close it off like so the next component will be a test component and we'll make use of our star text so we import our star test component here now in detachable opacity we make use of the style text now for the contents of the style text let's bring in the children property so over here with the structure the children from the properties and then once again we can copy the whole object here and then paste it here once you do that we should see the output in the app now let's start this button and we'll start by bringing in the style sheet from react native so we're bringing style sheets from react native and in addition to this we'll bring in our app colors so once again we import our app colors from the theme file once we have that let's create our style sheet beneath this component so we create the style sheet using style sheets that's great and then we pass our object to it the first style we'll be creating is the container so create a star for container like so and for this style we'll assign it to the attachable opacity here so we pass the style property to it and then we assign Styles dots container for this style we'll start by giving it a background color of neutral so we set the background color to our neutral color so app colors dot neutral next we'll set the width to 100 so we set the width here to a hundred percent then we'll align the items in it to the center also we justify the content to the center and then we'll give it a pattern of 15 pixels and then we set the Border radius to 10. to complete the style now let's create a style for the text as well so over here create a start for the text and for this we just set the color to our white color so up colors dots White and then at the top here we assign it to the style property of the style test so Styles dots text and the color should change now for this component as well we want to accept additional Styles if possible so in the properties we'll face the structure Style and then also the structure test Style for the style here we'll pass it to the style of the touchable opacity so we convert the style here to an array and then we pass the style as a second element in the array we'll do the same thing for the style here so we change the styles for the text to an array and we'll pass the textile as the second property now when our button is pressed we want to perform an action so with the structure this action as a property known as on press so it is structure and press from the properties and we'll pass this to the impressed property of the touchable opacity so we pass on press as the on press value we distracted now an additional property you want to take is that it's loading property so we want to take is loading property now when the button is pressed this value can be set to true to show an activity indicator so for that we import activity indicator from react native so import the activity indicator from react native now at the point where we return the children who first check if it's loading is true so we check for its loading and if this is true we want to return the activity indicator instead so return the activity indicator we just imported otherwise we retain the children property now for the activity indicator who first set the size to small so we set the size property and we'll give it a value of small also we set the color property to the white color in our colors so reference are up colors and set it to the white color now we also want to take in the disabled property so with the structure disabled from the properties and for this we can bring these two properties before the unpressed since don't press is a function now for the disabled property we'll pass it to the touchable opacity so make use of the disabled property here and for the value we first pass disabled from the props and in addition to this whenever a button is loading as well we want to disable it so pass is loading as a second value here so if either of this is true we'll disable the button now let's work on the types for our button so in the types file we will export and create the types for styled button props now for this as well let's copy the properties from the start button so over here we copy all the properties here and then we paste them here for the children property to once again be a react node so we import react node from react and then we can assign it to the children here now the style here will be a Star Property from react native so we import Style prop from reactinative in addition to this we need a textile and also the view Style now for the style prop here we'll first assign the style prop and then we pass the view Style for the textile we also assign the style prop and then we'll pass the text Style for this loading property it will be a Boolean and disable to be a Boolean as well now for the unpressor to be a function so we can use the arrow function here and it can return anything at all so we can set any as the return type now these properties are optional so use the question mark here the Star Property is optional textile is optional it's loading is optional as well disable this optional button press is required since when you use the button we want to know what to do when it is pressed on so once we have this we can save it now we go back to the start button and import our types so we import start button props from the types and then where we have our destructuring we assign it to the start button props once we do that our errors should vanish now back in our app file here we'll fix this Arrow here by passing on press property so we pass down press property and we can set it to an empty Arrow function for now let's clean up the page a bit by first importing our app colors from the config file and reset the background color of our container to the primary color swap colors dot primary then we'll give it a pattern of 25 around the content Also let's create a simple style for the text here so for the text we set the margin bottom to 20. then we'll align the text to the center so you can pass this to the text through the style property so Styles dot text now we have all the basics that we need so let's move to the model component itself for this as well we'll create a new directory and our components and we'll call this models now in this directory we'll create a new file and we'll call it the message model this will also have some types so create an additional file for the types now in the message model file we'll create our function component and call message model so this would be an arrow function as well and then we retain the fragment and then at the bottom we can export the message model as the default so message model now head to the index file of the components directory and then we can import the message model and then we export it in the object once we have that let's go to our app file and import it so at the top we add it to the import so import message model from the components and at the bottom just before the status bar we render the message model here now let's go back to the message model here and start work on the design and structure of the model let's start by making a few imports from react native so at the top we import model pressable View and also style sheets from react native now in the components we'll first return the model so return the model here and then close it off so this model will first pass the animation type property and we'll set the value to slide also we'll pass the visible property and I'll set the value to true for now which will update later also we pass the transparent property and set the value to true as well now in this model we use the pressable component here and in this press Apple we have a view now in this view we'll have another view here and this will contain an icon so let's import material Community icon from Expo Vector icons so material Community icons from Expo Vector icons if there isn't pure react native you can install this package or even use react native Vector icons now in this view we render the icon so material Community icon and for the start we'll just use the information variant icon so the name of the icon is formation variants and then we'll give it a size of 75. we'll update all these values when we make the model Dynamic later now for the actual content of the model let's import our style text and the button so import our style text from our text and also we import our start button now below the view containing the icon we'll create another view and in this view we'll first use our style text so we use the style text here and this will contain the header for our model so we can put header here and then we can copy and paste this and this will be for the content or message once you have that the next item will be the button so we have the start button here and for the test you can say okay for the stats nowadays structure let's style it a bit so we start by bringing in our colors from our theme file so we import our app colors from the thin file like so now at the bottom let's create the style sheet so create the styles using the style sheets dot create this should be capitalized now the first I'll be creating here is the container Style so use container and for this style we'll assign it to the pressable so let's go to the top and assign it through the style property so style course Styles dots container now for this style we'll first set it to have a flex value of one and also a pattern of 25. also justify the contents to the center and then we align the items in it to the center like so also we want to give it a background color to be a transparent black so we set the background color property and then over here we make use of the rgba and then we'll pass zero zero zero as black and then we'll give it an opacity of 0.7 and this will set the background to a transparent block the next style we create here is the model view so create a style model view like so and for this style we'll pass it to the view after the pressable so we'll pass it through the style property Styles dot model view now in this style we'll first set the background color to our secondary color so we set background color to our colors the secondary also we set the width to a hundred percent and then we align the items in it to the center icon spill yeah and then we set the pattern at the top to 45 pixels also we give it a border radius of 15. the pattern that we are setting at the top here will enable us to see the content of the model when you move the icon up in a bit in addition to the Border radius you want to set elevation to 5. now this will give us some drop shadow on Android but this will not work on iOS so on iOS we need to set a few more properties just for the drop shadow so first we set a shadow color and for this we use the hex value for black so zero zero zero also we set a shadow opacity and then let's set this to 0.25 Also let's set the shadow radius and we'll set this to 5. and then we need to set a shadow offset and this will be an object and it will have a width value of zero and then we set a height value of 2. now this will give us the equivalence of this faint drop shadow on iOS now the next style create here will be called Model icon this will be for the view containing the icon so model icon and then at the top here we'll pass this to the view containing the icon so style course styles dot model icon now for this style we'll first set a background color value so we set the background color to the neutral color in our colors so up colors dots neutral also give this a height of 100 pixels and a width of 100 pixels also we give it a better radius of 100 pixels as well to make it perfectly Circle now to position the icon in the center let's give it a Justified content of Center and also we align the items to the center now to move this out of the view let's give it a position of absolute so position of absolute and then we give it a top value of negative 50 pixels now just like the model itself you want to give it a drop shadow so let's copy from the style here starting from the elevation to the shadow offset so we copy and then bring the comma and paste it here now to have a bit of Shadow under the icon now for the icon itself let's give it a color so over here we set the color of the icon to our white color so up colors dot White to make the icon color white now the next style will be for the actual content of the model so create another style and call it model content model contents now for this style we'll pass it to the view here containing the contents so style and a past Styles dot model content now for this style we first set the width to a hundred percent so we set the width to 100 percent and once again we Center the contents using the Align items property sets the value to Center and also we give this a pattern of 20 pixels next up let's create a style for the header here so call this header text and for this though we'll align the text to the center and then we give it a margin at the bottom of 10. so at the top where we have the header text we can pass this style to it so we pass it through the style property Styles let's hear that text now for the actual message as well we'll do something very similar so we copy the style here bring a comma and then paste it for this we change the value to message text so we change this to message text and for the margin at the bottom we change this to 20 pixels once we have that we go back to the top and pass the style to the style text here so star equals Stars Dot message text now in addition to this style for the header text you want to be bold and also big so we add the Bold property here and also big as well to make our text bold now for this button here let's give it an initial on press property to get rid of the arrow so we set the Press property here to an empty Arrow function now we have the structure for a regular message model with just one button now let's look at the decision model which will have two buttons so for that let's first copy the start button we have here and then we can comment it off I used control for s slash on my keyboard to do that and below this will have a view containing the two buttons so we have a view here it's and then in this view have two of the buttons so I can paste what I copied twice now let's create a style for this view that we just created so for this we'll call the style decision rule so decision row and for this we'll style it to have a flex direction of row also we'll give it a width of hundred percent and finally we justify the content to have space around it so space around you can then assign the decision rule to our view here so through the style property we pass Styles dot decision rule Also let's create another style for the buttons themselves so this will call decision button So Below the decision rule we'll have a decision button now for this we just set the width to O2 so back here we pass the style to the first button our Styles dot decision button then we can copy this and then paste it on the second Button as well now for the initial content of the decision button you want to change the first content to no in addition to this you want to display an icon so we can copy the icon from the top here and paste it here for this icon you can first change the name to close and then the size to 16 then we can get rid of the color totally Also let's see I can make it all caps just to have a nice look to it now I can copy the icon here and paste it for the second button here for this we'll change the text here to yes and then we'll change the icon here to check now as we progress we'll color code the buttons here so that they can be distinguished easily at this point we are done with the static part so let's move on to the dynamic parts so before we start that let's comment out the decision here and then uncomment the single button that we created initially so we start with the types so let's head to the types file of the model now over here we first want to create a list of the types of models that will be supporting so to do this we'll make use of the inner so first we export enam and I'll call this message types this will be an object and we'll list our types here so first of all we'll be having the field type secondly we'll be having the success thirdly we'll be having the warning Nest will be having the decision and in the situation where the decision can lead to something dangerous we can call it a dangerous decision so you say dangerous underscore decision and lastly we'll call the model info model so the basic model conveying some information now based on the type of message we are handling we want to start the model differently by changing the icon and also changing the colors using the model so for this we'll create some simple types first let's create a type for the icon we'll export the type message icon name and you can add a type to it so for this since you are using the material Community icons in this project the value must come from Material Community icons so first let's import material Community icons from Expo Vector icons so material community we can just copy it from the message model here so at the top we copy the Imports of material Community icon and unboxing the types we paste it here so to be able to get the appropriate type we'll use key of and then type of then we pass material Community icons like so dot clef map so once we do this it will fetch the names of the icons that are available in the material Community icons pack next I want to create another type for the color and for that as well we export the type and we'll call this message theme color type and this will just be a color value and for this you can get it from react native and it was important for us automatically now back in the message model file we import the types so we start with the message types from the types and also we import the message icon name type and also the message theme color type now at the top of the components let's create two variables so over here the first one will create to be called message icon name and this will have a type of the message icon name type that you created so we can assign the message icon name type the second one we'll create we'll call message theme color and for that one as well we can pass the type that we created for the theme color then we can set the initial value of both to an empty string now what you are going to do here is that we are going to set the values of these two variables based on the kind of message we are handling so to be able to know the kind we are currently handling will accept a property and this will call message type so accept message type from the props and then over here we'll make use of the switch statements so use the switch statement and then the value be switching is the message type so we switch message type and inside the switch will be having cases and the cases will be possible values of the message type so our first case will be the situation where we have a fail model and the fill model should come from the message types that we declared so the case will be message types dot fill so in that case you want to do something and then in the end we break so for the field situation the icon we'll be using here will be called close so we set message icon name to close and then the message theme color I'll be using is our fill color so message theme color here and we set the value to our app colors dot fill now I'll be doing this for all the types that we defined here so let's copy and paste this a few times so copy the case and then I'll paste it five more times so now the second one will be handling is a success message so for this we'll change it from fail to success and for the icon we'll be using the check icon and then the color we'll be using is the success color next we'll be handling the warning so for that we change the fill here to one and and for the icon we will change it to alert Circle outline and for the color we change this to the warning color the next situation will be the decision so we change the type to decision for this the icon will be using is alerts Circle check outline and for the color we'll be using the decision color now the next one is the dangerous decision so we use dangerous decision and for the icon we'll be using the same as the decision so we copy the icon name and paste it here for the theme color we'll still make use of the fill color here now for the last case we want to change it to the default value so if any other value is passed apart from the one that is defined here this value will be used so we change this to default and for the icon we'll be using the information variant icon and for the color we'll change it to the info color now one benefits that comes with setting the type for the icon name here is that when I make a mistake let's say if I change this to close it and there is nothing like that in the material Community icon I'll get a warning to check this out and once I fix it the error will be no more now once we have this we can copy the icon in variable here and then scroll to where we have the icon so over here we can now replace the name here with our icon so we'll put the curly braces and pass the message icon name in addition to this we want to make use of the theme that we just set here so we can copy message theme color as well then over here we start by setting the background color of the model icon view so we change the style here to an array and then in a second object we set the background color to the variable we just copied also do the same thing for the button here so let's go to the button and pass a style property so for this we set the background color once again to the value we copied now for the decision buttons we'll apply the color to the yes button so let's uncomment this and then to the style property we'll convert it to an array and then in an object we can set the background color as well so the variable we just copied now let's alternate between these two sets of buttons based on the message type so we start at the top here and then we check for the message type we are handling now since we have two decisions we'll check for both so first we'll check if the message type your handling is the same as message types dot decision or we'll check if the message type is a dangerous decision so check message types dot the dangerous decision and if that's the case you want to return the set of decision buttons so over here we can cut the view here and then paste it here so we can go to the end of this and add alternate value and for this we'll pass the start button once I refresh this it should work fine what is done if I change the initial value of the message types to something like the session so if I change this to message types dot decision we see that the model changes to a decision variant and also if I change this to fill it changes to the field variant like so so we can get rid of this now one thing to know about the icons you are using here is that if you are using icons from different icon packs what you can do is that instead of just using the icon name here you can assign the whole icon to the variable so for instance you can cut off the icon we have here and then use it as the value of the variable so in the default case I can replace this with the icon and then I change the name here to information variant so in that case instead of passing the name to the icon pack over there I can come here and just render a message icon name as the whole component and it should work fine as well but since we are using only one icon packet or just undo this and we are back to the default now in addition to the message type property we'll be expecting a header test property so we expect header text property now this will be a value for the header of the model so once you have the set a text like so let's copy it and go to where we have the header so at the point where we have the header instead of this we'll render the header text value so we open our Kelly braces and render the header test value and what we can do is to fall back to this header we have here so you can convert this to a string and then it will be the fallback value to the header text next you want to take a value for the message so at the top with the structure message text and once again we'll copy this and at the point where you have the message we'll make use of it so over here we open our curly braces paste the message text or fall back to the message we have here the next property we'll take will be called button text so button text now this would be a value that will be using in the pattern so let's scroll to where you have the pattern and then we'll open the curly braces once again and then we pass the button text otherwise you'll fall back to the okay we have here now in the case of a decision as well if we receive the button text we'll use it for the yes button so over here as well we can use the button text so we open the braces and use the button text otherwise we fall back to the value that we have here so wrap all of this in the Kelly braces and for this value we wrap it in a fragment so we open a fragment like so and I'll copy the closing bits to the end of the components now let's add another component now one thing you should notice that not all these properties will be required while using the model so we are providing as many options as possible to make the model customizable but you only require a few basic ones the next property is the alternate button text so we can say alt button text and this value if provided will be for the no button of the decision model so at the point where you have the decision model we'll use this button as the contents so over here we open the curly braces and use the alt button text otherwise we fall back to the value you have already so wrap the contents in the curly braces and then wrap the second portion in the fragments so we copy this and add it to the end of the components like so my app is disconnected so I refresh it once again what is done the next proper to be expecting is the undismissed property so at the top we expect on this mess so on dismiss property and if provided this would be a function that would be called when the backdrop of the model is pressed so for this we'll assign it to the unpressed property of the pressable so we should go to where we have the pressable and pass it to the empress property for our next property we'll call it on proceed so the structure that I saw from the properties so on proceed and for this we'll call it whenever the button is pressed and for the decision model as well when the yes button is pressed so let's go to where you have our buttons and for the yes button we replace the function here with on proceed and we can copy this and also paste it on the single button here now on the next one we'll be looking at is the unrejects so we're taking on Rejects and as the name implies we'll use it when the no button is pressed on the decision model so we'll scroll to have the decision model and replace the on price property here with on reject now the next few properties will be used to indicate activity in the model so first we'll take an exploding property now this value will be used when the content of the model is not ready yet maybe a request is being made before the contents of the model is shown so in this case we'll return an activity indicator instead of the content of the model so for that let's import activity indicator from react native so import activity indicator from react native now let's go to the section just below the pressable and over here we make the check for the exploding property so open the curly braces and check for the is loading property so if it's loading is true we want to return the activity indicator and for this we'll set the size to 70 pixels and also we set the color to our white color so we use the up colors dot White now for the view containing the contents of the model you only display it if it's loading is false so over here we'll make a check once again so we check for its loading and in this case we want it to be false so we cut the end of the curly braces here and close up this View then we can add it to the end of The View like so so to see the activity indicator in action we can get rid of this and then negate the Snowden here instead once you do that we should see the activity indicator in action now we can revert this and then continue now the next property will be taking in is is proceeding property now this property will be used when the button is pressed on the regular model and also when the yes button is pressed on a decision model so for this we'll go to where you have the patterns and if you remember clearly when creating our buttons we made a provision for its loading property and this property went through will render an activity indicator so this is what we are going to use so over here we set the exploding property and then we'll set the value to its proceeding this would be the same for the single button so I'll copy this and then I'll paste it here the final property we'll be working with is there is rejecting property so over here we're taking its rejecting and this will be passed to the no button on the decision model so over here we can copy the exploding property here and paste it on the no button and for this we'll change the value to S rejecting now with all this properties in place we need a way to hide and show our model so that will be our actual final value and for this we'll put it at the very top and record this message model visible now for this value we can copy it and then we'll pass it to the visible property of the model so that would be here now with this in place we'll create that type for all these props that we are taking in so inside the types file for the model we'll create the type so over here we'll export the type and we'll call it message model props and this will be an object as well now for the values in this object we can go back to the message model and copy all the props you are receiving so we can copy everything here and back in the types file we paste it in this object now for the first property which is the message model visible it will be a Boolean so we set the type to Boolean the next property we have here will be one of the values in the message types so we set the type to message types now this is possible because we Define the message types just at the top here the next property which is the header text will be a string so we set this to be a string the message text here will be a string as well the next property is the button text and for this property it will not be required at all times so we can add the question mark to make your options now and this will be a string as well now the alternate button text will also be optional and once again it will be a string further on dismissed property it will be required since we want to know what to do when the backdrop is pressed so for this one it should be a function so we can change this to the arrow function and the function can return any value at all next will be done proceed this will be a function as well and it will also be required so we can copy this and paste it here now for the reject property it will be a function however it will not be required so we change this to question mark and then we can pass the function with the any return type now it's loading here will be a Boolean but to be optional so we use the question mark and then we set the type to Boolean this would be the same for the remaining properties so we can copy this and paste it for its proceeding and also paste it for its rejecting what is done we can go back to the message model and import the type from the types file so the type is message model props once we have this we can assign it to the props that we are taking in here so after the objects we assign message model props what this done we still have one error pending so let's scroll down and check it out so over here we see that arrow is an unpressed property of the reject button it is complaining because we set the reject property to be optional so when we can fix this is to set an initial value for the unrejected property so at the top we distracted on reject property we can set this to an empty Arrow function to get rid of the arrow so over here you can set the default value as an empty our function just like so doing this should get rid of the arrow at this point let's prepare our model for use so we head to the app file over here we'll start by defining a few States so let's import the U State Hook from react so we import the u-state hook from reacts Now using this hook the first day to be creating will be for the visibility of the model so for this state we'll call it message model visible and the sets function will be set message model visible and for the default value we set this to false secondly we'll create a state for all the required properties of the model so for this one we'll call it required message model props and then for the set as well to be set required props so you States and for this the value will be an object now for the values we'll be storing here let's define a quick type for it so for the moment let's create the type here so we export the type and for this we'll call it required message props so required message under props and you can add a type like so now for the properties we'll be defining here let's go to the types file of the model so under models we will see the types file so over here under the message model types we copy from and proceed to the message type property now back in the app file we paste it another type now for the optional button text and ALT button text we can get rid of them and for the message types we need to import them from the types file of the model however we just defined and exported them here but we didn't export them in the main index file of the components so let's do that so in the index file under components we can just export all from the models types for now back in the app file you can then import the message types from the components so we can import message types from here with this done we can copy the type here and then assign it to the state we created using the angle brackets once you do that it will be required of us to provide some initial values so once again we can copy the properties in our type here and paste it here now for the message type we need to specify an actual value so for this we can say the info value and then next for the header text we can just use an empty string and then we can do the same for the message text as well now for the on dismiss we can use an empty Arrow function so we can change this to an empty curly braces and we'll do the same for the on proceed next up we'll create another state for some of the extra properties that we can pass to the model so create another state here and for this we'll call it extra message model props and you have the set as well so set extra message model groups make use of these states and it will take an object now for this as well let's create a simple type for it so at the top here we can copy and paste this type and for this we'll call it extra message model props type so extra message model props type now for the properties that we'll be using here let's go back to the types file for the model and over here we copy from the button text to unreject so back in the app file we can replace what we have here with the content we just copied now over here we'll get rid of the own proceed property here and will maintain the remaining and also we set the dismiss here to an optional property with that done we can copy the name of the type and then pass it to the extra message model props here so once again make yourself the angle brackets and then we pass the type like so now because the extra message model props we have here only contains optional values it's possible that to be empty so in that case we don't want to set any value at all and we want to make this undefined so in addition to the type here we'll pass the undefined so in that case if you are using the value and nothing is passed typescript won't complain next we want to create a set of states for the loading properties of the model so on visiting the message model these are the properties that I'm talking about so you can copy them and then back in the app we paste them here once you paste them we have to comment them so we start with the state for its loading so create a state it's loading and then sets is loading and for this we set the initial value to false once you have this we can copy and paste it a few times so we copy this and paste it two more times now we can copy it's proceeding here and replace the text here with this position and we can't do the same for this and just get rid of the eye also we can copy its rejecting here and replace is loading here with it and do the same for this property as well and then we can get rid of I once we have this we can get rid of the commented code now I need to refresh my app since it's out of sync next let's create a function for hiding the model so for this function we'll call it height model so const height model and we'll set it to an arrow function and in this function all we do is to set the model visible so set message model visible and we'll pass the value of force next you want to create another function for showing the message model so for this we'll call it show message model and also this would be an arrow function now for this function we'll expect to receive a few properties the first being the type of message so the first property will be message type and for this we'll assign it's a type of message types the next thing we expect here is the header text and this would be a string and then we'll expect the message test itself and this would be a string as well the next thing is the home proceed function and this will be an arrow function that returns anything at all and lastly we expect to receive the extra properties so for this we call extra props and this will be optional and to be of type extra message props so extra message model props now in this function the first thing we'll do is to set the model visible to true so we set the message model visible to true next we set the required message model props so we set the required message model props and this will be an object of all the properties that we received so the first will be the message type and then there that text and also the message text here and then don't proceed and then we set a default value for the undismissed property here so on dismiss we'll set the default value to hide model we assign this value so that by default on clicking on the backdrop here the model will be dismissed the next thing we'll do here is to set the value of the extra props so we set extra message model props and we'll pass it the extra props now at this point we'll create a variable and call it message modal state So Below this create a variable and recall it message model States now in this object we first pass the message model visible so message model visible and secondly we pass the required message model pops so for this we can copy the variable here and then we paste it here now since this is an object we can spread the values in the object like so will do something similar for the extra message model props so at the top we copy the extra message border props so you copy extra message model props here then back in the objects you can pass it here and once again we spread it now in addition to this we are downloading states that we created so we can pass its loading and then it's proceeding and then it's rejecting with this done we can spread this message model State onto the model so we come to the model here then we spread the message with our state like so and the model should vanish now we can toggle the model using the button that we have over here so in the body of the unpressed function here we can call our function to show the model so we can call show message model the first properties to be passed is a type of message so for this we use the message types and then we select the fill model Nest is the heading of the message so for this we can say login field and then for the actual message we can say no account with your email address please sign up first what is done the next property we need is the unproceed function so at the top here we can quickly create a function for that so we can call this handle proceed and then we can just look to the console that we are proceeding and very importantly after whatever we want to do here we have to close the model so we call the height model function then we can copy this let's correct this to handle proceed so we can copy the name of the function and pass it as the last argument now once we have this pressing on the button here should bring up the model and also pressing on the backdrop should disable it however if you show the model again and we press on the button here it closes and then once we go to our command line we see that proceeding has been logged to it looking at our current setup if you want to use the model or any other page you need to set up all these functions the states and also the types that you have over here now this is quite tedious and error prone so let's move to the fun part which will get rid of this problem and that is using custom hooks so in the main directory of our project let's create another directory for hooks now in this directory we'll create a file and we'll call this use message model this also have some types so create another file and I'll call this types.tsx and lastly We'll add an index file now in the use message model file we first create a function so call this use message model and this will be an arrow function and at the end we'll just export as the defaults to export as default use message model now back in the app file you want to extract some of the codes that we have here into our newly created files so starting with the types here let's cut the types that we have here into the new file so we cut the two types and then we visit the types file of the hooks and then we can paste it here like so now message types is missing so at the top let's import that so we import message types from the components like so and we are good next going back to the app file we scroll to the bottom and we cut from the message model State here up to the app session so we cut to where we Define the app including the message model of visible state nowadays we head to the use message model and we paste it here now we have a few issues to deal with starting with the use State hook so we import use dates from react next let's import the message types from the components so import a message types from the components and after this let's bring in the required message model props and also the extra message model props so we import that required message model props and also the extra message model probes now at the end of this function you want to retain an object now in this object we first return the message model State here so we can copy the name here and pass it like so in addition to this we want to pass our function for showing the model so show message model will be added to this object as well and then we want to pass the set methods for our loading properties so starting with this loading we copy the function and then we add it here and for the rest we can add it on top of our head so set is proceeding then set is rejecting with that done we need to expose our use message model hook for using our app file so in the index file under the hooks directory we import the use message model hook so we import use message model hook and then we export it once again in an object use message model now back in the app file we don't need to use it again so we can get rid of it and now we import the hook that we created so we import use message model from the hooks like so now at the beginning of the app I can call this message model Hook and the structure some properties so I can destructure the message model state and also the show message model and also height model or from the use message model now it looks like we forgot to add the hide model so we are getting an error so back in the use message model we add the hide model to The Returned object so we add height model once we do that and go back to the app file the error should be no more but this done like so we should still be able to show our model with no problems at this point let's see how we can use all the properties of our model so to start that I'll start this button briefly and duplicate it so for this I'll style it to have a background color so I set the background color here to our red color so up colors dot fill and I also set a margin at the bottom so margin bottom of 20 pixels with this done I'll copy and paste the button five more times so I'll copy the style button here and I'll do it quickly now edit all these buttons and change their colors and text to match the types of models you have once I finish that I'll come back okay so I've updated all the buttons here and clicking on each of them will give you the appropriate model now we can proceed to look at our various properties so to give us an idea of the properties that we have let's open the message model component here so over here we have all the properties that our model can receive now I have a lot of TAPS open so I'll close the other tabs here and then I'll open the app file again so that we can easily switch between them so looking at the message model here we've dealt with the visibility the message type the header text the message text but we are here to do with the button text so let's look at it so back in the app file the button text can be passed through the extra props so for instance let's go to the section where you have the success model so the success model is the second button and in our situation here we have a model for when an account has been created successfully so in that case one thing we can do here is that we can replace the button text here with proceed instead of ok so to do that we'll pass an object as an additional property to the show message model and then in this object we specify the button text so we set button text and then we can set the value to proceed now once you have it like so pressing on the success here you should see the model which proceed as the button text back in our message model the next property is the alternate button text now this applies to the decision models so back in our app file let's locate the first decision model now to make it uniform we'll make use of both the button text and the alt button text so once again we'll pass an object here and then we'll set the button text to proceed and then for the alternate button text you can set the value to cancel what this done is saved when we trigger a decision model like so we should see cancel and proceed as the text of the model once we close this and then get rid of this we see that toggling the decision model brings back the no NES buttons so we can undo this to maintain our change now looking at the message model the next property we have is the on dismiss this has been handled defaultly in our models however if you want to perform an action before you dismiss the model we can do that so back in the app file here at the top we can create a new function for the dismiss so we can call this const handle dismiss and we'll assign this to an arrow function now over here we first do whatever we want to do so let's say you just want to log it to the console that we are dismissing so use console.log and will pass this mission then after that we can proceed to hide the model so for instance we can pass this to the info button we have here so let's scroll to where you have the info model then over here in addition to the properties of the show message model we pass the objects and then we pass an undismissed property and then we set the value to handle dismiss now once we have it like so we can show the info mode out here and when we press on the backdrop to dismiss it we can check on the command line and on the command line we see that this machine has been locked so meaning that our action was performed before the model was dismissed looking back into a message model the next property we have is done proceed this we've handled already so we move on to the next one which is on reject now once again this property applies to the decision model so back in our app file we can create a new function for rejecting So Below the dismiss we can say handle reject and this would be an arrow function once again now just like the handle dismissed we can copy the content here and then paste it now we can change the contents we are logging here to rejecting and then to make use of this function let's pass it to the dangerous decision model so let's go to where we have the dangerous decision and then we pass the objects and then in this object we will set on Rejects and we'll set the value to handle reject now when we show the dangerous decision model we can click on no here to reject it and then when we check the command line we see that rejecting has been locked so once again our action has been performed so as performed before the model was dismissed checking back in our message model we are done with the function properties and we are moving to the Loading properties starting with the is loading property so back in our app file here let's see how we can demonstrate that now a quick way we can demonstrate this is to make use of the use effect hook so let's import that from react native so at the top we import use effect from react and then just below our functions here we'll make use of the easy effect hook so use effects to take a function and then we can pass an array now over here I want to set this loading property to true now the set is loading function is written by the model so you have to destructure it from the model core here so in addition to the values we are distracting here let's add the settings loading function and let's add the other loading functions as well so we add set is rejecting and then set is proceeding now back in the East effect hook I also want to make use of the set timeout so what you are doing here is that you are making use of this setup to simulate a typical call to a backend API so while the application is waiting for a response to set the loading property to true and once it's done to set the loading property to false so we set is loading to force so this will do that after four seconds now we can quickly press on any of the models here and you'll see that to be loading and after four seconds the model should come up just like so so that's how the exploding property works now let's comment this and move to the next property checking our model the next property we have is there is proceeding property now this property can apply to almost all the models we have here it can apply to the success here and also the decision we have here so back in our app file here let's try it with a success so to be able to do this let's go to the handle proceed function now in this fashion we'll make a typical API call once again so at the start of the function we will set is proceeding to true so over here we set is proceeding to true and then after this we'll do whatever I want to do here this will typically include the call to the backend API and then once you are done with this we have to set this property back to false so that will be after the API call has been completed so use the set timeout once again to simulate this effect so let's copy this and then paste it here so we can uncomment this and then we'll change this to set as proceeding and also we'll hide the model only after we get a response from the request so we can copy this and then comment out the code here and then after it's proceeding it's set to false we can hide the model like so now to test this out let's enable the success model so over here we call the success model and one represent proceed we see that we get the activity indicator here it will continue to load until it's done and it will hide the model just like so and checking our command line once again we see that proceeding has been locked as well now having a look at our message model the last property is there is rejecting property and we'll do it in a similar fashion today is proceeding one so inside the reject function here the first thing we'll do is to set its rejecting to true so set is rejecting to true after this we'll make our various course as usual and then when the request returns we will set is rejecting to false this is very important so we'll copy the set timeout once again and then we'll paste it after login to the console so over here we'll copy set is rejecting and we'll replace the call here and once again we'll comment out this call to hide the model now we've already passed this function to the dangerous decision model so we can try it out so we click on the dangerous decision model here to show it now when we press on the no button here we see that we get the activity indicator and this will run until the 4 seconds is up once it's done we see that the model is hidden and then if we check our command line once again we see that the action that we defined has been performed already now we've seen how to use all the properties of our model now let's consider how to use the model on a fresh page so for this let's create a new directory in our project and record this screens and we'll create a file in it and call this profile now in this profile screen we'll create a function component so we have profile and we'll assign it to an arrow function once again and we'll return a fragment and at the bottom we export this as the default of the file so export the default profile now back in the app file let's import this profile page so at the top we import profile and then just before the main Return of the app function will return the profile instead so at the top we return the profile and this should give us a blank page like so now back in our profile page let's import view from react native from react native and then let's import our style text and also the start button now first retain The View component here then for the content let's go to the app file and then copy the style text here and the first start button so we copy the two here then inside the profile page we paste it between the view now let's get rid of the style here and then give it a margin at the bottom margin of 20. and for the button we can get rid of the whole style here also we correct the margin button property like so and then inside on press property here we comment out the show message model lastly let's start the view a bit here so give it a flex of one pattern of 25 align the items in it to the center and then we justify the content in it to the center as well now I have to refresh my app to get a result also we change the contents of the text here to profile details or profile page then we change the contents of the button to show details now we have this as the basic setup of our page and we want to use the model on this page also we can even get rid of this to ensure that we don't have any model related content on this page so having our page the way we want the first thing we need to do here is to import the model from the components so we import message model from the components now render the message model at the very bottom of our component so we can do this just below the view or even if you want we can do it outside the view and wrap it in a fragment so we do message model now the next thing we need here is to bring the use message model hook that we created so at the top we import the use message model hook now at the top of our components we call this hook and while calling this hook we distracted the main values for our model so first with the structure the message model state and secondly with the structure the show message model these two are the most important and basic values if you only want to do the bare minimum and all this will be distracted from the use message model hook once you have this you have to spread the message model State onto the model so we copy this and then down here we open the curly braces we spread the message model State and close it up like so once we have this we can now proceed to show in the model so without button that we have here inside on press property we call show message model now the first property we need to pass here is the type of model that you want to show and to help us with the types available we import message types from our components so at the top we import message types from the components and over here we can State message types dot info next we pass the header for our model and in this situation we can say profile details so that would be a string and we say profile details next we pass the actual message of the model so for this one we can see you are John Doe and you join this platform two years ago nowadays done we have to pass the final property which will be the on proceed function now since we don't want to do anything here we can make use of the function to hide the model so for that as well you can just get it from the use message model so we can get side mode out from here then we copy the name and pass it while calling the show message model now it is done when we press on the button here we should see the details of our profile and pressing on the back should dismiss it and also pressing on the OK button here will dismiss it as well now that's all it takes to use the message model on a fresh page now back in the app file let's comment the profile we are returning here so that we can talk about the theme now concerning the theme since we defined all our colors in one file under the config here it's really easy to switch the theme all we need to do is to set the up colors here to our dark colors like so so I can get rid of this and set it to the dark colors once I do that the app will refresh and then we'll make use of the dark colors so if I display any of the model right now it will be in the dark mode now this is the manual way of switching the theme if you want to provide a convenience way of switching the theme and persisting the theme throughout the app we have a guide on doing that on the channel so you can check it out the link to the full source code for both the JavaScript and typescript version of this app will be in the description below please leave a like on this video if you found it useful and I'll see you in the next one thanks for watching

Channel: ToThePointCode

Views: 2,970

Keywords: tothepointcode

Id: oHIt1P2Leao

Length: 92min 58sec (5578 seconds)

Published: Fri Jun 30 2023