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

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

dev.to - Oct 28

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 🍆

Image description

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

Prérequis (les classiques

Intialisation de mon projet

npx create-expo-app MaPetitePrise --template tabs
Enter fullscreen mode Exit fullscreen mode

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

Image description

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
Enter fullscreen mode Exit fullscreen mode

Image description

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
Enter fullscreen mode Exit fullscreen mode

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" ] }
    }
  ...
  }
Enter fullscreen mode Exit fullscreen mode

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>
    );
  }
}
Enter fullscreen mode Exit fullscreen mode

Je si tout marche bien:

npm run ios
Enter fullscreen mode Exit fullscreen mode

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';
Enter fullscreen mode Exit fullscreen mode
// 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>
  )
}
Enter fullscreen mode Exit fullscreen mode

Image description

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>
//...
Enter fullscreen mode Exit fullscreen mode

Image description

Dans mon terminal:

npm i @ui-kitten/eva-icons
Enter fullscreen mode Exit fullscreen mode

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>
      </>
    )
  }
}
Enter fullscreen mode Exit fullscreen mode

Normalement on est good
Image description

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.

MORE ARTICLES