 Resources from Kadi Kraman in 2024

Expo Application Services ([EAS](https://expo.dev/eas)) is a cloud build service used to build and publish React Native apps.

This course will show you how to create the common types of builds for iOS and Android on EAS. We'll cover Development builds for local development, Preview builds for internal testing, and Production builds for release.

Additionally, you'll learn about:
- app versioning
- automatic store uploads
- setting up store listing pages
- installing multiple app variants on the same device
- installing past builds with [Expo Orbit](https://docs.expo.dev/build/orbit/)

## iOS

An overview of build signing, and why an Apple Developer account needed in order to install builds on a real device.

How to create:
- an iOS simulator build
- a build to use on your device for local development
- a build to share with your team without uploading it to App Store Connect
- a release build to use on the App Store

You will also learn how to upload your build to App Store Connect, share it on TestFlight and create a Release.

## Android

How to create:
- a build to use for development on an emulator or a device
- a build to share with your team without uploading it to Google Play
- a release build to use ob Google Play

We'll cover what is needed to create a new Google Play account, and the current restrictions for individual accounts.

You will also learn how to set up auto-submit on Google Play.

React Native lets you build mobile apps using only JavaScript. It uses the same design as React, letting you compose a rich mobile UI from declarative components.

react-native

Build and Deploy React Native Apps with Expo EAS

A skeleton loader is a popular UI pattern for loading screens: instead of a spinner, we show static or an animated placeholder for the information that is still loading. 

In this course, we go through 3 instrumental libraries for React Native - Linear Gradient, Masked View, and Reanimated 2 - and in the end, we use them in tandem to build a Skeleton Loader.

**Linear Gradient** [Expo](https://docs.expo.dev/versions/latest/sdk/linear-gradient/) | [Pure React Native](https://github.com/react-native-linear-gradient/react-native-linear-gradient)

**Masked View** [Expo](https://docs.expo.dev/versions/latest/sdk/masked-view/) | [Pure React Native](https://github.com/react-native-masked-view/masked-view)

**Reanimated 2** [Expo](https://docs.expo.dev/versions/latest/sdk/reanimated/) | [Pure React Native](https://github.com/software-mansion/react-native-reanimated/)

This course is built using an iOS simulator on plain React Native. Still, it will work on Expo and Android (you'll need to follow the relevant installation instructions available in the documentation).

The finished code for the skeleton loader (last 2 lessons) is available on [Expo Snack](https://snack.expo.dev/@kadikraman/animated-skeleton-loader).

Building a Customizable Animated Skeleton Loader in React Native

How to create buttons in React Native depending on the level of desired customisability: the quick and simple Button, a more customisable Touchable, and the most customisable Pressable.

Button component is useful for quick prototyping.

TouchableOpacity is the most common way of creating buttons and other touchable areas, and is suitable for most use cases.

Pressable gives you the most control over the look and feel of your button, including customising the pressed state and text, as well as handling long presses separately from regular presses.

Creating Buttons in React Native with Three Levels of Customization

In this course, we will be building a React Native news app that is read-only when offline. 

The videos are recorded on a Mac with an iPhone 13 Simulator using plain React Native, but you can do this course using Android, Windows and even the Expo managed workflow. See the lesson description for platform-specific instructions. The solutions repo has been verified to work on a Pixel 3a Emulator on Mac.

The completed app for this course is available [here](https://github.com/kadikraman/news-flash) and each lesson will include a link to the commit that added the code so you can check your work.

After we build our news app, we're going to enhance it to make it read-only when offline using urql'g GraphCache.

This course will require you to run the api locally on your device. The api repo is available [here](https://github.com/kadikraman/news-flash-api).

**Resources:**
- urql: https://formidable.com/open-source/urql/docs/
- Insomnia: https://insomnia.rest/
- Async Storage: https://github.com/react-native-async-storage/async-storage
- React Native Netinfo: https://github.com/react-native-netinfo/react-native-netinfo

Build a News App with React Native, GraphQL and TypeScript

You'll learn how create a button using the built-in Button component, handle the onPress event, disabled state, and button colour. While doing so we will explore the TypeScript ButtonProps interface that defines the options available to you.

The Button component is built into React Native, and is the quickest way to add interaction to your application as it can handle both the button text, and the onPress event in one component.

The downside of the Button component is that it's not very configurable: other than setting the text colour and disabled state, you won't be able to customise much else when it comes to the look and feel of the button.

Good to use for prototyping, and building quick UIs.

Create a Button in React Native Using the Button Component

Create a button in React Native using Text and TouchableOpacity, and customise the look and feel of your button using the style prop and activeOpacity.

Using TouchableOpacity is of the most commonly used ways of building buttons in React Native. It is much more versatile than the built in Button component: you can wrap anything (an Image, View, Text etc) in a TouchableOpacity, to make it into a button, and add any styles for both the button container as well as the children to customise them.



Create a Button in React Native Using TouchableOpacity

Create a button in React Native using Text and Pressable, customise the look and feel of your button and text depending on the pressed state, and handle long presses separately to regular presses.

The Pressable component, released in React Native 0.63 is a relatively recent addition to the library. It is by far the most versatile way of creating buttons. With Pressable, you get access to the pressed state which is a boolean value that indicated whether the button is currently being pressed or not. This value can be used to render a different button style or text depending on the pressed state. You can also pass in functions that get triggered when the button was pressed and released, and handle long presses separately from regular presses.

Customize Button Pressed State Using the React Native v0.63 Pressable Component

How to create an app icon from scratch, generate the required sizes, and add to your iOS app.

Image editing - [Figma](https://www.figma.com/) is a free online design tool used in the video. You can use any design tool you like, such as Photoshop, Sketch etc, as long as the output is a 1024x1024 .png image.

Asset generator - [Iconizer](https://raphaelhanneken.com/iconizer/) is a free mac app for generating the correct sized assets from your icon.

Design and Add a Custom App Icon with Figma to Your React Native iOS App 

How to add an app icon to your Android app.

For the foreground, you will need an image with a transparent background.

If you wan to create one, you can use [Figma](https://www.figma.com/) which is a free online design tool used in the video. You can use any design tool you like, such as Photoshop, Sketch etc.

[Android Studio](https://developer.android.com/studio) - is the IDE for android development. To open you React Native project in Android studio, launch Android Studio, choose "Open an Existing Android Studio Project" and open the /android directory. 

Add a Custom App Icon to Your React Native Android App with Android Asset Studio

A masked view is view which only displays the pixels that overlap with the view rendered in its mask element. This can be incredibly powerful in creating complex UI elements, and it is a handy tool in animation.

In this video we will use a masked view to render text with unusual colours.

**Masked View** [Expo](https://docs.expo.dev/versions/latest/sdk/masked-view/) | [Pure React Native](https://github.com/react-native-masked-view/masked-view)

Mask UI Elements in React Native With React Native Masked View

Rendering text on top of images is a common UI patter for both mobile and web apps. The difficulty with this is that as developers, we can't control what the image will look like - it might be primarily light or primarily dark. So we'll need to ensure that the text shows up on the image regardless of how light or dark it is but without significantly altering the image.

With React Native Linear Gradient, we can be clever about how we darken the image to ensure the text is always visible.

Check out [the comparison](https://twitter.com/kadikraman/status/1427589516672618514) for the image with and without the using a gradient.

**Linear Gradient** [Expo](https://docs.expo.dev/versions/latest/sdk/linear-gradient/) | [Pure React Native](https://github.com/react-native-linear-gradient/react-native-linear-gradient) libraries that support it.

Using React Native Linear Gradient for Making White Text Visible on Light Images

Linear gradients can be a useful tool for building your app UI. You can use it to create fancy backgrounds or buttons for your app or [improve displaying text on an image](https://twitter.com/kadikraman/status/1427589516672618514/photo/1).

Although Linear Gradients aren't part of React Native core, there are both [Expo](https://docs.expo.dev/versions/latest/sdk/linear-gradient/) and [Pure React Native](https://github.com/react-native-linear-gradient/react-native-linear-gradient) libraries that support it.

Create Linear Gradients in React Native Using React Native Linear Gradient

We will use the three new libraries we've just learnt about in the course - Linear Gradient, Masked View and Reanimated 2 - to add an animation effect to our skeleton loader.

**Linear Gradient** [Expo](https://docs.expo.dev/versions/latest/sdk/linear-gradient/) | [Pure React Native](https://github.com/react-native-linear-gradient/react-native-linear-gradient)

**Masked View** [Expo](https://docs.expo.dev/versions/latest/sdk/masked-view/) | [Pure React Native](https://github.com/react-native-masked-view/masked-view)

**Reanimated 2** [Expo](https://docs.expo.dev/versions/latest/sdk/reanimated/) | [Pure React Native](https://github.com/software-mansion/react-native-reanimated/)

Finished code is available on [Expo Snack](https://snack.expo.dev/@kadikraman/animated-skeleton-loader).

Animating a Skeleton Loader using Reanimated 2

How to create a skeleton placeholder for dynamically loaded content in your app.

Create a Skeleton Placeholder for your App Content

Reanimated is an animation library for React Native that was built to address some deficiencies in React Native's built in animation library. Reanimated 2 is the latest version of Reanimated and its biggest change is completely deviating from the Animated and Reanimated API and moving to a fully React Hooks based format.

In this video we use useAnimatedStyle, useSharedValue and withTransition to scale and move a circle on the page.

Reanimated 2 is available for both  [Expo](https://docs.expo.dev/versions/latest/sdk/reanimated/) and [Pure React Native](https://github.com/software-mansion/react-native-reanimated/) projects

Using Animated Style from Reanimated 2 to Animate a View

GraphQL is a query language for APIs and a runtime for fulfilling those queries with your existing data. GraphQL provides a complete and understandable description of the data in your API, gives clients the power to ask for exactly what they need and nothing more, makes it easier to evolve APIs over time, and enables powerful developer tools.

graphql

We'll create an exchange that filters out mutations that are executed while the user is offline and map them to an error result. When the user tries to add or remove a bookmark when offline, show an informative alert message.

**Resources:**
Authoring exchanges: https://formidable.com/open-source/urql/docs/advanced/authoring-exchanges/
Wonka: https://github.com/kitten/wonka

**Checkpoint:** [Add an offline mutation exchange](https://github.com/kadikraman/news-flash/commit/c633b2d55f7505a0d8a11b8ea3c7562b1a8ae8a1)

Create a Custom Exchange for urql to Filter Out Mutations when Offline

We'll refactor the Story out to a separate component, create a fragment for the story fields and reuse the fragment in the bookmarks query.

We'll see how using Fragments makes it easy to query for data throughout our application.


Fragments: https://graphql.org/learn/queries/#fragments

Use GraphQL Fragments to Query Same Fields on Multiple Queries in React Native

We'll learn about exchanges in urql and how urql passes a query through the `dedupExchange`, `cacheExchange`, and `fetchExchanged`.

We'll replace the default `cacheExchange` with `GraphCache` which allows schema awareness. The result is that we'll be able to return partial data from the cache while more data is fetched

Install GraphCache and use the schema awareness feature to return partial data from cache.

**Resources**:
- GraphCache: https://formidable.com/open-source/urql/docs/graphcache/

**Checkpoint:** [Refactor story and use a story details fragment](https://github.com/kadikraman/news-flash/commit/1675f0360f889bb6e456e60226652490f8786d8b)

Display Partial Data From Cache with GraphCache

We will use GraphQL code generator to generate types for the queries used in the app. You'll see how we will get the benefit of TypeScript while not having to do much typing at all ourselves.

This way we know what data is being passed around our application through TypeScript.

**Resources:**
- GraphQL Code Generator: https://www.graphql-code-generator.com/

**Checkpoint:** [Generate types with graphql codegen](https://github.com/kadikraman/news-flash/commit/221da4ee4e3ec5455cd83d1c0c74e364378f0059)

Generate TypeScript Types for GraphQL Queries Using GraphQL Code Generator

Start with a plain React Native app initialised using the React Native TypeScript template.

We will install and configure urql, use urql's useQuery hook to fetch all stories from the locally running graphQL API, and render them in a FlatList.

**Resources:**
- React Native TypeScript template: https://reactnative.dev/docs/typescript
- urql docs: https://formidable.com/open-source/urql/docs/

**Android:**
- run the app with `yarn android`
- use `http://10.0.2.2:3000/graphql` instead of `http://localhost:3000/graphql` for the API endpoint

**Checkpoint:**
- [Initial commit (create from template)](https://github.com/kadikraman/news-flash/commit/a04dccad8fa090b07fdf8a94f904ba7551448ead)
- [Add initial project (remove template UI code)](https://github.com/kadikraman/news-flash/commit/08a6d0f078b36f9e35a28f6a71175b8c2dd260ad) <-- video starts from here
- [Add urql and useQuery](https://github.com/kadikraman/news-flash/commit/66d6fcfb5b797da98456d4ff6e433ab6990207de)

Add urql to a React Native Project and Fetch Data With the useQuery Hook

We'll use Insomnia to explore the API that we will be building our application against. I'll give you a tour of our GraphQL API and then start writing some queries. To get a feel of the data that is being sent back we will run queries for All Stories, Story By ID, Add Bookmark, All Bookmarks, and Remove Bookmark.

**Resources:**
- API: https://github.com/kadikraman/news-flash-api
- Download Insomnia: https://insomnia.rest/download

Topics

Instructors

Content Type

Kadi Kraman