react-native-lpsfr

react-native-lpsfr

Getting started

$ npm install react-native-lpsfr --save

Installation

Npm (or yarn)

npm install --save-dev @babel/core@7.4.5
npm install --save-dev @babel/plugin-proposal-decorators
npm install --save-dev @babel/preset-env
npm install --save-dev @babel/preset-flow
npm install --save-dev @babel/runtime@7.4.5
npm install --save-dev babel-plugin-transform-decorators-legacy
npm install --save-dev babel-preset-react-native

npm install --save react-native-sqlite-storage reflect-metadata react-native-lpsfr eventemitter2

babelrc

In the .babelrc :

{
    "presets": [
      "@babel/preset-env",
      "react-native",
      "@babel/preset-flow"
    ],
    "plugins": [
      ["@babel/plugin-proposal-decorators", { "legacy" : true }],
      ["@babel/plugin-proposal-nullish-coalescing-operator"]
    ]
}

tsconfig

in the tsconfig.json:

{
  "compilerOptions": {
    "allowJs": true,
    "allowSyntheticDefaultImports": true,
    "esModuleInterop": true,
    "isolatedModules": true,
    "jsx": "react-native",
    "lib": ["es6"],
    "moduleResolution": "node",
    "noEmit": true,
    "strict": true,
    "target": "esnext"
  },
  "exclude": ["node_modules"]
}

Usage

import {
  Api,
  Models,
  ConfigManager
} from 'react-native-lpsfr';

const {
  Device,
  User
} = Models;

Example

App.tsx :

import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View} from 'react-native';
import {ConfigManager, ProjectDatabase} from "react-native-lpsfr";

const instructions = Platform.select({
  ios: 'Press Cmd+R to reload,\n' + 'Cmd+D or shake for dev menu',
  android:
    'Double tap R on your keyboard to reload,\n' +
    'Shake or press menu button for dev menu',
});

interface Props {

};

interface State {

};

export default class App extends Component<Props, State> {

  _config_manager: ConfigManager;
  _project_database: ProjectDatabase;
  constructor(props: Props) {
    super(props)


    this._config_manager = new ConfigManager();
    this._project_database = new ProjectDatabase(this._config_manager);
  }

  componentDidMount() {
    this._project_database.init()
    .then(() => console.log("init done"));
  }
  
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>Welcome to React Native!</Text>
        <Text style={styles.instructions}>To get started, edit App.js</Text>
        <Text style={styles.instructions}>{instructions}</Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
});