1 00:00:01,100 --> 00:00:02,720 We just set up react navigation. 2 00:00:02,720 --> 00:00:06,980 Now we're going to make a very small change to our act J.S. file if we call. 3 00:00:06,980 --> 00:00:11,360 We took a look at a diagram like this right here and we had said that we're going to wire up some react 4 00:00:11,360 --> 00:00:16,880 component called our blog post provider and that's going to somehow wrap every other component inside 5 00:00:16,880 --> 00:00:20,940 of application including the react navigation stack Navigator. 6 00:00:20,960 --> 00:00:23,980 So in this video we're going to create essentially this provider. 7 00:00:24,170 --> 00:00:26,310 It's not going to actually do anything just yet. 8 00:00:26,360 --> 00:00:29,170 Essentially it's just going to be an empty component. 9 00:00:29,270 --> 00:00:31,650 That just shows the stack navigator inside of it. 10 00:00:31,790 --> 00:00:35,990 But eventually we're going to come back to the provider and start to add a lot of code to manage our 11 00:00:35,990 --> 00:00:38,530 list of blog posts and all that kind of good stuff. 12 00:00:38,630 --> 00:00:44,920 So let's figure out how we can somehow wrap the stop stack navigator with our own custom component. 13 00:00:45,020 --> 00:00:50,030 So going to flip back to my app dot J.S. file you might recall that inside of here at the very bottom 14 00:00:50,270 --> 00:00:54,720 we call that thing called Create app container and passed in our navigator. 15 00:00:54,980 --> 00:01:00,350 The one requirement of our app dot J.S. file inside of any reactivated project is that we have to export 16 00:01:00,380 --> 00:01:02,060 a react component. 17 00:01:02,060 --> 00:01:07,580 So when we call create app container that takes in our navigator and essentially just returns a very 18 00:01:07,580 --> 00:01:14,060 simple react component that shows some very particular component on the screen like maybe our index 19 00:01:14,060 --> 00:01:15,320 screen. 20 00:01:15,320 --> 00:01:21,020 So in order to somehow wrap everything inside of your or everything inside of application rather than 21 00:01:21,050 --> 00:01:26,870 exporting our create app container right here I'm going to instead assign the results of that to a variable 22 00:01:27,410 --> 00:01:28,900 that I'll call simply app. 23 00:01:28,970 --> 00:01:38,530 Like so and then instead I'm going to export default my own custom component my custom component is 24 00:01:38,530 --> 00:01:40,430 not really going to be doing a whole lot. 25 00:01:40,480 --> 00:01:49,630 It's essentially just gonna be a very simple function that's going to return app like so I'm gonna save 26 00:01:49,650 --> 00:01:50,800 this right here. 27 00:01:50,800 --> 00:01:52,820 I'm gonna make sure my application still works. 28 00:01:52,960 --> 00:01:57,850 Looks like I got a little air here I am getting an error of can't find a variable of react that's because 29 00:01:57,850 --> 00:02:02,500 I'm making use of some J.S. X inside of here anytime we want to make use of J.S. X we have to import 30 00:02:02,500 --> 00:02:08,980 react into the file so I can make sure I go up to the top and add in an import for react from react 31 00:02:08,980 --> 00:02:13,440 like so and now I see the same application once again. 32 00:02:13,440 --> 00:02:18,630 So all we did was rather than directly exporting the app that we create with create our container. 33 00:02:18,780 --> 00:02:23,050 We've now simply wrapped it inside of our own custom component. 34 00:02:23,050 --> 00:02:27,870 So now we can start to add in some more interesting code inside of here to somehow wrap that app and 35 00:02:27,870 --> 00:02:30,010 do some additional things to it. 36 00:02:30,300 --> 00:02:31,400 Now we've put this together. 37 00:02:31,410 --> 00:02:36,180 I know this seems like maybe a small change or a weird change but it's going to set us up for what we're 38 00:02:36,180 --> 00:02:38,020 going to add in the next video. 39 00:02:38,130 --> 00:02:40,560 So quick pause and I'll see you in the next video.