React Native Expo Tutorial #2 | Gluestack Ui (tailwind Css Library)

Vous pouvez également regarder la vidéo sur YouTube :

React Native Expo Tutorial #2 | Gluestack UI (Tailwind CSS Library)

Installation de Gluestack UI (Bibliothèque CSS Tailwind)

npx gluestack-ui init

``bash

Détection d'un projet Expo, continuer ? >> Oui

Procédez avec prudence. Assurez-vous de valider vos modifications avant de continuer. Continuer ? >> Oui

### Installation de Lucide Icons pour React Native

Tout d'abord, assurez-vous que vous avez installé react-native-svg (version entre 12 et 15). Ensuite, installez le paquet :

``bash
yarn add lucide-react-native

Installation des dépendances requises pour notre projet

npx gluestack-ui ajouter icône boîte de texte bouton carte en-tête hstack vstack image

Faisons quelques changements dans notre application pour utiliser l'interface utilisateur de Gluestack.

Fichier app/_layout.tsx :

``js import "@/global.css" ;

import { GluestackUIProvider } from "@/components/ui/gluestack-ui-provider" ; import { Stack } from "expo-router" ; import { StatusBar } from "expo-status-bar" ;

const RootLayout = () => { return (

  <Stack>
    <Stack.Screen name="(tabs)" options={{ headerShown : false }} />
  </Stack>
</GluestackUIProvider>

) ; } ;

export default RootLayout ;

Fichier `app/(tabs)/_layout.tsx` :

``js
import { Icon } from "@/components/ui/icon" ;
import { Tabs } from "expo-router" ;
import { Home, ShoppingCart } from "lucide-react-native" ;

const TabLayout = () => {
  return (
    <Tabs screenOptions={{ tabBarActiveTintColor : "blue" }}>
      <Tabs.Screen
        name="index"
        options={{
          title : "Accueil",
          tabBarIcon : () => <Icon as={Home} />,
        }}
      />
      <Tabs.Screen
        name="cart"
        options={{
          titre : "Panier",
          tabBarIcon : () => <Icon as={ShoppingCart} />,
        }}
      />
    </Tabs>
  ) ;
} ;

export default TabLayout ;

C'est tout pour ce tutoriel, nous avons installé gluestack ui et ajouté des icônes à notre navigateur d'onglets inférieur.

Dans le prochain tutoriel, nous créerons les composants sign in, sign up, forgot password et otp.