How to Enable Live Reload for React Native Apps

How to Enable Live Reload for React Native Apps

 

This video shows how to speed up your React Native development by enabling live reloading of your app.

Transcript

One of the great things about developing apps using React Native is that when you make changes to your source code in JavaScript, those changes can be seen in your app without having to recompile your app. The way you can do that is just to reload the app using command R. There’s a way that’s even quicker than pressing command R to reload your app. You can get the app to update itself automatically. This is something called live reload. I’ll show you how it works in case you haven’t seen it yet.

Now I’ve created a brand new out-of-the-box app. Currently I don’t have live reload enabled. If we make a change to the app, perhaps we want to increase the font size, we make the change to our source code and then go over to the simulator and press command R to reload the JavaScript. There we go. The text has increased in size. Let’s try enabling live reload.

To do that we press command D and then simply click on enable live reload here. Now let’s try increasing the font size again. I’m going to save this file. As I do so, watch the app on the right hand side. I’m saving it now. There you go, the font size has increased. The app reloaded automatically having seen that the JavaScript file had been updated. If you haven’t come across this before, this should make developing React Native apps even quicker and more fun.

How to Set a Full-Screen Background Image in React Native

How to Set a Full-Screen Background Image in React Native

 

This video shows how to get a full-screen background image in your React Native apps.

Transcript

Let’s suppose we want to add a full screen background image to our React Native app. I’ll show you how to do this in an IOS app, but the same principle works just as well for android as well.

Here we go. Here’s our app. There’s no background image at the moment. The first thing I did was to create an images folder in the app. This is at the same level as, this is at the top level. Inside that folder, I’ve added the image that I want to use for the background.

Let’s have a look at that image. Here you go. It’s a nice view of a pier on a lake. You can see it’s landscape mode, landscape orientation image. Let’s apply that image as our, as the background for our app.

Now, you can see the container for the app, is a view element. The first thing we’re going to do is switch that out. Rather than view, we’re going to use an image element. To use an image element we’re going to have to add it up here. Just put image in there and then we can change this over from view to image.

The thing with image elements is of course, that you need to specify the image to use for them. Let’s do that here. The syntax we use is require. Then, because we’ve, what we’re doing here is putting the image inside the app itself. We’re going to use this relative path to the app, which is ./images/pier.jpg. Now, that should give us the image as the background. Let’s really load to the app. There you go, so the image is now being used as the background for the app, but it’s not exactly what we’d want. The image is not really aligned in a nice way and you can see that the text that was here before in the app, has now disappeared.

I believe the reason is that the full image is hidden off the side of the app, here. The text that would have been in the middle is now somewhere, the middle of the … The image element is now somewhere over here, so you can’t even see the text. What can we do about that? Well, the way to handle that is to reset the width and the height of the element.

The way we can do that is, so currently it’s getting the width and the height form the image, I believe. What we can do to reset it, is do width, null. Height, null. Now, let’s reload and there you go. You can see that the image is now nicely centered and so is the text.

That’s looks pretty nice but you can see that the text here, has got this horrible white background. What if we want to get rid of that background and just have a transparent background for the text so that we can see the image, nicely through it? How can we do that?

Let’s go to the text, here. In React Native, background color is inherited down the hierarchy of elements. What we can do is, set a background color for the containing image. We’re going to set it to this, RGBA and this means that the, basically, sets the background color to be transparent.

Let’s reload that, and there you go. You can now nicely see the background image through the text. Now, I think this looks quite good. Let’s suppose for some reason you want to see the sides of the pier, here, which are currently cropped off. What we can do is use a different re-size mode by going into the star sheet for the image again. We’re going to do re-size mode, contain.

Lets reload the app, and there you go. There is one other re-size mode that you may like to use, which is stretch. I’ll show you what that does. It basically, just stretches the image to fit both the height and the width, ignoring the aspect ratio, which is quite a nice affect in this case. There you go. That’s how to create a full screen background image for your app, in React Native.

How to Disable Rotation in React Native on iOS

 

This video shows how to disable rotation in React Native iOS apps.

Transcript

You may have noticed that by default React Native apps can be rotated. You can see this in the iOS simulator if you click command-left, or command-right to rotate the simulated device. There we go, rotating to the right. Now you can see that the orientation gives quite a different sort of layout that you have to deal with. This landscape orientation is really quite different from the portrait one.

When you’re developing your app, the best practice would be to develop in a way that it will look good in either orientation, but that can be difficult to do at time. If you want to just disable that rotation and make it so that the app can only be used in perhaps the portrait orientation, here’s how you can do that.

What you want to do is go to Xcode, open the project in Xcode. What you’re going to do is the same that you do with in fact any IOS app. This isn’t going to be something that’s specific to React Native. What you do is your open up the app here, project, and you want to make sure that you’ve got the general tab selected. Go down here and make sure you’ve got awesome projects as the target. You got a number of different device orientations here under the deployment info section – portrait, upside down, landscape left and landscape right. What you want to do is just to disable the two landscape modes. There we go. Rebuild your app.

When this starts up again, we will try again doing the rotation, so command-left and command-right arrow to rotate the simulated device. Here we go, so now we’ll rotate left, and you can see that the display stays in the same orientation. It doesn’t follow the physical rotation, the rotation of the device. We can rotate it to the right, and there we go. It’s the same that way as well.

So you can see, that keeps your life a lot simpler when you’re first developing an app. You don’t have to worry about two different orientations.

How to Remove the “Powered by React Native” Message in iOS Apps

This video shows how to remove the “Powered by React Native” message that appears at the bottom of the launch screen by default when an iOS React Native app is launched.

Transcript

So you may have noticed that when you run a default React Native app, there’s a kind of loading screen which flashes up before the app starts properly, and it has the name of your app and it has “Powered by React Native” at the bottom of the screen. Now, you may want to remove that at some point. In this video, I’ll show you how you can do that.

The app is just building at the moment, let’s keep an eye on it. Here we go, we’ll switch the simulator, so there you can see “Powered by React Native.” Let’s say we want to get rid of that message. How can we do that? It’s pretty simple, actually. If you open up your project in Xcode, you may not be familiar with this, but it’s not too difficult to just make a simple change. Here we have the new project, it’s called “Hello World,” we open up this folder, also called “Hello World,” and that will of course be whatever the name of your app is, and this is the file you want. It’s launchscreen.xib. You open that, and here you can see the loading screen. You’ve got the name of the app here, “Hello Wold,” and then the message “Powered by React Native.” To get rid of that, just click on it and then hit delete. Simple as that, you’ve gotten rid of the message. There we go, we can rebuild that project, and when it starts up again, you should see that there’s no “Powered by React Native” message at the bottom. Here we go, there we go. You can see, there’s no more message “Powered by React Native” at the bottom of the screen.