Créer une application mobile React Native basée sur des structures Rust en utilisant une interface utilisateur simple et intuitive.

Je voulais créer un moyen de créer facilement des applications React Native, je sais qu’il y a des moyens qui existent déjà, mais je voulais simplement créer des données similaires basées sur Rust. Aussi, comme avec beaucoup de ces projets, celui-ci a été commencé pendant la saison des examens de mes années universitaires.

Caractéristiques

Pour l’instant, il a les fonctionnalités suivantes :

• * Créer des composantes React à partir de json ou de structures Rust
• * Créer un projet React Native (en utilisant Expo)
• * Gérer la navigation
• * Gérer les dépendances externes NPM
• * Assurer la sécurité de type des composants (limité pour le moment, pour la création de fonctions/variables)

Fonctionnalités souhaitées dans le futur :

• * Abstraire les hooks React
• * Créer des fonctions JS/TS
• * Inférer les props des composants React Native par introspection (pour les bibliothèques intégrées et externes)
• * Inférer des structures Rust ou données json en analysant le code source React Native (pour une modification aisée entre cette interface et le code lui-même)

Le code Rust a également de nombreux cas de test couvrant un grand nombre des différentes sérialisations possibles.

Interface usager

Voici une capture d’écran de l’interface utilisateur actuelle (qui est en cours de développement) développée à l’aide de React avec tailwind.css pour le style et Tauri pour le packaging de l’interface utilisateur :

J’ai pu abstraire l’utilisation de la couleur dans les composants pour spécifier seulement la nuance de la couleur (par exemple text-100, text-200, …, text-900) et selon la navigation en cours, la couleur changera. Ceci est possible grâce à tailwind.css et tailwindcss-theme-variants , chaque section a un nom de classe CSS spécifique avec la couleur et l’application entière changera de couleur.

L’état de l’interface utilisateur est géré par Recoil.js et pour les formulaires de l’application, j’ai créé mon propre composant Form personnalisé qui n’a besoin que de lui passer l’atome Recoil.js et les entrées mettront automatiquement à jour l’atome (grâce à React Context, utilisé pour la composante Form). Je trouve que c’est très pratique et que cela rend le code propre. Voici un extrait du code pour le formulaire utilisé dans le GIF ci-dessus :

<Form atom={componentSelector(params.id)}>
  <Input id="name" type="text">
    Component Name
  </Input>
  <TextArea id="description">Description</TextArea>
</Form>