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

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 }