Expo (React Native) et UI Kitten: Stylé avec plein de chatons 😽

Dans cette partie je vais créer mon app Expo (React Native) et je vais y ajouter la librairie de composants UI Kitten.

Expo (React Native)

Expo te permets de faire des applications React Native sans effort!

Je mesure bien mes mots, car entre les composants déjà a notre disposition offerts par Expo ainsi que les guides pour mettre en place une Map, du Paiement avec Stripe et j'en passe... La vie devient simple et agréable.
Rappellons-nous que l'idée de cette série de tutos est de créer quelque chose de viable sans branlette intellectuelle 🍆

UI Kitten

Une librarie très chatonisée et super stylée. Sauf si tu as un designer ou designeuse qui t'a fait des maquettes quali, tu peux aujourd'hui faire une appli tout à fait stylée grace à cette lib.

Prérequis (les classiques

• NodeJS LTS
• VS Code
• Un terminal (ou l'outils de commande si tu veux)

Intialisation de mon projet

npx create-expo-app MaPetitePrise --template tabs

Ca va nous donner de la navigations et TypeScript, on se mettra bien bien!

Tu peux à présent ouvrir VS Code et lancer:

# Mac a.k.a les riches 💸
npm run ios

# Windows a.k.a les gamers
npm run android

On fera un tour des lieux un peu plus tard.

Je vais mettre en place UI Kitten à present

npm i @ui-kitten/components @eva-design/eva # entrée
npx expo install react-native-svg@9.13.6 # entrée

Pour que ca fonctionne aussi en mode Web, si jamais j'ai l'envie de générer une app web aussi (eh oui c'est possible! 😇)

J'ajoute ceci à mon app.json:

  "expo": {
  ...
    "web": {
    ...
    "build": { "babel": { "include": [ "@ui-kitten/components" ] }
    }
  ...
  }

Une derniere chose et on est bons, dans mon fichier App.tsx j'ajoute un wrapper ApplicationProvider autours de mes composants:

//...
import * as eva from '@eva-design/eva';
import { ApplicationProvider } from '@ui-kitten/components';


export default function App() {
  const isLoadingComplete = useCachedResources();
  const colorScheme = useColorScheme();

  if (!isLoadingComplete) {
    return null;
  } else {
    return (
      <ApplicationProvider {...eva} theme={eva.light}>
        <SafeAreaProvider>
          <Navigation colorScheme={colorScheme} />
          <StatusBar />
        </SafeAreaProvider>
      </ApplicationProvider>
    );
  }
}

Je si tout marche bien:

npm run ios

Je prends le composants TabOneScreen pour voir:
Je vais surement avoir des composants en collisions avec ma lib UI Kitten, du coup je supprime toute ligne qui les concerne genre celle là:

import { Text, View } from '../components/Themed';

// TabOneScreen.tsx
import { Text, Button, Layout } from "@ui-kitten/components"

export default function TabOneScreen({
  navigation,
}: RootTabScreenProps<"TabOne">) {
  return (
    <Layout style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
      <Text category="h1">HOME</Text>
      <Button onPress={() => alert("Hey!")}>Clique!</Button>
    </Layout>
  )
}

Ca va marcher mais... si j'essaye ca:

//...
const FacebookIcon = (props) => (
  <Icon name='facebook' {...props} />
);

// Dans le composant
//...
  <Button accessoryLeft={FacebookIcon} onPress={() => alert("Hey!")}>Clique!</Button>
//...

Dans mon terminal:

npm i @ui-kitten/eva-icons

Retour dans mon App.tsx

import { StatusBar } from "expo-status-bar"
import { SafeAreaProvider } from "react-native-safe-area-context"
import * as eva from "@eva-design/eva"
// J'importe le IconRegistry
import { ApplicationProvider, IconRegistry } from "@ui-kitten/components"
// J'importe aussi le pack d'icones
import { EvaIconsPack } from "@ui-kitten/eva-icons"

import useCachedResources from "./hooks/useCachedResources"
import useColorScheme from "./hooks/useColorScheme"
import Navigation from "./navigation"

export default function App() {
  const isLoadingComplete = useCachedResources()
  const colorScheme = useColorScheme()

  if (!isLoadingComplete) {
    return null
  } else {
    return (
      <>
        <IconRegistry icons={EvaIconsPack} />
        <ApplicationProvider {...eva} theme={eva.light}>
          <SafeAreaProvider>
            <Navigation colorScheme={colorScheme} />
            <StatusBar />
          </SafeAreaProvider>
        </ApplicationProvider>
      </>
    )
  }
}

Normalement on est good

PS : Si vous êtes intéressé par la secu et le time management, go check @boutvalentin et ses articles / formations faits avec ❤️ (et passion) sur tous ses sujets.
PSS : Si vous êtes intéressé par la Cybersécurité, go check @emiliebout et ses articles / formations faits avec passion (et ❤️) sur tous ses sujets.