React Native Tutorial #34 - Custom Button Component

Key Takeaways

okay so we've pretty much done the farm now but I do want to address this bottom because at the minute it's quite CAC it doesn't look great and I'd like to create my own custom button component which we can customise a little bit more because we can't have a style proper to this default button component that comes with react so let me get rid of that form and I'm gonna go into the shared folder and create a new file called the button dot Jes so that in here first of all we need to import a few things I'm gonna paste those in the first one is react right here import react from react the second one is the style sheet touchable opacity which we'll use because we need an impress handler for this button and we're not using the default button component so we need this for the on press then we have a text component and a view component so let's now create the button component I'm gonna say export default and it's a function and we're going to call this flat button because this is going to be a flat button so let's now first of all correct this so default not be fatal default like so and inside here we need to return some JSX and the first thing we're going to do is a touchable opacity components we'll come back to the unpress handle it later on then we need a view inside that and I'm actually going to give this a style now we'll come back to the Styles later on down here when we create the style sheet but it's going to be Styles dot button and then inside the view we need some text and we'll do a text component for that and I don't want to hard-code what's here inside the text instead I want to be able to take it in as a prop so that it shows here so let me destructor up here we've not passed anything into the button yet but we will do in the future and we'll pass in a not test a text value so we're going to output that right here inside the text component and we also want a style for this components that will be styles dot and I've just figured out the reason whenever I type Styles here it auto corrects to style sheet which is a bit annoying I think it's probably because I've not yet created the Styles constant down here still it is annoying so I'm going to change that back to styles and this is going to be called button text okay so we have this component pretty much done we need to add on an on press hand alert right here and that's going to be equal to some function again we're going to pass that function into the flat button because not every press on every button is going to be reacting the same way so let's instead pass the function in here and we'll call it on press and pass it into this touchable opacity so that's pretty much done we just need to do the Styles down here so Const Styles is equal to style sheets and we say dot create inside we need to do a rule for the bottom so button first of all and then the bottom will have a border radius and that is going to be about eight pixels it's also going to have padding vertical and that is going to be about 14 pixels we need a padding horizontal and that is going to be about 10 pixels and then finally we need a background color which is gonna be a hex code I've already found and that is f 0 1 d7 1 okay so we'll see what that looks like in a minute I think it was like a pink color so now we've done the button well let's move on to the next one which is the button text so this stuff right here and that is an object inside we want to first of all color the text white and the next thing we want is a font weight or bold and after that we'll do a text transform and make sure it's all uppercase and then we'll do a font size of about 16 pixels and then finally text align to the center okay so this should hopefully look pretty good so we created this component now and we need to pass in a text prop and also an on press fortune as a prop as well so what do we want to happen when we click this thing so all we need to do now is render this flat button we've exported it so let's go and import it inside review form first of all we'll do that down here well import flats button from and then we come out of the current directory so forward slash then into shared and then we want to grab the button file okay so we have the component now we can render it instead of this thing here so let's delete that in fact we'll take this thing right here because we're going to pass that as a prop to our flat button so let's replace this with a flat button like so we'll pass in a text prop and that is going to be submit and then we passing the unpress prop as well they're the two props that we receive in the flat button component so we're passing in this function and this text and now if we cross our fingers press save and let it reload hopefully we should see that new button appear like magic so let's go here and okay that looks a bit better yeah we're not gonna win any designer wallets for this but it looks better than the one I had before I think you can probably improve on this and I encourage you to do so but still let's make sure everything works so review title tester ooh the review body testing one two three four and the rating is going to be to submit that and everything still works awesome so there we go we've created now pretty much the whole app everything is all working alright so there are just a couple of finishing touches I want to do for completions sake and what cycle knows in the very final video which is coming next