feat: Add @bothrs/expo for reusable expo utils, hooks and components #60

codinsonn · 2023-03-16T10:27:37Z

What

Ticket

[Notion] Identify recurring patterns and ideate solutions for reusability

Demo

yarn workspace @bothrs/expo example start

README

Show README.md content

@bothrs/expo

A set of reusable Expo components, hooks, and utilities for Bothrs projects

Installation

npm install @bothrs/expo

Providers

SentryProvider

A provider that wraps your app with Sentry init and an ErrorBoundary component. This is useful for catching errors and reporting them to Sentry.

App.tsx

import { SentryProvider } from '@bothrs/expo'

// ...

<SentryProvider
    sentryConfig={{
        dsn: '', // YOUR DSN FROM SENTRY HERE
        enabled: isLocalDevelopment,
        enableInExpoDevelopment: true, // Turn this off when you're done testing
        debug: true,
        release: `${appName}@${appVersion}`,
        environment: 'frontend',
        tracesSampleRate: 1,
    }}
    renderErrorScreen={() => <CustomErrorScreen />}
>
  <YourApp />
</SentryProvider>

Components

DynamicBottomSheet

A bottom sheet that automatically expands and collapses based on the content inside of it.

App.tsx

import { BottomSheetModalProvider } from '@gorhom/bottom-sheet'

// ...

<BottomSheetModalProvider>
  <YourApp />
</BottomSheetModalProvider>

SomeScreen.tsx

import { BottomSheetModal } from '@gorhom/bottom-sheet'
import { DynamicBottomSheet } from '@bothrs/expo'

// ...

const bottomSheetRef = useRef<BottomSheetModal>(null)

// -- Handlers --

const onShowBottomSheet = () => {
    bottomSheetRef.current?.present()
}

// ...

<>
    <DynamicBottomSheet
        ref={bottomSheetRef}
        // snapPoints={['50%', '100%']}
    >
        <YourContent />
    </DynamicBottomSheet>
</>

Gradient

A component that renders a gradient background from a CSS linear gradient string.

import { Gradient } from '@bothrs/expo'

// ...

<Gradient
    linearGradient="linear-gradient(180.0deg, rgba(15, 15, 15, 0) 0%, rgba(15, 15, 15, 0.96) 85%)"
/>

Utils

parseGradient

A utility function that parses a CSS linear gradient string and returns an array of colors and locations to use with expo-linear-gradient.

import { parseGradient } from '@bothrs/expo'
import { LinearGradient } from 'expo-linear-gradient'

const { colors, locations } = parseGradient(
    'linear-gradient(180.0deg, rgba(15, 15, 15, 0) 0%, rgba(15, 15, 15, 0.96) 85%)'
)

<LinearGradient
    colors={colors} // ['rgba(15, 15, 15, 0)', 'rgba(15, 15, 15, 0.96)']
    locations={locations} // [0, 0.85]
/>

parseConstants

A utility function that parses the Expo Constants object and returns a new object with only the properties you need, regardles of whether you're in Expo Go, a Dev Client or the Standalone Production App.

Useful to e.g. get the app version and name. Determine which back-end to contact per environment, including your local back-end url in development mode, so you can test on your own device without extra tunnels.

constants.tsx

import Constants from 'expo-constants'
import { parseConstants } from '@bothrs/expo'

// To determine yourself based on your branch strategy
const branchConfig = {
    devBranches: ['dev-preview'], // -> branchEnv = 'development'
    stageBranches: ['staging'], // -> branchEnv = 'staging'
    prodBranches: ['prod'], // -> branchEnv = 'production'
}

// Parse constants using your branchConfig
const {
    localUrl,
    appName,
    appVersion,
    sdkVersion,
    iosBuildnumber,
    androidVersionCode,
    branchName,
    branchEnv,
    isLocalDevelopment,
    isDevelopment,
    isStaging,
    isProduction,
} = parseConstants(Constants, branchConfig)

// Determine your back-end url based on the environment info

let api = localUrl // <-- Your local back-end url based on debugger IP
if (!isLocalDevelopment) api = 'https://dev-api.example.com' 
if (isStaging) api = 'https://staging-api.example.com'
if (isProduction) api = 'https://api.example.com'

// Re-export what you need
export {
    // based on constants
    api
    ...
    // parsed constants
    localUrl,
    appName,
    appVersion,
    sdkVersion,
    iosBuildnumber,
    androidVersionCode,
    branchName,
    branchEnv,
    isLocalDevelopment,
    isDevelopment,
    isStaging,
    isProduction,
}

conditionalMarkup

Helper to avoid ternaries in conditional styled-components styling.

import styled from 'styled-components/native'
import { conditionalMarkup } from '@bothrs/expo'

// ...

const StMarkupTest = styled.Text<{ orientation: 'landscape' | 'portrait' }>`
  ${({ orientation }) => conditionalMarkup(
    orientation === 'portrait' && 'text-decoration: underline;',
    orientation === 'portrait' && 'color: blue;',
    orientation === 'landscape' && 'color: red;',
    orientation === 'landscape' && 'font-weight: bold;',
  )}
`

Hooks

useSvgDimensions

SomeSvgIllustration.tsx

import { Dimensions } from 'react-native'
import { Svg, SvgProps, Path, ... } from 'react-native-svg'
import { useSvgDimensions } from '@bothrs/expo'

const SomeSvgIllustration = (props: SvgProps) => {
    // Map original svg dimensions to props for the svg component
    const { width, height, viewBox } = useSvgDimensions({
        originalWidth: 100,
        originalHeight: 100,
        containerWidth: Dimensions.get('window').width,
    })

    // -- Render --

    return (
        <Svg
            width={width}
            height={height}
            viewBox={viewBox}
            {...props}
        >
            {/* ... your SVG code here ... */}
        </Svg>
    )
}

FabianMeul · 2023-03-17T09:32:07Z

packages/expo/src/utils/parseConstants.ts

+  const localUrl: string | undefined = debuggerHostUrl?.split(':').shift() // prettier-ignore
+
+  // Names
+  const branchName: string | undefined = manifest?.releaseChannel || manifest2?.metadata?.branchName // prettier-ignore


Q:

Is this now a thing we do?

Using branches?

If that's what you mean, I suppose the answer is yes, as classic updates are now no more:

https://docs.expo.dev/archive/classic-updates/introduction/

Classic Updates was a service by Expo that delivered updates to end-users using Expo CLI's expo publish command. It was supported by Expo through August 2022, when it was replaced by EAS Update.

https://docs.expo.dev/versions/latest/sdk/updates/#updatesreleasechannel

I do read that releaseChannel will always be 'default' from now on though, so I'll switch the order of these I think (or remove manifest?.releaseChannel entirely)

thgh · 2023-03-22T15:45:10Z

packages/expo/src/utils/parseConstants.ts

+    return BRANCH_ENV.production
+  }
+
+  const branchEnv = getCurrentEnvironment()


Why is this wrapped in a function?

thgh · 2023-03-22T15:47:05Z

packages/expo/src/utils/parseConstants.ts

+  const appName: string | undefined = expoConfig?.name || manifest?.name || manifest2?.name // prettier-ignore
+
+  // Versions
+  const appVersion: string = expoConfig?.version || manifest?.version || manifest2?.version // prettier-ignore


Inconsistent naming: appVersion<->version

thgh · 2023-03-22T15:47:42Z

packages/expo/src/utils/parseConstants.ts

+  const { manifest, manifest2, expoConfig, platform } = Constants
+
+  // Local Debugger IP
+  const debuggerHostUrl: string | undefined = manifest?.debuggerHost || manifest2?.extra?.expoGo?.debuggerHost // prettier-ignore


Inconsistent naming: debuggerHostUrl<-> debuggerHost

thgh · 2023-03-22T15:50:19Z

packages/expo/src/utils/parseConstants.ts

+  // Versions
+  const appVersion: string = expoConfig?.version || manifest?.version || manifest2?.version // prettier-ignore
+  const sdkVersion: string = expoConfig?.sdkVersion || manifest?.sdkVersion || manifest2?.sdkVersion // prettier-ignore
+  const iosBuildnumber: number | null | undefined = platform?.ios?.buildNumber


Inconsistent casing of "n": Buildnumber<->buildNumber

thgh · 2023-03-22T15:56:10Z

packages/expo/src/providers/SentryProvider.tsx

+
+/* --- <ErrorBoundary/> ------------------------------------------------------------------------ */
+
+class ErrorBoundary extends React.Component<


Consider splitting up multiple components in 1 file. This ErrorBoundary is worth to be a component apart from Sentry.

thgh · 2023-03-22T15:57:14Z

packages/expo/src/providers/SentryProvider.tsx

+
+export type ErrorBoundaryProps = {
+  children: React.ReactNode
+  renderErrorScreen: () => JSX.Element


Feature request: make this optional and provide a simple error screen with reload button.

thgh · 2023-03-22T16:04:15Z

packages/expo/src/providers/SentryProvider.tsx

+
+  // -- Effects --
+
+  useEffect(() => {


I would recommend to init Sentry in the global scope instead of inside useEffect. In which usecase do you pass dynamic props that would affect Sentry? It looks like there are 3 ways to disable sentry: enabled, dsn, silenceEnabledWarnings. Why is simply setting dsn not enough?

thgh · 2023-03-22T16:06:03Z

packages/expo/src/utils/parseConstants.ts

+export type BranchConfig = {
+  devBranches: string[]
+  stageBranches: string[]
+  prodBranches: string[]
+}


Inconsistent dev<->development, stage<->staging, prod<->production

Consider retyping as below to improve consistency:

Suggested change

export type BranchConfig = {

devBranches: string[]

stageBranches: string[]

prodBranches: string[]

}

export type BranchConfig = Record<BranchEnvironment, string[]>

codinsonn self-assigned this Mar 16, 2023

codinsonn force-pushed the feat/bothrs-expo branch from 9efc881 to 0e02d06 Compare March 16, 2023 10:38

codinsonn marked this pull request as ready for review March 16, 2023 17:06

codinsonn requested review from TijsM, Emieldv, FabianMeul, a user, bramdeba, bramvanhoutte, BrentVanSteertegem, JaccoGoris, StefVerlinde, thgh and Vanatis and removed request for a user March 16, 2023 17:07

Emieldv approved these changes Mar 17, 2023

View reviewed changes

FabianMeul reviewed Mar 17, 2023

View reviewed changes

codinsonn added 9 commits March 17, 2023 12:31

feat: Add @bothrs/expo package set-up

466fc06

feat: Add common expo utils to @bohtrs/expo package

47f6d51

feat: Add example to @bothrs/expo workspace

7b2e33b

feat: Add reusable Gradient componentto @bothrs/expo

fae8464

feat: Add useSvgDimensions() hook to @bothrs/expo

b148adb

feat: Add DynamicBottomSheet component to @bothrs/expo

b6fe1f3

feat: Add SentryProvider to @bothrs/expo

52e149c

feat: Add README.md to @bothrs/expo

169642a

fix: Only check deprecated releaseChannel last for branchName value

5726f7e

codinsonn force-pushed the feat/bothrs-expo branch from f2f78ca to 5726f7e Compare March 17, 2023 12:11

thgh reviewed Mar 22, 2023

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

feat: Add @bothrs/expo for reusable expo utils, hooks and components #60

feat: Add @bothrs/expo for reusable expo utils, hooks and components #60

Uh oh!

codinsonn commented Mar 16, 2023 •

edited

Loading

Uh oh!

FabianMeul Mar 17, 2023

Uh oh!

codinsonn Mar 17, 2023

Uh oh!

codinsonn Mar 17, 2023

Uh oh!

thgh Mar 22, 2023

Uh oh!

thgh Mar 22, 2023

Uh oh!

thgh Mar 22, 2023

Uh oh!

thgh Mar 22, 2023

Uh oh!

thgh Mar 22, 2023

Uh oh!

thgh Mar 22, 2023

Uh oh!

thgh Mar 22, 2023

Uh oh!

thgh Mar 22, 2023

Uh oh!

Uh oh!


		/* --- <ErrorBoundary/> ------------------------------------------------------------------------ */

		class ErrorBoundary extends React.Component<

feat: Add @bothrs/expo for reusable expo utils, hooks and components #60

Are you sure you want to change the base?

feat: Add @bothrs/expo for reusable expo utils, hooks and components #60

Uh oh!

Conversation

codinsonn commented Mar 16, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

What

Ticket

Demo

README

@bothrs/expo

Installation

Providers

SentryProvider

Components

DynamicBottomSheet

Gradient

Utils

parseGradient

parseConstants

conditionalMarkup

Hooks

useSvgDimensions

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

codinsonn commented Mar 16, 2023 •

edited

Loading