VOS start

Stappen

1. Android
   1. Start de Android emulator met SDK 23 op:
      Create and manage virtual devices
   2. Start de app in de emulator op Android:
      react-native run-android
      (vergeet niet je virtual device aan te zetten indien nodig)
   3. Installeer react-navigation:
      1. npm install react-navigation
         Als je problemen hebt:

         It seems the hoist-non-react-statics package is incorrect. So you could re-install it or re-install the whole node_modules.

         First of all, backup your node_modules folder. This is very important! Then delete node_modules folder and re-install the npm packages with npm install.

         After above operation, try installing react-navigation again.

      2. npm install react-native-gesture-handler react-native-reanimated

         Als je problemen hebt, zie hierboven.
   4. Icon fonts
      1. Xavier Lefèvre, Add custom icons to your React Native application, Feb 8, 2017
      2. in de map components/helpers plaats je:
         1. icon-font.js
         2. homes-style.js
      3. Uirproberen:
      4. In de component waarin je een icon-font wilt gebruiken:
         1. Importeer:

            import {scaledSize, hexToAscii} from './helpers/home-style/';

            import IconFont from "./helpers/icon-font";

         2. in de render methode:

            <IconFont
               iconName='icon-ruler'
               fontSize={styles.description.fontSize}
               color={styles.description.color}
               backgroundColor={styles.description.backgroundColor}
            />
            

            onder de component klasse:

            const styles = StyleSheet.create({
               description: {
                  marginBottom: 20,
                  fontSize: 18,
                  textAlign: 'center',
                  color: '#656565',
                  backgroundColor: 'red'/>
               }
            });
            

2. App iconen toevoegen aan een React-Native app:
   1. Scott Stewart, Add App Icons and Launch Screens to React Native Apps (iOS & Android), Jan 18, 2018
   2. Om van 1 icoon alle Android iconen te maken: Adroid Asset Studio
   3. maak vierkante (ic_launcher) en cirkelvormige (ic_launcher_round)
3. Tel en SMS
   1. react-native-communications
   2. installeren:

      npm install react-native-communications

4. Async storage
   1. React Native Async Storage
   2. installeren met: npm i @react-native-community/async-storage
5. Geolocatie
   1. Geolocatie is niet echt een dependency. Het is standaard in React aanwezig. Je moet voor het voor Android wel activeren. Voor IOS is het standaard geactiveerd.
   2. Op Android is gelocatie standaard geïnstalleerd maar je moet die wel activeren. In het AndroidManifest.xml bestand moet je de volgende permissieaanvraag toevoegen:

      <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />

6. Het VOS programma zelf
   1. Hulp componenten:
      1. home.style.js
      2. basic-elements.js
      3. icon-font.js
   2. Componenten:
      1. index-procedure.js
      2. logging-in.js
      3. navigate-to-button.js
      4. view-procedure.js
      5. vos.js
   3. Delete App.js
   4. Wijzig index.js:

      /**
      * @format
      */
      
      import {AppRegistry} from 'react-native';
      import App from './components/vos';
      import {name as appName} from './app.json';
      
      AppRegistry.registerComponent(appName, () => App);

   5. Maak een map met de naam data in de root van het project. En plaats daarin de volgende bestanden:
      1. identity.json
      2. organisation.json
      3. organisationList.json
      4. personList.json
      5. position.json
      6. procedure.json
   6. In de map data maak je een submap met de naam ui.
   7. En daarin plaats je:
      1. index-procedure.js