Creating a complete authentication flow using context-api. (Step-by-step)
This flow can be replicated to React-JS (Web)
npx react-native init reactNativeAuth --template react-native-template-typescript
import Animated, { Easing } from 'react-native-reanimated'; | |
const { and, cond, block, set, eq, neq, not, clockRunning, startClock, Clock, timing, stopClock, Value } = Animated; | |
type ResetParams = { | |
state: Animated.TimingState; | |
from?: Animated.Adaptable<number>; | |
to?: Animated.Adaptable<number>; | |
config: Animated.TimingConfig; | |
clock: Animated.Clock; |
In computing, memoization or memoisation
is an optimization technique used primarily
to speed up computer programs by storing
the results of expensive function calls and
returning the cached result when the same
inputs occur again.
— wikipedia
import { DependencyList, useMemo } from "react"; | |
import { | |
ImageStyle, | |
RegisteredStyle, | |
StyleProp, | |
StyleSheet, | |
TextStyle, | |
ViewStyle, | |
} from "react-native"; |
// Expo SDK40 | |
// expo-blur: ~8.2.2 | |
// expo-haptics: ~8.4.0 | |
// react-native-gesture-handler: ~1.8.0 | |
// react-native-reanimated: ^2.0.0-rc.0 | |
// react-native-safe-area-context: 3.1.9 | |
import React, { useState } from 'react'; | |
import { | |
Image, |
Considering that I've seen no other tutorials on how to build RSDKv5(U) on macOS (and considering that a lot of people just use this tutorial instead), I've decided to take matters into my own hands and futureproof this tutorial so that I never have to worry about it again!
Notes: every time I say to "cd into *specific directory here*", that is your cue to run cd *specific directory here*
in the command line.
How to build RSDKv5:
Step 1: Install Xcode and the command tools (the command tools can be installed by running this command: xcode-select --install
but only after installing Xcode). If you already have them, move on to step 2.
Step 2: You need to install CMake. If you have Homebrew installed already on your Mac, you can run brew install cmake
to install it, but if you don't, you can install it by using macOS's builtin Python and its pip binary. Run the following commands, and then open a new Terminal window by pressing ⌘+N
. Follow the rest of these steps in that window rather than your old
type Props = { | |
targetSize: [number, number]; | |
color?: string; | |
angle?: number; | |
style?: ViewStyle; | |
}; | |
const SkewedBackground: React.FC<Props> = ({ | |
targetSize, | |
color: _color, |
12th July, 2023. I'm going to try creating an iOS app called Paranovel, using Expo. My environment for mobile app dev (Xcode, Ruby, etc.) should be in reasonably good shape already as I frequently develop with React Native and NativeScript.
Go to https://docs.expo.dev, and see the Quick Start: npx create-expo-app paranovel
This runs with no problem, then I get this macOS system popup:
import { useWindowDimensions } from 'react-native' | |
import { Gesture } from 'react-native-gesture-handler' | |
import Animated, { | |
Extrapolation, | |
WithSpringConfig, | |
interpolate, | |
scrollTo, | |
useAnimatedRef, | |
useAnimatedScrollHandler, | |
useAnimatedStyle, |
// 3D Dom viewer, copy-paste this into your console to visualise the DOM as a stack of solid blocks. | |
// You can also minify and save it as a bookmarklet (https://www.freecodecamp.org/news/what-are-bookmarklets/) | |
(() => { | |
const SHOW_SIDES = false; // color sides of DOM nodes? | |
const COLOR_SURFACE = true; // color tops of DOM nodes? | |
const COLOR_RANDOM = false; // randomise color? | |
const COLOR_HUE = 190; // hue in HSL (https://hslpicker.com) | |
const MAX_ROTATION = 180; // set to 360 to rotate all the way round | |
const THICKNESS = 20; // thickness of layers | |
const DISTANCE = 10000; // ¯\\_(ツ)_/¯ |