DEV Community: Tia Eastwood

📱 How To Set Up Your Android Development Environment (React Native & Mac OS)

Tia Eastwood — Tue, 27 Jun 2023 11:47:36 +0000

I think there's a certain thrill about setting up a new machine...until you realize you need to remember how to configure your development environments all over again! After going through the steps myself, here's my guide on how to set up your Android development environment (in my case, specifically for React Native applications) on macOS. Whether you're setting up a fresh machine or just need a refresher, hopefully you'll find this guide helpful. Without further ado, let's dive right in...

Step 1: Install Homebrew

Homebrew is a package manager for macOS that simplifies the installation of software.

If you haven't installed it yet, open Terminal and run:

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

Step 2: Install Node, Watchman, and Java

Next you will need Node and Watchman. You'll also need Java. For node, I would highly recommend using NVM (Node Version Manager) to install node as it makes it much easier to manage different versions of node that you may need for different projects.

You can use Homebrew to install:

brew install nvm
// or if you don't want to use nvm:
brew install node
brew install watchman

If you decided to go with NVM, then install your preferred version of node now via NVM, or just the latest version with nvm install node
Then download and install Java

Step 3: Install Android Studio

Download and install Android Studio from https://developer.android.com/studio. During the setup, check the boxes for:

Android SDK
Android SDK Platform
Android Virtual Device

If the checkboxes are not visible, you'll be able to install these components later via the Android Studio's SDK Manager.

Step 4: Configure the JAVA_HOME variable

Open Terminal.
If you're using bash, all you have to do is:

echo export "JAVA_HOME=\$(/usr/libexec/java_home)" >> ~/.bash_profile

If you're using zsh (which probably means you're running macOS Catalina or newer), then it should instead be:

echo export "JAVA_HOME=\$(/usr/libexec/java_home)" >> ~/.zshrc

Then restart the shell with source ~/.bash_profile or source ~/.zshrc

Step 5: Configure the ANDROID_HOME Environment Variable

React Native needs to know where your Android SDK is, which is achieved by setting the ANDROID_HOME environment variable.

Open Terminal.
To create the file if it doesn't exist, or open it if it does:
- If you're using bash: touch ~/.bash_profile
- or if you're using zsh: touch ~/.zshrc
Then, run open -e ~/.bash_profile to open the file in TextEdit.
Add the following lines to the file and save it:

export ANDROID_HOME=$HOME/Library/Android/sdk export PATH=$PATH:$ANDROID_HOME/emulator export PATH=$PATH:$ANDROID_HOME/tools export PATH=$PATH:$ANDROID_HOME/tools/bin export PATH=$PATH:$ANDROID_HOME/platform-tools

Back in the terminal, run source ~/.bash_profile or source ~/.zshrc to reload the profile.

Step 6: Create and Configure a Virtual Device

You'll need an Android Virtual Device (AVD) to run your app.

Open Android Studio.
Click on Device Manager in the top menu.
Click on "Create Device" (if you want to test Play Store purchases, you need to select a device featuring Play Store)
Choose a device definition and click "Next".
Select a system image and click "Next"
Verify the configuration and click "Finish".

Step 7: Install React Native

Follow the instructions on the React Native docs (I'm using Bare React Native, but there are also instructions for Expo).

Step 8: Create a New Application

You're all set! You can create a new React Native application by running:

react-native init MyNewApp
// Replace "MyNewApp" with the name of your app.

To run your React Native application on the Android Virtual Device:

Ensure the AVD is running. You can check this in Android Studio's AVD Manager.
In the Terminal or your code editor, run npm start
Then type "a" for Android

Voila! I hope you're all set up and running now.

Happy apping!

Cover photo by Photo by Rob Hampsono on Unsplash

How To Set Up a New Project With React & Capacitor.js

Tia Eastwood — Fri, 21 Apr 2023 17:13:22 +0000

Capacitor is a tool that enables developers to make their frontend builds run on multiple platforms, including mobile (iOS and Android), desktop (Electron), and web (Progressive Web Applications). It also provides a high-quality API to work with native functions within apps, such as accessing the camera or device information.

One of the benefits of Capacitor is that it is not tied to any particular UI framework, so you can use it with any existing web project, framework, or library. Developers using React in their Capacitor app have access to a set of useful, community-maintained React Hooks to access Capacitor APIs in their React function components. For example, you can use the useFilesystem hook to access the filesystem API. You can also extend Capacitor with your own native plugin APIs.

Capacitor provides a solution for anyone wanting to create one application (or convert an existing site) to one that translates well on both desktop and mobile platforms. It was also something I needed to learn for a project recently, so I thought I'd share my setup tutorial with you...

Prerequisites

To get started, you should:

Have some basic knowledge of React, JavaScript, ES6 syntax, the command line.
Have installed Node and Capacitor.
If you want to run your app on iOS, you should have a macOS with Xcode.
If you want to run your app on Android, you should install Android Studio.

Setup

The first step is to set up a new React project using the official create-react-app CLI tools. You can use the following commands in the terminal to create a basic React app:

npm install -g create-react-app create-react-app react-with-capacitor

After creating the project, you need to open it and run it in development mode using the following commands:

cd react-with-capacitor npm install npm run start

To add Capacitor to your project, you can install it using NPM with the following command inside the project folder:

npm install --save @capacitor/cli @capacitor/core

Then, you need to initialize Capacitor with information about the application. For example, I will give the app a name of react-capacitor-example, and I want the app package ID to be com.example.reactCapacitor:

npx cap init react-with-capacitor com.example.reactCapacitor

This will complete in the terminal and you'll see a prompt asking you if you want to create a free Ionic account, which you can just skip for now if you want. You should now have a capacitor.config.json file that looks like this:

import { CapacitorConfig } from '@capacitor/cli';

const config: CapacitorConfig = { 
   appId: 'com.example.reactCapacitor',
   appName: 'react-with-capacitor',
   webDir: 'build',
   bundledWebRuntime: false 
}; 

export default config;

You can now install the platforms you would like to develop for such as iOS or Android:

npm install @capacitor/ios
npm install @capacitor/android

Then build the project and add it to the iOS or Android platform using the following commands:

npm run build
// for ios
npx cap add ios
// for android
npx cap add android

After the above steps, you should see an ios and/or android folder in your project! Sweet!

Running the Project

Now that your project is set up, you can run it to check that all is working as it should be. To run it as a React app in your browser, just run:

npm start

To run on iOS:

Open Xcode and select open a new project
In the finder that opens, navigate to the iOS folder in your project, go in the App folder, then open the .xcworkspace file - Once open, press the play button at the top of xcode and select an emulator to open
You should now see your Capacitor app load in the emulator!

To run on Android:

Open Android Studio, choose to open an existing project and select your project folder
Start a new emulator
Select the "Run app" button (looks like a play button) from the top menu
You should now see your Capacitor app load in the emulator!
Capacitor doesn't have hot reload working out of the box, but you can install Live Reload to make your development process easier.

And that's how you set up a new project with React and Capacitor! I hope that was helpful, and be sure to check out the official documentation to see what else you can do with it

5 of the Most EXCITING AI-Powered Tools for Software Developers

Tia Eastwood — Tue, 18 Apr 2023 16:02:22 +0000

Oh no, AI is coming to take our jobs! Well, hopefully not! Instead, let's learn to use AI to improve the way we work! I'm very excited about the following tools right now...

Phind

Phind is particulary exciting to me because it's an AI-powered search engine designed for developers. It is powered by large language models like GPT-4 in order to provide answers, explanations and examples based on your search question. A typical response will be an article based on sources from all over the web, with citations included to back up the information, a bit like a dissertation.

Why it's Useful

Quickly recieve an extremely readable answer in seconds
See a list of sources so you can do further reading
Saves time that you might usually spend Googling or searching StackOverflow
You can tailor your search response to be more "expert", "concise" or "creative" in order to be more specific or not rely on web results at all.

Tabnine

Tabnine is an AI code assistant that is designed to help developers write code faster and more efficiently. According to tabnine.com, Tabnine uses AI to train a model based on a developer's specific code patterns, and then provides whole-line and full-function code completions based on that model. I really enjoy using Tabnine in my VS Code as having smart code completion helps me to work a lot faster and generally improves me productivity as a result.

Why it's Useful:

Free plan available.
supports all programming languages and IDEs.
Gets to know your specific code patterns, so the autocompletion is what you would expect.

Github Copilot

An AI pair programmer that makes suggestions in real time. Github.com states: "Spend less time creating boilerplate and repetitive code patterns, and more time on what matters: building great software. Write a comment describing the logic you want and GitHub Copilot will immediately suggest code to implement the solution." It costs $10 for the individual plan, but you can get a free trial. I've been giving the trial a go myself and I'm honestly blown away by the intelligence of the suggestions. Sometimes it knows exactly what to suggest purely from the name I've given to the function, or my pseudo-code comments!

Why it's Useful

AI based code suggestions based on your projects context and style conventions.
Accept, reject or edit any of the suggestions (and get alternative suggestions).
Especially useful if you're working in a language you're not that familiar with yet; helps you to learn as you code.
Easily accessible as an extension for Visual Studio Code, Visual Studio, Neovim, and the JetBrains suite of integrated development environments (IDEs).

Ask Codi

This is a really interesting one! According to askcodi.com: "AskCodi provides a complete tool that can be used by developers during the development process." It has many different tools that are useful for developers, whether you're a beginner or more experienced.

Why it's Useful:

The web version has really nice user-friendly UI. - Free to use (no credit card required, yay!) either in your web browser or as a code editor extension.
So many different AI-powered tools! Intelligent chat bot, code generation, explanations, documentation, generate tests, database queries, script generators...and more! - Saves your previous code generations / queries in a codebase so you can come back to them later.

...and of course, no list would be complete without:

ChatGPT

GPT4 in particular can assist you with just about almost anything, from code explanations, to name ideas for your app, to helping you write documentation. Just remember that it has a knowledge cutoff as of September 2021, so asking it about anything newer won't yield a great result.

Why it's Useful:

Has a free tier, so is available to anyone.
Great for generating a lot of ideas quickly and prompting creativity.
A a developer, it can be useful as a helper for writing code, or even explaining existing code to aid in your understanding.
Automate mundane and time-consuming tasks like generating a spreadsheet or putting a lot of items into a list.
The possibilities already seem endless and we're just getting started!

There we have it! These are the top 5 AI powered tools that I've found myself using the most recently. They've saved me time, assisted my productivity and overall made me really excited about how I can use technology to improve the way I work! Go and try them out and let me know what you think! :)

🧪 How To Test an Image Component Using React Native Testing Library

Tia Eastwood — Thu, 30 Mar 2023 11:21:16 +0000

React Native Testing Library and React Testing Library are both libraries that provide utilities for testing React components. However, they differ in their scope and implementation.

React Native Testing Library

React *Native* Testing Library a library specifically designed for testing React Native components (mobile). It provides a set of tools for testing React Native components in a way that is similar to how users interact with them in the mobile app. This means that it focuses on the functionality of the components, rather than their implementation details. The library uses a similar API to React Testing Library, but with some differences to account for the unique features of React Native.

React Testing Library

React Testing Library on the other hand, is a library designed for testing React components in a browser environment. It provides a set of tools for testing React components in a way that is similar to how users interact with them in a browser. This means that it also focuses on the functionality of the components, rather than their implementation details.

The Differences

One key difference between the two libraries is that React Native Testing Library includes support for native components like View, Text, Image, etc., while React Testing Library only supports web-based components like div, span, img, etc. This can make things a bit challenging at first when trying to write the tests for your React Native app! One thing I found a bit tricky at first was images, but here is a way that works for me.

Let's Test An Image Component!

Below is an example of a component from a Movie app. This MovieCard component shows on the screen and displays details about a movie, such as an image, the title, genre and the release date.


import React from "react";
import { View, Text, Image } from "react-native";
import styles from "./MovieCard.styles";

type MovieCardProps = {
    image: string;
    title: string;
    genre: string;
    release: string;
};
const MovieCard = ({
    image,
    title,
    genre,
    release,
}: MovieCardProps) => {
    return (
        <View style={styles.movieCardContainer}>
            <Image
                source={{ uri: image }}
                style={styles.movieCardImage}
                testID="movie-image"
                accessibilityRole="image"
            />

            <View style={styles.movieInfoContainer}>
                <View>
                    <Text style={styles.movieCardTitle}>{title}</Text>
                </View>
                <View>
                    <Text>{genre}</Text>
                    <Text>{release}</Text>
                </View>
            </View>
        </View>
    );
};

export default MovieCard;

What I'm focusing on right now is testing that the Image component shows the movie image as expected. Notice I've added testID and an accessibilityRole properties to the Image component; we're going to use those in the test...


import { render } from "@testing-library/react-native";
import MovieCard from "./MovieCard";

// I've created some mock props, including a real image uri from the internet. These props are passed into the MovieCard component that's rendered below in the test.

const mockMovieCardProps = {
    image:
        "https://images.unsplash.com/photo-1598899134739-24c46f58b8c0?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2312&q=80",
    title: "test movie title",
    genre: "test genre",
    release: "test release date",
};

describe("<MovieCard />", () => {
    it("renders with expected details", () => {
        const { getByText, getByTestId, getByRole } = render(
            <MovieCard
                image={mockMovieCardProps.image}
                title={mockMovieCardProps.title}
                genre={mockMovieCardProps.genre}
                release={mockMovieCardProps.release}
            />,
        );

    // 1. testing the image exists by checking the testId:
        const img = getByTestId("movie-image");

    // 2. checking the image has the correct properties by accessing the props:
        expect(img.props.accessibilityRole).toEqual("image");
        expect(img.props.source.uri).toEqual(mockMovieCardProps.image);
    });
});

The first way we can check that our image has been rendered is by checking that the testID exists.
Then we can get more specific and check that the image has rendered with the correct properties. The Image data is an object, you can access it's properties like img.props.source.uri - this way we can check that it's rendering the correct image based on the source...useful!
Also if you've given the component an accessibilityRole property, you can access that in a similar way (img.props.accessibilityRole).

So there are some ways that you can test your Image component in React Native! Let me know if you have any good tips of your own :)

Retooling for Success: How I Made the Transition to Software Development in My 30s

Tia Eastwood — Tue, 28 Mar 2023 10:42:04 +0000

Hi there, I'm Tia, and I'd like to share with you my journey of becoming a software developer.

Growing up, I was always a creative kid. I loved to draw and make things and that's what I was good at. In fact, it was the only thing I *thought* I was really good at. In the back of my mind, I always had an interest in technology too, but I never thought of pursuing it as a career. Instead, I pursued a degree in Illustration with Animation and embarked on following my dream of being an illustrator and product designer. I enjoyed making freelance art and designing products for my online shop and comic con artist booth, but ultimately it was hard to make a living that way. I was also fiercely independant and spent many years working in jobs I hated in order to pay the rent and not have to rely on anyone. Over time I became exhausted and, deep down, I knew something was missing.

As I entered my thirties, I started to feel restless. I had no career really to speak of and I began to question whether I was truly fulfilled in my life. Eventually 2020 rolled around and Covid creeped onto the scene. I took this as a sign to shake things up and, with the support of my amazing partner, I decided to take a leap of faith and follow my other passion for technology. I started by learning coding on my own, watching online tutorials, reading books, and practicing every chance I got. Making something from code, was the most creative I'd ever felt. The more I learned, the more excited I became about the possibilities that software development offered.

I was determined to make a career change, but I knew it wouldn't be easy. I was older than most people who were starting out in the field, and I lacked a computer science degeree or any relevant experience. However, I didn't let that discourage me. Instead, I worked harder than ever before. I quit my call center job and threw myself into learning full time, enrolling in a 14-week coding bootcamp to quickly get up to speed. Bootcamp wasn't easy because, due to the Covid lockdown, we had to complete it entirely remotely...little did I know though that this would be very useful practice for the future.

I also reached out to people on social media and shared my journey. It's a good technique to "learn in public". What I mean by that is by sharing your challenges and achievements with other people, you're holding yourself accountable. Also the support and encouragement I received from other people was invaluable to me.

Finally, my hard work paid off. After graduating from bootcamp, I landed my first job as a software developer, and I couldn't have been happier. I was very nervous and didn't have a lot of confidence in myself to begin with. I battled with imposter syndrome, but I had to try and keep thinking back to how hard I worked to get here. Of course, you also have to remain humble and remember that you'll never know it all; there's always something new to learn in a career as a software developer, but that's what makes it so exciting to me.

Looking back, I'm so grateful that I took that leap of faith and pursued my passion for technology. It was scary at first, but it's been so rewarding. I hope my story inspires others who may be considering a career change later in life. It's never too late to follow your dreams and pursue what truly makes you happy.

Expo vs bare React Native…the Pros and Cons

Tia Eastwood — Mon, 27 Mar 2023 17:32:43 +0000

React Native is one of the most popular cross-platform mobile app development frameworks. It is an open-source platform that allows developers to create mobile applications using the same programming language and logic as for web development. There are two popular ways to use React Native, either by using the bare minimum React Native or using Expo. Both have their advantages and disadvantages and that's what we're going to look at this article...

Bare React Native

Pros:

More Control: Bare React Native gives you complete control over your project. You can customize your application as per your needs and preferences. You can add and remove features, libraries, and modules as required. This level of control is not available with Expo, which comes with pre-built components and libraries.
Better Performance: Bare React Native apps have better performance than Expo apps. This is because Expo comes with pre-built components that can slow down the application. With bare React Native, you can optimize your code and have more control over the app's performance.
Flexibility: Bare React Native offers more flexibility than Expo. You can use third-party libraries and components easily, which may not be possible with Expo. This flexibility allows you to customize your application to a greater extent.

Cons:

Steep Learning Curve: Bare React Native requires more in-depth knowledge of React and native mobile app development than Expo. The setup and configuration process can be complicated and time-consuming for beginners.
Tedious Setup: Setting up a bare React Native project can be a tedious process, as it involves installing and configuring several packages, including native modules, libraries, and tools.
Mac Required: To develop using bare React Native, you need a Mac since you need to use Xcode, which is only available on Apple OS.

Expo

Pros:

Easy to Use: Expo is easy to use, even for beginners. It even feels pretty natural if you've already spent a lot of time using React. Expo provides pre-built components and libraries that you can use to build your application, plus a simple setup and configuration process.
Faster Development: With Expo, you can develop mobile applications faster than with bare React Native. The pre-built components and libraries save development time, and the hot reloading feature makes it easy to see the changes you make instantly.
Publishing: Creating a build ready for the app store is a fairly simple process using EAS.
Available To Everyone: You don't need a Mac to develop an ios app using Expo. You can create an app that will work on both ios or Android, whithout even needing to run a simulator, since you can use the Expo Go app on your mobile device.

Cons:

Limited Control: Expo comes with pre-built components and libraries, which means you have limited control over the application's features and functionality. This can be a drawback if you want to customize your application.
Limited Flexibility: Since Expo comes with pre-built components, you may not be able to use third-party libraries and components that are not compatible with Expo.
Performance: Expo may have slower performance than bare React Native because of the pre-built components and libraries that come with it.
When You Don't Want Expo Any More: Removing Expo and changing your app to bare React Native at a later date can be frustrating and time consuming.

In Conclusion

Bare React Native and Expo both have their advantages and disadvantages. If you have experience in native mobile app development and want more control and flexibility over your application, bare React Native is the way to go. However, if you are a beginner or want to develop mobile applications faster and easier, then Expo is the better choice. Ultimately, the choice between the two depends on your specific requirements and preferences.

My personal recommendation would be to start out with Expo if you're new to learning React Native. Once you feel comfortable and familiar with React Native concepts, then switch to bare workflow. That's what I did 😃

5 Ways AI Could Impact The Future of Software Engineers

Tia Eastwood — Fri, 10 Mar 2023 10:15:28 +0000

Artificial Intelligence (AI) is rapidly evolving, and having a noticeable impact across many industries, including software engineering. As a developer myself, I'm always interested in the possibilities of new tech, but I started thinking about what kind of affect it could have on the industry I work in. AI can seem like a scary concept to some (is Skynet going to rise up and destry the world!?) however, society wouldn't be where it is today without the evolution of technology. As AI continues to evolve, it has the potential to transform the way software engineers work and the tools that they use. Here are five things that the future of AI could change for software engineers...

1. Intelligent Automation

Automation has been an essential part of software engineering for many years, but the future of AI is likely to bring about a new era of intelligent automation. Intelligent automation involves using AI to automate complex tasks, such as code generation and optimization. By automating these tasks, software engineers can focus on more strategic work and deliver higher-quality software products in less time.

2. Improved Software Maintenance

Maintaining and updating software can be a time-consuming and challenging task, particularly as software systems become more complex. However, AI-powered systems could be used to analyze code and detect potential issues before they become significant problems. This will make it easier for software engineers to identify and fix bugs and vulnerabilities, reducing the risk of downtime and improving overall software performance.

3. Collaboration Between Humans & Machines

AI systems are becoming increasingly sophisticated, but they still lack the creativity and problem-solving abilities of humans. In the future, software engineers are likely to work alongside AI systems, collaborating to achieve better outcomes. This will require software engineers to develop a new set of skills, including the ability to communicate effectively with machines and work collaboratively to solve complex problems. That sounds pretty cool, right?

4. Engineers With New Skills

One of the most significant changes that AI will bring to the software engineering profession is the need for engineers to be proficient in machine learning (ML) and data science. Machine learning is a subset of AI that involves training machines to learn from data, rather than being explicitly programmed. As more applications are developed using ML, software engineers will need to have a solid understanding of ML algorithms, statistical methods, and data analysis techniques. So perhaps, existing software engineers will be inspired to acquire these skills, or maybe some people will find new inspiration for training for a career in software engineering.

5. New Job Opportunities

As AI becomes more widespread, it also raises concerns about the impact it will have on the job market. There are concerns that AI might make some jobs redundant, but realistically AI will also create new job opportunities in areas such as machine learning, data science, and software development. There will be more demand for software engineers who have the skills and experience required to work with AI-powered technology.

In conclusion, the future of AI is exciting, but it can also present challenges for software engineers. No one is forcing you to embrace it or change the way you work, however by not adapting we could miss out on some exciting opportunities. We may need to develop new skills, but that's just part of being a software engineer. However, with a willingness to learn, we can surely take advantage of the many opportunities that AI is likely to create in the not-too-distant future.

🧪 How to Mock and Test AsyncStorage in React Native

Tia Eastwood — Thu, 19 Jan 2023 16:05:21 +0000

Since the original React Native AsyncStorage was deprecated, you may be using the community solution: react-native-async-storage. I would personally recommend it!

Once you start writing your unit tests with Jest & React Native Testing Library, you'll notice that initially you will get an error about async storage when we run the tests. Something like this:

Test suite failed to run

    [@RNC/AsyncStorage]: NativeModule: AsyncStorage is null.

OK! All you need to do is to mock AsyncStorage...

If you don't already have a test setup file, then create one and add the following jest mock:

// setupTests.js

jest.mock("@react-native-async-storage/async-storage", () =>
    require("@react-native-async-storage/async-storage/jest/async-storage-mock"),
);

This mock comes from the react-native-async-storage library and you can read more about it here on their docs.

Now make sure you reference you setupTest.js file in your package.json like this, so that it actually gets used:

  "jest": {
  "preset": "jest-expo",
  "setupFiles": ["./setupTests.js"],
  "transformIgnorePatterns": [
    "node_modules/(?!((jest-)?react-native|@react-native(-community)?)|expo(nent)?|@expo(nent)?/.*|@expo-google-fonts/.*|react-navigation|@react-navigation/.*|@unimodules/.*|unimodules|sentry-expo|native-base|react-native-svg)|@react-native-async-storage/async-storage"
  ]
},

Now the previous error should be gone and you can now test the behaviour of your AsyncStorage actions!

For example, you might have a todo list app that stores new todo items in AsyncStorage, then whenever you load up the app it gets all the items from AsyncStorage and displays them. Here is an example of a test covering the following scenario:

import React from "react";
import {
    render,
    waitFor,
    screen,
    fireEvent,
} from "@testing-library/react-native";
import App from "../App.tsx";
import AsyncStorage from "@react-native-async-storage/async-storage";
import renderer from "react-test-renderer";
jest.useFakeTimers();

const itemData = [
    { key: "1", text: "test item" },
    { key: "2", text: "another" },
    { key: "3", text: "and another" },
];

describe("<App />", () => {
    beforeEach(async () => {
        const jsonValue1 = JSON.stringify(itemData[0]);
        const jsonValue2 = JSON.stringify(itemData[1]);
        const jsonValue3 = JSON.stringify(itemData[2]);
        await AsyncStorage.setItem(itemData[0].key, jsonValue1);
        await AsyncStorage.setItem(itemData[1].key, jsonValue2);
        await AsyncStorage.setItem(itemData[2].key, jsonValue3);

        waitFor(async () => {
            expect(AsyncStorage.getAllKeys).toHaveBeenCalled();
        });

        waitFor(async () => {
            expect(await AsyncStorage.getAllKeys()).toEqual(["1", "2", "3"]);
        });
    });

    it("getAllKeys is called on render and items from async storage are displayed", async () => {
        render(<App />);

        const item1 = await screen.findByText("test item");
        const item2 = await screen.findByText("another");
        const item3 = await screen.findByText("and another");
        const falseItem = screen.queryByText("i shouldn't exist");
        expect(item1).toBeTruthy();
        expect(item2).toBeTruthy();
        expect(item3).toBeTruthy();
        expect(falseItem).toBeFalsy();
    });

    it("new todo item is rendered to the displayed list when added", async () => {
        render(<App />);

        const input = screen.getByPlaceholderText("new todo...");
        const addTodoBtn = screen.getByText("ADD TODO");
        fireEvent(input, "onChangeText", "New Task");
        fireEvent(addTodoBtn, "press");

        waitFor(async () => {
            expect(await screen.findByText("New Task")).toBeTruthy();
        });
    });
});

I have imported AsyncStorage at the top of the file and included a beforeEach that adds my mock data to Async Storage before the tests. Now I can interact with it, just like I would in the real app.

You can also see the full repo for the todo list project here - credit also goes to the Net Ninja for teaching me how to create a todo list app within his tutorial here.

If you have any tips or suggestions of your own, then feel free to comment!

Happy testing!

🧪 How to set up Jest & React Native Testing Library in your Expo App! 💥

Tia Eastwood — Wed, 18 Jan 2023 13:50:05 +0000

If you've used React Testing Library in a regular React project before then the React Native version will already seem familiar, however getting everything setup and configured is usually the trickiest part!

What we'll be using:

Prerequisites

A React Native Expo project.

Create a new one if you don't have one to work on already. See the Expo docs on creating a new project)

Installing React Native Testing Library.

Go ahead and install React Native Testing Library. I'm using npx expo install since I'm using Expo:

npx expo install @testing-library/react-native -- --save-dev

Installing react-test-renderer

We'll also need to install react-test-renderer, as React Native Testing Library uses it as a dependency.

IMPORTANT: Before you install it, look in your package.json and check what version of react you are using. You need to install the same version of react-test-renderer for compatibility. For example, I'm using "react": "18.1.0" - Therefore I need to install "react-test-renderer": "18.1.0":

npx expo install react-test-renderer@18.1.0

Installing Jest

Finally, go ahead and follow the instructions to install jest here.
Be sure to add the configuration to your package.json

Test Examples

//App.test.js

import renderer from "react-test-renderer";
import { render } from "@testing-library/react-native";


describe("<App />", () => {
    it("has 1 child", () => {
        const tree = renderer.create(<App />).toJSON();
        expect(tree.children.length).toBe(1);
    });

    it("renders correctly", () => {
        const tree = renderer.create(<App />).toJSON();
        expect(tree).toMatchSnapshot();
    });
    it("renders Hello World message on the home page", async () => {
        render(<App />);
        expect(screen.getByText("Hello, World!")).toBeDefined()
    });
});

// NOTE: You can use either:
// renderer.create(<App />) from  "react-test-renderer"
// or render(<App />) from "@testing-library/react-native"

The above tests are based on a super simple app with only one child. If you have a more complex app with additional libraries, then there may be more setup required, and I will go into these scenarios in more detail in future articles.

Please feel free to comment anything useful or interesting you've found when setting up testing on your Expo project.

Happy testing!

Super Simple CSS animation for "fade in" on page load 👻

Tia Eastwood — Sun, 15 Jan 2023 18:55:06 +0000

You've probably seen this one before...some websites have that really nice animation where things just fade in when you load the page. There are plenty of libraries out there that can help you achieve this, but if you just want to use a CSS approach, then you can try this out:

@keyframes fadeInUp {
  0% {
    transform: translateY(100%);
    opacity: 0;
  }
  100% {
    transform: translateY(0%);
    opacity: 1;
  }
}

.fadeInUp-animation {
  animation: 1.5s fadeInUp;
}

Keyframes

Using @keyframes, we can create our animation (I've called this 'fadeInUp' but you can call it what you want) and decide what you want it to do.
So I want a transform animation because I want to make something move.
I use translateY to move it along the Y axis and initially I want it to be pushed down from its initial position and I want it to be transparent (opacity: 0).
Then as it moves up the axis, it will become visible (opacity: 1).

Create the class

Then I created the .fadeInUp-animation class, which lets me control the speed of the animation.
You can then attach this class to any element you want to be animated, like text, an image, or even a whole div!

Have a play around and see what else you can do with it :)

Some more places you can learn about CSS animations

How to Host Your Website for Free on Netlify (& Keep Your Github Repo Private)

Tia Eastwood — Mon, 21 Nov 2022 15:52:56 +0000

TLDR: On free Github, you can't host your website on Github Pages AND keep your repository private. You can pay to upgrade Github if you want, but I will show you how you can host it on Netlify instead.

Recently I built a new personal website which I wanted to publish, but I also wanted to keep the repository private. I use Github to store my code, so usually I would use Github pages to publish my site. However on the free version of Github, you can't publish your site on Github Pages AND keep your repo private; you have to upgrade and pay for that.

Well I didn't want to pay 😄 but luckily Netlify is super easy and free!

Set up an account with Netlify if you don't have one already. Just select the starter option which is free and you can set up a new 'team' to start with. I just set up a team of me 😁

Once that was all set up, I went ahead and selected "Add new site".

I went with "Import an existing project":

Choose your Git provider (I'm going with Github of course) and it will take your through the process of connecting to your account and then a list of all your repos (even the private ones) will be available for you to choose from.

Choose the repo of your site that you want to publish and then you'll get to this next screen. If you've kept things simple, then owner should be you and branch to deploy is probably "main". I have never needed to make any changes to the "Basic build Settings" section myself, but you can certainly go and learn more about it.

Click "Deploy site" when you're ready and it will start the build / deploy process. If there are any errors, then they will be highlighted here, otherwise your site will be live! It's that easy!

At this point, if you have a custom domain you've purchased, you can also add it via the "Domain Settings" option. I won't go into that now, but there is some helpful information for that on Netlify's docs and you can also ask your domain provider if you're not sure how to connect it to your site.

There we are! I think that's a pretty straightforward option for even beginners looking to host their first site, but if you have any other recommendations / tips then please do share so everyone can learn! ☺️
_
Credit: Cover photo by Cookie the Pom on Unsplash_

How to use the Forem API to display your DEV.to blog posts on your website (easy!)

Tia Eastwood — Sun, 13 Nov 2022 21:59:36 +0000

In the past, I had blog websites (think Jekyll and Gatsby) where I would create and publish my blog posts, then I would cross-post them to DEV.to and other sites afterwards.

But what if you want to do it the other way round, huh? Well it's actually super easy! There isn't even any kind of authentication needed. In this article I will explain how to use the Forem API to display your blog posts on your website. In this example, I will also be using React and the fetch API.

Firstly, go and have a look at the docs for the Forem API, have a little read, and familiarise yourself a little bit. Then head to version 1 of the API to see the available endpoints.

So I have a React app that will display blog posts. All I need to do to display my posts, is to make a fetch request to the articles endpoint, with my username as a parameter.

I want to make the request as soon as the page loads, so I made a function called getPosts(), which makes the fetch request to the API endpoint and I have called this in the useEffect which runs once. To get your own posts, just insert your username into the url like so, or add it as a parameter:

// replace {yourUserName} with your DEV.to username:
"https://dev.to/api/articles?username={yourUserName}"

In my app it looks like this:

    useEffect(() => {
        getPosts();
    }, []);

    const getPosts = async () => {
        try {
            const response = await fetch(
                "https://dev.to/api/articles?username=tiaeastwood&per_page=8",
            );
            const json = await response.json();
            setPosts(json);
        } catch (error) {
            console.log("error", error);
        }
    };

I also added a query, so that it limits the result to 8 items at a time (per_page=8) and the API documentation will show you what other queries you can use.

So once the fetch request has been successfully made, I use setPosts() to store the result of the fetch in state, so that I can access it in the render. This gives us an array of post objects, and I can access the different properties of each, such as the title, cover_image etc to dynamically display what I want to in my component; you can see that in PostThumbnail component:

const PostThumbnail = ({ post }) => {
  return (
    <div className="grid-item">
      <div className="text-overlay">
        <p>{post.title}</p>
      </div>
      <div className="gradient"></div>
      <img src={post.cover_image} alt="" className="cover-image" />
    </div>
  );
};

const App = () => {
  const [posts, setPosts] = React.useState([]);

  React.useEffect(() => {
    getPosts();
  }, []);

  const getPosts = async () => {
    try {
      const response = await fetch(
        "https://dev.to/api/articles?username=tiaeastwood&per_page=8"
      );
      const json = await response.json();
      setPosts(json);
    } catch (error) {
      console.log("error", error);
    }
  };

  return (
    <div id="app">
      <h1>Latest Blog Posts</h1>
      <div className="grid">
        {posts.map((post) => (
          <PostThumbnail post={post} />
        ))}
      </div>
    </div>
  );
};

ReactDOM.render(<App />, document.getElementById("root"));

When you make your fetch request, I recommend popping a console.log in somewhere, or having a look in the network tab of your browser devtools, so you can see all of the information you get about each blog post, it's quite a lot!

Finally, here is the CodePen example, so you can see how the code all comes together :)

Credits:
This post's cover image is by Christopher Machicoane-Hurtaud on Unsplash