A concise way of making applications using a Flutter Like approach.
When you think about it, Flutter comes with a component library, a default language (dart) and an Engine (Skia).
This library is an attempt to bring the component library and the framework to React Native.
Still trying to figure that out. But I think it's because I love Flutter and I love React Native and I would want the best of both worlds.
npm install runteror
yarn add runterTo get started, import the Root component from the runter package.
This component is the root of your application and should be rendered at the top of your component tree. It is the equivalent of runApp in Flutter.
Root takes a component child MaterialApp which is the main component of the library. It is the equivalent of MaterialApp in Flutter.
MaterialApp takes a home prop which is the main component of your application.
MaterialApp also takes a theme prop which is an object that contains the theme of your application.
The theme object takes a colorScheme prop which is an object that contains the colors of your application.
The theme object also takes a title prop which is the title of your application.
// in App.js
import React from 'react';
import { Root, MaterialApp } from 'runter'; // <-- This is the library
export default function App() {
return (
<Root>
<MaterialApp
home={<div>Home</div>}
theme={{
colorScheme: {
primary: '#2196F3',
background: '#fff',
},
title: 'Runter Example',
}}
title="Runter Example"
/>
</Root>
);
}
// ...I am working to bring all the components from Flutter to React Native. Starting with the basic ones. Here is a list of the components that are in the frontline of development.
Scaffold - In Testing 🧪
AppBar - In Testing 🧪
FloatingActionButton - In Testing 🧪
Container
Row
Column
Center
Stack
Positioned
Image
Icon
IconButton
The current focus is building the basic 2 components (Root and MaterialApp) and making sure they work as expected. After that, I will be working on the components listed above.
The next thing will probably be routing and navigation. I am still trying to figure out how to do that.
I will also be working on the documentation and the examples.
This idea is insane and still in its infancy and is no where ready for production.
If you would like to contribute, please do so.
See the contributing guide to learn how to contribute to the repository and the development workflow.
MIT
Made with ❤️ by Daniel Dennis