Install the Expo SDK 42:
expo init my-app --template expo-template-blank-typescript@~42.0.1
As you can see on this little piece of code, everithing is embedded in just one provider, the EssentialProviders
, that will inject everything you need to setup your project as faster as prossible.
You can see all the providers embbeded later on this documentation.
import React from 'react';
import { EssentialProviders } from '@andreciornavei/rn-essentials';
import { Home } from './src/pages/Home';
import { _Button } from './src/pages/_Button';
export default function App() {
return (
<EssentialProviders
dbName="db-rn-essentials-example"
apiBaseURL="http://localhost:1337"
initialRouteName="/home"
routes={[
{ name: "/home", component: Home },
{ name: "/component_button", component: _Button }
]}
/>
);
}
This library implements some code generator for component boilerplates, so if you want to use it to make your own components following my guidelines for components, then follow these steps:
$ yarn add -D plop
module.exports = function (plop) {
// or in es6/es2015
plop.setHelper('upperCase', (txt) => txt.toUpperCase());
plop.setGenerator('component', {
description: 'Boilerplate component',
prompts: [
{
type: 'input',
name: 'name',
message: 'Please use UpperCamelCase\n Component name:',
},
{
type: 'input',
name: 'path',
message: 'Provide the path where the component will be placed;\nDo not use slashes at the beginning or end of the path;\n Component path:',
},
],
actions: [
{
type: 'add',
path: './{{path}}/{{name}}/context.ts',
templateFile: './node_modules/@andreciornavei/rn-essentials/templates/component.context.hbs',
},
{
type: 'add',
path: './{{path}}/{{name}}/controller.tsx',
templateFile: './node_modules/@andreciornavei/rn-essentials/templates/component.controller.hbs',
},
{
type: 'add',
path: './{{path}}/{{name}}/index.tsx',
templateFile: './node_modules/@andreciornavei/rn-essentials/templates/component.index.hbs',
},
{
type: 'add',
path: './{{path}}/{{name}}/styles.ts',
templateFile: './node_modules/@andreciornavei/rn-essentials/templates/component.styles.hbs',
},
{
type: 'add',
path: './{{path}}/{{name}}/types.ts',
templateFile: './node_modules/@andreciornavei/rn-essentials/templates/component.types.hbs',
},
{
type: 'add',
path: './{{path}}/{{name}}/view.tsx',
templateFile: './node_modules/@andreciornavei/rn-essentials/templates/component.view.hbs',
},
],
});
};
{
...
"scripts": {
...
"generate-component": "plop",
...
}
...
}
$ yarn generate-component
All functions you can see on this README.md file.
All functions you can see on this README.md file.
All functions you can see on this README.md file.
All functions you can see on this README.md file.
All functions you can see on this README.md file.
All functions you can see on this README.md file.
All functions you can see on this README.md file.
All functions you can see on this README.md file.
All functions you can see on this README.md file.
All api_provider properties you can see on this README.md file.
All database_provider properties you can see on this README.md file.
All notification_provider properties you can see on this README.md file.
All refresh_provider properties you can see on this README.md file.
All route_provider properties you can see on this README.md file.
All sheet_provider properties you can see on this README.md file.
All socket_provider properties you can see on this README.md file.
All storage_provider properties you can see on this README.md file.
All theme_provider properties you can see on this README.md file.
All location_task properties you can see on this README.md file.
All notification_task properties you can see on this README.md file.
All fetch_task properties you can see on this README.md file.
All components is fully customizable in 3 leves:
- The default custom style implemented by this library, where you can find the style structure on ./src/styles/default_theme.ts inside the
components.[component_name]
; - Your custom style that will override the file mentioned above following the same properties. It will style the button to your entire application;
- The inline button component style, this will style only a specific button instance, followin the same properties mentioned above;
All accordion properties you can see on this README.md file.
All action properties you can see on this README.md file.
All button properties you can see on this README.md file.
All divier properties you can see on this README.md file.
All empty properties you can see on this README.md file.
All icon properties you can see on this README.md file.
All input_error properties you can see on this README.md file.
All input_radio properties you can see on this README.md file.
All input_sheet properties you can see on this README.md file.
All input_text properties you can see on this README.md file.
All list_fetcher properties you can see on this README.md file.
All morph_list properties you can see on this README.md file.
All paragraph properties you can see on this README.md file.
All ripple properties you can see on this README.md file.
All scaffold properties you can see on this README.md file.
All space properties you can see on this README.md file.
All tab_nav properties you can see on this README.md file.
All tab_panel properties you can see on this README.md file.
I hope this plugin helps you in your react native projects and save a lot of time and code.
This project is under the MIT license. See the LICENSE for details.
๐ป Developed by Andrรฉ Ciornavei - Get in touch!