DEV Community: kirsty-simmonds

How to create iOS and Android splash screens for React Native

kirsty-simmonds — Fri, 07 Aug 2020 09:17:16 +0000

An adventure in splash screens for React Native apps

The splash screen you create here won't be beautiful, but it will have all the correct plumbing so that you can iterate on the design later :).

First, you’re going to need some images. When I started to create the splash screens for work, the final images we need to use weren’t yet ready, but this tutorial points to these images on GitHub, which are a great stand-in.

These images are in three sizes: @1x = 200px, @2x = 400px, @3x = 600px. Save them somewhere you can find them again and I’ll tell you where to put them later in this tutorial, for iOS and Android.

You need to make the background colour of your home screen a nice, incongruous colour until you’ve got both splash screens in place. This is so we can spot the dreaded ‘white flash’ with greater ease. I went with ‘backgroundColor: ‘pink’’ on the outermost View element. You can change this back to white or whatever other colour you need when you're done.

iOS

Run open ios/{YourProjectName}.xcworkspace in your terminal and await the arrival of your project in XCode. Replace {YourProjectName} with the name of your project and remove the curly braces.
We need to add a new image asset in Xcode now. You can find it in the leftmost menu in YourProjectName > YourProjectName > Image.xcassets. You should then press the “+” in the second leftmost panel and then select ‘New Image Set’. You can call the image whatever you like. Now add the images you downloaded from the GitHub repo earlier. They will automatically attach themselves to the right pixel density, but because I wanted to be absolutely sure, I just dragged my images to the corresponding placeholders.
Select LaunchScreen.storyboard in the leftmost panel. You should see the name of your project and ‘Powered by React Native’ underneath it. You can remove or add to these as you like. I just left them as they were while I was working out the correct splash screen plumbing.
Now you need to change the background colour of the View to something obnoxious so that any white flashes are more visible. If you click on View in the second leftmost panel, you can choose any colour you like from the Background dropdown. I went with the delightfully named System Blue Colour.
Now we should add an Image View to our splash screen so we can include our icon. If you press the button with a “+” on it in the top right of the screen, you’ll get a pop-up menu with a search bar. Search Image View and click on it. One should appear on your splash screen layout.
There is now an Image View section at the top of your rightmost panel menu. Using the Image dropdown, select your icon. Set the Content Mode to Aspect Fit using the same rightmost menu panel.
Click on the ruler icon, which is second from the right, and at the top of the rightmost panel on your screen. This will help us to centre the icon on devices of all sizes. Within the “Autoresizing” section, you need to click the red lines outside of the grey box until they are greyed out, and then click the arrows inside the box so that they are not greyed out. They should be vivid red.
Now you can run your app. If you see no changes, erase the state of the simulator. Now you should be seeing your changes if you weren’t before! You’ll also see a white flash. Let’s fix this.
Install React Native Splash Screen with yarn add react-native-splash-screen or npm install react-native-splash-screen —save, depending on which package manager you’re using.
Using XCode, open the AppDelegate.m file. You then need to add #import <RNSplashScreen.h> with the other import statements, and then add [RNSplashScreen show]; above the return YES; line towards the bottom of the page.
Finally, in App.js (or whatever the root of your project is), and import the useEffect hook in the same line as you import React, so: import React, {useEffect} from 'react';. Now, outside of your return statement, include the following function:

useEffect(() => {
    SplashScreen.hide();
  }, []);

Android

Remember those images you downloaded from GitHub earlier? We’ll be putting them in the correct place for Android now. The mipmap folders are in android/app/src/res. Here is where each image should go:

mipmap-mdpi = icon.png
mipmap-hdpi = icon@2x.png
mipmap-xhdpi = icon@3x.png
mipmap-xxhdpi = icon@3x.png
mipmap-xxxhdpi = icon@3x.png

Once the correct images are in the correct folders, you need to rename them all to ‘icon.png’.

Create a file called ‘background_splash.xml’ in android/app/src/res/drawable. You’ll need to create the drawable directory yourself.

Now add this code to it:


<?xml version="1.0" encoding="utf-8"?>

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">

    <item
        android:drawable="@color/purple"/>

    <item
        android:width="200dp"
        android:height="200dp"
        android:drawable="@mipmap/icon"
        android:gravity="center" />

</layer-list>

Here, we’re setting up something called a layer-list, which is a list of layers, and then setting a soon-to-be-defined background colour and rendering our icon. The icon will be 200dp tall and wide, and it’ll be in the centre of the screen.

Now we need to create a colors.xml file in android/app/src/main/res/values, which is where we’ll define our purple colour.

<?xml version="1.0" encoding="utf-8"?>

<resources>
    <color name="purple">#5951AA</color>
</resources>

Now we need to create a new SplashTheme in the android/app/src/main/res/values/styles.xml file. With the code added, the file should look like this.

<resources>
    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <item name="android:windowDisablePreview">true</item>
        <item name="android:windowBackground">@drawable/background_splash</item>
    </style>

    <style name="SplashTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <item name="android:windowBackground">@drawable/background_splash</item>
    </style>
</resources>

Now we need to tell the application to use the SplashTheme. Open AndroidManifest.xml and inside of the application tag, add the following code

<activity
            android:name=".SplashActivity"
            android:theme="@style/SplashTheme"
            android:label="@string/app_name">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
</activity>

Then add android:exported=“true" into the activity tag that’s called .MainActivity.

The code in its entirety should look like this, of course with your own package name.

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.belongmobile" // replace w your package name!
    android:versionCode="1"
    android:versionName="1.0">

    <uses-permission android:name="android.permission.INTERNET" />
    <uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW"/>

    <application
      android:name=".MainApplication"
      android:allowBackup="true"
      android:label="@string/app_name"
      android:icon="@mipmap/ic_launcher"
      android:theme="@style/AppTheme">

        <activity
            android:name=".SplashActivity"
            android:theme="@style/SplashTheme"
            android:label="@string/app_name">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>

        <activity
          android:name=".MainActivity"
          android:label="@string/app_name"
          android:configChanges="keyboard|keyboardHidden|orientation|screenSize"
          android:windowSoftInputMode="adjustResize"
          android:exported="true"
        />

      <activity android:name="com.facebook.react.devsupport.DevSettingsActivity" />
    </application>

</manifest>

Now we need to create a SplashActivity.java file in android/app/src/main/java/com/{YourProjectName}. This file will feed into the MainActivity.java file, and it should look like this:

package com.belongmobile; // make sure this is your package name

import android.content.Intent;
import android.os.Bundle;
import androidx.appcompat.app.AppCompatActivity;

public class SplashActivity extends AppCompatActivity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        Intent intent = new Intent(this, MainActivity.class);
        startActivity(intent);
        finish();
    }
}

At this stage, if everything is set up correctly, you should see the splash screen on your emulator (again, you may have to erase state on the emulator and boot it from scratch). But! It has a white flash! If you haven’t already, you need to run yarn add react-native-splash-screen in your project’s directory.

In MainActivity.java, add the following imports import org.devio.rn.splashscreen.SplashScreen; import android.os.Bundle;. Now add the following statement to the top of the MainActivity class:

@Override
    protected void onCreate(Bundle savedInstanceState) {
        SplashScreen.show(this);
        super.onCreate(savedInstanceState);
    }

If you haven’t already, you need to configure App.js (or whatever the root of your project is) by adding this import statement import SplashScreen from ‘react-native-splash-screen';, and import useEffect on the same line you import React, so import React, {useEffect} from 'react'; and the following function outside of your return statement:

 useEffect(() => {
    SplashScreen.hide();
  }, []);

Now you need to create launch_screen.xml in android/app/src/main/res/layout. Add the following code to it:

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/purple"
    android:gravity="center">
    <ImageView
        android:layout_width="200dp"
        android:layout_height="200dp"
        android:layout_marginTop="24dp"
        android:src="@mipmap/icon"
    />
</LinearLayout>

And now everything should be working!

Baby's First Hash Encryption

kirsty-simmonds — Fri, 29 May 2020 15:03:01 +0000

I didn't know anything about encryption when I started writing this

I didn't know anything about security, really. I probably should have, but I didn't. Lots of interesting people with part-shaved, multi-coloured hair on Twitter know about security and they're super smart and cool but I never understand what they're talking about and merely look on in awe while they say hackerish sounding things before going back to fixing the styling on my buttons.

My CTO at work recently asked me to assess how secure the password-handling was in a React Native application written by a third party. I looked at the Login.js component, which contained the relevant logic, and could see that the password wasn't hashed anywhere, but that's about it (I'll get to what hashing means in a sec). I definitely didn't feel qualified to comment on the code from a security standpoint at the time.

My CTO then followed up with a recommendation:

"If you want a fun trip down a rabbit hole, look up md5, sha-1 and bcrypt password hashing. Also why is salting important? And what does Rails use?"

✨ So off I went. ✨

Hash functions, generally

In order to hash a password, one must use a hash function.

I'll start with the definition of a hash function first, and then we can break it down together.

Hash functions are one-way cryptographic functions that accept a message of any length and return as output a fixed-length value to be used for authenticating the original message.

Let's go through some of these terms and define what they mean.

A hash function maps arbitrary-sized input to a fixed-site output through a process known as compression. Unlike typical data compression (i.e. the process that takes place when you package up a .zip file), compression in this case refers to non-invertible data mapping.
When a function is 'one way' it essentially means that it is nontrivial (a computer science term people use when referring to things that are not simple/easy to perform) to learn anything useful about the input of the function given the output.

The ideal hash function is:

One-way, which we covered a moment ago.
Collision-resistant, which means that, given an output from a hash, finding another input that produces the same output (this is the part that's called collision) is nontrivial.

A hash function is considered to be weak when it allows for two files to have the same 'digest', or output, because digital fingerprints created with it can be forged, and are therefore cryptographically broken.

MD5 hash functions

MD5 (or, to use its full name, Message-Digest algorithm 5) algorithms produce 128-bit hash values. It was invented by Ronald L. Rivest of MIT who also invented MD2, MD4 and MD6, which we won't be going into today. You can generate an MD5 hash using this tool. Note that the output is the same length no matter the size of the input, and that the entire hash changes if you change only a single character in the input.

MD5 has been proven to be insecure in a number of ways. Firstly, it isn't collision-resistant, and secondly, according to the lovely people at Computerphile, it is fairly straightforward to simply use Google to break the hashes. One can Google a hash and fairly easily find the corresponding input values that were employed to generate it in the first place, which utterly undermines any illusion of security.

MD5 is now considered broken and no one should be using it.

SHA-1

SHA-1 was developed by the National Security Agency (NSA) as part of their Capstone project, which aimed to develop cryptography standards for public and government use. They are 160 bits long, and you can generate one here. This hash function also produces the same length of output no matter the length of the input, just like MD5.

SHA-1 is most often used for checking whether a file is unaltered. It does so by producing a hash value before the file is transmitted, and then again once it reaches its destination. The file can only be considered genuine if both hash values are identical.

SHA-1 hashes date back to 1995 and have been known to be vulnerable since 2005. As of version 56 of Google Chrome, which was released in 2017, the browser has marked all SHA-1-signed certificates as unsafe, and other major browsers followed suit. Researchers from the CWI Institute in Amsterdam and Google generated the first collision in SHA-1 history in 2017, and it is now considered broken too. But SHA-1 (sometimes known as SHA-256) had already been phased out in favour of SHA-2 in early 2016, before Google's discovery, so faith in it was already thin on the ground.

What is a salt?

Salts are data added to hash outputs to make them unique even if the input values are identical. Take passwords, for example. In order to hack into somebody's account, attackers can generate a list of common passwords and their corresponding hash values. Comparing the two will eventually reveal the passwords to the attackers if there are matches.

If a user's password is stored with a unique salt, however, then any pre-computation-based attacks (like the scenario I just described) targeting unsalted password hashes, or targeting an account with a different salt, will not crack the user's password. If the salt is long enough and sufficiently random, it is incredibly unlikely that an attacker will be able to crack the password. Salts are concatenated with a cryptographic hash function, and the resulting output (but not the original password) is stored with the salt in a database.

Bcrypt

Bcrypt is also a hashing algorithm, but it is different from MD5 and SHA-1, which we explored earlier. You can take it for a spin here.

When you visit the link, note that you have to select a number of rounds. This refers to the computational cost of the function which in turn controls how much time is required to calculate a single bcrypt hash. The higher the cost factor, the more hashing rounds are required. Increasing the number of rounds by one dooubles the necessary time, and the more time it takes, the more difficult it is for hackers to issue a brute-force attack. This configurable cost is one of the reasons why bcrypt is so secure.

Unlike MD5 and SHA-1, bcrypt requires a salt as part of the hashing process, making it markedly more secure.

Bcrypt is designed to be expensive to compute, meaning that, even if, hypothetically speaking, it didn't take an extraordinary amount of attempts for an attacker to guess what the input was, there is a very high computational cost to testing each guess.

What does rails use?

This should come as no surprise: it's bcrypt!

How I Got Five Tech Jobs in a Year

kirsty-simmonds — Tue, 26 May 2020 16:51:31 +0000

In the past 12 months I have technically gotten five jobs in tech:

My first job out of bootcamp which I resigned from almost immediately because I was told some gravely concerning things about the mangement.
My second, and longest-held (in tech) job. It was in horse tech (lol) and ended in redundancy for myself and a third of the staff.
A job I got in Berlin that I didn't sign the contract for because I had to return to London due to COVID.
A job at an international newspaper that I technically got but they couldn't make me an offer due to COVID.
My current gig at an agency here in London.

I have had roughly 120 inital screenings from recruiters, completed 20 technical tests and had approximately ten final-stage interviews which resulted in five offers, cumulatively. Some of these interviews were an absolute disaster. I nearly had a panic attack during a remote pairing interview with a leading ecommerce platform and forgot how to write a for loop, I went blank and forgot every JavaScript array method I knew during an in-person interview in which two people were watching me code (my kryptonite, it turns out), and I once had an hour-long junior-level front-end interview with a dude who banned me from Googling anything (I later learned that this is a magnificent red flag). Performance anxiety issues are very common, but that fact doesn't help in the moment when you know you're crashing, burning and misrepresenting your skills.

Unfortunately I can't help you with performance anxiety (people have told me that beta blockers help if taken just before the interview), but I can talk a little about the things that helped me to get the job(s), and some patterns I noticed when it comes to assessing whether a company has the potential to be toxic or not, from my own experience.

These tips are geared towards people at the beginning of their career working in a JavaScript-dominated world (it me).

Things I'm glad I did

Spotting that companies who took my past career(s) seriously were more likely to respect my non-technical skills alongside my technical skills. Lots of companies that I had first-stage talks with treated my work in architecture and journalism like baffling detours before I started learning to code -- The One True Career. In doing so they missed out on my project management and design skills, my ability to work in complex teams, and lots of other things.
I asked for help on Twitter, and that was both materially helpful and enormously comforting. I had a job-searching tweet go viral the day I was made redundant from my company (I think lots of developers know what it's like to be let go and were therefore happy to help out with an RT) and it put me in touch with two separate employers, both of whom offered me jobs. Neither of them had posted ads for those jobs yet. Additionally, programmers from all over the world got in touch to offer solidarity and send me opportunities. It was absolutely lovely and helped me to feel less terrified at a really challenging time in my life.
I made some silly side-projects, such as a Command Line Interface (CLI) that outputs some of Wiley's funniest tweets in the terminal, and a theremin with Phil from EastEnders' face on it. I was mostly just embarrassed that I didn't have serious side projects, but they really helped to break the ice in interviews (admittedly they went down a lot less well when I was job-searching in Germany, where those people are less culturally relevant). They either went kind of over peoples' heads (but they appreciated my curiosity for new tech) or they found them funny or interesting and it made the interview a little bit nicer. I wouldn't say this is a mandatory step, but good humour will get you reasonably far and help you to stand out.

Things I wish I did differently

I ignored my insticts on a couple of occasions (mostly out of desperation -- it's difficult to take proper note of red flags when you absolutely have to get hold of some money immediately) If a company is sloppy getting back to you and disengaged when speaking to you, it's a reasonably good sign that this will continue once you're on the inside. I once had a (man) interviewer ask me whether I'd be able to tolerate the 'boisterous boys' on the team. The answer was no.
I stretched myself incredibly hard to complete some technicals that depended on three interlocking frameworks that I didn't know, and that the recruiter knew I didn't know. Some of them took hours, and if I hadn't already been made redundant, I have no idea how I would have found the time to complete them around a full-time job. I can't imagine how those with caring responsibilities swing this. It's unfair to lump candidates with incredible amounts of work, and I wish companies were more mindful of the time and effort it takes people who are most likely already in parallel interview pipelines to complete time-intensive tasks. So, I know this is easy for me to say, but interviewees: try not to sweat too hard in the technicals, if you can afford to.

Things I used to study

I used Jad Joubran's excellent course to get a solid basis in JavaScript. There's an active forum connected to it where you can ask for help, and I don't think I've ever been left waiting longer than a day for a response. https://learnjavascript.online
I practised for my technicals using Code Wars and was surprised by just how much overlap there was between the problems on there and the problems that employers sent me to complete for second-stage interviews. Get into the habit of doing a couple every few days. https://codewars.com
I remember reading some of the mailouts from Dan Abramov and Maggie Appleton's Just JavaScript course on the way to in-person technicals so I'd be better able to explain high-level JS concepts. It's beautifully illustrated, unique, and free. Now that I have a job I prefer to read them in less feverish circumstances. https://justjavascript.com
Udemy! Please don't ever buy a course full price - their sales are frequent and very good. I especially liked the following courses:
- JavaScript Algorithms and Data Structures Masterclass by Colt Steele. This one is great for doing the slightly scarier (to me) algorithm work that some companies like to throw at interviewees. He teaches code for a living at General Assembly and I can't recommend his courses enough. He's thorough, encouraging and really personable (which matters if you're committing to listening to someone for 20 hours!).
- The Advanced Web Developer Bootcamp. Another one from Colt Steele, this time a much broader sweep of JavaScript and the fancy and popular frameworks of the day, as well as CSS and SVGs. Don't be too scared off by 'advanced'. While I wouldn't recommend it to someone starting out afresh, the concepts are explained with real clarity and I think, as long as you've spent some time playing with JavaScript and CSS, you could really have fun with this one.
- JavaScript: Understanding the Weird Parts by Anthony Alicea. I'll admit I haven't finished this yet, but it looks great and I look forward to coming back to it when I've settled in with my new job and therefore have some spare time. I'm not afraid to say that I'm flying by the seat of my pants when it comes to JavaScript some days so being able to identify and predict its strange ways is a goal of mine for the next year, and this will help.
- The Complete React Native and Hooks Course [2020 Edition] by Stephen Grider. I just started a job focused on React Native and Rails and I have LOVED working through this course. It's very well-paced and focused on functional components with Hooks. I really like Stephen's approach to teaching, which is to complete tons of smaller projects rather than one big one.
The Ruby on Rails course on Learn Enough by Michael Hartl. I'll be using Rails at work and I used this to really dig into it after learning it during my bootcamp a year ago. It's definitely worth the money and, as far as I can see, it's the best Rails course out there. And I have been through many of them.

I hope you found some of this helpful! Feel free to get in touch @torahwilcox on Twitter if you have further questions and I'll do what I can.