Create a React Native mobile application based on Rust structs using a simple intuitive user interface.

I wanted to create a way to easily create React Native applications, I know that there are some ways that already exists, but simply wanted to create similar data-driven based in Rust. Also, as with many of these projects, this one was started during exam season in my university years.

Features

At the moment, it has the following features:

• * Create React components from Rust struct or json
• * Create React Native project (using Expo)
• * Handle navigation
• * Handle external NPM dependencies
• * Ensure type safety of components (limited at the moment, for creating functions/variables)

Wanted features in the future:

• * Abstract React hooks
• * Create JS/TS functions
• * Infer React Native component props by introspection (for built-in and external libraries)
• * Infer Rust structs or json by analyzing source React Native code (for easy back-and-forth modification between this UI and the code itself)

Rust code also has many test cases covering many of the different possible serialization possible.

User Interface

Here’s is a screenshot of the current UI (which is in heavy development) developed using React with tailwind.css for styling and Tauri for packaging the UI:

I’ve been able to abstract the use of color in the components to specify only the shade of the color (e.g. text-100, text-200, …, text-900) and according to the current navigation, the color will change. This is possible thanks to tailwind.css and tailwindcss-theme-variants , each section has a specific CSS class name with the color and the entire application will change color.

The state of the UI is managed by Recoil.js and for the forms within the application, I’ve created my own custom Form component needing to only pass the Recoil.js atom to it and the inputs will automatically update the atom (thanks to React Context, used for Form component). I find this really neat and makes the code clean. Here’s a snippet of the code for the form used in the GIF above:

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