It’s now time to select your image set (don’t forget to centre it!):įinally, you’ll need to open the size comparator and uncheck the ‘ autoresizing mask’ so that your image will always stay in the centre: Open the ‘ LaunchScreen’ file again and add an image ‘ view’ to the screen: Next, create a new image set within ‘ Images.xcassets’:Ĭall this image set ‘ LaunchScreen’ and drag and drop your image in each space of the new set: Here’s what your default launch screen should look like:įirst things first, delete any and all text labels: The one you’ll be using has the ‘ xcworkspace’ termination. As you’ll notice, there are two Xcode projects inside of the folder. In this tutorial, we’ve decided to edit the Launch Screen directly from Xcode, so we suggest you do the same. Remember that to do this with any logo, you’ll need a good image, at least 1024 x 1024 pixels in size: The Launch Screen React-native init launchConfigurations & cd launchConfigurationsįor this tutorial, we thought it would be fun to use the hackajob logo as both a launch screen and an icon. To start, create a new react native project: Today, we’ll be showing you how to set these options in an iOS app. Next, add the following script in the package.Whilst we seem to have multiple tutorials available on the hackajob blog that detail how to develop a brand new app from scratch, we feel it’s important to take some additional time and learn what to do with an app after it’s been created such as creating a launch screen and configuring launch icons. Tip: If you use a React Native version lower than 0.60, please follow the instructions here to link the package manually. Next, for iOS, execute the command to install pods. Open the terminal window and execute the following command to install the package: yarn add react-native-bootsplash The initial step is to install the react-native-bootsplash package and then generate assets using it. Tip: Make sure your initial app logo is 1024x1024px. ( Note: you can name the original icon file as per your requirement). We are picking an icon from for the example app.Īfter creating the original app icon, save it inside the directory src/assets/ and name the file original_icon. Notice that the splash screen and the app icon are defaults that come with React Native. Here is what the example app looks like in its current form. With the boilerplate setup done, now let’s build the apps for iOS and Android.įor iOS, run the following command: npx react-native run-iosįor Android, run the following command: npx react-native run-android Add the following code to use the stack navigation pattern inside this file: import * as React from 'react' Inside src/ directory, create a new directory called navigation/ with a new file named RootNavigator.js. Yarn add react-native-safe-area-context react-native-screens To create a new React Native project and install the react-navigation dependencies, run the following command from the terminal window: npx react-native init myAwesomeApp Note, the example app is created using React Native version 0.65.x.Ĭomplete source code for this example is at this GitHub repo Setup a React Native appĪs an example for this tutorial, we will use a React Native project with two screens and React Navigation integrated.
0 Comments
Leave a Reply. |