Expo (React Native) et UI Kitten: Stylé avec plein de chatons 😽
Tags: uikitten, reactnative, expo, react
Published: 2022-10-25 10:44:53

---
title: Expo (React Native) et UI Kitten: Stylé avec plein de chatons 😽
published: true
description: Création de mon app Expo (React Native) et je vais y ajouter la librairie de composants UI Kitten.
tags: uikitten, reactnative, expo, react
# cover_image: https://direct_url_to_image.jpg
# Use a ratio of 100:42 for best results.
# published_at: 2022-10-25 10:02 +0000
---

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](https://docs.expo.dev/) 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 🍆

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/81wk20bbg4l9e01s1twv.png)


## 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.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vnmh2jkwf8tanqv4ilnf.png)



## Prérequis (les classiques
- [NodeJS LTS](https://nodejs.org/en/)
- [VS Code] (https://code.visualstudio.com/)
- Un terminal (ou l'outils de commande si tu veux)

### Intialisation de mon projet
```bash
npx create-expo-app MaPetitePrise --template tabs
```
Ca va nous donner de la navigations et TypeScript, on se mettra bien bien!


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ti451ihrpdioo6j7klms.png)

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

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

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


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/b0jk13f4cyt8vzyxgl3n.png)


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`:

```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:

```tsx
//...
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:
```bash
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à:

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

```tsx
// 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>
  )
}
```


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vz039sebm9d2ytu2016d.gif)


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

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

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

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/72trd3e1gnjrkl1dge4g.png)

Dans mon terminal:
```bash
npm i @ui-kitten/eva-icons
```

Retour dans mon `App.tsx`

```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 
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qzgwteh9bgdvri57jvw5.gif)

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.