rn-essentials

Overview

Motivations:

Fast project setup:

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 }
      ]}
    />
  );
}

Using Plopfile

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:

1 - Add plop to your project

$ yarn add -D plop

3 - Create the following plopfile.js at the root of your project

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',
        },
      ],
    });
  };  

3 - Add plop command to your package.json scripts

{
  ...
  "scripts": {
    ...
    "generate-component": "plop",
    ...
  }
  ...
}

4 - Run the command

$ yarn generate-component

Utility functions

formatDate

All functions you can see on this README.md file.

formatNumber

All functions you can see on this README.md file.

formatText

All functions you can see on this README.md file.

normalizeStyleSize

All functions you can see on this README.md file.

resolveErrors

All functions you can see on this README.md file.

resolveFilterHttp

All functions you can see on this README.md file.

resolveLodash

All functions you can see on this README.md file.

resolveParam

All functions you can see on this README.md file.

resolvePermissions

All functions you can see on this README.md file.

Providers

ApiProvider

All api_provider properties you can see on this README.md file.

DatabaseProvider

All database_provider properties you can see on this README.md file.

NotificationProvider

All notification_provider properties you can see on this README.md file.

RefreshProvider

All refresh_provider properties you can see on this README.md file.

RouteProvider

All route_provider properties you can see on this README.md file.

SheetProvider

All sheet_provider properties you can see on this README.md file.

SocketProvider

All socket_provider properties you can see on this README.md file.

StorageProvider

All storage_provider properties you can see on this README.md file.

ThemeProvider

All theme_provider properties you can see on this README.md file.

Background Tasks

LocationTask

All location_task properties you can see on this README.md file.

NotificationTask

All notification_task properties you can see on this README.md file.

FetchTask

All fetch_task properties you can see on this README.md file.

Components

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;

Accordion

All accordion properties you can see on this README.md file.

Action

All action properties you can see on this README.md file.

Button

All button properties you can see on this README.md file.

Divider

All divier properties you can see on this README.md file.

Empty

All empty properties you can see on this README.md file.

Icon

All icon properties you can see on this README.md file.

InputError

All input_error properties you can see on this README.md file.

InputRadio

All input_radio properties you can see on this README.md file.

InputSheet

All input_sheet properties you can see on this README.md file.

InputText

All input_text properties you can see on this README.md file.

ListFetcher

All list_fetcher properties you can see on this README.md file.

MorphList

All morph_list properties you can see on this README.md file.

Paragraph

All paragraph properties you can see on this README.md file.

Ripple

All ripple properties you can see on this README.md file.

Scaffold

All scaffold properties you can see on this README.md file.

Space

All space properties you can see on this README.md file.

TabNav

All tab_nav properties you can see on this README.md file.

TabPanel

All tab_panel properties you can see on this README.md file.

🎉   Congradulations, You're done.

I hope this plugin helps you in your react native projects and save a lot of time and code.

📜   License

This project is under the MIT license. See the LICENSE for details.

💻   Developed by André Ciornavei - Get in touch!