How to make new React Native components

Skal du lage en React Native-komponent for Spor? Da er denne guiden for deg. Her vil du få innsikt i hva du skal skrive hvor, og hvilke kodestandarder og konvensjoner vi bruker.

I utgangspunktet skal de aller fleste komponentene du kommer til å implementere i Spor for React Native, allerede finnes i Spor for React. React-implementasjonen skal fungere som en referanse-implementasjon, slik at du slipper å komme på navn, abstraksjonsnivåer og slike ting selv. I tillegg får man den fine fordelen at man bare trenger å lære seg ett sett med navn på komponenter og props på tvers av teknologiene.

Om komponenten du skal implementere ikke finnes i React fra før av, slår du av en prat med noen på Spor-teamet før du starter.

Vi har tre navnekonvensjoner som kan være greie å huske på - variant, colorScheme og size.

variant er hvordan vi skiller på forskjellige utseende-varianter som ikke har noe med farge å gjøre. Eksempler kan være solid, outline, primary, secondary eller ghost.

colorScheme er hvordan vi skiller på forskjellige utseende-varianter som har noe med farge å gjøre. Eksempler kan være teal, orange, light eller dark.

size er hvordan vi skiller på forskjellige utseende-varianter som har med størrelsen å gjøre. Her bruker vi utelukkende t-skjortestørrelsene sm, md, lg, xl, 2xl osv. Om det kun finnes to størrelser, kall dem sm og lg.

All Spor-kode ligger i app/spor-mappen i salgsapp-react-native-repoet. Når du skal lage en ny komponent, lager du en ny mappe med grupperingsnavnet på komponent-settet du skal lage (f.eks. button, card, layout osv). Husk på éntall, bare for å være konsekvent.

Inni denne mappen lager du en index.tsx fil, som eksporterer de forskjellige komponentene dine. Husk også å eksportere den nye index.tsx filen i app/spor/index.tsx, så folk kan importere komponentene dine fra app/spor.

En komponent bør være så enkel som overhodet mulig. Om den allikevel skulle bli kompleks, anbefales det å refaktorere mindre komponenter, som så kan komponeres sammen i en slags abstraksjonskomponent.

Et eksempel kan være en modal. Du kan ha en Modal, en ModalOverlay, en ModalContent, ModalHeader, ModalBody og ModalFooter, som du så setter sammen en SimpleModal av, som fungerer i de fleste tilfeller. Om du trenger mer kontroll, kan du importere delene og sette dem sammen slik du ønsker.

Komponentene bør støtte å kunne få spesifisert såkalte spacing-props, som margin (og tidvis også padding). Det kan gjøres ved å spesifisere SpacingProps (importert fra app/spor) i Props-typen:

type ExampleComponentProps = SpacingProps & { children: React.ReactNode };

export const ExampleComponent = (props: ExampleComponentProps) => {
  return <Box {...props}> {...} </Box>
}

Husk å spreade disse spacing propsa til riktig element. Som regel er det en ytre <Box />-komponent (importeres fra app/spor). Det finnes også tilsvarende props-typer for layout props, positioning props osv.

Vi har laget vår egen måte å lage styling på for komponenter, som bruker det beste fra Restyle.

Lag en egen fil theme.tsx per komponent. Her vil du importere en funksjon som gir deg noen hjelpefunksjoner. Her er et komplett eksempel:

import { createStyleHelpers } from 'app/spor'
import type { BoxStyle, TextStyle } from 'app/spor'

// Strukturen i komponenten din
// f.eks. om du har noe med en ytre container og en tekst-komponent, ville ting sett slik ut:
type Structure = {
  container: BoxStyle;
  text: TextStyle;
}
// Argumentene du kaller `getStyles`-funksjonen med fra komponenten din
type Args = {
  variant: 'solid' | 'outline'
  size: 'sm' | 'md' | 'lg'
}

// Dette lager to ferdig-typede hjelpefunksjoner som lar deg lage styles.
const { createGetStyles, createStyleConfig } = createStyleHelpers<Structure, Args>()

// Først lager man delte stiler:
const baseStyles = createStyleConfig(() => ({ 
  container: { backgroundColor: 'darkTeal' },
  text: { color: 'white' }
}))

// Så lager man forskjellige "spesial-states" man skal støtte, som varianters, størrelser, disabled etc.
const variantStyles = createStyleConfig(({ variant }) => {
  switch (variant) {
    case 'outline': return { container: { borderWidth: 1, borderColor: 'primaryGreen', borderStyle: 'solid' } }
    default: return {}
  }
})
// osv

// Så til slutt lager man `getStyles` funksjonen, der man sender inn de forskjellige funksjonene man laget over i riktig rekkefølge 
// (style configs til høyre skriver over relevante deler av style configs til venstre osv)
export const getStyles = createGetStyles(baseStyles, variantStyles, sizeStyles, disabledStyles)

Så vil man bruke denne funksjonen fra komponenten sin:

const ExampleComponent = ({ children, variant, size, isDisabled }: ExampleComponentProps) => {
  const styles = getStyles({ variant, size, isDisabled })
  return (
    <Box {...styles.container}>
      <Text {...styles.text}>{children}</Text>
    </Box>
  );
}

Av og til vil man også trenge å bruke "vanlige" verdier. Da kan man bruke hooken over med den nye hooken useRestyleValues:

const AnotherExampleComponent = () => {
  const styles = getStyles();
  const iconStyles = useRestyleStyle(styles.icon);
  return (
    <Svg style={iconStyles}>...</Svg>
  )
}

Husk å kun bruke såkalte named exports, og ikke default exports. Les litt om hvorfor her.

Det finnes noen nyttige verktøy og hooks i app/spor/utils mappen. Ta en titt der, før du eventuelt skriver ditt eget

Denne guiden er et lite førsteutkast på hvordan du utvikler Spor for React Native. Om du ser forbedringspotensiale, oppfordrer vi deg til å bidra med forslagene dine! Ingenting er for lite, og alle monner drar.