Skip to content

Instantly share code, notes, and snippets.

View emeraldsanto's full-sized avatar

Yanick Bélanger emeraldsanto

View GitHub Profile
@emeraldsanto
emeraldsanto / NavigationScreen.ts
Last active August 19, 2020 23:07
Typings for a more efficient way to use React Navigation with TypeScript.
import { FC } from "react";
import { RouteProp } from "@react-navigation/native";
import { StackNavigationProp } from "@react-navigation/stack";
/**
* Interface mapping screen names to their navigation params.
*/
export interface ScreenArguments extends Record<string, object | undefined> { }
/**
@emeraldsanto
emeraldsanto / NavigationConfig.ts
Last active August 4, 2020 01:53
Module exposing custom wrappers over plain NavigationContainer functions to enable navigation throughout the application
import { log } from "@lib/Logger";
import { createRef, ReactNode } from "react";
import { StackScreenArguments } from "./NavigationScreen";
import { DrawerActions, EventListenerCallback, NavigationContainerEventMap, NavigationContainerRef, NavigationState, PartialState, StackActions } from "@react-navigation/native";
/**
* Reference to the root `NavigationContainer` component. Used to dispatch
* actions and commands from anywhere within the app.
*/
export const navigationRef = createRef<NavigationContainerRef>();
@emeraldsanto
emeraldsanto / Logger.ts
Last active August 4, 2020 02:01
Simple logger with custom tags and colors.
import crashlytics from "@react-native-firebase/crashlytics";
export type LogLevel = "info" | "warn" | "error";
const ANSI_YELLOW = "\u001b[1;33m";
const ANSI_RED = "\u001b[1;31m";
const ANSI_BLUE = "\u001b[34m";
const ANSI_RESET_CODE = "\u001b[30m";
const LOG_COLORS: Record<LogLevel, string> = {
@emeraldsanto
emeraldsanto / Environment.ts
Created August 4, 2020 02:04
Utility class providing getters for the current environment file
import env from "../../env.json";
/**
* Wrapper over the current environment file, provides
* utility methods to query the file without having to import it manually
*/
export class Environment {
/**
* Checks wether or not the app is running in debug mode
@emeraldsanto
emeraldsanto / set-environment.ts
Created August 4, 2020 02:07
Script to be run via NPM commands to generate the correct `env.json` file based on the provided environment name and the existing environment files
#!/bin/node
/**
* This scripts will create a `env.json` file at the root of the project
* with the content matching that of the desired environment file, as defined in `/src/env/`
*
* @example
* npx ts-node src/scripts/set-environment.ts production
*/
@emeraldsanto
emeraldsanto / ErrorBoundary.tsx
Last active March 15, 2023 20:26
Custom error boundary with Firebase Crashlytics reporting and HOC
import React, { Component, ComponentType, ReactNode } from "react";
import crashlytics from "@react-native-firebase/crashlytics";
export interface ErrorBoundaryProps {
fallback: () => ReactNode;
}
/**
* Wraps the provided component in an ErrorBoundary, with the provided fallback.
* This should be used on components whose parent is not easy to control, such as
@emeraldsanto
emeraldsanto / withSuspense.tsx
Last active April 13, 2023 21:34
HOC to wrap a component in a `Suspense`, most likely a React Navigation screen. To be used with `React.lazy`.
/**
* Wraps the provide component in a `Suspense`, with the provided fallback.
* This should be used on components whose parent is not easy to control, such as
* React Navigation screens to be able to lazy load them using `React.lazy`.
* @param WrappedComponent The component to wrap.
* @param fallback The component to render while loading.
*
* @example
* const SomeScreen = withSuspense(React.lazy(() => import("path/to/some/screen")));
*/
@emeraldsanto
emeraldsanto / PaginatedList.tsx
Created August 18, 2020 01:05
A wrapper over the base FlatList component with better pagination and automatic data-retrieval footers.
import { RefObject } from "react";
import { FlatList, FlatListProps } from "react-native";
import Success from "@assets/icons/success.svg";
import Warning from "@assets/icons/warning.svg";
import { ColorCode } from "@models/constants/ColorCode";
import { Row } from "@primitives/Flex/Row";
import { LocalizedText } from "@primitives/LocalizedText/LocalizedText";
import { useScrollToTop } from "@react-navigation/native";
import React, { FC, Fragment, useImperativeHandle, useRef, useState } from "react";
import { ActivityIndicator, FlatList, StyleSheet } from "react-native";
@emeraldsanto
emeraldsanto / styles.xml
Created February 23, 2021 20:12
Jumio 3.8.0 styles
<resources>
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<item name="android:windowLightStatusBar">true</item>
<item name="android:statusBarColor">@color/status_bar_color</item>
<item name="android:spinnerItemStyle">@style/SpinnerItem</item>
<item name="android:spinnerDropDownItemStyle">@style/SpinnerDropDownItem</item>
<!-- Text Underline -->
<item name="android:editTextBackground">@android:color/transparent</item>
<!-- TextInput cursor -->
@emeraldsanto
emeraldsanto / scaling-stylesheet.ts
Created February 24, 2021 16:34
A basic implementation of a scaling stylesheet measurements
import { Dimensions, StyleSheet } from "react-native";
const SCALABLE_PROPERTIES = [
"padding",
"paddingStart",
"paddingEnd",
"paddingTop",
"paddingBottom",
"paddingRight",
"paddingLeft",