Your Web News in One Place

An Interest In:

Web News this Week

Search Archive

Some of Our Sources

View All Sources

Help Webnuz

Referal links:

Sign up for GreenGeeks web hosting
October 25, 2022 10:44 am GMT

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

Dans cette partie je vais crer 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 dj 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 agrable.
Rappellons-nous que l'ide de cette srie de tutos est de crer quelque chose de viable sans branlette intellectuelle

Image description

UI Kitten

Une librarie trs chatonise et super style. Sauf si tu as un designer ou designeuse qui t'a fait des maquettes quali, tu peux aujourd'hui faire une appli tout fait style grace cette lib.

Image description

Prrequis (les classiques

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!

Image description

Tu peux prsent ouvrir VS Code et lancer:

# Mac a.k.a les riches npm run ios# Windows a.k.a les gamersnpm run android

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 # entrenpx expo install [email protected] # entre

Pour que ca fonctionne aussi en mode Web, si jamais j'ai l'envie de gnrer 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.tsximport { 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

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

Image description

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 IconRegistryimport { ApplicationProvider, IconRegistry } from "@ui-kitten/components"// J'importe aussi le pack d'iconesimport { 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

PS : Si vous tes intress 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 intress par la Cyberscurit, go check @emiliebout et ses articles / formations faits avec passion (et ) sur tous ses sujets.


Original Link: https://dev.to/sidali/expo-react-native-et-ui-kitten-style-avec-plein-de-chatons-22h2

Share this article:    Share on Facebook
View Full Article

Dev To

An online community for sharing and discovering great ideas, having debates, and making friends

More About this Source Visit Dev To