Blog | Caleb Nance | Web Development

React Navigation V6 Expo SDK 45 Error

2022-05-06T05:12:48-04:00

Today I was updating a few of my expo clones to the latest Expo SDK 45 and kept getting the following error:

[react-native-gesture-handler] Seems like you're using an old API with gesture components, check out new Gestures system!

Searching this error gave me mixed results but finally found a solution that worked for me.

I am using the latest React Navigation v6 and more specifically the package:

{
  "@react-navigation/native": "^6.0.10"
}

The solve was pretty simple, just changing all usages of @react-navigation/stack

import { createStackNavigator } from '@react-navigation/stack';

const Stack = createStackNavigator();

To use the @react-navigation/native-stack like below

import { createNativeStackNavigator } from '@react-navigation/native-stack';

const Stack = createNativeStackNavigator();

This is not a drop-in replacement, but most things should be. Double check the API for native-stack to be sure.

Hope this helps!

React Navigation V6 Multi Modal Transition Setup

2021-10-31T11:12:48-04:00

Today I wanted share a quick snippet for React Navigation V6, how to setup a multi-modal transition structure with the use of their Group API.

Let’s say you wanted 2 (or more) modal types, one group of modals that opened in full screen and another group that opened in the Presentation mode.

import * as React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator, TransitionPresets } from '@react-navigation/stack';

// stacks
import StackHome from './StackHome';

// modal screens
import ModalOnboarding from '../screens/ModalOnboarding';
import ModalSelectPhoto from '../screens/ModalSelectPhoto';

const RootStack = createStackNavigator();

export default () => (
  <NavigationContainer>
    <RootStack.Navigator
      screenOptions={({ route, navigation }) => ({
        headerShown: false,
        gestureEnabled: true,
        cardOverlayEnabled: true
      })}
    >
      /* your regular stack or tab navigation */
      <RootStack.Group>
        <RootStack.Screen name="StackHome" component={StackHome} />
      </RootStack.Group>
      
      /* modal(s) grouping for Slide From Bottom */
      <RootStack.Group
        screenOptions={{
          presentation: 'modal',
          ...TransitionPresets.ModalSlideFromBottomIOS
        }}
      >
        <RootStack.Screen name="ModalOnboarding" component={ModalOnboarding} />
      </RootStack.Group>
      
      /* modal(s) grouping for Presentation */
      <RootStack.Group
        screenOptions={{
          presentation: 'modal',
          ...TransitionPresets.ModalPresentationIOS
        }}
      >
        <RootStack.Screen
          name="ModalSelectPhoto"
          component={ModalSelectPhoto}
        />
      </RootStack.Group>
    </RootStack.Navigator>
  </NavigationContainer>
);

Using CSS Variables with SCSS Variables

2021-01-16T17:10:01-05:00

Recently I ran into an issue when creating dark/light palettes with CSS Variables within my scss.

The issue was how scss handled the setting of a css variable with a scss variable.

The below example DID NOT WORK:

:root {
  --color-background: $white;
}

:root .dark-mode {
  --color-background: $black;
}

This is a breaking change and compatibility issue, so the need for interpolation is the fix (reference link).

By wrapping your scss variable with #{} fixes this compile issue!

:root {
  --color-background: #{$white};
}

:root .dark-mode {
  --color-background: #{$black};
}

iPhone and iPad Pixel Sizes Guide: Complete List

2020-11-05T20:19:11-05:00

Below is a collective list of iPhone / iPad screen sizes. I find this break-down helpful when working with react native and edge casing for navigational elements, etc.

iPhone Screen Sizes

iPhone Models	Height	Width	Has Notch
13 Pro Max and 12 Pro Max	926	428	X
13 Pro, 12 Max, and 12	844	390	X
12 Mini, 11 Pro, X, and Xs	812	375	X
11 Pro Max, 11, Xs Max, and Xr	896	414	X
8+, 7+, 6+, and 6s+	736	414
8, 7, 6, and 6s	667	375
SE, 5, 5s, and 5c	568	320
4, 4s, 3G, 3GS, and 2G	480	320

iPhone status bar: 44pt height (older models have a 20pt height)

iPad Screen Sizes

iPad Models	Height	Width	Year(s)
iPad Pro (12.9 inch)	1366	1024	2020, 2018, 2017, 2015
iPad Pro (11 inch)	1194	834	2020, 2018
iPad Air (10.9 inch)	1180	820	2020
iPad Air (10.5 inch)	1112	834	2019
iPad Pro (10.5 inch)	1112	834	2017
iPad (10.2 inch)	1080	810	2020, 2019
iPad mini (gen 5)	1024	768	2019
iPad (9.7 inch)	1024	768	2018, 2017
iPad Pro (9.7 inch)	1024	768	2016
iPad mini (gen 4)	1024	768	2015
iPad Air 2	1024	768	2014
iPad Air	1024	768	2013
iPad 4	1024	768	late 2012
iPad 3	1024	768	early 2012
iPad mini	1024	768	2012
iPad 2	1024	768	2011

iPad status bar: 40pt height (older models have a 20pt height)

Laravel - Run a Single Test in PHPUnit

2020-09-03T09:20:24-04:00

Today I wanted to share a quick snipped on how to run a single test in Laravel with PHPUnit.

vendor/bin/phpunit --filter SearchTest

As you see you can use the filter flag to run a single test from filename.

Hope this helped!

Laravel - Run a Single Seeder by classname

2020-08-03T11:20:24-04:00

Below is how to run a single seeder from your command line:

php artisan db:seed --class=PokemonCardsPricingTableSeeder

In the above command, you would need to replace the –class= value to what your classname is.

That’s it! Short and sweet. Cheers 🍻

Expo Spotify UI Clone

2019-07-17T12:12:48-04:00

Today I wanted to talk about my UI Clone of the native Spotify app I created and open sourced. It’s written in React Native and Expo.

Notable Features

Running on the latest Expo SDK 40
One code base that output to: iOS, Android and PWA (Progressive Web App)
React Navigation (v4)
Prettier/Linting
- run: yarn lint for CLI output
- helpers in code editor
Global Styles (reusable styles across the app)
- uses 8pt system (but can easily be changed)
- simple Design System starter
Example SVG usage
Example PropTypes usage

View Project on Github

Github’s Custom Repo Image Card Support

2019-04-21T15:19:11-04:00

With Github’s recent custom (per repository) Open Graph image support feature announcement, I wanted to test it out! Side note, this has been an open issue since March 2016.

Location

Find it on any repo within the Settings Tab on Github.

Test Preview Image

Once you’ve uploaded a preview image, test it on Twitter: Link Validator or Facebook: Debug Sharing Link.

Post the thing

Then once all of that checks out, post it!

Expo Multi Screen App Starter

2018-10-10T22:12:48-04:00

To continue from my last post, I wanted to share with you a more robust multi screen expo app starter.

Out of the box

Running on the latest Expo SDK 40
React Navigation (v4)
Light/Dark Theme
Prettier & Airbnb Eslint
Simple Jest testing

Other features / api

Dynamic route transitions (Mode: regular & modal)
SVG usage
Utility checker for the notch: iPhoneX, iPhoneXs, iPhoneXr, iPhoneXs Max
Preloading/caching local fonts & images
- with splash loading screen
- and once the app has loaded, lottie animation intro into app
Navigation Stacks
Example of Production vs Development flags
Custom SVG back button within React Navigation header

View Project on Github

Check the Demo & Release Notes here

Expo Single Screen App Starter

2018-10-03T21:30:18-04:00

Today I wanted to tell you all about the expo project I created to help you jump start a quick 1 screen app.

This is a perfect project for a game app, or any app idea that only really needs one main screen. I got the idea from a game app actually, click here to see the side by side of this code repo and the game.

View Project on Github

Out of the box

Expo SDK Latest
Airbnb Eslint and Prettier
Simple Jest testing

This also comes with a very nice api/constants import system I’ve slowly made better and better. This comes with global colors, device info, and global styles. This project is meant to be small and as minimal as possible, but the framework is pretty nice and easily expandable. Pull requests are welcome!