Servisofts Component is a library for Android, IOS & web for easing app development in react-native-web.
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
Linking the package manually is not required anymore with Autolinking.
$ cd ios && pod install && cd ..
# CocoaPods on iOS needs this extra step
Modify your android/build.gradle
configuration to match minSdkVersion = 21
:
buildscript {
ext {
...
minSdkVersion = 21
...
}
--not supported
--
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
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" ]
}};
})();
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 | 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 |
- "
row
" | "column
"
- "
xs-12 md-6
"
- "
1
" | "2
" | "3
" | "4
" | "5
" | "6
" | "7
" | "8
" | "9
" | "10
" | "11
" | "12
" | "8.543
"
-
"xs"
|"sm"
|"md"
|"lg"
|"xl"
- col?: SColType
- dir?: SDirectionType
- props?: SViewProps
- style?: ViewStyle
- onPress?: Function
- col?: SColType
- dir?: SDirectionType
- props?: SViewProps
- style?: ViewStyle
- onPress?: Function
- theme: SThemeProps
- debug: boolean
- props:
- NavigationContainer: any,
- Stack: any,
- prefixes: [string],
- pages: { [name in string]: SPageProps }
- initialTheme: SThemeOptions
- themes: SThemeThemes
- onLoad: (color: SThemeColors) => any
- url: string,
- component: any,
- options: { headerShown: boolean }
- barStyle: "
dark-content
" | "light-content
" - barColor: string
- primary: string
- secondary: string
- background: string
- "
default
" | "dark
"
- initialTheme: SThemeOptions
- themes: SThemeThemes
- onLoad: (color: SThemeColors) => any
- { [index in SThemeOptions]: SThemeColors }