Intro to Styled Components in React Native

in today's react native school lesson we're going to be taking a look at styled components if you've worked with react you may have used this library before it's alternative way to actually creating styled components and then they may suggest it allows us to write CSS and basically build components best way I found is pull earned by coding so let's go ahead and dive in the first thing you'll want to do is add styled components to your NPM packages or your node modules via yarn or NPM once that's complete we can go ahead and start using it basically the way you're going to use styled components is replacing anything you would use a stylesheet and styles for is going to now be a styled component so I'll start by importing styled from styled - components and since this is react native we'll do slash native now a styled components you're actually writing CSS rather than CSS and j/s so what I'm going to do is say Const container is equal to a styled dot view and then we're going to use back ticks for template literals and inside of here is that where we actually write our CSS so since this is real CSS we're going to say flex colon one with a semicolon at the end we'll also use a background - color we'll set the color for that there's no string around this again ending with the semicolon and we'll set eight justify content to be flex - and now I'm not used to writing normal CSS so I'll probably be making a handful of mistakes of adding quotation marks around various properties but since we are using string interpolation here or template literals you don't actually have to do that so if you use this component we'll go ahead and take container and I'll find the view that's actually using stylus container now you can just go ahead and replace it I'll go down and make sure we've updated the bottom as well so now if we save this and it refreshes everything looks exactly the same likewise we can do the same thing for our value text we'll set this to a styled dot text and you can see that's the pattern we're going to use styled dot text and since we are using styled component slash native that text is available to us we can go ahead and set the properties and with those complete we can go ahead and replace our text style with style stop value to be our value text and as you can see looks exactly the same by the way this example is from my course react native by example I'm gonna have a link to where you can get all of this code for this example once we're done down in the description but since that's completed we can go ahead and delete this Styles object and we can delete all of these components as well so now we've got these container components value text and you can see they're very much compartmentalized the styles are right where we defined the components and it's just a normal component we can use great thing about this is one it's very clear what the Styles relate to and two we can reuse these in different spots if we so desire because it is a component it's not just a style object now let's go ahead and actually do a more complex examples so basically all of these buttons if we scroll down you can see they're all the exact same button component they just have different props they have different themes and they have different sizes okay and basically that's going to go ahead and change the actual button color as well as the text color now this component is an app / component / button yes again we're going to be importing our styled from style - components / native and if we scroll down let's look at what we've got we've got a touch will opacity which surrounds a text input that text and the button can actually be changed based off of props from theme as well as size so let's go ahead and do this text component first and then I'll come back and do the touchable opacity so let's create a new style text that we'll call button text and that's going to equal styled dot text we'll use those back ticks and then I can go ahead and start with signing our Styles if we scroll up you can see we've got text styles which has a styles of text by default so we know it's got a color and a font size we'll go ahead and convert this to normal CSS okay and then to use this button text we'll just go ahead and replace our text down here with button text now it renders similarly but you can see we're not changing the text color dynamically to go ahead and do that the first thing we need to do is here we've got our text styles we're gonna go ahead and basically pass the property what that we're doing the computation based off of and in this case it's theme so past theme equal to theme down to our button text component and then inside of our button text basically when we have a secondary theme we're going to go ahead and use style text secondary which just changes the color of the text so what we can do is actually down in our button text since we're doing template literals or stray interpolation here we can actually do computations in it by using the dollar sign curly braces to pass dynamic variables in there and something that style components is doing is allowing us to access the props from within each one of these properties so we can access a function called props or a function that's going to be passed the argument of props and from in here we know we've got a props dot theme if props dot theme is equal to secondary then we're going to return the zero six zero six zero six color otherwise we'll just go ahead and return our typical white so if I save this now you can see we've got the white text and our normal buttons and then we've got black text here in our secondary buttons let's go ahead and do the same thing for the actual button this time though it's a bit more complex but we'll build up on it incrementally so first off let's just do our base button so we'll create a new button that's going to equal a style touchable opacity and if we go we know our default style button style is just style stop button so just go ahead copy all of these properties we'll pay season here and convert them to normal a CSS first off as these semicolons then we need to chain camel casing - just dashes and something that's nice about style components is if you are making this transition and you're like me and you're not used to writing typical CSS anymore it's got different integrations with different browsers like I've got it in Visual Studio code here to kind of point out where some of these issues are so I think I've changed everything now a few things here we can see I'm doing a computation here math dot floor just like up here what I'm going to do just put a dollar sign curly brace around that and just rather than doing a computation here based off props I'm just passing my math floor button width minus 10 I'll do the same thing for our border radius and now if I go ahead and use this button and I'll do is replace petrol opacity with our button I'm still going to pass unpress to it but I no longer need to pass style to it I'll see I've got a failed to parse declaration margin 10 per margin 5 basically like I said this is CSS so we need to define things in the same way we would define CSS the way this works is you've actually got to specify units because it does support different units we need to add 5 pixels even though pixels don't necessarily exist within the context of react needle but that's just a caveat of working with styled components which also works on the web another error I've got here is I put quotes around my centers so we'll remove those refresh it and now we've got our buttons back you can see though we don't have our Styles looking down here at our themes we see that we've got our secondary style which is going to change we've either got a secondary or an accent color and if we look at those buttons secondary and button accent we're just changing our background color so just like our button text for our background color we'll go ahead and make that dynamic to do that we'll use the curly braces and in here where I'll access our props which can be a function it doesn't have to all be on one line I'm going to use a switch in which we'll look at the prop stop theme and we've got three cases we've got a case of secondary a case of accent and then I'll have a default case our default is just going to be the three three three three thirty and since we're in a function we actually do need to wrap this in the quotation marks you okay and then we can do the same for our accent colors or our other themes so we've got our secondary let's do the accent color and it's not changing the reason it's not changing is we haven't passed the theme down to our button so I'll go ahead and pass the theme as a prop and now we've got those different colors we're just about done the only problem is this zero should be taking up more space than it is and that's going to be when the size is equal to double we've got this button double now button double as you can see down here basically we're stacking our Styles we're combining size we've got style stop button as the base we'll add on button double then we can add on our different background colors we've got the dynamic background colors but the double button is going to be a bit more comprehensive and rather than having to redefine all of this we want to continue to kind of stack styles on top of each other so what we can do to actually accomplish that with styled components is we can go ahead and create a new component we're going to call this constant double ok and that's going to equal styled and rather than saying style touchable opacity it's going to be a function in which we pass the base component we want to work on and that's a button so it's going to go ahead create a styled touchable opacity with all of these styles and then we can go ahead and start overwriting different properties and in this case if we go up to button double we can go ahead copy all these properties and we need to go ahead and just make this normal CSS now to use the correct button what I'm going to do is down in the actual component that I'm exporting is I'll delete all these styles because we no longer need them and instead of using button directly I'm going to create a new component called button Co MP button comp or button component and in here I'll say if the size is equal to double then use the button double component otherwise you use the normal button and then we'll go ahead and replace button down here with button comp and you can see things look different but they're not quite right this is another caveat with styled components or it's almost like a benefit because flex is actually working the way you would expect it to coming from the web if you don't know react native has kind of a weird implementation of flex one it's not what you would expect it to be but with styled components it's what you expect it to be it's the actual real spec for flex so this is a kind of a benefit but if you're coming from a long time with react native like I am it's a bit different so basically to accomplish the same thing you might need to tinker around for me I need to set flex shrink to zero and I need to make sure I add that are and here you can see we've actually got those styles so if I go through and actually delete the code that were no longer using again we've got that benefit of clearly defined components which we can reuse as we saw down here this is actually a few lines less code I'm not big on counting lines but maybe you are this is just a different way of styling in react native which I found beneficial I haven't used this in production yet but I'm considering kind of toying with this a little bit more just to make some of my more simple components more reusable in different spots so to wrap up a few pros of using style components one it's your writing real CSS here it's button or its background - color not background capital C color so people coming from the web are going to be more familiar with it they're going to be able to more easily write things like I've been saying you've got very clearly defined components not just style objects that you have to import use in different places these are actual components that you're building with if you look at the documentation there's a bunch of advanced functionality like using proper themes not these kind of fake themes I've got set up and I think that's a really really powerful thing especially as we're moving more towards applications that have both a light mode and a dark mode and then finally you can mix this code really easily with your existing code it's not like a big transition you have to make you can easily just start playing around with it a little bit as you saw here we did this migration but you can just do one component at a time or you can just start building that next component with stout components to see how you like it now the one big con that I found and this might just be you know my background personally is I find styled components to be a little bit more verbose than I'm used to but I think that's just a familiarization thing as you get more familiar with it it'll get more and more normal and feel right so I hope you found that lesson useful definitely check out styled component kind of the startup cost is really really low and it could bring some nice processes into your design system in your application

Channel: React Native School

Views: 7,321

Keywords:

Id: ll7e76BBcKI

Length: 15min 26sec (926 seconds)

Published: Tue Jul 28 2020