by servisofts.com

servisofts-component

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

Table of contents

• servisofts-component
  • Table of contents
  • Getting started
    • Using React Native >= 0.60
      • iOS Platform:
      • Android Platform:
      • Using React Native < 0.60
    • Configure 'react-native-web' proyect
      • Configure 'metro.config.js'
      • Configure '.eslintrc.js'
  • Usage
  • Components
  • Types

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

• { [key in TColKey]?: TColVal } | TColStr

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

• col?: SColType
• dir?: SDirectionType
• props?: SViewProps
• style?: ViewStyle
• onPress?: Function

Type STextProps

• col?: SColType
• dir?: SDirectionType
• props?: SViewProps
• style?: ViewStyle
• onPress?: Function

Type SComponentContainerProps

• theme: SThemeProps
• debug: boolean

Type SNavigationProps

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

Type SPageProps

• initialTheme: SThemeOptions
• themes: SThemeThemes
• onLoad: (color: SThemeColors) => any

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

• initialTheme: SThemeOptions
• themes: SThemeThemes
• onLoad: (color: SThemeColors) => any

Type SThemeThemes

• { [index in SThemeOptions]: SThemeColors }