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 tring 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 runter
or
yarn add runter
To 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