3. Gluestack UI

Tijdens deze les, die bedoeld is om in zelfstudie uit te voeren tijdens een oefeningenles, bespreken we de gluestack-ui component library. In de resterende lessen gebruiken we deze library om de UI op te bouwen.

Gluestack-ui is gebaseerd op Tailwind, omdat Tailwind niet gebruikt kan worden in een React Native project, moeten we ook NativeWind gebruiken die dit wel mogelijk maakt. Alhoewel heel wat Tailwind klassen via NativeWind gebruikt kunnen worden, is het niet mogelijk om alle Tailwind klassen te gebruiken, zo zijn de grid klassen niet beschikbaar. Gluestack-ui werkt op dezelfde manier als Shadcn, individuele componenten worden toegevoegd aan je project zodat je deze eenvoudig kunt aanpassen aan je eigen behoeften.

Het lesvoorbeeld dat onderaan deze pagina te downloaden is, bouwt verder op de oplossingen van de oefeningen van les 2.

Startbestanden

UI Libraries in React Native

Gluestack-ui is slechts één van de vele UI libraries die beschikbaar zijn voor React Native. Zo zijn er bijvoorbeeld ook React Native Paper, RNUILib, NativeBase, Tamagui, React Native UI Kitten, React Native Reusables...

Elk van deze libraries heeft voor en nadelen. Hier is gekozen voor gluestack-ui omdat deze library heel sterk lijkt op de library die in de cursussen frontend en backend frameworks gebruikt wordt

Een React Native developer moet zich er van bewust zijn dat een UI-library risico's met zich meebrengt. Als de library niet geüpdatet wordt, bestaat de kans dat deze onbruikbaar is met nieuwe versies van React Native of Expo. Omwille van de foutgevoeligheid van React Native is dit een veel groter risico dan bij web development. Verder zijn de beschikbare libraries over het algemeen trager dan een zelfgebouwde UI. dat je zelf de UI bouwt, zoals geïllustreerd in het react-native-style-libraries-benchmark repository. Natuurlijk is een groot deel van de reden dat deze libraries alles vertragen dat de libraries groot en complex zijn en dus ook veel meer functionaliteit bevatten dan je in de meeste apps nodig zult hebben.

Tenslotte is het ook belangrijk om te weten dat gluestack-ui een niet zo positieve geschiedenis heeft. Origineel heeft het team achter gluestack-ui de Nativebase library ontwikkeld, deze is vervolgens stopgezet om gluestack V1 te ontwikkelen. Aangezien dat dit een volledige rewrite was, werd dit niet in dank afgenomen door de developers die gebruik maakten van Nativebase. Vervolgens is gluestack v1 stopgezet en is gluestack v2 ontwikkeld, wat opnieuw een volledige rewrite was.

Al deze problemen zijn de reden waarom er voor veel professionele projecten gekozen wordt om de UI volledig zelf te bouwen of gebruik te maken van een in-house library.

NativeWind & gluestack-ui

Hieronder bespreken we hoe je NativeWind en gluestack-ui kan toevoegen aan een React Native project. Alhoewel gluestack-ui een cli heeft waarmee de configuratie automatisch kan gebeuren, moeten we toch enkele stappen doorlopen die niet vermeld staan in de documentatie. Daarna bespreken we de integratie van NativeWind met React Navigation (Expo Router).

Installatie & configuratie

We beginnen we enkele configuratiebestanden die nodig zijn voor NativeWind en/of gluestack-ui. Het eerste bestand, babel.config.js beschrijft de configuratie voor de Babel transpiler, de tool die TypeScript converteert naar JavaScript en JavaScript features uit nieuwere versies van de taal omzet naar code die werkt in oudere versies van ECMAScript. Het tweede bestand, metro.config.js beschrijft de configuratie voor de Metro bundler, de bundler die alle assets en code converteert, samenvoegt, optimaliseert, minimaliseert en verpakt in een formaat dat door de app gebruikt kan worden.

Nu dat deze bestanden aangemaakt zijn, kunnen we de gluestack-ui cli gebruiken om de rest van de noodzakelijke bestanden te genereren en de reeds aangemaakte bestanden aan te passen.

Deze cli stelt twee vragen, waar we steeds voor de default optie kiezen.

Welcome to gluestack-ui!

│
◆  Detected an Expo project, continue?
│  ● Yes / ○ No
│

  ┌────────────────────────────────────────────────────────────────────────────────┐
  │                                                                                │
  │  NOTE: Files to get modified                                                   │
  │                                                                                │
  │  The command you've run is attempting to modify certain files in your project, │
  │  if already exist. Here's what's happening:                                    │
  │                                                                                │
  │  - babel.config.js                                                             │
  │  - metro.config.js                                                             │
  │  - tailwind.config.js                                                          │
  │  - global.css                                                                  │
  │  - tsconfig.json                                                               │
  │                                                                                │
  └────────────────────────────────────────────────────────────────────────────────┘
  
│
◆  Proceed with caution. Make sure to commit your changes before proceeding. Continue?
│  ● Yes / ○ No
└

Tenslotte installeren we de react-native-svg library waarmee SVG afbeeldingen weergegeven kunnen worden in React Native. Deze library is een dependency van gluestack-ui.

Configuratie

Het commando dat we hierboven uitgevoerd hebben heeft de GluestackUIProvider toevoegen aan het project. Alhoewel de provider grotendeels correct geconfigureerd is, kiezen we er in deze cursus toch voor om iets aan te passen. We doen dit omdat de gegenereerde provider complexer is dan nodig en het theme enkel uitleest als de app start en zicht niet aanpast als de gebruiker het thema aanpast.

/components/ui/gluestack-ui/index.tsx

import type {FunctionComponent, PropsWithChildren} from 'react'
import {config} from './config'
import type {ViewProps} from 'react-native'
import {useColorScheme, View} from 'react-native'
import {OverlayProvider} from '@gluestack-ui/core/overlay/creator'
import {ToastProvider} from '@gluestack-ui/core/toast/creator'

interface GluestackUiProviderProps extends PropsWithChildren {
  style?: ViewProps['style']
}

const GluestackUIProvider: FunctionComponent<GluestackUiProviderProps> = ({children, style}) => {
  const mode = useColorScheme() ?? 'light'

  return (
    <View style={[config[mode], {flex: 1, height: '100%', width: '100%'}, style]}>
      <OverlayProvider>
        <ToastProvider>{children}</ToastProvider>
      </OverlayProvider>
    </View>
  )
}

export default GluestackUIProvider

Tijdens de installatie is global.css aangemaakt, dit bestand bevat Tailwind CSS-klassen die gebruikt kunnen worden in de app, aangezien dit bestand voor de volledige app beschikbaar moet zijn, moeten we het in de root-layout importeren. Verder moeten we ook de GluestackUIProvider toevoegen aan de root-layout.

Natuurlijk zijn deze aanpassingen niet voldoende, React Navigation heeft, zoals vorige les besproken, een eigen theme provider. We kunnen de kleuren die in Tailwind gedefinieerd zijn importeren en deze vervolgens gebruiken om het light en dark thema in te stellen. Onderstaand thema is slechts een voorbeeld, je natuurlijk andere kleuren gebruiken.

Aangezien de kleuren en spacing voor de rest volledig beheerd worden door Tailwind, kunnen de we ThemeContext verwijderen. Dit betekent wel dat we alle componenten die hiervan gebruik maken moeten aanpassen. Moest de achtergrondkleur toch ergens nodig zijn, kan de useTheme hook uit React Navigation gebruikt worden.

Het initialisatiecommando heeft de root-layout aangepast, de GluestackUIProvider moet terug verwijderd worden aangezien de

/context/themeProvider.tsx

import '@/global.css'
import colors from 'tailwindcss/colors'
import GluestackUIProvider from '@/components/ui/gluestack-ui-provider'

const darkTheme: Theme = {
  dark: true,
  colors: {
    primary: colors.neutral[100],
    background: colors.black,
    card: colors.neutral[950],
    text: colors.neutral[300],
    border: colors.neutral[500],
    notification: colors.neutral[700],
  },
}

const lightTheme: Theme = {
  dark: false,
  colors: {
    primary: colors.neutral[900],
    background: colors.neutral[50],
    card: colors.neutral[100],
    text: colors.neutral[800],
    border: colors.neutral[500],
    notification: colors.neutral[700],
  },
}

const ThemeProvider: FunctionComponent<PropsWithChildren> = ({children}) => {
  const isDark = useColorScheme() === 'dark'
  const activeTheme = isDark ? darkTheme : lightTheme

  return (
    <GluestackUIProvider>
      <NavigationThemeProvider value={ {...DefaultTheme, ...activeTheme}}>
        <StatusBar backgroundColor={activeTheme.colors.background} />
        {children}
      </NavigationThemeProvider>
    </GluestackUIProvider>
  )
}

Notitie

Het installatiecommando heeft in /src/app/_layout.tsx ook een GluestackUIProvider toegevoegd, verwijder deze om foutmeldingen te voorkomen.

Gluestack componenten gebruiken

Elke component van gluestack-ui moet geïnstalleerd worden via een terminal commando. Onderstaand commando installeert alle componenten die nodig zijn om het lesvoorbeeld af te werken.

Als je alle componenten uit gluestack in één keer wilt installeren, kan je onderstaand commando gebruiken.

Voorbeeldcode

Onderstaande code bevat de oplossingen van de oefeningen les 2, maar dit keer volledig opgebouwd met gluestack-ui.

Uitgewerkt lesvoorbeeld met commentaar