servisofts-contabilidad
TypeScript icon, indicating that this package has built-in type declarations

1.0.0 • Public • Published
by servisofts.com

servisofts-component

Current npm package version. PRs welcome! Current npm package version.

Servisofts Component is a library for Android, IOS & web for easing app development in react-native-web.

Table of contents

Getting started

Install the required dependences using npm:

npm install --save-dev
    @babel/core
    @babel/runtime
    metro-react-native-babel-preset
    react-scripts
npm install --save 
    @react-native-community/masked-view 
    react
    react-dom
    react-native
    react-native-web
    react-native-svg
    react-native-svg-transformer
    react-native-gesture-handler
    react-native-reanimated
    react-native-safe-area-context
    react-native-screens
    @react-navigation/native
    @react-navigation/stack
    servisofts-socket 
    react-redux 
    redux 
    redux-thunk

Install the library using npm:

npm install --save servisofts-component

Using React Native >= 0.60

Linking the package manually is not required anymore with Autolinking.

iOS Platform:

$ cd ios && pod install && cd .. # CocoaPods on iOS needs this extra step

Android Platform:

Modify your android/build.gradle configuration to match minSdkVersion = 21:

buildscript {
  ext {
    ...
    minSdkVersion = 21
    ...
  }

Using React Native < 0.60

--not supported--

Configure 'react-native-web' proyect

Proyect Files

APPNAME
  ├── android/  
  ├── ios/
  ├── public/
  ├── src/
  │   ├── Components/
  │   │   └── ...      // All components
  │   │ 
  │   ├── Pages/
  │   │   └── ...      // All pages
  │   │ 
  │   ├── App.js     
  │   ├── index.css
  │   └── index.js     // Index app web
  │   
  ├── .eslintrc.js
  ├── .flowconfig
  ├── .gitignore
  ├── .watchmanconfig
  ├── app.json        // App name
  ├── babel.config.js
  ├── index.js        // Index app mobile
  ├── metro.config.js
  └── package.json    

Configure 'metro.config.js'

You will need a metro.config.js file in order to use a ( svg , mp3, otf ) extencion. Inside a module.exports object, create a key called resolver with another object called assetExts. The value of assetExts should be an array of the resource file extensions you want to support.

If you want to support .pem files (plus all the already supported files), your metro.config.js would like like this:

const { getDefaultConfig } = require("metro-config");

module.exports = (async () => { 
	const {  
		resolver: { 
			sourceExts, 
			assetExts 
		}  
	} = await getDefaultConfig(); 
    assetExts.push("pem");
	return {
		transformer: {      
			babelTransformerPath: require.resolve("react-native-svg-transformer")    
		},    
		resolver: {
			assetExts: assetExts.filter(ext => ext !== "svg"),
			sourceExts: [...sourceExts, "svg","mp3" ]    
			
		}};
})();

Usage

In src/app.js import SComponentContainer

import React from 'react';
import { SComponentContainer } from 'servisofts-component';

const App = () => {
  return (
    <SComponentContainer
      debug //Show debug bar on top
      theme={{
        initialTheme: "dark", 
        themes: {
          default: {
            barStyle: "dark-content",
            barColor: "#ffffff",
            primary: "#ffffff",
            secondary: "#000000",
            background: "#dddddd"
          },
          dark: {
            barStyle: "light-content",
            barColor: "#000000",
            primary: "#000000",
            secondary: "#ffffff",
            background: "#222222"
          }
        }
      }}>

    { /* ... */ }

    </SComponentContainer>
  );
};

In src/index.css copy this style

body {
  margin: 0;
  padding: 0;
  border: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

code {
  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace;
}

/* These styles make the body full-height */

html, body {
  height: 100%;
}

/* These styles disable body scrolling if you are using <ScrollView> */

body {
  overflow: hidden;
}

/* These styles make the root element full-height */

#root {
  overflow: hidden;
  position: fixed;
  width: 100%;
  display: flex;
  height: 100vh;
}

Components

Components Description Type Props
SComponentContainer Contenedor de app, configura los parametros nesesarios para el funcionamiento de la libreria. Component

theme:SThemeProps

debug:boolean

SNavigation Gestiona la navegacion entre ventanas en las diferentes plataformas. Component

NavigationContainer: any

Stack: any

prefixes: [string]

pages: {[name in string]:SPageProps}

SView Contenedor responsive de facil manejo. Component

col?: SColType

dir?: SDirectionType

props?: SViewProps

style?: ViewStyle

onPress?: Function

SText Textos adaptados a los colores del tema de la app. Component

col?: SColType

dir?: SDirectionType

props?: SViewProps

style?: ViewStyle

onPress?: Function

STheme Gestiona los colores y los diferentes stilos "default | dark" Component

col?: SColType

SThread Manejo de hilos y timers. Class
SUuid Gestiona los codigos UUID Function

Types

Type SDirectionType

  • "row" | "column"

Type SColType

Type TColStr

  • "xs-12 md-6"

Type TColVal

  • "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "8.543"

Type TColKey

  • "xs" | "sm" | "md" | "lg" | "xl"

Type SViewProps

Type STextProps

Type SComponentContainerProps

Type SNavigationProps

  • props:
    • NavigationContainer: any,
    • Stack: any,
    • prefixes: [string],
    • pages: { [name in string]: SPageProps }

Type SPageProps

Type SPageListProps

  • url: string,
  • component: any,
  • options: { headerShown: boolean }

Type SThemeColors

  • barStyle: "dark-content" | "light-content"
  • barColor: string
  • primary: string
  • secondary: string
  • background: string

Type SThemeOptions

  • "default" | "dark"

Type SThemeProps

Type SThemeThemes

Readme

Keywords

none

Package Sidebar

Install

npm i servisofts-contabilidad

Weekly Downloads

0

Version

1.0.0

License

ISC

Unpacked Size

12.6 kB

Total Files

4

Last publish

Collaborators

  • servisofts