first commit

2021-03-12 11:38:47 +01:00
commit b16d70314b
86 changed files with 23019 additions and 0 deletions
--- a/.buckconfig
+++ b/.buckconfig
@@ -0,0 +1,6 @@
+
+[android]
+  target = Google Inc.:Google APIs:23
+
+[maven_repositories]
+  central = https://repo1.maven.org/maven2
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -0,0 +1,4 @@
+module.exports = {
+  root: true,
+  extends: '@react-native-community',
+};
--- a/.flowconfig
+++ b/.flowconfig
@@ -0,0 +1,73 @@
+[ignore]
+; We fork some components by platform
+.*/*[.]android.js
+
+; Ignore "BUCK" generated dirs
+<PROJECT_ROOT>/\.buckd/
+
+; Ignore polyfills
+node_modules/react-native/Libraries/polyfills/.*
+
+; These should not be required directly
+; require from fbjs/lib instead: require('fbjs/lib/warning')
+node_modules/warning/.*
+
+; Flow doesn't support platforms
+.*/Libraries/Utilities/LoadingView.js
+
+[untyped]
+.*/node_modules/@react-native-community/cli/.*/.*
+
+[include]
+
+[libs]
+node_modules/react-native/interface.js
+node_modules/react-native/flow/
+
+[options]
+emoji=true
+
+esproposal.optional_chaining=enable
+esproposal.nullish_coalescing=enable
+
+module.file_ext=.js
+module.file_ext=.json
+module.file_ext=.ios.js
+
+munge_underscores=true
+
+module.name_mapper='^react-native/\(.*\)$' -> '<PROJECT_ROOT>/node_modules/react-native/\1'
+module.name_mapper='^@?[./a-zA-Z0-9$_-]+\.\(bmp\|gif\|jpg\|jpeg\|png\|psd\|svg\|webp\|m4v\|mov\|mp4\|mpeg\|mpg\|webm\|aac\|aiff\|caf\|m4a\|mp3\|wav\|html\|pdf\)$' -> '<PROJECT_ROOT>/node_modules/react-native/Libraries/Image/RelativeImageStub'
+
+suppress_type=$FlowIssue
+suppress_type=$FlowFixMe
+suppress_type=$FlowFixMeProps
+suppress_type=$FlowFixMeState
+
+suppress_comment=\\(.\\|\n\\)*\\$FlowFixMe\\($\\|[^(]\\|(\\(<VERSION>\\)? *\\(site=[a-z,_]*react_native\\(_ios\\)?_\\(oss\\|fb\\)[a-z,_]*\\)?)\\)
+suppress_comment=\\(.\\|\n\\)*\\$FlowIssue\\((\\(<VERSION>\\)? *\\(site=[a-z,_]*react_native\\(_ios\\)?_\\(oss\\|fb\\)[a-z,_]*\\)?)\\)?:? #[0-9]+
+suppress_comment=\\(.\\|\n\\)*\\$FlowExpectedError
+
+[lints]
+sketchy-null-number=warn
+sketchy-null-mixed=warn
+sketchy-number=warn
+untyped-type-import=warn
+nonstrict-import=warn
+deprecated-type=warn
+unsafe-getters-setters=warn
+unnecessary-invariant=warn
+signature-verification-failure=warn
+deprecated-utility=error
+
+[strict]
+deprecated-type
+nonstrict-import
+sketchy-null
+unclear-type
+unsafe-getters-setters
+untyped-import
+untyped-type-import
+
+[version]
+^0.122.0
--- a/.gitattributes
+++ b/.gitattributes
@@ -0,0 +1 @@
+*.pbxproj -text
--- a/.gitignore
+++ b/.gitignore
@@ -0,0 +1,62 @@
+# OSX
+#
+.DS_Store
+
+# Xcode
+#
+build/
+*.pbxuser
+!default.pbxuser
+*.mode1v3
+!default.mode1v3
+*.mode2v3
+!default.mode2v3
+*.perspectivev3
+!default.perspectivev3
+xcuserdata
+*.xccheckout
+*.moved-aside
+DerivedData
+*.hmap
+*.ipa
+*.xcuserstate
+
+# Android/IntelliJ
+#
+build/
+.idea
+.gradle
+local.properties
+*.iml
+
+# node.js
+#
+node_modules/
+npm-debug.log
+yarn-error.log
+
+# BUCK
+buck-out/
+\.buckd/
+*.keystore
+!debug.keystore
+
+# fastlane
+#
+# It is recommended to not store the screenshots in the git repo. Instead, use fastlane to re-generate the
+# screenshots whenever they are needed.
+# For more information about the recommended setup visit:
+# https://docs.fastlane.tools/best-practices/source-control/
+
+*/fastlane/report.xml
+*/fastlane/Preview.html
+*/fastlane/screenshots
+
+# Bundle artifact
+*.jsbundle
+
+# CocoaPods
+/ios/Pods/
+
+#.VSCodeCounter
+.VSCodeCounter/
--- a/.prettierrc.js
+++ b/.prettierrc.js
@@ -0,0 +1,6 @@
+module.exports = {
+  bracketSpacing: false,
+  jsxBracketSameLine: true,
+  singleQuote: true,
+  trailingComma: 'all',
+};
--- a/.watchmanconfig
+++ b/.watchmanconfig
@@ -0,0 +1 @@
+{}
--- a/App.js
+++ b/App.js
@@ -0,0 +1,135 @@
+import 'react-native-gesture-handler';
+
+import React from 'react';
+import { StyleSheet, TouchableOpacity, View, Image} from 'react-native';
+//redux
+import store from './src/redux/store';
+import { Provider } from 'react-redux';
+
+
+//navigation
+import { NavigationContainer, DarkTheme } from '@react-navigation/native';
+import { createStackNavigator } from '@react-navigation/stack';
+import { createMaterialBottomTabNavigator } from '@react-navigation/material-bottom-tabs';
+
+//themes
+import { COLORS } from './src/themes/Colors';
+
+import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
+
+//screens
+import MainScreen from './src/screens/MainScreen';
+import GroceryList from './src/screens/storageManagement/GroceryList';
+import Storage from './src/screens/storageManagement/Storage';
+import Products from './src/screens/storageManagement/Products';
+
+const MyTheme = {
+  dark: true,
+  colors: {
+    background: COLORS.dp00,
+  },
+};
+const Stack = createStackNavigator();
+const Tab = createMaterialBottomTabNavigator();
+
+const GroceryListTab = () => {
+  return (
+    <Tab.Navigator
+      shifting={true}
+      activeColor="#f0edf6"
+      inactiveColor="#121212"
+      barStyle={{ backgroundColor: COLORS.dp00 }}
+    >
+      <Tab.Screen name="Grocery List" component={GroceryList} options={{
+        tabBarColor: '#1A2C31',
+        tabBarLabel: 'Grocery List',
+        tabBarIcon: ({ color }) => (
+          <MaterialCommunityIcons name="format-list-bulleted" color={color} size={26} />
+        ),
+      }} />
+
+      <Tab.Screen name="Storage" component={Storage} options={{
+        tabBarColor: '#1d122a',
+        tabBarLabel: 'Storage',
+        tabBarIcon: ({ color }) => (
+          <MaterialCommunityIcons name="home-analytics" color={color} size={26} />
+        ),
+      }} />
+      <Tab.Screen name="Products" component={Products} options={{
+        tabBarColor: '#081c16',
+        tabBarLabel: 'Catalog',
+        tabBarIcon: ({ color }) => (
+          <MaterialCommunityIcons name="tag-multiple" color={color} size={26} />
+        ),
+      }} />
+    </Tab.Navigator>
+  );
+}
+
+const App = () => {
+  return (
+    <Provider store={store}>
+      <View style={{ backgroundColor: COLORS.dp00, flex: 1 }}>
+        <NavigationContainer theme={MyTheme}>
+          <Stack.Navigator screenOptions={{
+            headerStyle: {
+              backgroundColor: 'transparent',
+              // backgroundColor: COLORS.dp08 + '00',
+              // elevation: 0, shadowOpacity: 0,
+            }, //COLORS.dp08
+            headerTintColor: COLORS.textW0,
+            headerTitleStyle: { fontSize: 24 },
+            cardOverlayEnabled: true,
+            headerTransparent: true,
+          }}>
+            <Stack.Screen name="Home" component={MainScreen} options={{
+              headerLeft: () => (
+                < TouchableOpacity
+                  onPress={() => alert('This is a button!')}
+                  style={styles.button}
+                >
+                  <View style={styles.buttonLine} />
+                  <View style={styles.buttonLine} />
+                  <View style={styles.buttonLine} />
+                </TouchableOpacity>
+              ),
+            }} />
+            <Stack.Screen name="Groceries" component={GroceryListTab} />
+          </Stack.Navigator>
+        </NavigationContainer>
+      </View>
+    </Provider >
+  );
+}
+
+const styles = StyleSheet.create({
+  headerBackground: {
+    flex: 1,
+    height: 100,
+    width: 300,
+  },
+  button: {
+    alignItems: 'center',
+    justifyContent: 'space-around',
+    width: 50,
+    height: 30,
+  },
+  buttonLine: {
+    width: 30,
+    height: 3,
+    backgroundColor: '#fffb',
+    borderRadius: 3,
+  },
+  blurredView: {
+    // For me android blur did not work until applying a background color:
+    backgroundColor: 'white',
+    width: 100, height: 100
+  },
+});
+
+export default App;
+
+// <View style={styles.container}>
+// <StatusBar translucent backgroundColor='#00000055' />
+// <MainScreen/>
+// </View>
--- a/tests/App-test.js
+++ b/tests/App-test.js
@@ -0,0 +1,14 @@
+/**
+ * @format
+ */
+
+import 'react-native';
+import React from 'react';
+import App from '../App';
+
+// Note: test renderer must be required after react-native.
+import renderer from 'react-test-renderer';
+
+it('renders correctly', () => {
+  renderer.create(<App />);
+});
--- a/android/.project
+++ b/android/.project
@@ -0,0 +1,28 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<projectDescription>
+	<name>android</name>
+	<comment>Project android created by Buildship.</comment>
+	<projects>
+	</projects>
+	<buildSpec>
+		<buildCommand>
+			<name>org.eclipse.buildship.core.gradleprojectbuilder</name>
+			<arguments>
+			</arguments>
+		</buildCommand>
+	</buildSpec>
+	<natures>
+		<nature>org.eclipse.buildship.core.gradleprojectnature</nature>
+	</natures>
+	<filteredResources>
+		<filter>
+			<id>1613066058145</id>
+			<name></name>
+			<type>30</type>
+			<matcher>
+				<id>org.eclipse.core.resources.regexFilterMatcher</id>
+				<arguments>node_modules|.git|__CREATED_BY_JAVA_LANGUAGE_SERVER__</arguments>
+			</matcher>
+		</filter>
+	</filteredResources>
+</projectDescription>
--- a/android/.settings/org.eclipse.buildship.core.prefs
+++ b/android/.settings/org.eclipse.buildship.core.prefs
@@ -0,0 +1,13 @@
+arguments=
+auto.sync=false
+build.scans.enabled=false
+connection.gradle.distribution=GRADLE_DISTRIBUTION(WRAPPER)
+connection.project.dir=
+eclipse.preferences.version=1
+gradle.user.home=
+java.home=C\:/Program Files/Java/jdk-15.0.2
+jvm.arguments=
+offline.mode=false
+override.workspace.settings=true
+show.console.view=true
+show.executions.view=true
--- a/android/app/BUCK
+++ b/android/app/BUCK
@@ -0,0 +1,55 @@
+# To learn about Buck see [Docs](https://buckbuild.com/).
+# To run your application with Buck:
+# - install Buck
+# - `npm start` - to start the packager
+# - `cd android`
+# - `keytool -genkey -v -keystore keystores/debug.keystore -storepass android -alias androiddebugkey -keypass android -dname "CN=Android Debug,O=Android,C=US"`
+# - `./gradlew :app:copyDownloadableDepsToLibs` - make all Gradle compile dependencies available to Buck
+# - `buck install -r android/app` - compile, install and run application
+#
+
+load(":build_defs.bzl", "create_aar_targets", "create_jar_targets")
+
+lib_deps = []
+
+create_aar_targets(glob(["libs/*.aar"]))
+
+create_jar_targets(glob(["libs/*.jar"]))
+
+android_library(
+    name = "all-libs",
+    exported_deps = lib_deps,
+)
+
+android_library(
+    name = "app-code",
+    srcs = glob([
+        "src/main/java/**/*.java",
+    ]),
+    deps = [
+        ":all-libs",
+        ":build_config",
+        ":res",
+    ],
+)
+
+android_build_config(
+    name = "build_config",
+    package = "com.o_home",
+)
+
+android_resource(
+    name = "res",
+    package = "com.o_home",
+    res = "src/main/res",
+)
+
+android_binary(
+    name = "app",
+    keystore = "//android/keystores:debug",
+    manifest = "src/main/AndroidManifest.xml",
+    package_type = "debug",
+    deps = [
+        ":app-code",
+    ],
+)
--- a/android/app/build.gradle
+++ b/android/app/build.gradle
@@ -0,0 +1,220 @@
+apply plugin: "com.android.application"
+
+import com.android.build.OutputFile
+
+/**
+ * The react.gradle file registers a task for each build variant (e.g. bundleDebugJsAndAssets
+ * and bundleReleaseJsAndAssets).
+ * These basically call `react-native bundle` with the correct arguments during the Android build
+ * cycle. By default, bundleDebugJsAndAssets is skipped, as in debug/dev mode we prefer to load the
+ * bundle directly from the development server. Below you can see all the possible configurations
+ * and their defaults. If you decide to add a configuration block, make sure to add it before the
+ * `apply from: "../../node_modules/react-native/react.gradle"` line.
+ *
+ * project.ext.react = [
+ *   // the name of the generated asset file containing your JS bundle
+ *   bundleAssetName: "index.android.bundle",
+ *
+ *   // the entry file for bundle generation. If none specified and
+ *   // "index.android.js" exists, it will be used. Otherwise "index.js" is
+ *   // default. Can be overridden with ENTRY_FILE environment variable.
+ *   entryFile: "index.android.js",
+ *
+ *   // https://reactnative.dev/docs/performance#enable-the-ram-format
+ *   bundleCommand: "ram-bundle",
+ *
+ *   // whether to bundle JS and assets in debug mode
+ *   bundleInDebug: false,
+ *
+ *   // whether to bundle JS and assets in release mode
+ *   bundleInRelease: true,
+ *
+ *   // whether to bundle JS and assets in another build variant (if configured).
+ *   // See http://tools.android.com/tech-docs/new-build-system/user-guide#TOC-Build-Variants
+ *   // The configuration property can be in the following formats
+ *   //         'bundleIn${productFlavor}${buildType}'
+ *   //         'bundleIn${buildType}'
+ *   // bundleInFreeDebug: true,
+ *   // bundleInPaidRelease: true,
+ *   // bundleInBeta: true,
+ *
+ *   // whether to disable dev mode in custom build variants (by default only disabled in release)
+ *   // for example: to disable dev mode in the staging build type (if configured)
+ *   devDisabledInStaging: true,
+ *   // The configuration property can be in the following formats
+ *   //         'devDisabledIn${productFlavor}${buildType}'
+ *   //         'devDisabledIn${buildType}'
+ *
+ *   // the root of your project, i.e. where "package.json" lives
+ *   root: "../../",
+ *
+ *   // where to put the JS bundle asset in debug mode
+ *   jsBundleDirDebug: "$buildDir/intermediates/assets/debug",
+ *
+ *   // where to put the JS bundle asset in release mode
+ *   jsBundleDirRelease: "$buildDir/intermediates/assets/release",
+ *
+ *   // where to put drawable resources / React Native assets, e.g. the ones you use via
+ *   // require('./image.png')), in debug mode
+ *   resourcesDirDebug: "$buildDir/intermediates/res/merged/debug",
+ *
+ *   // where to put drawable resources / React Native assets, e.g. the ones you use via
+ *   // require('./image.png')), in release mode
+ *   resourcesDirRelease: "$buildDir/intermediates/res/merged/release",
+ *
+ *   // by default the gradle tasks are skipped if none of the JS files or assets change; this means
+ *   // that we don't look at files in android/ or ios/ to determine whether the tasks are up to
+ *   // date; if you have any other folders that you want to ignore for performance reasons (gradle
+ *   // indexes the entire tree), add them here. Alternatively, if you have JS files in android/
+ *   // for example, you might want to remove it from here.
+ *   inputExcludes: ["android/**", "ios/**"],
+ *
+ *   // override which node gets called and with what additional arguments
+ *   nodeExecutableAndArgs: ["node"],
+ *
+ *   // supply additional arguments to the packager
+ *   extraPackagerArgs: []
+ * ]
+ */
+
+project.ext.react = [
+    enableHermes: false,  // clean and rebuild if changing
+]
+
+apply from: "../../node_modules/react-native/react.gradle"
+
+/**
+ * Set this to true to create two separate APKs instead of one:
+ *   - An APK that only works on ARM devices
+ *   - An APK that only works on x86 devices
+ * The advantage is the size of the APK is reduced by about 4MB.
+ * Upload all the APKs to the Play Store and people will download
+ * the correct one based on the CPU architecture of their device.
+ */
+def enableSeparateBuildPerCPUArchitecture = false
+
+/**
+ * Run Proguard to shrink the Java bytecode in release builds.
+ */
+def enableProguardInReleaseBuilds = false
+
+/**
+ * The preferred build flavor of JavaScriptCore.
+ *
+ * For example, to use the international variant, you can use:
+ * `def jscFlavor = 'org.webkit:android-jsc-intl:+'`
+ *
+ * The international variant includes ICU i18n library and necessary data
+ * allowing to use e.g. `Date.toLocaleString` and `String.localeCompare` that
+ * give correct results when using with locales other than en-US.  Note that
+ * this variant is about 6MiB larger per architecture than default.
+ */
+def jscFlavor = 'org.webkit:android-jsc:+'
+
+/**
+ * Whether to enable the Hermes VM.
+ *
+ * This should be set on project.ext.react and mirrored here.  If it is not set
+ * on project.ext.react, JavaScript will not be compiled to Hermes Bytecode
+ * and the benefits of using Hermes will therefore be sharply reduced.
+ */
+def enableHermes = project.ext.react.get("enableHermes", false);
+
+android {
+    compileSdkVersion rootProject.ext.compileSdkVersion
+
+    compileOptions {
+        sourceCompatibility JavaVersion.VERSION_1_8
+        targetCompatibility JavaVersion.VERSION_1_8
+    }
+
+    defaultConfig {
+        applicationId "com.o_home"
+        minSdkVersion rootProject.ext.minSdkVersion
+        targetSdkVersion rootProject.ext.targetSdkVersion
+        versionCode 1
+        versionName "1.0"
+    }
+    splits {
+        abi {
+            reset()
+            enable enableSeparateBuildPerCPUArchitecture
+            universalApk false  // If true, also generate a universal APK
+            include "armeabi-v7a", "x86", "arm64-v8a", "x86_64"
+        }
+    }
+    signingConfigs {
+        debug {
+            storeFile file('debug.keystore')
+            storePassword 'android'
+            keyAlias 'androiddebugkey'
+            keyPassword 'android'
+        }
+    }
+    buildTypes {
+        debug {
+            signingConfig signingConfigs.debug
+        }
+        release {
+            // Caution! In production, you need to generate your own keystore file.
+            // see https://reactnative.dev/docs/signed-apk-android.
+            signingConfig signingConfigs.debug
+            minifyEnabled enableProguardInReleaseBuilds
+            proguardFiles getDefaultProguardFile("proguard-android.txt"), "proguard-rules.pro"
+        }
+    }
+
+    // applicationVariants are e.g. debug, release
+    applicationVariants.all { variant ->
+        variant.outputs.each { output ->
+            // For each separate APK per architecture, set a unique version code as described here:
+            // https://developer.android.com/studio/build/configure-apk-splits.html
+            def versionCodes = ["armeabi-v7a": 1, "x86": 2, "arm64-v8a": 3, "x86_64": 4]
+            def abi = output.getFilter(OutputFile.ABI)
+            if (abi != null) {  // null for the universal-debug, universal-release variants
+                output.versionCodeOverride =
+                        versionCodes.get(abi) * 1048576 + defaultConfig.versionCode
+            }
+
+        }
+    }
+}
+
+dependencies {
+    implementation fileTree(dir: "libs", include: ["*.jar"])
+    //noinspection GradleDynamicVersion
+    implementation "com.facebook.react:react-native:+"  // From node_modules
+
+    implementation "androidx.swiperefreshlayout:swiperefreshlayout:1.0.0"
+
+    debugImplementation("com.facebook.flipper:flipper:${FLIPPER_VERSION}") {
+      exclude group:'com.facebook.fbjni'
+    }
+
+    debugImplementation("com.facebook.flipper:flipper-network-plugin:${FLIPPER_VERSION}") {
+        exclude group:'com.facebook.flipper'
+        exclude group:'com.squareup.okhttp3', module:'okhttp'
+    }
+
+    debugImplementation("com.facebook.flipper:flipper-fresco-plugin:${FLIPPER_VERSION}") {
+        exclude group:'com.facebook.flipper'
+    }
+
+    if (enableHermes) {
+        def hermesPath = "../../node_modules/hermes-engine/android/";
+        debugImplementation files(hermesPath + "hermes-debug.aar")
+        releaseImplementation files(hermesPath + "hermes-release.aar")
+    } else {
+        implementation jscFlavor
+    }
+}
+
+// Run this once to be able to run the application with BUCK
+// puts all compile dependencies into folder libs for BUCK to use
+task copyDownloadableDepsToLibs(type: Copy) {
+    from configurations.compile
+    into 'libs'
+}
+
+apply from: file("../../node_modules/@react-native-community/cli-platform-android/native_modules.gradle"); applyNativeModulesAppBuildGradle(project)
+apply from: "../../node_modules/react-native-vector-icons/fonts.gradle"
--- a/android/app/build_defs.bzl
+++ b/android/app/build_defs.bzl
@@ -0,0 +1,19 @@
+"""Helper definitions to glob .aar and .jar targets"""
+
+def create_aar_targets(aarfiles):
+    for aarfile in aarfiles:
+        name = "aars__" + aarfile[aarfile.rindex("/") + 1:aarfile.rindex(".aar")]
+        lib_deps.append(":" + name)
+        android_prebuilt_aar(
+            name = name,
+            aar = aarfile,
+        )
+
+def create_jar_targets(jarfiles):
+    for jarfile in jarfiles:
+        name = "jars__" + jarfile[jarfile.rindex("/") + 1:jarfile.rindex(".jar")]
+        lib_deps.append(":" + name)
+        prebuilt_jar(
+            name = name,
+            binary_jar = jarfile,
+        )
--- a/android/app/debug.keystore
+++ b/android/app/debug.keystore
--- a/android/app/proguard-rules.pro
+++ b/android/app/proguard-rules.pro
@@ -0,0 +1,10 @@
+# Add project specific ProGuard rules here.
+# By default, the flags in this file are appended to flags specified
+# in /usr/local/Cellar/android-sdk/24.3.3/tools/proguard/proguard-android.txt
+# You can edit the include path and order by changing the proguardFiles
+# directive in build.gradle.
+#
+# For more details, see
+#   http://developer.android.com/guide/developing/tools/proguard.html
+
+# Add any project specific keep options here:
--- a/android/app/src/debug/AndroidManifest.xml
+++ b/android/app/src/debug/AndroidManifest.xml
@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="utf-8"?>
+<manifest xmlns:android="http://schemas.android.com/apk/res/android"
+    xmlns:tools="http://schemas.android.com/tools">
+
+    <uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW"/>
+
+    <application android:usesCleartextTraffic="true" tools:targetApi="28" tools:ignore="GoogleAppIndexingWarning" />
+</manifest>
--- a/android/app/src/debug/java/com/o_home/ReactNativeFlipper.java
+++ b/android/app/src/debug/java/com/o_home/ReactNativeFlipper.java
@@ -0,0 +1,72 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * <p>This source code is licensed under the MIT license found in the LICENSE file in the root
+ * directory of this source tree.
+ */
+package com.o_home;
+
+import android.content.Context;
+import com.facebook.flipper.android.AndroidFlipperClient;
+import com.facebook.flipper.android.utils.FlipperUtils;
+import com.facebook.flipper.core.FlipperClient;
+import com.facebook.flipper.plugins.crashreporter.CrashReporterPlugin;
+import com.facebook.flipper.plugins.databases.DatabasesFlipperPlugin;
+import com.facebook.flipper.plugins.fresco.FrescoFlipperPlugin;
+import com.facebook.flipper.plugins.inspector.DescriptorMapping;
+import com.facebook.flipper.plugins.inspector.InspectorFlipperPlugin;
+import com.facebook.flipper.plugins.network.FlipperOkhttpInterceptor;
+import com.facebook.flipper.plugins.network.NetworkFlipperPlugin;
+import com.facebook.flipper.plugins.react.ReactFlipperPlugin;
+import com.facebook.flipper.plugins.sharedpreferences.SharedPreferencesFlipperPlugin;
+import com.facebook.react.ReactInstanceManager;
+import com.facebook.react.bridge.ReactContext;
+import com.facebook.react.modules.network.NetworkingModule;
+import okhttp3.OkHttpClient;
+
+public class ReactNativeFlipper {
+  public static void initializeFlipper(Context context, ReactInstanceManager reactInstanceManager) {
+    if (FlipperUtils.shouldEnableFlipper(context)) {
+      final FlipperClient client = AndroidFlipperClient.getInstance(context);
+
+      client.addPlugin(new InspectorFlipperPlugin(context, DescriptorMapping.withDefaults()));
+      client.addPlugin(new ReactFlipperPlugin());
+      client.addPlugin(new DatabasesFlipperPlugin(context));
+      client.addPlugin(new SharedPreferencesFlipperPlugin(context));
+      client.addPlugin(CrashReporterPlugin.getInstance());
+
+      NetworkFlipperPlugin networkFlipperPlugin = new NetworkFlipperPlugin();
+      NetworkingModule.setCustomClientBuilder(
+          new NetworkingModule.CustomClientBuilder() {
+            @Override
+            public void apply(OkHttpClient.Builder builder) {
+              builder.addNetworkInterceptor(new FlipperOkhttpInterceptor(networkFlipperPlugin));
+            }
+          });
+      client.addPlugin(networkFlipperPlugin);
+      client.start();
+
+      // Fresco Plugin needs to ensure that ImagePipelineFactory is initialized
+      // Hence we run if after all native modules have been initialized
+      ReactContext reactContext = reactInstanceManager.getCurrentReactContext();
+      if (reactContext == null) {
+        reactInstanceManager.addReactInstanceEventListener(
+            new ReactInstanceManager.ReactInstanceEventListener() {
+              @Override
+              public void onReactContextInitialized(ReactContext reactContext) {
+                reactInstanceManager.removeReactInstanceEventListener(this);
+                reactContext.runOnNativeModulesQueueThread(
+                    new Runnable() {
+                      @Override
+                      public void run() {
+                        client.addPlugin(new FrescoFlipperPlugin());
+                      }
+                    });
+              }
+            });
+      } else {
+        client.addPlugin(new FrescoFlipperPlugin());
+      }
+    }
+  }
+}
--- a/android/app/src/main/AndroidManifest.xml
+++ b/android/app/src/main/AndroidManifest.xml
@@ -0,0 +1,27 @@
+<manifest xmlns:android="http://schemas.android.com/apk/res/android"
+  package="com.o_home">
+
+    <uses-permission android:name="android.permission.INTERNET" />
+
+    <application
+      android:name=".MainApplication"
+      android:label="@string/app_name"
+      android:icon="@mipmap/ic_launcher"
+      android:roundIcon="@mipmap/ic_launcher_round"
+      android:allowBackup="false"
+      android:theme="@style/AppTheme">
+      <activity
+        android:name=".MainActivity"
+        android:label="@string/app_name"
+        android:configChanges="keyboard|keyboardHidden|orientation|screenSize|uiMode"
+        android:launchMode="singleTask"
+        android:windowSoftInputMode="adjustPan">
+        <intent-filter>
+            <action android:name="android.intent.action.MAIN" />
+            <category android:name="android.intent.category.LAUNCHER" />
+        </intent-filter>
+      </activity>
+      <activity android:name="com.facebook.react.devsupport.DevSettingsActivity" />
+    </application>
+
+</manifest>
--- a/android/app/src/main/java/com/o_home/MainActivity.java
+++ b/android/app/src/main/java/com/o_home/MainActivity.java
@@ -0,0 +1,15 @@
+package com.o_home;
+
+import com.facebook.react.ReactActivity;
+
+public class MainActivity extends ReactActivity {
+
+  /**
+   * Returns the name of the main component registered from JavaScript. This is used to schedule
+   * rendering of the component.
+   */
+  @Override
+  protected String getMainComponentName() {
+    return "O_Home";
+  }
+}
--- a/android/app/src/main/java/com/o_home/MainApplication.java
+++ b/android/app/src/main/java/com/o_home/MainApplication.java
@@ -0,0 +1,80 @@
+package com.o_home;
+
+import android.app.Application;
+import android.content.Context;
+import com.facebook.react.PackageList;
+import com.facebook.react.ReactApplication;
+import com.facebook.react.ReactInstanceManager;
+import com.facebook.react.ReactNativeHost;
+import com.facebook.react.ReactPackage;
+import com.facebook.soloader.SoLoader;
+import java.lang.reflect.InvocationTargetException;
+import java.util.List;
+
+public class MainApplication extends Application implements ReactApplication {
+
+  private final ReactNativeHost mReactNativeHost =
+      new ReactNativeHost(this) {
+        @Override
+        public boolean getUseDeveloperSupport() {
+          return BuildConfig.DEBUG;
+        }
+
+        @Override
+        protected List<ReactPackage> getPackages() {
+          @SuppressWarnings("UnnecessaryLocalVariable")
+          List<ReactPackage> packages = new PackageList(this).getPackages();
+          // Packages that cannot be autolinked yet can be added manually here, for example:
+          // packages.add(new MyReactNativePackage());
+          return packages;
+        }
+
+        @Override
+        protected String getJSMainModuleName() {
+          return "index";
+        }
+      };
+
+  @Override
+  public ReactNativeHost getReactNativeHost() {
+    return mReactNativeHost;
+  }
+
+  @Override
+  public void onCreate() {
+    super.onCreate();
+    SoLoader.init(this, /* native exopackage */ false);
+    initializeFlipper(this, getReactNativeHost().getReactInstanceManager());
+  }
+
+  /**
+   * Loads Flipper in React Native templates. Call this in the onCreate method with something like
+   * initializeFlipper(this, getReactNativeHost().getReactInstanceManager());
+   *
+   * @param context
+   * @param reactInstanceManager
+   */
+  private static void initializeFlipper(
+      Context context, ReactInstanceManager reactInstanceManager) {
+    if (BuildConfig.DEBUG) {
+      try {
+        /*
+         We use reflection here to pick up the class that initializes Flipper,
+        since Flipper library is not available in release mode
+        */
+        Class<?> aClass = Class.forName("com.o_home.ReactNativeFlipper");
+        aClass
+            .getMethod("initializeFlipper", Context.class, ReactInstanceManager.class)
+            .invoke(null, context, reactInstanceManager);
+      } catch (ClassNotFoundException e) {
+        e.printStackTrace();
+      } catch (NoSuchMethodException e) {
+        e.printStackTrace();
+      } catch (IllegalAccessException e) {
+        e.printStackTrace();
+      } catch (InvocationTargetException e) {
+        e.printStackTrace();
+      }
+    }
+  }
+}
--- a/android/app/src/main/res/mipmap-hdpi/ic_launcher.png
+++ b/android/app/src/main/res/mipmap-hdpi/ic_launcher.png
--- a/android/app/src/main/res/mipmap-hdpi/ic_launcher_round.png
+++ b/android/app/src/main/res/mipmap-hdpi/ic_launcher_round.png
--- a/android/app/src/main/res/mipmap-mdpi/ic_launcher.png
+++ b/android/app/src/main/res/mipmap-mdpi/ic_launcher.png
--- a/android/app/src/main/res/mipmap-mdpi/ic_launcher_round.png
+++ b/android/app/src/main/res/mipmap-mdpi/ic_launcher_round.png
--- a/android/app/src/main/res/mipmap-xhdpi/ic_launcher.png
+++ b/android/app/src/main/res/mipmap-xhdpi/ic_launcher.png
--- a/android/app/src/main/res/mipmap-xhdpi/ic_launcher_round.png
+++ b/android/app/src/main/res/mipmap-xhdpi/ic_launcher_round.png
--- a/android/app/src/main/res/mipmap-xxhdpi/ic_launcher.png
+++ b/android/app/src/main/res/mipmap-xxhdpi/ic_launcher.png
--- a/android/app/src/main/res/mipmap-xxhdpi/ic_launcher_round.png
+++ b/android/app/src/main/res/mipmap-xxhdpi/ic_launcher_round.png
--- a/android/app/src/main/res/mipmap-xxxhdpi/ic_launcher.png
+++ b/android/app/src/main/res/mipmap-xxxhdpi/ic_launcher.png
--- a/android/app/src/main/res/mipmap-xxxhdpi/ic_launcher_round.png
+++ b/android/app/src/main/res/mipmap-xxxhdpi/ic_launcher_round.png
--- a/android/app/src/main/res/values/strings.xml
+++ b/android/app/src/main/res/values/strings.xml
@@ -0,0 +1,3 @@
+<resources>
+    <string name="app_name">O_Home</string>
+</resources>
--- a/android/app/src/main/res/values/styles.xml
+++ b/android/app/src/main/res/values/styles.xml
@@ -0,0 +1,9 @@
+<resources>
+
+    <!-- Base application theme. -->
+    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
+        <!-- Customize your theme here. -->
+        <item name="android:textColor">#000000</item>
+    </style>
+
+</resources>
--- a/android/build.gradle
+++ b/android/build.gradle
@@ -0,0 +1,37 @@
+// Top-level build file where you can add configuration options common to all sub-projects/modules.
+
+buildscript {
+    ext {
+        buildToolsVersion = "29.0.2"
+        minSdkVersion = 16
+        compileSdkVersion = 29
+        targetSdkVersion = 29
+    }
+    repositories {
+        google()
+        jcenter()
+    }
+    dependencies {
+        classpath("com.android.tools.build:gradle:3.5.3")
+        // NOTE: Do not place your application dependencies here; they belong
+        // in the individual module build.gradle files
+    }
+}
+
+allprojects {
+    repositories {
+        mavenLocal()
+        maven {
+            // All of React Native (JS, Obj-C sources, Android binaries) is installed from npm
+            url("$rootDir/../node_modules/react-native/android")
+        }
+        maven {
+            // Android JSC is installed from npm
+            url("$rootDir/../node_modules/jsc-android/dist")
+        }
+
+        google()
+        jcenter()
+        maven { url 'https://www.jitpack.io' }
+    }
+}
--- a/android/gradle.properties
+++ b/android/gradle.properties
@@ -0,0 +1,28 @@
+# Project-wide Gradle settings.
+
+# IDE (e.g. Android Studio) users:
+# Gradle settings configured through the IDE *will override*
+# any settings specified in this file.
+
+# For more details on how to configure your build environment visit
+# http://www.gradle.org/docs/current/userguide/build_environment.html
+
+# Specifies the JVM arguments used for the daemon process.
+# The setting is particularly useful for tweaking memory settings.
+# Default value: -Xmx10248m -XX:MaxPermSize=256m
+# org.gradle.jvmargs=-Xmx2048m -XX:MaxPermSize=512m -XX:+HeapDumpOnOutOfMemoryError -Dfile.encoding=UTF-8
+
+# When configured, Gradle will run in incubating parallel mode.
+# This option should only be used with decoupled projects. More details, visit
+# http://www.gradle.org/docs/current/userguide/multi_project_builds.html#sec:decoupled_projects
+# org.gradle.parallel=true
+
+# AndroidX package structure to make it clearer which packages are bundled with the
+# Android operating system, and which are packaged with your app's APK
+# https://developer.android.com/topic/libraries/support-library/androidx-rn
+android.useAndroidX=true
+# Automatically convert third-party libraries to use AndroidX
+android.enableJetifier=true
+
+# Version of flipper SDK to use with React Native
+FLIPPER_VERSION=0.54.0
--- a/android/gradle/wrapper/gradle-wrapper.jar
+++ b/android/gradle/wrapper/gradle-wrapper.jar
--- a/android/gradle/wrapper/gradle-wrapper.properties
+++ b/android/gradle/wrapper/gradle-wrapper.properties
@@ -0,0 +1,5 @@
+distributionBase=GRADLE_USER_HOME
+distributionPath=wrapper/dists
+distributionUrl=https\://services.gradle.org/distributions/gradle-6.2-all.zip
+zipStoreBase=GRADLE_USER_HOME
+zipStorePath=wrapper/dists
--- a/android/gradlew
+++ b/android/gradlew
@@ -0,0 +1,183 @@
+#!/usr/bin/env sh
+
+#
+# Copyright 2015 the original author or authors.
+#
+# Licensed under the Apache License, Version 2.0 (the "License");
+# you may not use this file except in compliance with the License.
+# You may obtain a copy of the License at
+#
+#      https://www.apache.org/licenses/LICENSE-2.0
+#
+# Unless required by applicable law or agreed to in writing, software
+# distributed under the License is distributed on an "AS IS" BASIS,
+# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+# See the License for the specific language governing permissions and
+# limitations under the License.
+#
+
+##############################################################################
+##
+##  Gradle start up script for UN*X
+##
+##############################################################################
+
+# Attempt to set APP_HOME
+# Resolve links: $0 may be a link
+PRG="$0"
+# Need this for relative symlinks.
+while [ -h "$PRG" ] ; do
+    ls=`ls -ld "$PRG"`
+    link=`expr "$ls" : '.*-> \(.*\)$'`
+    if expr "$link" : '/.*' > /dev/null; then
+        PRG="$link"
+    else
+        PRG=`dirname "$PRG"`"/$link"
+    fi
+done
+SAVED="`pwd`"
+cd "`dirname \"$PRG\"`/" >/dev/null
+APP_HOME="`pwd -P`"
+cd "$SAVED" >/dev/null
+
+APP_NAME="Gradle"
+APP_BASE_NAME=`basename "$0"`
+
+# Add default JVM options here. You can also use JAVA_OPTS and GRADLE_OPTS to pass JVM options to this script.
+DEFAULT_JVM_OPTS='"-Xmx64m" "-Xms64m"'
+
+# Use the maximum available, or set MAX_FD != -1 to use that value.
+MAX_FD="maximum"
+
+warn () {
+    echo "$*"
+}
+
+die () {
+    echo
+    echo "$*"
+    echo
+    exit 1
+}
+
+# OS specific support (must be 'true' or 'false').
+cygwin=false
+msys=false
+darwin=false
+nonstop=false
+case "`uname`" in
+  CYGWIN* )
+    cygwin=true
+    ;;
+  Darwin* )
+    darwin=true
+    ;;
+  MINGW* )
+    msys=true
+    ;;
+  NONSTOP* )
+    nonstop=true
+    ;;
+esac
+
+CLASSPATH=$APP_HOME/gradle/wrapper/gradle-wrapper.jar
+
+# Determine the Java command to use to start the JVM.
+if [ -n "$JAVA_HOME" ] ; then
+    if [ -x "$JAVA_HOME/jre/sh/java" ] ; then
+        # IBM's JDK on AIX uses strange locations for the executables
+        JAVACMD="$JAVA_HOME/jre/sh/java"
+    else
+        JAVACMD="$JAVA_HOME/bin/java"
+    fi
+    if [ ! -x "$JAVACMD" ] ; then
+        die "ERROR: JAVA_HOME is set to an invalid directory: $JAVA_HOME
+
+Please set the JAVA_HOME variable in your environment to match the
+location of your Java installation."
+    fi
+else
+    JAVACMD="java"
+    which java >/dev/null 2>&1 || die "ERROR: JAVA_HOME is not set and no 'java' command could be found in your PATH.
+
+Please set the JAVA_HOME variable in your environment to match the
+location of your Java installation."
+fi
+
+# Increase the maximum file descriptors if we can.
+if [ "$cygwin" = "false" -a "$darwin" = "false" -a "$nonstop" = "false" ] ; then
+    MAX_FD_LIMIT=`ulimit -H -n`
+    if [ $? -eq 0 ] ; then
+        if [ "$MAX_FD" = "maximum" -o "$MAX_FD" = "max" ] ; then
+            MAX_FD="$MAX_FD_LIMIT"
+        fi
+        ulimit -n $MAX_FD
+        if [ $? -ne 0 ] ; then
+            warn "Could not set maximum file descriptor limit: $MAX_FD"
+        fi
+    else
+        warn "Could not query maximum file descriptor limit: $MAX_FD_LIMIT"
+    fi
+fi
+
+# For Darwin, add options to specify how the application appears in the dock
+if $darwin; then
+    GRADLE_OPTS="$GRADLE_OPTS \"-Xdock:name=$APP_NAME\" \"-Xdock:icon=$APP_HOME/media/gradle.icns\""
+fi
+
+# For Cygwin or MSYS, switch paths to Windows format before running java
+if [ "$cygwin" = "true" -o "$msys" = "true" ] ; then
+    APP_HOME=`cygpath --path --mixed "$APP_HOME"`
+    CLASSPATH=`cygpath --path --mixed "$CLASSPATH"`
+    JAVACMD=`cygpath --unix "$JAVACMD"`
+
+    # We build the pattern for arguments to be converted via cygpath
+    ROOTDIRSRAW=`find -L / -maxdepth 1 -mindepth 1 -type d 2>/dev/null`
+    SEP=""
+    for dir in $ROOTDIRSRAW ; do
+        ROOTDIRS="$ROOTDIRS$SEP$dir"
+        SEP="|"
+    done
+    OURCYGPATTERN="(^($ROOTDIRS))"
+    # Add a user-defined pattern to the cygpath arguments
+    if [ "$GRADLE_CYGPATTERN" != "" ] ; then
+        OURCYGPATTERN="$OURCYGPATTERN|($GRADLE_CYGPATTERN)"
+    fi
+    # Now convert the arguments - kludge to limit ourselves to /bin/sh
+    i=0
+    for arg in "$@" ; do
+        CHECK=`echo "$arg"|egrep -c "$OURCYGPATTERN" -`
+        CHECK2=`echo "$arg"|egrep -c "^-"`                                 ### Determine if an option
+
+        if [ $CHECK -ne 0 ] && [ $CHECK2 -eq 0 ] ; then                    ### Added a condition
+            eval `echo args$i`=`cygpath --path --ignore --mixed "$arg"`
+        else
+            eval `echo args$i`="\"$arg\""
+        fi
+        i=`expr $i + 1`
+    done
+    case $i in
+        0) set -- ;;
+        1) set -- "$args0" ;;
+        2) set -- "$args0" "$args1" ;;
+        3) set -- "$args0" "$args1" "$args2" ;;
+        4) set -- "$args0" "$args1" "$args2" "$args3" ;;
+        5) set -- "$args0" "$args1" "$args2" "$args3" "$args4" ;;
+        6) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" ;;
+        7) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" "$args6" ;;
+        8) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" "$args6" "$args7" ;;
+        9) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" "$args6" "$args7" "$args8" ;;
+    esac
+fi
+
+# Escape application args
+save () {
+    for i do printf %s\\n "$i" | sed "s/'/'\\\\''/g;1s/^/'/;\$s/\$/' \\\\/" ; done
+    echo " "
+}
+APP_ARGS=`save "$@"`
+
+# Collect all arguments for the java command, following the shell quoting and substitution rules
+eval set -- $DEFAULT_JVM_OPTS $JAVA_OPTS $GRADLE_OPTS "\"-Dorg.gradle.appname=$APP_BASE_NAME\"" -classpath "\"$CLASSPATH\"" org.gradle.wrapper.GradleWrapperMain "$APP_ARGS"
+
+exec "$JAVACMD" "$@"
--- a/android/gradlew.bat
+++ b/android/gradlew.bat
@@ -0,0 +1,103 @@
+@rem
+@rem Copyright 2015 the original author or authors.
+@rem
+@rem Licensed under the Apache License, Version 2.0 (the "License");
+@rem you may not use this file except in compliance with the License.
+@rem You may obtain a copy of the License at
+@rem
+@rem      https://www.apache.org/licenses/LICENSE-2.0
+@rem
+@rem Unless required by applicable law or agreed to in writing, software
+@rem distributed under the License is distributed on an "AS IS" BASIS,
+@rem WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+@rem See the License for the specific language governing permissions and
+@rem limitations under the License.
+@rem
+
+@if "%DEBUG%" == "" @echo off
+@rem ##########################################################################
+@rem
+@rem  Gradle startup script for Windows
+@rem
+@rem ##########################################################################
+
+@rem Set local scope for the variables with windows NT shell
+if "%OS%"=="Windows_NT" setlocal
+
+set DIRNAME=%~dp0
+if "%DIRNAME%" == "" set DIRNAME=.
+set APP_BASE_NAME=%~n0
+set APP_HOME=%DIRNAME%
+
+@rem Resolve any "." and ".." in APP_HOME to make it shorter.
+for %%i in ("%APP_HOME%") do set APP_HOME=%%~fi
+
+@rem Add default JVM options here. You can also use JAVA_OPTS and GRADLE_OPTS to pass JVM options to this script.
+set DEFAULT_JVM_OPTS="-Xmx64m" "-Xms64m"
+
+@rem Find java.exe
+if defined JAVA_HOME goto findJavaFromJavaHome
+
+set JAVA_EXE=java.exe
+%JAVA_EXE% -version >NUL 2>&1
+if "%ERRORLEVEL%" == "0" goto init
+
+echo.
+echo ERROR: JAVA_HOME is not set and no 'java' command could be found in your PATH.
+echo.
+echo Please set the JAVA_HOME variable in your environment to match the
+echo location of your Java installation.
+
+goto fail
+
+:findJavaFromJavaHome
+set JAVA_HOME=%JAVA_HOME:"=%
+set JAVA_EXE=%JAVA_HOME%/bin/java.exe
+
+if exist "%JAVA_EXE%" goto init
+
+echo.
+echo ERROR: JAVA_HOME is set to an invalid directory: %JAVA_HOME%
+echo.
+echo Please set the JAVA_HOME variable in your environment to match the
+echo location of your Java installation.
+
+goto fail
+
+:init
+@rem Get command-line arguments, handling Windows variants
+
+if not "%OS%" == "Windows_NT" goto win9xME_args
+
+:win9xME_args
+@rem Slurp the command line arguments.
+set CMD_LINE_ARGS=
+set _SKIP=2
+
+:win9xME_args_slurp
+if "x%~1" == "x" goto execute
+
+set CMD_LINE_ARGS=%*
+
+:execute
+@rem Setup the command line
+
+set CLASSPATH=%APP_HOME%\gradle\wrapper\gradle-wrapper.jar
+
+@rem Execute Gradle
+"%JAVA_EXE%" %DEFAULT_JVM_OPTS% %JAVA_OPTS% %GRADLE_OPTS% "-Dorg.gradle.appname=%APP_BASE_NAME%" -classpath "%CLASSPATH%" org.gradle.wrapper.GradleWrapperMain %CMD_LINE_ARGS%
+
+:end
+@rem End local scope for the variables with windows NT shell
+if "%ERRORLEVEL%"=="0" goto mainEnd
+
+:fail
+rem Set variable GRADLE_EXIT_CONSOLE if you need the _script_ return code instead of
+rem the _cmd.exe /c_ return code!
+if  not "" == "%GRADLE_EXIT_CONSOLE%" exit 1
+exit /b 1
+
+:mainEnd
+if "%OS%"=="Windows_NT" endlocal
+
+:omega
--- a/android/settings.gradle
+++ b/android/settings.gradle
@@ -0,0 +1,3 @@
+rootProject.name = 'O_Home'
+apply from: file("../node_modules/@react-native-community/cli-platform-android/native_modules.gradle"); applyNativeModulesSettingsGradle(settings)
+include ':app'
--- a/app.json
+++ b/app.json
@@ -0,0 +1,4 @@
+{
+  "name": "O_Home",
+  "displayName": "O_Home"
+}
--- a/babel.config.js
+++ b/babel.config.js
@@ -0,0 +1,3 @@
+module.exports = {
+  presets: ['module:metro-react-native-babel-preset'],
+};
--- a/index.js
+++ b/index.js
@@ -0,0 +1,9 @@
+/**
+ * @format
+ */
+
+import {AppRegistry} from 'react-native';
+import App from './App';
+import {name as appName} from './app.json';
+
+AppRegistry.registerComponent(appName, () => App);
--- a/ios/O_Home-tvOS/Info.plist
+++ b/ios/O_Home-tvOS/Info.plist
@@ -0,0 +1,53 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
+<plist version="1.0">
+<dict>
+	<key>CFBundleDevelopmentRegion</key>
+	<string>en</string>
+	<key>CFBundleExecutable</key>
+	<string>$(EXECUTABLE_NAME)</string>
+	<key>CFBundleIdentifier</key>
+	<string>$(PRODUCT_BUNDLE_IDENTIFIER)</string>
+	<key>CFBundleInfoDictionaryVersion</key>
+	<string>6.0</string>
+	<key>CFBundleName</key>
+	<string>$(PRODUCT_NAME)</string>
+	<key>CFBundlePackageType</key>
+	<string>APPL</string>
+	<key>CFBundleShortVersionString</key>
+	<string>1.0</string>
+	<key>CFBundleSignature</key>
+	<string>????</string>
+	<key>CFBundleVersion</key>
+	<string>1</string>
+	<key>LSRequiresIPhoneOS</key>
+	<true/>
+	<key>NSAppTransportSecurity</key>
+	<dict>
+		<key>NSExceptionDomains</key>
+		<dict>
+			<key>localhost</key>
+			<dict>
+				<key>NSExceptionAllowsInsecureHTTPLoads</key>
+				<true/>
+			</dict>
+		</dict>
+	</dict>
+	<key>NSLocationWhenInUseUsageDescription</key>
+	<string></string>
+	<key>UILaunchStoryboardName</key>
+	<string>LaunchScreen</string>
+	<key>UIRequiredDeviceCapabilities</key>
+	<array>
+		<string>armv7</string>
+	</array>
+	<key>UISupportedInterfaceOrientations</key>
+	<array>
+		<string>UIInterfaceOrientationPortrait</string>
+		<string>UIInterfaceOrientationLandscapeLeft</string>
+		<string>UIInterfaceOrientationLandscapeRight</string>
+	</array>
+	<key>UIViewControllerBasedStatusBarAppearance</key>
+	<false/>
+</dict>
+</plist>
--- a/ios/O_Home-tvOSTests/Info.plist
+++ b/ios/O_Home-tvOSTests/Info.plist
@@ -0,0 +1,24 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
+<plist version="1.0">
+<dict>
+	<key>CFBundleDevelopmentRegion</key>
+	<string>en</string>
+	<key>CFBundleExecutable</key>
+	<string>$(EXECUTABLE_NAME)</string>
+	<key>CFBundleIdentifier</key>
+	<string>$(PRODUCT_BUNDLE_IDENTIFIER)</string>
+	<key>CFBundleInfoDictionaryVersion</key>
+	<string>6.0</string>
+	<key>CFBundleName</key>
+	<string>$(PRODUCT_NAME)</string>
+	<key>CFBundlePackageType</key>
+	<string>BNDL</string>
+	<key>CFBundleShortVersionString</key>
+	<string>1.0</string>
+	<key>CFBundleSignature</key>
+	<string>????</string>
+	<key>CFBundleVersion</key>
+	<string>1</string>
+</dict>
+</plist>
--- a/ios/O_Home.xcodeproj/project.pbxproj
+++ b/ios/O_Home.xcodeproj/project.pbxproj
@@ -0,0 +1,791 @@
+// !$*UTF8*$!
+{
+	archiveVersion = 1;
+	classes = {
+	};
+	objectVersion = 46;
+	objects = {
+
+/* Begin PBXBuildFile section */
+		00E356F31AD99517003FC87E /* O_HomeTests.m in Sources */ = {isa = PBXBuildFile; fileRef = 00E356F21AD99517003FC87E /* O_HomeTests.m */; };
+		13B07FBC1A68108700A75B9A /* AppDelegate.m in Sources */ = {isa = PBXBuildFile; fileRef = 13B07FB01A68108700A75B9A /* AppDelegate.m */; };
+		13B07FBF1A68108700A75B9A /* Images.xcassets in Resources */ = {isa = PBXBuildFile; fileRef = 13B07FB51A68108700A75B9A /* Images.xcassets */; };
+		13B07FC11A68108700A75B9A /* main.m in Sources */ = {isa = PBXBuildFile; fileRef = 13B07FB71A68108700A75B9A /* main.m */; };
+		2D02E4BC1E0B4A80006451C7 /* AppDelegate.m in Sources */ = {isa = PBXBuildFile; fileRef = 13B07FB01A68108700A75B9A /* AppDelegate.m */; };
+		2D02E4BD1E0B4A84006451C7 /* Images.xcassets in Resources */ = {isa = PBXBuildFile; fileRef = 13B07FB51A68108700A75B9A /* Images.xcassets */; };
+		2D02E4BF1E0B4AB3006451C7 /* main.m in Sources */ = {isa = PBXBuildFile; fileRef = 13B07FB71A68108700A75B9A /* main.m */; };
+		2DCD954D1E0B4F2C00145EB5 /* O_HomeTests.m in Sources */ = {isa = PBXBuildFile; fileRef = 00E356F21AD99517003FC87E /* O_HomeTests.m */; };
+		81AB9BB82411601600AC10FF /* LaunchScreen.storyboard in Resources */ = {isa = PBXBuildFile; fileRef = 81AB9BB72411601600AC10FF /* LaunchScreen.storyboard */; };
+/* End PBXBuildFile section */
+
+/* Begin PBXContainerItemProxy section */
+		00E356F41AD99517003FC87E /* PBXContainerItemProxy */ = {
+			isa = PBXContainerItemProxy;
+			containerPortal = 83CBB9F71A601CBA00E9B192 /* Project object */;
+			proxyType = 1;
+			remoteGlobalIDString = 13B07F861A680F5B00A75B9A;
+			remoteInfo = O_Home;
+		};
+		2D02E4911E0B4A5D006451C7 /* PBXContainerItemProxy */ = {
+			isa = PBXContainerItemProxy;
+			containerPortal = 83CBB9F71A601CBA00E9B192 /* Project object */;
+			proxyType = 1;
+			remoteGlobalIDString = 2D02E47A1E0B4A5D006451C7;
+			remoteInfo = "O_Home-tvOS";
+		};
+/* End PBXContainerItemProxy section */
+
+/* Begin PBXFileReference section */
+		008F07F21AC5B25A0029DE68 /* main.jsbundle */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = text; path = main.jsbundle; sourceTree = "<group>"; };
+		00E356EE1AD99517003FC87E /* O_HomeTests.xctest */ = {isa = PBXFileReference; explicitFileType = wrapper.cfbundle; includeInIndex = 0; path = O_HomeTests.xctest; sourceTree = BUILT_PRODUCTS_DIR; };
+		00E356F11AD99517003FC87E /* Info.plist */ = {isa = PBXFileReference; lastKnownFileType = text.plist.xml; path = Info.plist; sourceTree = "<group>"; };
+		00E356F21AD99517003FC87E /* O_HomeTests.m */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.c.objc; path = O_HomeTests.m; sourceTree = "<group>"; };
+		13B07F961A680F5B00A75B9A /* O_Home.app */ = {isa = PBXFileReference; explicitFileType = wrapper.application; includeInIndex = 0; path = O_Home.app; sourceTree = BUILT_PRODUCTS_DIR; };
+		13B07FAF1A68108700A75B9A /* AppDelegate.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; name = AppDelegate.h; path = O_Home/AppDelegate.h; sourceTree = "<group>"; };
+		13B07FB01A68108700A75B9A /* AppDelegate.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; name = AppDelegate.m; path = O_Home/AppDelegate.m; sourceTree = "<group>"; };
+		13B07FB51A68108700A75B9A /* Images.xcassets */ = {isa = PBXFileReference; lastKnownFileType = folder.assetcatalog; name = Images.xcassets; path = O_Home/Images.xcassets; sourceTree = "<group>"; };
+		13B07FB61A68108700A75B9A /* Info.plist */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = text.plist.xml; name = Info.plist; path = O_Home/Info.plist; sourceTree = "<group>"; };
+		13B07FB71A68108700A75B9A /* main.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; name = main.m; path = O_Home/main.m; sourceTree = "<group>"; };
+		2D02E47B1E0B4A5D006451C7 /* O_Home-tvOS.app */ = {isa = PBXFileReference; explicitFileType = wrapper.application; includeInIndex = 0; path = "O_Home-tvOS.app"; sourceTree = BUILT_PRODUCTS_DIR; };
+		2D02E4901E0B4A5D006451C7 /* O_Home-tvOSTests.xctest */ = {isa = PBXFileReference; explicitFileType = wrapper.cfbundle; includeInIndex = 0; path = "O_Home-tvOSTests.xctest"; sourceTree = BUILT_PRODUCTS_DIR; };
+		81AB9BB72411601600AC10FF /* LaunchScreen.storyboard */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = file.storyboard; name = LaunchScreen.storyboard; path = O_Home/LaunchScreen.storyboard; sourceTree = "<group>"; };
+		ED297162215061F000B7C4FE /* JavaScriptCore.framework */ = {isa = PBXFileReference; lastKnownFileType = wrapper.framework; name = JavaScriptCore.framework; path = System/Library/Frameworks/JavaScriptCore.framework; sourceTree = SDKROOT; };
+		ED2971642150620600B7C4FE /* JavaScriptCore.framework */ = {isa = PBXFileReference; lastKnownFileType = wrapper.framework; name = JavaScriptCore.framework; path = Platforms/AppleTVOS.platform/Developer/SDKs/AppleTVOS12.0.sdk/System/Library/Frameworks/JavaScriptCore.framework; sourceTree = DEVELOPER_DIR; };
+/* End PBXFileReference section */
+
+/* Begin PBXFrameworksBuildPhase section */
+		00E356EB1AD99517003FC87E /* Frameworks */ = {
+			isa = PBXFrameworksBuildPhase;
+			buildActionMask = 2147483647;
+			files = (
+			);
+			runOnlyForDeploymentPostprocessing = 0;
+		};
+		13B07F8C1A680F5B00A75B9A /* Frameworks */ = {
+			isa = PBXFrameworksBuildPhase;
+			buildActionMask = 2147483647;
+			files = (
+			);
+			runOnlyForDeploymentPostprocessing = 0;
+		};
+		2D02E4781E0B4A5D006451C7 /* Frameworks */ = {
+			isa = PBXFrameworksBuildPhase;
+			buildActionMask = 2147483647;
+			files = (
+			);
+			runOnlyForDeploymentPostprocessing = 0;
+		};
+		2D02E48D1E0B4A5D006451C7 /* Frameworks */ = {
+			isa = PBXFrameworksBuildPhase;
+			buildActionMask = 2147483647;
+			files = (
+			);
+			runOnlyForDeploymentPostprocessing = 0;
+		};
+/* End PBXFrameworksBuildPhase section */
+
+/* Begin PBXGroup section */
+		00E356EF1AD99517003FC87E /* O_HomeTests */ = {
+			isa = PBXGroup;
+			children = (
+				00E356F21AD99517003FC87E /* O_HomeTests.m */,
+				00E356F01AD99517003FC87E /* Supporting Files */,
+			);
+			path = O_HomeTests;
+			sourceTree = "<group>";
+		};
+		00E356F01AD99517003FC87E /* Supporting Files */ = {
+			isa = PBXGroup;
+			children = (
+				00E356F11AD99517003FC87E /* Info.plist */,
+			);
+			name = "Supporting Files";
+			sourceTree = "<group>";
+		};
+		13B07FAE1A68108700A75B9A /* O_Home */ = {
+			isa = PBXGroup;
+			children = (
+				008F07F21AC5B25A0029DE68 /* main.jsbundle */,
+				13B07FAF1A68108700A75B9A /* AppDelegate.h */,
+				13B07FB01A68108700A75B9A /* AppDelegate.m */,
+				13B07FB51A68108700A75B9A /* Images.xcassets */,
+				13B07FB61A68108700A75B9A /* Info.plist */,
+				81AB9BB72411601600AC10FF /* LaunchScreen.storyboard */,
+				13B07FB71A68108700A75B9A /* main.m */,
+			);
+			name = O_Home;
+			sourceTree = "<group>";
+		};
+		2D16E6871FA4F8E400B85C8A /* Frameworks */ = {
+			isa = PBXGroup;
+			children = (
+				ED297162215061F000B7C4FE /* JavaScriptCore.framework */,
+				ED2971642150620600B7C4FE /* JavaScriptCore.framework */,
+			);
+			name = Frameworks;
+			sourceTree = "<group>";
+		};
+		832341AE1AAA6A7D00B99B32 /* Libraries */ = {
+			isa = PBXGroup;
+			children = (
+			);
+			name = Libraries;
+			sourceTree = "<group>";
+		};
+		83CBB9F61A601CBA00E9B192 = {
+			isa = PBXGroup;
+			children = (
+				13B07FAE1A68108700A75B9A /* O_Home */,
+				832341AE1AAA6A7D00B99B32 /* Libraries */,
+				00E356EF1AD99517003FC87E /* O_HomeTests */,
+				83CBBA001A601CBA00E9B192 /* Products */,
+				2D16E6871FA4F8E400B85C8A /* Frameworks */,
+			);
+			indentWidth = 2;
+			sourceTree = "<group>";
+			tabWidth = 2;
+			usesTabs = 0;
+		};
+		83CBBA001A601CBA00E9B192 /* Products */ = {
+			isa = PBXGroup;
+			children = (
+				13B07F961A680F5B00A75B9A /* O_Home.app */,
+				00E356EE1AD99517003FC87E /* O_HomeTests.xctest */,
+				2D02E47B1E0B4A5D006451C7 /* O_Home-tvOS.app */,
+				2D02E4901E0B4A5D006451C7 /* O_Home-tvOSTests.xctest */,
+			);
+			name = Products;
+			sourceTree = "<group>";
+		};
+/* End PBXGroup section */
+
+/* Begin PBXNativeTarget section */
+		00E356ED1AD99517003FC87E /* O_HomeTests */ = {
+			isa = PBXNativeTarget;
+			buildConfigurationList = 00E357021AD99517003FC87E /* Build configuration list for PBXNativeTarget "O_HomeTests" */;
+			buildPhases = (
+				00E356EA1AD99517003FC87E /* Sources */,
+				00E356EB1AD99517003FC87E /* Frameworks */,
+				00E356EC1AD99517003FC87E /* Resources */,
+			);
+			buildRules = (
+			);
+			dependencies = (
+				00E356F51AD99517003FC87E /* PBXTargetDependency */,
+			);
+			name = O_HomeTests;
+			productName = O_HomeTests;
+			productReference = 00E356EE1AD99517003FC87E /* O_HomeTests.xctest */;
+			productType = "com.apple.product-type.bundle.unit-test";
+		};
+		13B07F861A680F5B00A75B9A /* O_Home */ = {
+			isa = PBXNativeTarget;
+			buildConfigurationList = 13B07F931A680F5B00A75B9A /* Build configuration list for PBXNativeTarget "O_Home" */;
+			buildPhases = (
+				FD10A7F022414F080027D42C /* Start Packager */,
+				13B07F871A680F5B00A75B9A /* Sources */,
+				13B07F8C1A680F5B00A75B9A /* Frameworks */,
+				13B07F8E1A680F5B00A75B9A /* Resources */,
+				00DD1BFF1BD5951E006B06BC /* Bundle React Native code and images */,
+			);
+			buildRules = (
+			);
+			dependencies = (
+			);
+			name = O_Home;
+			productName = O_Home;
+			productReference = 13B07F961A680F5B00A75B9A /* O_Home.app */;
+			productType = "com.apple.product-type.application";
+		};
+		2D02E47A1E0B4A5D006451C7 /* O_Home-tvOS */ = {
+			isa = PBXNativeTarget;
+			buildConfigurationList = 2D02E4BA1E0B4A5E006451C7 /* Build configuration list for PBXNativeTarget "O_Home-tvOS" */;
+			buildPhases = (
+				FD10A7F122414F3F0027D42C /* Start Packager */,
+				2D02E4771E0B4A5D006451C7 /* Sources */,
+				2D02E4781E0B4A5D006451C7 /* Frameworks */,
+				2D02E4791E0B4A5D006451C7 /* Resources */,
+				2D02E4CB1E0B4B27006451C7 /* Bundle React Native Code And Images */,
+			);
+			buildRules = (
+			);
+			dependencies = (
+			);
+			name = "O_Home-tvOS";
+			productName = "O_Home-tvOS";
+			productReference = 2D02E47B1E0B4A5D006451C7 /* O_Home-tvOS.app */;
+			productType = "com.apple.product-type.application";
+		};
+		2D02E48F1E0B4A5D006451C7 /* O_Home-tvOSTests */ = {
+			isa = PBXNativeTarget;
+			buildConfigurationList = 2D02E4BB1E0B4A5E006451C7 /* Build configuration list for PBXNativeTarget "O_Home-tvOSTests" */;
+			buildPhases = (
+				2D02E48C1E0B4A5D006451C7 /* Sources */,
+				2D02E48D1E0B4A5D006451C7 /* Frameworks */,
+				2D02E48E1E0B4A5D006451C7 /* Resources */,
+			);
+			buildRules = (
+			);
+			dependencies = (
+				2D02E4921E0B4A5D006451C7 /* PBXTargetDependency */,
+			);
+			name = "O_Home-tvOSTests";
+			productName = "O_Home-tvOSTests";
+			productReference = 2D02E4901E0B4A5D006451C7 /* O_Home-tvOSTests.xctest */;
+			productType = "com.apple.product-type.bundle.unit-test";
+		};
+/* End PBXNativeTarget section */
+
+/* Begin PBXProject section */
+		83CBB9F71A601CBA00E9B192 /* Project object */ = {
+			isa = PBXProject;
+			attributes = {
+				LastUpgradeCheck = 1130;
+				TargetAttributes = {
+					00E356ED1AD99517003FC87E = {
+						CreatedOnToolsVersion = 6.2;
+						TestTargetID = 13B07F861A680F5B00A75B9A;
+					};
+					13B07F861A680F5B00A75B9A = {
+						LastSwiftMigration = 1120;
+					};
+					2D02E47A1E0B4A5D006451C7 = {
+						CreatedOnToolsVersion = 8.2.1;
+						ProvisioningStyle = Automatic;
+					};
+					2D02E48F1E0B4A5D006451C7 = {
+						CreatedOnToolsVersion = 8.2.1;
+						ProvisioningStyle = Automatic;
+						TestTargetID = 2D02E47A1E0B4A5D006451C7;
+					};
+				};
+			};
+			buildConfigurationList = 83CBB9FA1A601CBA00E9B192 /* Build configuration list for PBXProject "O_Home" */;
+			compatibilityVersion = "Xcode 3.2";
+			developmentRegion = en;
+			hasScannedForEncodings = 0;
+			knownRegions = (
+				en,
+				Base,
+			);
+			mainGroup = 83CBB9F61A601CBA00E9B192;
+			productRefGroup = 83CBBA001A601CBA00E9B192 /* Products */;
+			projectDirPath = "";
+			projectRoot = "";
+			targets = (
+				13B07F861A680F5B00A75B9A /* O_Home */,
+				00E356ED1AD99517003FC87E /* O_HomeTests */,
+				2D02E47A1E0B4A5D006451C7 /* O_Home-tvOS */,
+				2D02E48F1E0B4A5D006451C7 /* O_Home-tvOSTests */,
+			);
+		};
+/* End PBXProject section */
+
+/* Begin PBXResourcesBuildPhase section */
+		00E356EC1AD99517003FC87E /* Resources */ = {
+			isa = PBXResourcesBuildPhase;
+			buildActionMask = 2147483647;
+			files = (
+			);
+			runOnlyForDeploymentPostprocessing = 0;
+		};
+		13B07F8E1A680F5B00A75B9A /* Resources */ = {
+			isa = PBXResourcesBuildPhase;
+			buildActionMask = 2147483647;
+			files = (
+				81AB9BB82411601600AC10FF /* LaunchScreen.storyboard in Resources */,
+				13B07FBF1A68108700A75B9A /* Images.xcassets in Resources */,
+			);
+			runOnlyForDeploymentPostprocessing = 0;
+		};
+		2D02E4791E0B4A5D006451C7 /* Resources */ = {
+			isa = PBXResourcesBuildPhase;
+			buildActionMask = 2147483647;
+			files = (
+				2D02E4BD1E0B4A84006451C7 /* Images.xcassets in Resources */,
+			);
+			runOnlyForDeploymentPostprocessing = 0;
+		};
+		2D02E48E1E0B4A5D006451C7 /* Resources */ = {
+			isa = PBXResourcesBuildPhase;
+			buildActionMask = 2147483647;
+			files = (
+			);
+			runOnlyForDeploymentPostprocessing = 0;
+		};
+/* End PBXResourcesBuildPhase section */
+
+/* Begin PBXShellScriptBuildPhase section */
+		00DD1BFF1BD5951E006B06BC /* Bundle React Native code and images */ = {
+			isa = PBXShellScriptBuildPhase;
+			buildActionMask = 2147483647;
+			files = (
+			);
+			inputPaths = (
+			);
+			name = "Bundle React Native code and images";
+			outputPaths = (
+			);
+			runOnlyForDeploymentPostprocessing = 0;
+			shellPath = /bin/sh;
+			shellScript = "export NODE_BINARY=node\n../node_modules/react-native/scripts/react-native-xcode.sh";
+		};
+		2D02E4CB1E0B4B27006451C7 /* Bundle React Native Code And Images */ = {
+			isa = PBXShellScriptBuildPhase;
+			buildActionMask = 2147483647;
+			files = (
+			);
+			inputPaths = (
+			);
+			name = "Bundle React Native Code And Images";
+			outputPaths = (
+			);
+			runOnlyForDeploymentPostprocessing = 0;
+			shellPath = /bin/sh;
+			shellScript = "export NODE_BINARY=node\n../node_modules/react-native/scripts/react-native-xcode.sh";
+		};
+		FD10A7F022414F080027D42C /* Start Packager */ = {
+			isa = PBXShellScriptBuildPhase;
+			buildActionMask = 2147483647;
+			files = (
+			);
+			inputFileListPaths = (
+			);
+			inputPaths = (
+			);
+			name = "Start Packager";
+			outputFileListPaths = (
+			);
+			outputPaths = (
+			);
+			runOnlyForDeploymentPostprocessing = 0;
+			shellPath = /bin/sh;
+			shellScript = "export RCT_METRO_PORT=\"${RCT_METRO_PORT:=8081}\"\necho \"export RCT_METRO_PORT=${RCT_METRO_PORT}\" > \"${SRCROOT}/../node_modules/react-native/scripts/.packager.env\"\nif [ -z \"${RCT_NO_LAUNCH_PACKAGER+xxx}\" ] ; then\n  if nc -w 5 -z localhost ${RCT_METRO_PORT} ; then\n    if ! curl -s \"http://localhost:${RCT_METRO_PORT}/status\" | grep -q \"packager-status:running\" ; then\n      echo \"Port ${RCT_METRO_PORT} already in use, packager is either not running or not running correctly\"\n      exit 2\n    fi\n  else\n    open \"$SRCROOT/../node_modules/react-native/scripts/launchPackager.command\" || echo \"Can't start packager automatically\"\n  fi\nfi\n";
+			showEnvVarsInLog = 0;
+		};
+		FD10A7F122414F3F0027D42C /* Start Packager */ = {
+			isa = PBXShellScriptBuildPhase;
+			buildActionMask = 2147483647;
+			files = (
+			);
+			inputFileListPaths = (
+			);
+			inputPaths = (
+			);
+			name = "Start Packager";
+			outputFileListPaths = (
+			);
+			outputPaths = (
+			);
+			runOnlyForDeploymentPostprocessing = 0;
+			shellPath = /bin/sh;
+			shellScript = "export RCT_METRO_PORT=\"${RCT_METRO_PORT:=8081}\"\necho \"export RCT_METRO_PORT=${RCT_METRO_PORT}\" > \"${SRCROOT}/../node_modules/react-native/scripts/.packager.env\"\nif [ -z \"${RCT_NO_LAUNCH_PACKAGER+xxx}\" ] ; then\n  if nc -w 5 -z localhost ${RCT_METRO_PORT} ; then\n    if ! curl -s \"http://localhost:${RCT_METRO_PORT}/status\" | grep -q \"packager-status:running\" ; then\n      echo \"Port ${RCT_METRO_PORT} already in use, packager is either not running or not running correctly\"\n      exit 2\n    fi\n  else\n    open \"$SRCROOT/../node_modules/react-native/scripts/launchPackager.command\" || echo \"Can't start packager automatically\"\n  fi\nfi\n";
+			showEnvVarsInLog = 0;
+		};
+/* End PBXShellScriptBuildPhase section */
+
+/* Begin PBXSourcesBuildPhase section */
+		00E356EA1AD99517003FC87E /* Sources */ = {
+			isa = PBXSourcesBuildPhase;
+			buildActionMask = 2147483647;
+			files = (
+				00E356F31AD99517003FC87E /* O_HomeTests.m in Sources */,
+			);
+			runOnlyForDeploymentPostprocessing = 0;
+		};
+		13B07F871A680F5B00A75B9A /* Sources */ = {
+			isa = PBXSourcesBuildPhase;
+			buildActionMask = 2147483647;
+			files = (
+				13B07FBC1A68108700A75B9A /* AppDelegate.m in Sources */,
+				13B07FC11A68108700A75B9A /* main.m in Sources */,
+			);
+			runOnlyForDeploymentPostprocessing = 0;
+		};
+		2D02E4771E0B4A5D006451C7 /* Sources */ = {
+			isa = PBXSourcesBuildPhase;
+			buildActionMask = 2147483647;
+			files = (
+				2D02E4BF1E0B4AB3006451C7 /* main.m in Sources */,
+				2D02E4BC1E0B4A80006451C7 /* AppDelegate.m in Sources */,
+			);
+			runOnlyForDeploymentPostprocessing = 0;
+		};
+		2D02E48C1E0B4A5D006451C7 /* Sources */ = {
+			isa = PBXSourcesBuildPhase;
+			buildActionMask = 2147483647;
+			files = (
+				2DCD954D1E0B4F2C00145EB5 /* O_HomeTests.m in Sources */,
+			);
+			runOnlyForDeploymentPostprocessing = 0;
+		};
+/* End PBXSourcesBuildPhase section */
+
+/* Begin PBXTargetDependency section */
+		00E356F51AD99517003FC87E /* PBXTargetDependency */ = {
+			isa = PBXTargetDependency;
+			target = 13B07F861A680F5B00A75B9A /* O_Home */;
+			targetProxy = 00E356F41AD99517003FC87E /* PBXContainerItemProxy */;
+		};
+		2D02E4921E0B4A5D006451C7 /* PBXTargetDependency */ = {
+			isa = PBXTargetDependency;
+			target = 2D02E47A1E0B4A5D006451C7 /* O_Home-tvOS */;
+			targetProxy = 2D02E4911E0B4A5D006451C7 /* PBXContainerItemProxy */;
+		};
+/* End PBXTargetDependency section */
+
+/* Begin XCBuildConfiguration section */
+		00E356F61AD99517003FC87E /* Debug */ = {
+			isa = XCBuildConfiguration;
+			buildSettings = {
+				BUNDLE_LOADER = "$(TEST_HOST)";
+				GCC_PREPROCESSOR_DEFINITIONS = (
+					"DEBUG=1",
+					"$(inherited)",
+				);
+				INFOPLIST_FILE = O_HomeTests/Info.plist;
+				IPHONEOS_DEPLOYMENT_TARGET = 10.0;
+				LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks @loader_path/Frameworks";
+				OTHER_LDFLAGS = (
+					"-ObjC",
+					"-lc++",
+					"$(inherited)",
+				);
+				PRODUCT_BUNDLE_IDENTIFIER = "org.reactjs.native.example.$(PRODUCT_NAME:rfc1034identifier)";
+				PRODUCT_NAME = "$(TARGET_NAME)";
+				TEST_HOST = "$(BUILT_PRODUCTS_DIR)/O_Home.app/O_Home";
+			};
+			name = Debug;
+		};
+		00E356F71AD99517003FC87E /* Release */ = {
+			isa = XCBuildConfiguration;
+			buildSettings = {
+				BUNDLE_LOADER = "$(TEST_HOST)";
+				COPY_PHASE_STRIP = NO;
+				INFOPLIST_FILE = O_HomeTests/Info.plist;
+				IPHONEOS_DEPLOYMENT_TARGET = 10.0;
+				LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks @loader_path/Frameworks";
+				OTHER_LDFLAGS = (
+					"-ObjC",
+					"-lc++",
+					"$(inherited)",
+				);
+				PRODUCT_BUNDLE_IDENTIFIER = "org.reactjs.native.example.$(PRODUCT_NAME:rfc1034identifier)";
+				PRODUCT_NAME = "$(TARGET_NAME)";
+				TEST_HOST = "$(BUILT_PRODUCTS_DIR)/O_Home.app/O_Home";
+			};
+			name = Release;
+		};
+		13B07F941A680F5B00A75B9A /* Debug */ = {
+			isa = XCBuildConfiguration;
+			buildSettings = {
+				ASSETCATALOG_COMPILER_APPICON_NAME = AppIcon;
+				CLANG_ENABLE_MODULES = YES;
+				CURRENT_PROJECT_VERSION = 1;
+				ENABLE_BITCODE = NO;
+				INFOPLIST_FILE = O_Home/Info.plist;
+				LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks";
+				OTHER_LDFLAGS = (
+					"$(inherited)",
+					"-ObjC",
+					"-lc++",
+				);
+				PRODUCT_BUNDLE_IDENTIFIER = "org.reactjs.native.example.$(PRODUCT_NAME:rfc1034identifier)";
+				PRODUCT_NAME = O_Home;
+				SWIFT_OPTIMIZATION_LEVEL = "-Onone";
+				SWIFT_VERSION = 5.0;
+				VERSIONING_SYSTEM = "apple-generic";
+			};
+			name = Debug;
+		};
+		13B07F951A680F5B00A75B9A /* Release */ = {
+			isa = XCBuildConfiguration;
+			buildSettings = {
+				ASSETCATALOG_COMPILER_APPICON_NAME = AppIcon;
+				CLANG_ENABLE_MODULES = YES;
+				CURRENT_PROJECT_VERSION = 1;
+				INFOPLIST_FILE = O_Home/Info.plist;
+				LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks";
+				OTHER_LDFLAGS = (
+					"$(inherited)",
+					"-ObjC",
+					"-lc++",
+				);
+				PRODUCT_BUNDLE_IDENTIFIER = "org.reactjs.native.example.$(PRODUCT_NAME:rfc1034identifier)";
+				PRODUCT_NAME = O_Home;
+				SWIFT_VERSION = 5.0;
+				VERSIONING_SYSTEM = "apple-generic";
+			};
+			name = Release;
+		};
+		2D02E4971E0B4A5E006451C7 /* Debug */ = {
+			isa = XCBuildConfiguration;
+			buildSettings = {
+				ASSETCATALOG_COMPILER_APPICON_NAME = "App Icon & Top Shelf Image";
+				ASSETCATALOG_COMPILER_LAUNCHIMAGE_NAME = LaunchImage;
+				CLANG_ANALYZER_NONNULL = YES;
+				CLANG_WARN_DOCUMENTATION_COMMENTS = YES;
+				CLANG_WARN_INFINITE_RECURSION = YES;
+				CLANG_WARN_SUSPICIOUS_MOVE = YES;
+				DEBUG_INFORMATION_FORMAT = dwarf;
+				ENABLE_TESTABILITY = YES;
+				GCC_NO_COMMON_BLOCKS = YES;
+				INFOPLIST_FILE = "O_Home-tvOS/Info.plist";
+				LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks";
+				OTHER_LDFLAGS = (
+					"$(inherited)",
+					"-ObjC",
+					"-lc++",
+				);
+				PRODUCT_BUNDLE_IDENTIFIER = "org.reactjs.native.example.O_Home-tvOS";
+				PRODUCT_NAME = "$(TARGET_NAME)";
+				SDKROOT = appletvos;
+				TARGETED_DEVICE_FAMILY = 3;
+				TVOS_DEPLOYMENT_TARGET = 10.0;
+			};
+			name = Debug;
+		};
+		2D02E4981E0B4A5E006451C7 /* Release */ = {
+			isa = XCBuildConfiguration;
+			buildSettings = {
+				ASSETCATALOG_COMPILER_APPICON_NAME = "App Icon & Top Shelf Image";
+				ASSETCATALOG_COMPILER_LAUNCHIMAGE_NAME = LaunchImage;
+				CLANG_ANALYZER_NONNULL = YES;
+				CLANG_WARN_DOCUMENTATION_COMMENTS = YES;
+				CLANG_WARN_INFINITE_RECURSION = YES;
+				CLANG_WARN_SUSPICIOUS_MOVE = YES;
+				COPY_PHASE_STRIP = NO;
+				DEBUG_INFORMATION_FORMAT = "dwarf-with-dsym";
+				GCC_NO_COMMON_BLOCKS = YES;
+				INFOPLIST_FILE = "O_Home-tvOS/Info.plist";
+				LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks";
+				OTHER_LDFLAGS = (
+					"$(inherited)",
+					"-ObjC",
+					"-lc++",
+				);
+				PRODUCT_BUNDLE_IDENTIFIER = "org.reactjs.native.example.O_Home-tvOS";
+				PRODUCT_NAME = "$(TARGET_NAME)";
+				SDKROOT = appletvos;
+				TARGETED_DEVICE_FAMILY = 3;
+				TVOS_DEPLOYMENT_TARGET = 10.0;
+			};
+			name = Release;
+		};
+		2D02E4991E0B4A5E006451C7 /* Debug */ = {
+			isa = XCBuildConfiguration;
+			buildSettings = {
+				BUNDLE_LOADER = "$(TEST_HOST)";
+				CLANG_ANALYZER_NONNULL = YES;
+				CLANG_WARN_DOCUMENTATION_COMMENTS = YES;
+				CLANG_WARN_INFINITE_RECURSION = YES;
+				CLANG_WARN_SUSPICIOUS_MOVE = YES;
+				DEBUG_INFORMATION_FORMAT = dwarf;
+				ENABLE_TESTABILITY = YES;
+				GCC_NO_COMMON_BLOCKS = YES;
+				INFOPLIST_FILE = "O_Home-tvOSTests/Info.plist";
+				LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks @loader_path/Frameworks";
+				OTHER_LDFLAGS = (
+					"$(inherited)",
+					"-ObjC",
+					"-lc++",
+				);
+				PRODUCT_BUNDLE_IDENTIFIER = "org.reactjs.native.example.O_Home-tvOSTests";
+				PRODUCT_NAME = "$(TARGET_NAME)";
+				SDKROOT = appletvos;
+				TEST_HOST = "$(BUILT_PRODUCTS_DIR)/O_Home-tvOS.app/O_Home-tvOS";
+				TVOS_DEPLOYMENT_TARGET = 10.1;
+			};
+			name = Debug;
+		};
+		2D02E49A1E0B4A5E006451C7 /* Release */ = {
+			isa = XCBuildConfiguration;
+			buildSettings = {
+				BUNDLE_LOADER = "$(TEST_HOST)";
+				CLANG_ANALYZER_NONNULL = YES;
+				CLANG_WARN_DOCUMENTATION_COMMENTS = YES;
+				CLANG_WARN_INFINITE_RECURSION = YES;
+				CLANG_WARN_SUSPICIOUS_MOVE = YES;
+				COPY_PHASE_STRIP = NO;
+				DEBUG_INFORMATION_FORMAT = "dwarf-with-dsym";
+				GCC_NO_COMMON_BLOCKS = YES;
+				INFOPLIST_FILE = "O_Home-tvOSTests/Info.plist";
+				LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks @loader_path/Frameworks";
+				OTHER_LDFLAGS = (
+					"$(inherited)",
+					"-ObjC",
+					"-lc++",
+				);
+				PRODUCT_BUNDLE_IDENTIFIER = "org.reactjs.native.example.O_Home-tvOSTests";
+				PRODUCT_NAME = "$(TARGET_NAME)";
+				SDKROOT = appletvos;
+				TEST_HOST = "$(BUILT_PRODUCTS_DIR)/O_Home-tvOS.app/O_Home-tvOS";
+				TVOS_DEPLOYMENT_TARGET = 10.1;
+			};
+			name = Release;
+		};
+		83CBBA201A601CBA00E9B192 /* Debug */ = {
+			isa = XCBuildConfiguration;
+			buildSettings = {
+				ALWAYS_SEARCH_USER_PATHS = NO;
+				CLANG_ANALYZER_LOCALIZABILITY_NONLOCALIZED = YES;
+				CLANG_CXX_LANGUAGE_STANDARD = "gnu++0x";
+				CLANG_CXX_LIBRARY = "libc++";
+				CLANG_ENABLE_MODULES = YES;
+				CLANG_ENABLE_OBJC_ARC = YES;
+				CLANG_WARN_BLOCK_CAPTURE_AUTORELEASING = YES;
+				CLANG_WARN_BOOL_CONVERSION = YES;
+				CLANG_WARN_COMMA = YES;
+				CLANG_WARN_CONSTANT_CONVERSION = YES;
+				CLANG_WARN_DEPRECATED_OBJC_IMPLEMENTATIONS = YES;
+				CLANG_WARN_DIRECT_OBJC_ISA_USAGE = YES_ERROR;
+				CLANG_WARN_EMPTY_BODY = YES;
+				CLANG_WARN_ENUM_CONVERSION = YES;
+				CLANG_WARN_INFINITE_RECURSION = YES;
+				CLANG_WARN_INT_CONVERSION = YES;
+				CLANG_WARN_NON_LITERAL_NULL_CONVERSION = YES;
+				CLANG_WARN_OBJC_IMPLICIT_RETAIN_SELF = YES;
+				CLANG_WARN_OBJC_LITERAL_CONVERSION = YES;
+				CLANG_WARN_OBJC_ROOT_CLASS = YES_ERROR;
+				CLANG_WARN_RANGE_LOOP_ANALYSIS = YES;
+				CLANG_WARN_STRICT_PROTOTYPES = YES;
+				CLANG_WARN_SUSPICIOUS_MOVE = YES;
+				CLANG_WARN_UNREACHABLE_CODE = YES;
+				CLANG_WARN__DUPLICATE_METHOD_MATCH = YES;
+				"CODE_SIGN_IDENTITY[sdk=iphoneos*]" = "iPhone Developer";
+				COPY_PHASE_STRIP = NO;
+				ENABLE_STRICT_OBJC_MSGSEND = YES;
+				ENABLE_TESTABILITY = YES;
+				GCC_C_LANGUAGE_STANDARD = gnu99;
+				GCC_DYNAMIC_NO_PIC = NO;
+				GCC_NO_COMMON_BLOCKS = YES;
+				GCC_OPTIMIZATION_LEVEL = 0;
+				GCC_PREPROCESSOR_DEFINITIONS = (
+					"DEBUG=1",
+					"$(inherited)",
+				);
+				GCC_SYMBOLS_PRIVATE_EXTERN = NO;
+				GCC_WARN_64_TO_32_BIT_CONVERSION = YES;
+				GCC_WARN_ABOUT_RETURN_TYPE = YES_ERROR;
+				GCC_WARN_UNDECLARED_SELECTOR = YES;
+				GCC_WARN_UNINITIALIZED_AUTOS = YES_AGGRESSIVE;
+				GCC_WARN_UNUSED_FUNCTION = YES;
+				GCC_WARN_UNUSED_VARIABLE = YES;
+				IPHONEOS_DEPLOYMENT_TARGET = 10.0;
+				LD_RUNPATH_SEARCH_PATHS = "/usr/lib/swift $(inherited)";
+				LIBRARY_SEARCH_PATHS = (
+					"\"$(TOOLCHAIN_DIR)/usr/lib/swift/$(PLATFORM_NAME)\"",
+					"\"$(TOOLCHAIN_DIR)/usr/lib/swift-5.0/$(PLATFORM_NAME)\"",
+					"\"$(inherited)\"",
+				);
+				MTL_ENABLE_DEBUG_INFO = YES;
+				ONLY_ACTIVE_ARCH = YES;
+				SDKROOT = iphoneos;
+			};
+			name = Debug;
+		};
+		83CBBA211A601CBA00E9B192 /* Release */ = {
+			isa = XCBuildConfiguration;
+			buildSettings = {
+				ALWAYS_SEARCH_USER_PATHS = NO;
+				CLANG_ANALYZER_LOCALIZABILITY_NONLOCALIZED = YES;
+				CLANG_CXX_LANGUAGE_STANDARD = "gnu++0x";
+				CLANG_CXX_LIBRARY = "libc++";
+				CLANG_ENABLE_MODULES = YES;
+				CLANG_ENABLE_OBJC_ARC = YES;
+				CLANG_WARN_BLOCK_CAPTURE_AUTORELEASING = YES;
+				CLANG_WARN_BOOL_CONVERSION = YES;
+				CLANG_WARN_COMMA = YES;
+				CLANG_WARN_CONSTANT_CONVERSION = YES;
+				CLANG_WARN_DEPRECATED_OBJC_IMPLEMENTATIONS = YES;
+				CLANG_WARN_DIRECT_OBJC_ISA_USAGE = YES_ERROR;
+				CLANG_WARN_EMPTY_BODY = YES;
+				CLANG_WARN_ENUM_CONVERSION = YES;
+				CLANG_WARN_INFINITE_RECURSION = YES;
+				CLANG_WARN_INT_CONVERSION = YES;
+				CLANG_WARN_NON_LITERAL_NULL_CONVERSION = YES;
+				CLANG_WARN_OBJC_IMPLICIT_RETAIN_SELF = YES;
+				CLANG_WARN_OBJC_LITERAL_CONVERSION = YES;
+				CLANG_WARN_OBJC_ROOT_CLASS = YES_ERROR;
+				CLANG_WARN_RANGE_LOOP_ANALYSIS = YES;
+				CLANG_WARN_STRICT_PROTOTYPES = YES;
+				CLANG_WARN_SUSPICIOUS_MOVE = YES;
+				CLANG_WARN_UNREACHABLE_CODE = YES;
+				CLANG_WARN__DUPLICATE_METHOD_MATCH = YES;
+				"CODE_SIGN_IDENTITY[sdk=iphoneos*]" = "iPhone Developer";
+				COPY_PHASE_STRIP = YES;
+				ENABLE_NS_ASSERTIONS = NO;
+				ENABLE_STRICT_OBJC_MSGSEND = YES;
+				GCC_C_LANGUAGE_STANDARD = gnu99;
+				GCC_NO_COMMON_BLOCKS = YES;
+				GCC_WARN_64_TO_32_BIT_CONVERSION = YES;
+				GCC_WARN_ABOUT_RETURN_TYPE = YES_ERROR;
+				GCC_WARN_UNDECLARED_SELECTOR = YES;
+				GCC_WARN_UNINITIALIZED_AUTOS = YES_AGGRESSIVE;
+				GCC_WARN_UNUSED_FUNCTION = YES;
+				GCC_WARN_UNUSED_VARIABLE = YES;
+				IPHONEOS_DEPLOYMENT_TARGET = 10.0;
+				LD_RUNPATH_SEARCH_PATHS = "/usr/lib/swift $(inherited)";
+				LIBRARY_SEARCH_PATHS = (
+					"\"$(TOOLCHAIN_DIR)/usr/lib/swift/$(PLATFORM_NAME)\"",
+					"\"$(TOOLCHAIN_DIR)/usr/lib/swift-5.0/$(PLATFORM_NAME)\"",
+					"\"$(inherited)\"",
+				);
+				MTL_ENABLE_DEBUG_INFO = NO;
+				SDKROOT = iphoneos;
+				VALIDATE_PRODUCT = YES;
+			};
+			name = Release;
+		};
+/* End XCBuildConfiguration section */
+
+/* Begin XCConfigurationList section */
+		00E357021AD99517003FC87E /* Build configuration list for PBXNativeTarget "O_HomeTests" */ = {
+			isa = XCConfigurationList;
+			buildConfigurations = (
+				00E356F61AD99517003FC87E /* Debug */,
+				00E356F71AD99517003FC87E /* Release */,
+			);
+			defaultConfigurationIsVisible = 0;
+			defaultConfigurationName = Release;
+		};
+		13B07F931A680F5B00A75B9A /* Build configuration list for PBXNativeTarget "O_Home" */ = {
+			isa = XCConfigurationList;
+			buildConfigurations = (
+				13B07F941A680F5B00A75B9A /* Debug */,
+				13B07F951A680F5B00A75B9A /* Release */,
+			);
+			defaultConfigurationIsVisible = 0;
+			defaultConfigurationName = Release;
+		};
+		2D02E4BA1E0B4A5E006451C7 /* Build configuration list for PBXNativeTarget "O_Home-tvOS" */ = {
+			isa = XCConfigurationList;
+			buildConfigurations = (
+				2D02E4971E0B4A5E006451C7 /* Debug */,
+				2D02E4981E0B4A5E006451C7 /* Release */,
+			);
+			defaultConfigurationIsVisible = 0;
+			defaultConfigurationName = Release;
+		};
+		2D02E4BB1E0B4A5E006451C7 /* Build configuration list for PBXNativeTarget "O_Home-tvOSTests" */ = {
+			isa = XCConfigurationList;
+			buildConfigurations = (
+				2D02E4991E0B4A5E006451C7 /* Debug */,
+				2D02E49A1E0B4A5E006451C7 /* Release */,
+			);
+			defaultConfigurationIsVisible = 0;
+			defaultConfigurationName = Release;
+		};
+		83CBB9FA1A601CBA00E9B192 /* Build configuration list for PBXProject "O_Home" */ = {
+			isa = XCConfigurationList;
+			buildConfigurations = (
+				83CBBA201A601CBA00E9B192 /* Debug */,
+				83CBBA211A601CBA00E9B192 /* Release */,
+			);
+			defaultConfigurationIsVisible = 0;
+			defaultConfigurationName = Release;
+		};
+/* End XCConfigurationList section */
+	};
+	rootObject = 83CBB9F71A601CBA00E9B192 /* Project object */;
+}
--- a/ios/O_Home.xcodeproj/xcshareddata/xcschemes/O_Home-tvOS.xcscheme
+++ b/ios/O_Home.xcodeproj/xcshareddata/xcschemes/O_Home-tvOS.xcscheme
@@ -0,0 +1,88 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<Scheme
+   LastUpgradeVersion = "1130"
+   version = "1.3">
+   <BuildAction
+      parallelizeBuildables = "YES"
+      buildImplicitDependencies = "YES">
+      <BuildActionEntries>
+         <BuildActionEntry
+            buildForTesting = "YES"
+            buildForRunning = "YES"
+            buildForProfiling = "YES"
+            buildForArchiving = "YES"
+            buildForAnalyzing = "YES">
+            <BuildableReference
+               BuildableIdentifier = "primary"
+               BlueprintIdentifier = "2D02E47A1E0B4A5D006451C7"
+               BuildableName = "O_Home-tvOS.app"
+               BlueprintName = "O_Home-tvOS"
+               ReferencedContainer = "container:O_Home.xcodeproj">
+            </BuildableReference>
+         </BuildActionEntry>
+      </BuildActionEntries>
+   </BuildAction>
+   <TestAction
+      buildConfiguration = "Debug"
+      selectedDebuggerIdentifier = "Xcode.DebuggerFoundation.Debugger.LLDB"
+      selectedLauncherIdentifier = "Xcode.DebuggerFoundation.Launcher.LLDB"
+      shouldUseLaunchSchemeArgsEnv = "YES">
+      <Testables>
+         <TestableReference
+            skipped = "NO">
+            <BuildableReference
+               BuildableIdentifier = "primary"
+               BlueprintIdentifier = "2D02E48F1E0B4A5D006451C7"
+               BuildableName = "O_Home-tvOSTests.xctest"
+               BlueprintName = "O_Home-tvOSTests"
+               ReferencedContainer = "container:O_Home.xcodeproj">
+            </BuildableReference>
+         </TestableReference>
+      </Testables>
+   </TestAction>
+   <LaunchAction
+      buildConfiguration = "Debug"
+      selectedDebuggerIdentifier = "Xcode.DebuggerFoundation.Debugger.LLDB"
+      selectedLauncherIdentifier = "Xcode.DebuggerFoundation.Launcher.LLDB"
+      launchStyle = "0"
+      useCustomWorkingDirectory = "NO"
+      ignoresPersistentStateOnLaunch = "NO"
+      debugDocumentVersioning = "YES"
+      debugServiceExtension = "internal"
+      allowLocationSimulation = "YES">
+      <BuildableProductRunnable
+         runnableDebuggingMode = "0">
+         <BuildableReference
+            BuildableIdentifier = "primary"
+            BlueprintIdentifier = "2D02E47A1E0B4A5D006451C7"
+            BuildableName = "O_Home-tvOS.app"
+            BlueprintName = "O_Home-tvOS"
+            ReferencedContainer = "container:O_Home.xcodeproj">
+         </BuildableReference>
+      </BuildableProductRunnable>
+   </LaunchAction>
+   <ProfileAction
+      buildConfiguration = "Release"
+      shouldUseLaunchSchemeArgsEnv = "YES"
+      savedToolIdentifier = ""
+      useCustomWorkingDirectory = "NO"
+      debugDocumentVersioning = "YES">
+      <BuildableProductRunnable
+         runnableDebuggingMode = "0">
+         <BuildableReference
+            BuildableIdentifier = "primary"
+            BlueprintIdentifier = "2D02E47A1E0B4A5D006451C7"
+            BuildableName = "O_Home-tvOS.app"
+            BlueprintName = "O_Home-tvOS"
+            ReferencedContainer = "container:O_Home.xcodeproj">
+         </BuildableReference>
+      </BuildableProductRunnable>
+   </ProfileAction>
+   <AnalyzeAction
+      buildConfiguration = "Debug">
+   </AnalyzeAction>
+   <ArchiveAction
+      buildConfiguration = "Release"
+      revealArchiveInOrganizer = "YES">
+   </ArchiveAction>
+</Scheme>
--- a/ios/O_Home.xcodeproj/xcshareddata/xcschemes/O_Home.xcscheme
+++ b/ios/O_Home.xcodeproj/xcshareddata/xcschemes/O_Home.xcscheme
@@ -0,0 +1,88 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<Scheme
+   LastUpgradeVersion = "1130"
+   version = "1.3">
+   <BuildAction
+      parallelizeBuildables = "YES"
+      buildImplicitDependencies = "YES">
+      <BuildActionEntries>
+         <BuildActionEntry
+            buildForTesting = "YES"
+            buildForRunning = "YES"
+            buildForProfiling = "YES"
+            buildForArchiving = "YES"
+            buildForAnalyzing = "YES">
+            <BuildableReference
+               BuildableIdentifier = "primary"
+               BlueprintIdentifier = "13B07F861A680F5B00A75B9A"
+               BuildableName = "O_Home.app"
+               BlueprintName = "O_Home"
+               ReferencedContainer = "container:O_Home.xcodeproj">
+            </BuildableReference>
+         </BuildActionEntry>
+      </BuildActionEntries>
+   </BuildAction>
+   <TestAction
+      buildConfiguration = "Debug"
+      selectedDebuggerIdentifier = "Xcode.DebuggerFoundation.Debugger.LLDB"
+      selectedLauncherIdentifier = "Xcode.DebuggerFoundation.Launcher.LLDB"
+      shouldUseLaunchSchemeArgsEnv = "YES">
+      <Testables>
+         <TestableReference
+            skipped = "NO">
+            <BuildableReference
+               BuildableIdentifier = "primary"
+               BlueprintIdentifier = "00E356ED1AD99517003FC87E"
+               BuildableName = "O_HomeTests.xctest"
+               BlueprintName = "O_HomeTests"
+               ReferencedContainer = "container:O_Home.xcodeproj">
+            </BuildableReference>
+         </TestableReference>
+      </Testables>
+   </TestAction>
+   <LaunchAction
+      buildConfiguration = "Debug"
+      selectedDebuggerIdentifier = "Xcode.DebuggerFoundation.Debugger.LLDB"
+      selectedLauncherIdentifier = "Xcode.DebuggerFoundation.Launcher.LLDB"
+      launchStyle = "0"
+      useCustomWorkingDirectory = "NO"
+      ignoresPersistentStateOnLaunch = "NO"
+      debugDocumentVersioning = "YES"
+      debugServiceExtension = "internal"
+      allowLocationSimulation = "YES">
+      <BuildableProductRunnable
+         runnableDebuggingMode = "0">
+         <BuildableReference
+            BuildableIdentifier = "primary"
+            BlueprintIdentifier = "13B07F861A680F5B00A75B9A"
+            BuildableName = "O_Home.app"
+            BlueprintName = "O_Home"
+            ReferencedContainer = "container:O_Home.xcodeproj">
+         </BuildableReference>
+      </BuildableProductRunnable>
+   </LaunchAction>
+   <ProfileAction
+      buildConfiguration = "Release"
+      shouldUseLaunchSchemeArgsEnv = "YES"
+      savedToolIdentifier = ""
+      useCustomWorkingDirectory = "NO"
+      debugDocumentVersioning = "YES">
+      <BuildableProductRunnable
+         runnableDebuggingMode = "0">
+         <BuildableReference
+            BuildableIdentifier = "primary"
+            BlueprintIdentifier = "13B07F861A680F5B00A75B9A"
+            BuildableName = "O_Home.app"
+            BlueprintName = "O_Home"
+            ReferencedContainer = "container:O_Home.xcodeproj">
+         </BuildableReference>
+      </BuildableProductRunnable>
+   </ProfileAction>
+   <AnalyzeAction
+      buildConfiguration = "Debug">
+   </AnalyzeAction>
+   <ArchiveAction
+      buildConfiguration = "Release"
+      revealArchiveInOrganizer = "YES">
+   </ArchiveAction>
+</Scheme>
--- a/ios/O_Home/AppDelegate.h
+++ b/ios/O_Home/AppDelegate.h
@@ -0,0 +1,8 @@
+#import <React/RCTBridgeDelegate.h>
+#import <UIKit/UIKit.h>
+
+@interface AppDelegate : UIResponder <UIApplicationDelegate, RCTBridgeDelegate>
+
+@property (nonatomic, strong) UIWindow *window;
+
+@end
--- a/ios/O_Home/AppDelegate.m
+++ b/ios/O_Home/AppDelegate.m
@@ -0,0 +1,58 @@
+#import "AppDelegate.h"
+
+#import <React/RCTBridge.h>
+#import <React/RCTBundleURLProvider.h>
+#import <React/RCTRootView.h>
+
+#ifdef FB_SONARKIT_ENABLED
+#import <FlipperKit/FlipperClient.h>
+#import <FlipperKitLayoutPlugin/FlipperKitLayoutPlugin.h>
+#import <FlipperKitUserDefaultsPlugin/FKUserDefaultsPlugin.h>
+#import <FlipperKitNetworkPlugin/FlipperKitNetworkPlugin.h>
+#import <SKIOSNetworkPlugin/SKIOSNetworkAdapter.h>
+#import <FlipperKitReactPlugin/FlipperKitReactPlugin.h>
+
+static void InitializeFlipper(UIApplication *application) {
+  FlipperClient *client = [FlipperClient sharedClient];
+  SKDescriptorMapper *layoutDescriptorMapper = [[SKDescriptorMapper alloc] initWithDefaults];
+  [client addPlugin:[[FlipperKitLayoutPlugin alloc] initWithRootNode:application withDescriptorMapper:layoutDescriptorMapper]];
+  [client addPlugin:[[FKUserDefaultsPlugin alloc] initWithSuiteName:nil]];
+  [client addPlugin:[FlipperKitReactPlugin new]];
+  [client addPlugin:[[FlipperKitNetworkPlugin alloc] initWithNetworkAdapter:[SKIOSNetworkAdapter new]]];
+  [client start];
+}
+#endif
+
+@implementation AppDelegate
+
+- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
+{
+#ifdef FB_SONARKIT_ENABLED
+  InitializeFlipper(application);
+#endif
+
+  RCTBridge *bridge = [[RCTBridge alloc] initWithDelegate:self launchOptions:launchOptions];
+  RCTRootView *rootView = [[RCTRootView alloc] initWithBridge:bridge
+                                                   moduleName:@"O_Home"
+                                            initialProperties:nil];
+
+  rootView.backgroundColor = [[UIColor alloc] initWithRed:1.0f green:1.0f blue:1.0f alpha:1];
+
+  self.window = [[UIWindow alloc] initWithFrame:[UIScreen mainScreen].bounds];
+  UIViewController *rootViewController = [UIViewController new];
+  rootViewController.view = rootView;
+  self.window.rootViewController = rootViewController;
+  [self.window makeKeyAndVisible];
+  return YES;
+}
+
+- (NSURL *)sourceURLForBridge:(RCTBridge *)bridge
+{
+#if DEBUG
+  return [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index" fallbackResource:nil];
+#else
+  return [[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"];
+#endif
+}
+
+@end
--- a/ios/O_Home/Images.xcassets/AppIcon.appiconset/Contents.json
+++ b/ios/O_Home/Images.xcassets/AppIcon.appiconset/Contents.json
@@ -0,0 +1,38 @@
+{
+  "images" : [
+    {
+      "idiom" : "iphone",
+      "size" : "29x29",
+      "scale" : "2x"
+    },
+    {
+      "idiom" : "iphone",
+      "size" : "29x29",
+      "scale" : "3x"
+    },
+    {
+      "idiom" : "iphone",
+      "size" : "40x40",
+      "scale" : "2x"
+    },
+    {
+      "idiom" : "iphone",
+      "size" : "40x40",
+      "scale" : "3x"
+    },
+    {
+      "idiom" : "iphone",
+      "size" : "60x60",
+      "scale" : "2x"
+    },
+    {
+      "idiom" : "iphone",
+      "size" : "60x60",
+      "scale" : "3x"
+    }
+  ],
+  "info" : {
+    "version" : 1,
+    "author" : "xcode"
+  }
+}
--- a/ios/O_Home/Images.xcassets/Contents.json
+++ b/ios/O_Home/Images.xcassets/Contents.json
@@ -0,0 +1,6 @@
+{
+  "info" : {
+    "version" : 1,
+    "author" : "xcode"
+  }
+}
--- a/ios/O_Home/Info.plist
+++ b/ios/O_Home/Info.plist
@@ -0,0 +1,57 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
+<plist version="1.0">
+<dict>
+	<key>CFBundleDevelopmentRegion</key>
+	<string>en</string>
+	<key>CFBundleDisplayName</key>
+	<string>O_Home</string>
+	<key>CFBundleExecutable</key>
+	<string>$(EXECUTABLE_NAME)</string>
+	<key>CFBundleIdentifier</key>
+	<string>$(PRODUCT_BUNDLE_IDENTIFIER)</string>
+	<key>CFBundleInfoDictionaryVersion</key>
+	<string>6.0</string>
+	<key>CFBundleName</key>
+	<string>$(PRODUCT_NAME)</string>
+	<key>CFBundlePackageType</key>
+	<string>APPL</string>
+	<key>CFBundleShortVersionString</key>
+	<string>1.0</string>
+	<key>CFBundleSignature</key>
+	<string>????</string>
+	<key>CFBundleVersion</key>
+	<string>1</string>
+	<key>LSRequiresIPhoneOS</key>
+	<true/>
+	<key>NSAppTransportSecurity</key>
+	<dict>
+		<key>NSAllowsArbitraryLoads</key>
+		<true/>
+		<key>NSExceptionDomains</key>
+		<dict>
+			<key>localhost</key>
+			<dict>
+				<key>NSExceptionAllowsInsecureHTTPLoads</key>
+				<true/>
+			</dict>
+		</dict>
+	</dict>
+	<key>NSLocationWhenInUseUsageDescription</key>
+	<string></string>
+	<key>UILaunchStoryboardName</key>
+	<string>LaunchScreen</string>
+	<key>UIRequiredDeviceCapabilities</key>
+	<array>
+		<string>armv7</string>
+	</array>
+	<key>UISupportedInterfaceOrientations</key>
+	<array>
+		<string>UIInterfaceOrientationPortrait</string>
+		<string>UIInterfaceOrientationLandscapeLeft</string>
+		<string>UIInterfaceOrientationLandscapeRight</string>
+	</array>
+	<key>UIViewControllerBasedStatusBarAppearance</key>
+	<false/>
+</dict>
+</plist>
--- a/ios/O_Home/LaunchScreen.storyboard
+++ b/ios/O_Home/LaunchScreen.storyboard
@@ -0,0 +1,58 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<document type="com.apple.InterfaceBuilder3.CocoaTouch.Storyboard.XIB" version="3.0" toolsVersion="15702" targetRuntime="iOS.CocoaTouch" propertyAccessControl="none" useAutolayout="YES" launchScreen="YES" useTraitCollections="YES" useSafeAreas="YES" colorMatched="YES" initialViewController="01J-lp-oVM">
+    <device id="retina4_7" orientation="portrait" appearance="light"/>
+    <dependencies>
+        <deployment identifier="iOS"/>
+        <plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="15704"/>
+        <capability name="Safe area layout guides" minToolsVersion="9.0"/>
+        <capability name="documents saved in the Xcode 8 format" minToolsVersion="8.0"/>
+    </dependencies>
+    <scenes>
+        <!--View Controller-->
+        <scene sceneID="EHf-IW-A2E">
+            <objects>
+                <viewController id="01J-lp-oVM" sceneMemberID="viewController">
+                    <view key="view" contentMode="scaleToFill" id="Ze5-6b-2t3">
+                        <rect key="frame" x="0.0" y="0.0" width="375" height="667"/>
+                        <autoresizingMask key="autoresizingMask" widthSizable="YES" heightSizable="YES"/>
+                        <subviews>
+                            <label opaque="NO" clipsSubviews="YES" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" text="" textAlignment="center" lineBreakMode="tailTruncation" baselineAdjustment="alignBaselines" minimumFontSize="9" translatesAutoresizingMaskIntoConstraints="NO" id="obG-Y5-kRd">
+                                <rect key="frame" x="0.0" y="647" width="375" height="0.0"/>
+                                <fontDescription key="fontDescription" type="system" pointSize="17"/>
+                                <color key="textColor" red="0.0" green="0.0" blue="0.0" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
+                                <nil key="highlightedColor"/>
+                            </label>
+                            <label opaque="NO" clipsSubviews="YES" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" text="O_Home" textAlignment="center" lineBreakMode="middleTruncation" baselineAdjustment="alignBaselines" minimumFontSize="18" translatesAutoresizingMaskIntoConstraints="NO" id="GJd-Yh-RWb">
+                                <rect key="frame" x="0.0" y="202" width="375" height="43"/>
+                                <fontDescription key="fontDescription" type="boldSystem" pointSize="36"/>
+                                <color key="textColor" red="0.0" green="0.0" blue="0.0" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
+                                <nil key="highlightedColor"/>
+                            </label>
+                            <label opaque="NO" clipsSubviews="YES" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" text="Powered by React Native" textAlignment="center" lineBreakMode="tailTruncation" baselineAdjustment="alignBaselines" minimumFontSize="9" translatesAutoresizingMaskIntoConstraints="NO" id="MN2-I3-ftu">
+                                <rect key="frame" x="0.0" y="626" width="375" height="21"/>
+                                <fontDescription key="fontDescription" type="system" pointSize="17"/>
+                                <color key="textColor" cocoaTouchSystemColor="darkTextColor"/>
+                                <nil key="highlightedColor"/>
+                            </label>
+                        </subviews>
+                        <color key="backgroundColor" red="1" green="1" blue="1" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
+                        <constraints>
+                            <constraint firstItem="Bcu-3y-fUS" firstAttribute="centerX" secondItem="obG-Y5-kRd" secondAttribute="centerX" id="5cz-MP-9tL"/>
+                            <constraint firstItem="Bcu-3y-fUS" firstAttribute="bottom" secondItem="MN2-I3-ftu" secondAttribute="bottom" constant="20" id="OZV-Vh-mqD"/>
+                            <constraint firstItem="Bcu-3y-fUS" firstAttribute="centerX" secondItem="GJd-Yh-RWb" secondAttribute="centerX" id="Q3B-4B-g5h"/>
+                            <constraint firstItem="obG-Y5-kRd" firstAttribute="leading" secondItem="Bcu-3y-fUS" secondAttribute="leading" symbolic="YES" id="SfN-ll-jLj"/>
+                            <constraint firstAttribute="bottom" secondItem="obG-Y5-kRd" secondAttribute="bottom" constant="20" id="Y44-ml-fuU"/>
+                            <constraint firstItem="MN2-I3-ftu" firstAttribute="centerX" secondItem="Bcu-3y-fUS" secondAttribute="centerX" id="akx-eg-2ui"/>
+                            <constraint firstItem="MN2-I3-ftu" firstAttribute="leading" secondItem="Bcu-3y-fUS" secondAttribute="leading" id="i1E-0Y-4RG"/>
+                            <constraint firstItem="GJd-Yh-RWb" firstAttribute="centerY" secondItem="Ze5-6b-2t3" secondAttribute="bottom" multiplier="1/3" constant="1" id="moa-c2-u7t"/>
+                            <constraint firstItem="GJd-Yh-RWb" firstAttribute="leading" secondItem="Bcu-3y-fUS" secondAttribute="leading" symbolic="YES" id="x7j-FC-K8j"/>
+                        </constraints>
+                        <viewLayoutGuide key="safeArea" id="Bcu-3y-fUS"/>
+                    </view>
+                </viewController>
+                <placeholder placeholderIdentifier="IBFirstResponder" id="iYj-Kq-Ea1" userLabel="First Responder" sceneMemberID="firstResponder"/>
+            </objects>
+            <point key="canvasLocation" x="52.173913043478265" y="375"/>
+        </scene>
+    </scenes>
+</document>
--- a/ios/O_Home/main.m
+++ b/ios/O_Home/main.m
@@ -0,0 +1,9 @@
+#import <UIKit/UIKit.h>
+
+#import "AppDelegate.h"
+
+int main(int argc, char * argv[]) {
+  @autoreleasepool {
+    return UIApplicationMain(argc, argv, nil, NSStringFromClass([AppDelegate class]));
+  }
+}
--- a/ios/O_HomeTests/Info.plist
+++ b/ios/O_HomeTests/Info.plist
@@ -0,0 +1,24 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
+<plist version="1.0">
+<dict>
+	<key>CFBundleDevelopmentRegion</key>
+	<string>en</string>
+	<key>CFBundleExecutable</key>
+	<string>$(EXECUTABLE_NAME)</string>
+	<key>CFBundleIdentifier</key>
+	<string>$(PRODUCT_BUNDLE_IDENTIFIER)</string>
+	<key>CFBundleInfoDictionaryVersion</key>
+	<string>6.0</string>
+	<key>CFBundleName</key>
+	<string>$(PRODUCT_NAME)</string>
+	<key>CFBundlePackageType</key>
+	<string>BNDL</string>
+	<key>CFBundleShortVersionString</key>
+	<string>1.0</string>
+	<key>CFBundleSignature</key>
+	<string>????</string>
+	<key>CFBundleVersion</key>
+	<string>1</string>
+</dict>
+</plist>
--- a/ios/O_HomeTests/O_HomeTests.m
+++ b/ios/O_HomeTests/O_HomeTests.m
@@ -0,0 +1,65 @@
+#import <UIKit/UIKit.h>
+#import <XCTest/XCTest.h>
+
+#import <React/RCTLog.h>
+#import <React/RCTRootView.h>
+
+#define TIMEOUT_SECONDS 600
+#define TEXT_TO_LOOK_FOR @"Welcome to React"
+
+@interface O_HomeTests : XCTestCase
+
+@end
+
+@implementation O_HomeTests
+
+- (BOOL)findSubviewInView:(UIView *)view matching:(BOOL(^)(UIView *view))test
+{
+  if (test(view)) {
+    return YES;
+  }
+  for (UIView *subview in [view subviews]) {
+    if ([self findSubviewInView:subview matching:test]) {
+      return YES;
+    }
+  }
+  return NO;
+}
+
+- (void)testRendersWelcomeScreen
+{
+  UIViewController *vc = [[[RCTSharedApplication() delegate] window] rootViewController];
+  NSDate *date = [NSDate dateWithTimeIntervalSinceNow:TIMEOUT_SECONDS];
+  BOOL foundElement = NO;
+
+  __block NSString *redboxError = nil;
+#ifdef DEBUG
+  RCTSetLogFunction(^(RCTLogLevel level, RCTLogSource source, NSString *fileName, NSNumber *lineNumber, NSString *message) {
+    if (level >= RCTLogLevelError) {
+      redboxError = message;
+    }
+  });
+#endif
+
+  while ([date timeIntervalSinceNow] > 0 && !foundElement && !redboxError) {
+    [[NSRunLoop mainRunLoop] runMode:NSDefaultRunLoopMode beforeDate:[NSDate dateWithTimeIntervalSinceNow:0.1]];
+    [[NSRunLoop mainRunLoop] runMode:NSRunLoopCommonModes beforeDate:[NSDate dateWithTimeIntervalSinceNow:0.1]];
+
+    foundElement = [self findSubviewInView:vc.view matching:^BOOL(UIView *view) {
+      if ([view.accessibilityLabel isEqualToString:TEXT_TO_LOOK_FOR]) {
+        return YES;
+      }
+      return NO;
+    }];
+  }
+
+#ifdef DEBUG
+  RCTSetLogFunction(RCTDefaultLogFunction);
+#endif
+
+  XCTAssertNil(redboxError, @"RedBox error: %@", redboxError);
+  XCTAssertTrue(foundElement, @"Couldn't find element with text '%@' in %d seconds", TEXT_TO_LOOK_FOR, TIMEOUT_SECONDS);
+}
+
+
+@end
--- a/ios/Podfile
+++ b/ios/Podfile
@@ -0,0 +1,33 @@
+require_relative '../node_modules/react-native/scripts/react_native_pods'
+require_relative '../node_modules/@react-native-community/cli-platform-ios/native_modules'
+
+platform :ios, '10.0'
+
+target 'O_Home' do
+  config = use_native_modules!
+
+  use_react_native!(:path => config["reactNativePath"])
+
+  target 'O_HomeTests' do
+    inherit! :complete
+    # Pods for testing
+  end
+
+  # Enables Flipper.
+  #
+  # Note that if you have use_frameworks! enabled, Flipper will not work and
+  # you should disable these next few lines.
+  use_flipper!
+  post_install do |installer|
+    flipper_post_install(installer)
+  end
+end
+
+target 'O_Home-tvOS' do
+  # Pods for O_Home-tvOS
+
+  target 'O_Home-tvOSTests' do
+    inherit! :search_paths
+    # Pods for testing
+  end
+end
--- a/metro.config.js
+++ b/metro.config.js
@@ -0,0 +1,17 @@
+/**
+ * Metro configuration for React Native
+ * https://github.com/facebook/react-native
+ *
+ * @format
+ */
+
+module.exports = {
+  transformer: {
+    getTransformOptions: async () => ({
+      transform: {
+        experimentalImportSupport: false,
+        inlineRequires: false,
+      },
+    }),
+  },
+};
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -0,0 +1,45 @@
+{
+  "name": "O_Home",
+  "version": "0.0.1",
+  "private": true,
+  "scripts": {
+    "android": "react-native run-android",
+    "ios": "react-native run-ios",
+    "start": "react-native start",
+    "test": "jest",
+    "lint": "eslint ."
+  },
+  "dependencies": {
+    "@react-native-community/masked-view": "^0.1.10",
+    "@react-navigation/bottom-tabs": "^5.11.7",
+    "@react-navigation/material-bottom-tabs": "^5.3.13",
+    "@react-navigation/material-top-tabs": "^5.3.14",
+    "@react-navigation/native": "^5.9.2",
+    "@react-navigation/stack": "^5.14.2",
+    "@reduxjs/toolkit": "^1.5.0",
+    "react": "16.13.1",
+    "react-native": "0.63.4",
+    "react-native-gesture-handler": "^1.10.1",
+    "react-native-modal": "^11.7.0",
+    "react-native-paper": "^4.7.1",
+    "react-native-reanimated": "^1.13.2",
+    "react-native-safe-area-context": "^3.1.9",
+    "react-native-screens": "^2.17.1",
+    "react-native-vector-icons": "^8.0.0",
+    "react-redux": "^7.2.2",
+    "redux": "^4.0.5"
+  },
+  "devDependencies": {
+    "@babel/core": "7.12.13",
+    "@babel/runtime": "7.12.13",
+    "@react-native-community/eslint-config": "1.1.0",
+    "babel-jest": "25.5.1",
+    "eslint": "6.8.0",
+    "jest": "25.5.4",
+    "metro-react-native-babel-preset": "0.59.0",
+    "react-test-renderer": "16.13.1"
+  },
+  "jest": {
+    "preset": "react-native"
+  }
+}
--- a/src/assets/adaptive-icon.png
+++ b/src/assets/adaptive-icon.png
--- a/src/assets/buttonListIcon.png
+++ b/src/assets/buttonListIcon.png
--- a/src/assets/favicon.png
+++ b/src/assets/favicon.png
--- a/src/assets/icon.png
+++ b/src/assets/icon.png
--- a/src/assets/shoppingListIcon.png
+++ b/src/assets/shoppingListIcon.png
--- a/src/assets/splash.png
+++ b/src/assets/splash.png
--- a/src/components/O_Card_Grocery.js
+++ b/src/components/O_Card_Grocery.js
@@ -0,0 +1,39 @@
+import React from 'react';
+import { StyleSheet, Text, View, Image, TouchableOpacity } from 'react-native';
+
+//themes
+import {COLORS} from '../themes/Colors';
+
+const Header = (props) => {
+  return (
+    <TouchableOpacity style={[styles.card, {
+      height: props.height,
+      width:  props.width,
+      }]}
+      onPress={() => props.navigation.navigate('Groceries')}>
+      <Text style={styles.textHeader}> {props.text} </Text>
+      <Image source={{uri: 'https://assets.materialup.com/uploads/c0137b9f-4ecd-4433-b5e4-16fb3f437e53/EZQvllEdF47AEN6LpXopL27nCh8LiRhVHFgmUyBK05Eu7TDxSi5yThZuaI_dCCkcYgc=w300'}} 
+      style={{ width: 50,height: 50, marginTop: '5%'}}></Image>
+    </TouchableOpacity>
+  );
+}
+
+const styles = StyleSheet.create({
+  card: {
+    borderRadius: 7,
+    marginBottom: '3.5%',
+    elevation: 6,
+    backgroundColor: COLORS.dp02,
+    flexDirection:'row',
+    flexWrap: 'wrap',
+  },
+  textHeader: {
+    fontSize : 20,
+    fontFamily: 'sans-serif-medium',
+    color: COLORS.textW0,
+    paddingTop: 5,
+    paddingLeft: 5,
+  },
+});
+
+export default Header;
--- a/src/components/groceryComponents/GroceryListButtons.js
+++ b/src/components/groceryComponents/GroceryListButtons.js
@@ -0,0 +1,77 @@
+import React, { useState } from 'react';
+import { StyleSheet, TouchableOpacity, View, Text, TextInput } from 'react-native';
+//themes 
+import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
+import { COLORS } from '../../themes/Colors';
+
+//modals
+import AddItemModal from './modals/AddItemModal';
+
+//redux
+import { useDispatch, useSelector } from 'react-redux';
+import { toggleVisibility } from '../../redux/slices/groceryList/toggleSlice';
+import { removeCheckedItems } from '../../redux/slices/groceryList/itemsSlice';
+
+
+export const AddItemButton = () => {
+    const dispatch = useDispatch();
+    
+    return (
+        <TouchableOpacity style={[styles.buttonContainer, styles.addItem]}
+            onPress={()=>dispatch(toggleVisibility('addItemModalVisible'))}>
+            <MaterialCommunityIcons name="cart-plus" color={COLORS.dp00} size={35} />
+            {/* pop-up screen */}
+            <AddItemModal/>
+        </TouchableOpacity>
+    );
+}
+export const AddNewRecipeButton = () => {
+    return (
+        <TouchableOpacity style={[styles.buttonContainer, styles.AddNewProduct, { backgroundColor: COLORS.primaryVar2 }]}
+            onPress={() => alert('hello')}>
+            <MaterialCommunityIcons name="file-document-edit-outline" color={COLORS.dp00} size={40} />
+        </TouchableOpacity>
+    );
+}
+export const PushItemsToStorageButton = () => {
+    return (
+        <TouchableOpacity style={[styles.buttonContainer, styles.AddNewRecipe, { backgroundColor: COLORS.actionSend }]}
+            onPress={() => alert('lol')}>
+            <MaterialCommunityIcons name="cloud-download-outline" color={COLORS.dp00} size={40} />
+        </TouchableOpacity>
+    );
+}
+export const RemoveItemsButton = () => {
+    const dispatch = useDispatch();
+    return (
+        <TouchableOpacity style={[styles.buttonContainer, styles.downloadList, { backgroundColor: COLORS.actionCancel }]}
+            onPress={() => dispatch(removeCheckedItems())}>
+            <MaterialCommunityIcons name="delete-forever-outline" color={COLORS.dp00} size={40} />
+        </TouchableOpacity>
+    );
+}
+
+const styles = StyleSheet.create({
+    buttonContainer: {
+        height: 60,
+        width: 60,
+        borderRadius: 60 / 2,
+        elevation: 10,
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+    addItem: {
+        backgroundColor: COLORS.primary,
+    },
+    AddNewProduct: {
+        backgroundColor: COLORS.primary,
+    },
+    AddNewRecipe: {
+        backgroundColor: COLORS.primary,
+
+    },
+    downloadList: {
+        backgroundColor: COLORS.primary,
+
+    },
+});
--- a/src/components/groceryComponents/ListedItem.js
+++ b/src/components/groceryComponents/ListedItem.js
@@ -0,0 +1,219 @@
+import React, { useRef, useEffect, useState } from 'react';
+import { StyleSheet, Text, TouchableOpacity, View, Animated } from 'react-native';
+import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
+//themes
+import { COLORS } from '../../themes/Colors';
+//redux
+import { useDispatch, useSelector } from 'react-redux';
+import { checkToggle } from '../.././redux/slices/groceryList/itemsSlice';
+
+
+export const ListedItem = (props) => {
+
+    //redux
+    const dispatch = useDispatch()
+    const products = useSelector(state => state.products)
+    const items = useSelector(state => state.items)
+    const tags = useSelector(state => state.tags)
+
+
+    let product;
+    const item = items.find((item) => item.productId === props.id);
+
+    if (products.find((product) => product.id === item.productId)) {
+        product = products.find((product) => product.id === item.productId);
+    }
+    else {
+        product = {
+            productName: props.id,
+            tag:'no-tag',
+        }
+
+    }
+
+    const dispatchAnim = () => {
+        dispatch(checkToggle(item.productId));
+    }
+
+    const tag = tags.find((tag)=>tag.tagName === product.tag);
+
+    const scaleAnimValue = useRef(new Animated.Value(0)).current; // animation start value
+    const colorAnimValue = useRef(new Animated.Value(0)).current; // animation start value
+    const checkAnimValue = useRef(new Animated.Value(0)).current; // animation start value
+    //animation:
+    useEffect(() => {
+        Animated.sequence([
+            Animated.timing(scaleAnimValue, {
+                toValue: 0.9,
+                duration: 150,
+                useNativeDriver: false,
+            }
+            ),
+            Animated.spring(scaleAnimValue, {
+                toValue: 1,
+                friction: 4,
+                useNativeDriver: false,
+            },
+            )
+        ]).start()
+
+    }, [item.checked])
+
+    //colors
+    useEffect(() => {
+        item.checked ? Animated.timing(colorAnimValue, {
+            toValue: 1,
+            duration: 200,
+            useNativeDriver: false,
+        }
+        ).start()
+            :
+            Animated.timing(colorAnimValue, {
+                toValue: 0,
+                duration: 200,
+                useNativeDriver: false,
+            }
+            ).start()
+
+    }, [item.checked])
+    //checkmark
+    useEffect(() => {
+        item.checked ? Animated.sequence([
+            Animated.delay(200),
+            Animated.spring(checkAnimValue, {
+                toValue: 1,
+                friction: 4,
+                useNativeDriver: true,
+            }),
+
+        ]).start()
+            :
+            Animated.sequence([
+                Animated.delay(150),
+                Animated.timing(checkAnimValue, {
+                    toValue: 0,
+                    duration: 150,
+                    useNativeDriver: true,
+                }),
+            ]).start()
+
+    }, [item.checked])
+
+    const interpolateColor = colorAnimValue.interpolate({
+        inputRange: [0, 1],
+        outputRange: ['rgb(22, 26, 30)', 'rgb(62, 131, 98)']
+    });
+
+
+    return (
+        <View style={{ flex: 1, paddingLeft: 8, paddingRight: 8, flexDirection: 'row', alignItems: 'flex-start', justifyContent: 'space-between' }}>
+            <Animated.View style={[styles.listedItemStyle, {backgroundColor: tag.color + '33'},item.checked ? styles.listedItemChecked : {}, {
+                transform: [{
+                    scaleX: scaleAnimValue
+                },
+                {
+                    scaleY: scaleAnimValue
+                }
+                ]
+            }]} >
+                <TouchableOpacity style={{}}
+                    onPress={() => console.log(item.checked)}
+                    onLongPress={() => dispatchAnim()}>
+                    <Text style={styles.textItem}>{product.productName}</Text>
+                    <View style={{ flex: 1, flexDirection: 'row', alignItems: 'flex-end' }}>
+                        <Text style={styles.textAmount}>Amount: {item.amount}</Text>
+                        <Text style={styles.textPerson}>For: {item.person}</Text>
+                    </View>
+
+                    {item.details ? <Text style={styles.textDetails}>Details: {item.details}</Text> : <View />}
+                </TouchableOpacity>
+            </Animated.View>
+            <TouchableOpacity style={[styles.checkButton, { flex: 1 }]} onPress={() => dispatchAnim()}>
+                <Animated.View style={[styles.checkmark, item.checked ? {
+                    borderWidth: 0,
+                } : {}, {
+                    backgroundColor: interpolateColor,
+                    transform: [{
+                        scaleX: scaleAnimValue
+                    },
+                    {
+                        scaleY: scaleAnimValue
+                    }
+                    ]
+                },]} >
+                    <Animated.View style={[{
+                        transform: [{
+                            scaleX: checkAnimValue
+                        },
+                        {
+                            scaleY: checkAnimValue
+                        }
+                        ]
+                    }]}>
+                        <MaterialCommunityIcons name="check" color={COLORS.dp00} size={25} />
+                    </Animated.View>
+
+                </Animated.View>
+            </TouchableOpacity>
+        </View>
+    );
+}
+const height = 30;
+const styles = StyleSheet.create({
+
+    listedItemStyle: {
+        width: '90%',
+        marginBottom: height / 7,
+
+        borderRadius: height / 2,
+        padding: 2,
+        paddingBottom: 3,
+        backgroundColor: COLORS.dp03,
+    },
+    listedItemChecked: {
+        backgroundColor: '#253f34',
+    },
+    textItem: {
+        flex: 1,
+        left: 8,
+        fontFamily: 'Roboto',
+        fontSize: height * 0.65,
+        color: COLORS.textW0 + 'cc',
+    },
+    textAmount: {
+        flex: 1,
+        left: 30,
+        fontFamily: 'Roboto',
+        fontSize: height * 0.5,
+        color: COLORS.textW1,
+    },
+    textPerson: {
+        flex: 1,
+        left: 25,
+        fontFamily: 'Roboto',
+        fontSize: height * 0.5,
+        color: COLORS.textW1,
+    },
+    textDetails: {
+        flex: 1,
+        marginBottom: 3,
+        left: 8,
+        fontFamily: 'Roboto',
+        fontSize: height * 0.5,
+        color: COLORS.primary + 'aa',
+    },
+    checkmark: {
+        height: 30,
+        width: 30,
+        borderRadius: 15,
+        borderWidth: 1.5,
+        borderColor: '#ffffff' + '12',
+        justifyContent: 'center',
+        alignItems: 'center',
+    },
+    checkButton: {
+        height: '100%',
+        justifyContent: 'flex-start',
+        alignItems: 'flex-end',
+    },
+});
--- a/src/components/groceryComponents/ListedProduct.js
+++ b/src/components/groceryComponents/ListedProduct.js
@@ -0,0 +1,214 @@
+import React, { useRef, useEffect } from 'react';
+import { Image, StyleSheet, Text, TouchableOpacity, View, Animated } from 'react-native';
+import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
+//themes
+import { COLORS } from '../../themes/Colors';
+//redux
+import { useDispatch, useSelector } from 'react-redux';
+import { checkToggle } from '../.././redux/slices/groceryList/productsSlice';
+
+
+
+export const ListedProduct = (props) => {
+
+    const products = useSelector(state => state.products)
+    const product = products.find((product) => product.id === props.id);
+
+    const tags = useSelector(state => state.tags)
+    const tag = tags.find((tag) => tag.tagName === product.tag);
+
+    const scaleAnimValue = useRef(new Animated.Value(0)).current; // animation start value
+    const colorAnimValue = useRef(new Animated.Value(0)).current; // animation start value
+    const checkAnimValue = useRef(new Animated.Value(0)).current; // animation start value
+    //animation:
+    useEffect(() => {
+        Animated.sequence([
+            Animated.timing(scaleAnimValue, {
+                toValue: 0.9,
+                duration: 150,
+                useNativeDriver: false,
+            }
+            ),
+            Animated.spring(scaleAnimValue, {
+                toValue: 1,
+                friction: 4,
+                useNativeDriver: false,
+            },
+            )
+        ]).start()
+
+    }, [product.checked])
+
+    //colors
+    useEffect(() => {
+        product.checked ? Animated.timing(colorAnimValue, {
+            toValue: 1,
+            duration: 200,
+            useNativeDriver: false,
+        }
+        ).start()
+            :
+            Animated.timing(colorAnimValue, {
+                toValue: 0,
+                duration: 200,
+                useNativeDriver: false,
+            }
+            ).start()
+
+    }, [product.checked])
+    //checkmark
+    useEffect(() => {
+        product.checked ? Animated.sequence([
+            Animated.delay(200),
+            Animated.spring(checkAnimValue, {
+                toValue: 1,
+                friction: 4,
+                useNativeDriver: true,
+            }),
+
+        ]).start()
+            :
+            Animated.sequence([
+                Animated.delay(150),
+                Animated.timing(checkAnimValue, {
+                    toValue: 0,
+                    duration: 150,
+                    useNativeDriver: true,
+                }),
+            ]).start()
+
+    }, [product.checked])
+    //redux
+    const dispatch = useDispatch()
+
+    const dispatchAnim = () => {
+        dispatch(checkToggle(product.id));
+    }
+    const interpolateColor = colorAnimValue.interpolate({
+        inputRange: [0, 1],
+        outputRange: ['rgb(22, 26, 30)', 'rgb(62, 131, 98)']
+    });
+    return (
+        <View style={{ flex: 1, paddingLeft: 8, paddingRight: 8, flexDirection: 'row', alignItems: 'flex-start', justifyContent: 'space-between' }}>
+            <Animated.View style={[styles.listedItemStyle, { backgroundColor: tag.color + '33' }, product.checked ? styles.listedItemChecked : {}, {
+                transform: [{
+                    scaleX: scaleAnimValue
+                },
+                {
+                    scaleY: scaleAnimValue
+                }
+                ]
+            }]} >
+                <TouchableOpacity style={[styles.listedItemButton]}
+                    onPress={() => alert('Not ready yet!!')}
+                    onLongPress={() => dispatchAnim()}>
+                    <View style={{ flex: 1 }}>
+                        <Text style={styles.textItem}>{product.productName}</Text>
+                        <View style={{ flexDirection: 'row' }}>
+                            <Text style={[styles.textTags]}>Tag: </Text>
+                            <Text style={[styles.textTags, { color: tag.color, }]}>{tag.tagName}</Text>
+                        </View>
+                        <View style={{ flexDirection: 'row' }}>
+                            {product.price ? <Text style={styles.textPrice}>Price: </Text> : <View />}
+                            {product.price ? <Text style={[styles.textPrice, { color: '#C6A337', }]}>€{product.price}</Text> : <View />}
+                        </View>
+                    </View>
+                    <Image source={{ uri: product.image }} style={styles.image} />
+                </TouchableOpacity>
+            </Animated.View>
+            <TouchableOpacity style={[styles.checkButton, { flex: 1 }]} onPress={() => dispatchAnim()}>
+                <Animated.View style={[styles.checkmark, product.checked ? {
+                    borderWidth: 0,
+                } : {}, {
+                    backgroundColor: interpolateColor,
+                    transform: [{
+                        scaleX: scaleAnimValue
+                    },
+                    {
+                        scaleY: scaleAnimValue
+                    }
+                    ]
+                },]} >
+                    <Animated.View style={[{
+                        transform: [{
+                            scaleX: checkAnimValue
+                        },
+                        {
+                            scaleY: checkAnimValue
+                        }
+                        ]
+                    }]}>
+                        <MaterialCommunityIcons name="check" color={COLORS.dp00} size={25} />
+                    </Animated.View>
+
+                </Animated.View>
+            </TouchableOpacity>
+        </View>
+    );
+}
+
+const height = 30;
+const styles = StyleSheet.create({
+
+    listedItemStyle: {
+        width: '90%',
+        marginBottom: height / 7,
+        minHeight: 80,
+        borderRadius: height / 2,
+        backgroundColor: COLORS.dp03,
+    },
+    listedItemButton: {
+        flex: 1,
+        padding: 2,
+        paddingBottom: 3,
+        alignItems: 'flex-start',
+        flexDirection: 'row',
+    },
+    listedItemChecked: {
+        backgroundColor: '#253f34',
+    },
+    textItem: {
+        flex: 1,
+        left: 8,
+        width: '60%',
+        fontFamily: 'Roboto',
+        fontSize: height * 0.65,
+        color: COLORS.textW0 + 'cc',
+    },
+    textTags: {
+        left: 8,
+        fontFamily: 'Roboto',
+        fontSize: height * 0.5,
+        color: COLORS.textW1,
+    },
+    textPrice: {
+        left: 8,
+        fontFamily: 'Roboto',
+        fontSize: height * 0.5,
+        color: COLORS.textW1,
+
+    },
+    image: {
+        position: 'absolute',
+        right: 0,
+        top: 0,
+        bottom:0,
+        width: 80,
+        borderRadius: 15,
+        opacity: 0.8,
+    },
+    checkmark: {
+        height: 30,
+        width: 30,
+        borderRadius: 15,
+        borderWidth: 1.5,
+        borderColor: '#ffffff' + '12',
+        justifyContent: 'center',
+        alignItems: 'center',
+    },
+    checkButton: {
+        height: '100%',
+        justifyContent: 'flex-start',
+        alignItems: 'flex-end',
+    },
+});
--- a/src/components/groceryComponents/ProductButtons.js
+++ b/src/components/groceryComponents/ProductButtons.js
@@ -0,0 +1,42 @@
+import React from 'react';
+import { StyleSheet, TouchableOpacity, View, Text, TextInput, Image } from 'react-native';
+
+//components
+import AddProductModal from './modals/AddProductModal';
+
+//themes 
+import { COLORS } from '../../themes/Colors';
+import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
+
+//redux
+import { useDispatch } from 'react-redux';
+import { toggleVisibility } from '../../redux/slices/groceryList/toggleSlice';
+
+
+export const AddProductButton = () => {
+    const dispatch = useDispatch();
+
+    return (
+        <TouchableOpacity style={[styles.buttonContainer, styles.AddNewProduct]}
+            onPress={() => dispatch(toggleVisibility('addProductModalVisible'))}>
+            <MaterialCommunityIcons name="tag-plus-outline" color={COLORS.dp00} size={40} />
+            {/* pop-up screen */}
+            <AddProductModal/>
+        </TouchableOpacity>
+    );
+}
+
+const styles = StyleSheet.create({
+    buttonContainer: {
+        height: 60,
+        width: 60,
+        borderRadius: 60 / 2,
+        elevation: 10,
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+    AddNewProduct: {
+        backgroundColor: COLORS.primary,
+    },
+
+});
--- a/src/components/groceryComponents/modals/AddItemModal.js
+++ b/src/components/groceryComponents/modals/AddItemModal.js
@@ -0,0 +1,246 @@
+import React, { useState } from 'react';
+import { StyleSheet, TouchableOpacity, View, Text, TextInput, Image, ScrollView, TouchableOpacityComponent } from 'react-native';
+import Modal from 'react-native-modal';
+//themes 
+import { COLORS } from '../../../themes/Colors';
+
+//redux
+import { useDispatch, useSelector } from 'react-redux';
+import { itemAdded, amountUp } from '../../../redux/slices/groceryList/itemsSlice';
+import { toggleVisibility } from '../../../redux/slices/groceryList/toggleSlice';
+
+export default AddItemModal = () => {
+    //redux
+    const modalVisible = useSelector(state => state.toggle.addItemModalVisible);
+
+    const products = useSelector(state => state.products);
+    const items = useSelector(state => state.items);
+
+    const dispatch = useDispatch();
+    
+    let newProductsList = [];
+    for (let i = 0; i < products.length; i++) {
+        newProductsList.push(products[i].productName);
+    }
+
+
+    const [item, setItem] = useState('');
+    const [focussed, setFocussed] = useState(false);
+    const [amount, setAmount] = useState('');
+    const [person, setPerson] = useState('');
+    const [details, setDetails] = useState('');
+
+    const [productsList, setProductsList] = useState(newProductsList);
+    const filterProductsList = (text) => {
+        let regex = new RegExp(text);
+
+        let newProductsList = products.filter((product) =>
+            regex.test(product.productName)
+        )
+        text !== '' ? newProductsList = newProductsList.map((product) => product.productName) : newProductsList = products.map((product) => product.productName)
+        if (newProductsList.length === 1 && newProductsList[0] === text) {
+            setProductsList([]);
+        }
+        else {
+            setProductsList(newProductsList);
+        }
+        setItem(text);
+    };
+    const toggleModal = () => {
+            if (modalVisible && item !== '' && amount !== '') {
+                if (products.find((product) => product.productName === item)) {     //find if item is in products , else create unregistered item
+                    const productId = products.find((product) => product.productName === item).id;
+                    if(!items.find((itemObj) => itemObj.productId === productId)){  //check if amount up needed
+                        dispatch(itemAdded(productId, amount, person, details));
+                    }
+                    else{
+                    }
+                }
+                else if (!items.find((itemObj) => itemObj.productId === item))      //unregistered item check for amount up
+                {
+                    dispatch(itemAdded(item, amount, person, details));
+                }
+                else{
+                    dispatch(amountUp(item,amount));
+                }
+                setItem('');
+                setAmount();
+                setPerson('');
+                setDetails('');
+                setProductsList(products.map((product) => product.productName));
+            }
+
+            else {
+                alert('You should give both a product and an amount');
+            }
+        dispatch(toggleVisibility('addItemModalVisible'));
+    };
+    const closeModal = () => {
+        setItem('');
+        setAmount();
+        setPerson('');
+        setDetails('');
+        dispatch(toggleVisibility('addItemModalVisible'));
+        setProductsList(products.map((product) => product.productName));
+    };
+
+    return (
+        <Modal isVisible={modalVisible} animationIn={'slideInUp'} animationOut={'slideOutDown'}
+            onBackdropPress={closeModal}
+            onBackButtonPress={closeModal}
+            useNativeDriverForBackdrop
+            style={styles.modalAddItem} >
+            <View style={{
+                borderRadius: 10,
+                padding: 5,
+                backgroundColor: COLORS.dp01,
+
+            }}>
+                <Text style={styles.modalHeaderText}>Add item</Text>
+                <View style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'flex-start' }}>
+                    <TextInput
+                        placeholder={'Product name'}
+                        placeholderTextColor={'grey'}
+                        style={styles.textInput}
+                        offFocus={() => setProductsList([])}
+                        onChangeText={text => filterProductsList(text)}
+                        value={item}
+                        onFocus={() => setFocussed(true)}
+                        onEndEditing={() => setFocussed(false)}
+                    />
+
+                    <ScrollView style={styles.dropdown} keyboardShouldPersistTaps={'always'}>
+
+                        {focussed ? productsList.map((product, index) =>
+                            <TouchableOpacity key={index} onPress={() => filterProductsList(product)} style={styles.dropdownProduct}>
+                                <Text style={styles.dropdownText}>{product}</Text>
+                            </TouchableOpacity>
+                        ) : <View />}
+
+                    </ScrollView>
+                </View>
+                <View style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'flex-start' }}>
+                    <TextInput
+                        placeholder={'Amount'}
+                        placeholderTextColor={'grey'}
+                        style={[styles.textInput]}
+                        onChangeText={text => setAmount(text)}
+                        value={amount}
+                        keyboardType={'number-pad'}
+                    />
+                </View>
+                <View style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'flex-start' }}>
+                    <TextInput
+                        placeholder={'For'}
+                        placeholderTextColor={'grey'}
+                        style={styles.textInput}
+                        onChangeText={text => setPerson(text)}
+                        value={person}
+                    />
+                </View>
+                <View style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'flex-start' }}>
+                    <TextInput
+                        placeholder={'Additional details'}
+                        placeholderTextColor={'grey'}
+                        style={styles.textInput}
+                        onChangeText={text => setDetails(text)}
+                        value={details}
+                    />
+                </View>
+                <View style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'space-evenly', marginTop: 20, marginBottom: 10, }}>
+                    <TouchableOpacity title="Hide modal" style={styles.modalCloseButton} onPress={closeModal} >
+                        <Text style={styles.modalCloseButtonText}>Cancel</Text>
+                    </TouchableOpacity>
+                    <View style={{
+                        borderRadius: 10,
+                        backgroundColor: COLORS.dp01,
+                        borderLeftWidth: 1,
+                        borderColor: COLORS.dp08,
+                        height: '80%',
+
+                    }} />
+                    <TouchableOpacity title="Hide modal" style={styles.modalAddButton} onPress={toggleModal} >
+                        <Text style={styles.modalAddButtonText}>Add item</Text>
+                    </TouchableOpacity>
+                </View>
+            </View>
+        </Modal>
+    )
+}
+
+const styles = StyleSheet.create({
+    //modals
+    modalAddItem: {
+        margin: 0,
+    },
+    modalHeaderText: {
+        opacity: 0.9,
+        fontSize: 23,
+        alignSelf: 'center',
+        color: COLORS.textW0 + 'de',
+    },
+    modalText: {
+        left: 10,
+        opacity: 0.9,
+        fontSize: 18,
+        color: COLORS.textB0,
+    },
+    modalAddButtonText: {
+        opacity: 0.8,
+        fontSize: 16,
+        color: COLORS.primary,
+        fontWeight: 'bold',
+    },
+    modalCloseButtonText: {
+        opacity: 0.8,
+        fontSize: 16,
+        color: COLORS.primary,
+        fontWeight: 'bold',
+    },
+    textInput: {
+
+        height: 25,
+        width: '80%',
+        left: 10,
+
+        borderBottomColor: COLORS.primary + 'aa',
+        borderBottomWidth: 1,
+        borderRadius: 3,
+        marginTop: 10,
+        padding: 0,
+        paddingLeft: 5,
+        paddingRight: 5,
+
+        color: COLORS.textW0,
+        fontSize: 18
+
+    },
+    dropdown: {
+
+        zIndex: 1,
+        position: 'absolute',
+        maxHeight: 100,
+        width: 150,
+        top: 40,
+        left: 10,
+
+        borderRadius: 10,
+        backgroundColor: COLORS.dp16 + 'ee',
+    },
+    dropdownProduct: {
+
+        zIndex: 1,
+        width: 150,
+        minHeight: 20,
+        borderBottomWidth: 1.2,
+        borderColor: '#666' + 'e',
+    },
+    dropdownText: {
+
+        zIndex: 1,
+        left: 10,
+        fontSize: 17,
+        color: COLORS.textW0 + 'ee',
+
+    }
+});
--- a/src/components/groceryComponents/modals/AddProductModal.js
+++ b/src/components/groceryComponents/modals/AddProductModal.js
@@ -0,0 +1,249 @@
+
+import React, { useState } from 'react';
+import { StyleSheet, TouchableOpacity, View, Text, TextInput, Image, ScrollView } from 'react-native';
+import Modal from 'react-native-modal';
+
+//themes 
+import { COLORS } from '../../../themes/Colors';
+
+//redux
+import { useDispatch, useSelector } from 'react-redux';
+import { productAdded } from '../../../redux/slices/groceryList/productsSlice';
+import { toggleVisibility } from '../../../redux/slices/groceryList/toggleSlice';
+
+export default AddProductModal = () => {
+    const modalVisible = useSelector(state => state.toggle.addProductModalVisible);
+
+    const dispatch = useDispatch();
+
+    const [product, setProduct] = useState('');
+    const [tag, setTag] = useState('');
+    const [price, setPrice] = useState('');
+    const [image, setImage] = useState('https://icons-for-free.com/iconfiles/png/512/linecon+products+round+icon-1320165923260225670.png');
+
+    //tags
+    const tags = useSelector(state => state.tags)
+    let newTagsList = [];
+    for (let i = 0; i < tags.length; i++) {
+        newTagsList.push(tags[i].tagName);
+    }
+    const [tagsList, setTagsList] = useState(newTagsList);
+
+    const [focussed, setFocussed] = useState(false);
+
+    const filterTagsList = (text) => {
+        let regex = new RegExp(text);
+
+        let newTagsList = tags.filter((tag) =>
+            regex.test(tag.tagName)
+        )
+        text !== '' ? newTagsList = newTagsList.map((tag) => tag.tagName) : newTagsList = tags.map((tag) => tag.tagName)
+        if (newTagsList.length === 1 && newTagsList[0] === text) {
+            setTagsList([]);
+        }
+        else {
+            setTagsList(newTagsList);
+        }
+        setTag(text);
+    };
+    //tags
+    const toggleModal = () => {
+        if (modalVisible) {
+            if (product !== '' && tags.find((listTag) => listTag.tagName === tag)) {
+                dispatch(productAdded(product, tag, price, image));
+            }
+            else {
+                alert('You should give both a product name and a useable tag');
+            }
+        }
+        setTagsList(tags.map((listTag) => listTag.tagName));
+        dispatch(toggleVisibility('addProductModalVisible'));
+        setProduct('');
+        setTag('');
+        setPrice();
+        setImage('https://icons-for-free.com/iconfiles/png/512/linecon+products+round+icon-1320165923260225670.png');
+
+    };
+    const closeModal = () => {
+        setTagsList(tags.map((listTag) => listTag.tagName));
+        setProduct('');
+        setTag();
+        setPrice();
+        setImage('https://icons-for-free.com/iconfiles/png/512/linecon+products+round+icon-1320165923260225670.png');
+        dispatch(toggleVisibility('addProductModalVisible'));
+    };
+
+    return (
+        <Modal isVisible={modalVisible} animationIn={'slideInUp'} animationOut={'slideOutDown'}
+            onBackdropPress={closeModal}
+            onBackButtonPress={closeModal}
+            useNativeDriverForBackdrop
+            style={styles.modalAddProduct} >
+            <View style={{
+                borderRadius: 10,
+                padding: 5,
+                backgroundColor: COLORS.dp01,
+
+            }}>
+                <Text style={styles.modalHeaderText}>Add product</Text>
+
+                <View style={{
+                    flexDirection: 'row',
+                    justifyContent: 'flex-start',
+                }}>
+                    <View style={{
+                        width: '60%',
+                    }}>
+                        <View style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'flex-start' }}>
+                            <TextInput
+                                placeholder={'Product name'}
+                                placeholderTextColor={'grey'}
+                                style={styles.textInput}
+                                onChangeText={text => setProduct(text)}
+                            />
+                        </View>
+                        <View style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'flex-start' }}>
+                            <TextInput
+                                placeholder={'Tag'}
+                                placeholderTextColor={'grey'}
+                                style={[styles.textInput]}
+                                value={tag}
+                                offFocus={() => setTagsList([])}
+                                onChangeText={text => filterTagsList(text)}
+                                onFocus={() => setFocussed(true)}
+                                onEndEditing={() => setFocussed(false)}
+                            />
+                            <ScrollView style={styles.dropdown} keyboardShouldPersistTaps={'always'}>
+                                {focussed ? tagsList.map((newTag, index) =>
+                                    <TouchableOpacity key={index} onPress={() => filterTagsList(newTag)} style={styles.dropdownProduct}>
+                                        <Text style={styles.dropdownText}>{newTag}</Text>
+                                    </TouchableOpacity>
+                                ) : <View />}
+                            </ScrollView>
+                        </View>
+                        <View style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'flex-start' }}>
+                            <Text style={styles.currencyPrefix}>€</Text>
+                            <TextInput
+                                placeholder={'Price'}
+                                placeholderTextColor={'grey'}
+                                style={[styles.textInput, { paddingLeft: 20 }]}
+                                onChangeText={text => setPrice(text)}
+                                keyboardType={'number-pad'}
+                            />
+                        </View>
+                        <View style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'flex-start' }}>
+                            <TextInput
+                                placeholder={'Image url'}
+                                placeholderTextColor={'grey'}
+                                style={styles.textInput}
+                                onChangeText={text => { if (text !== '') { return setImage(text) } }}
+                            />
+                        </View>
+                    </View>
+
+                    <Image source={{ uri: image }}
+                        style={{ width: 130, height: 130, marginTop: '5%', right: 10, borderRadius: 30, }} />
+                </View>
+
+                <View style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'space-evenly', marginTop: 20, marginBottom: 10, }}>
+                    <TouchableOpacity title="Hide modal" style={styles.modalCloseButton} onPress={closeModal} >
+                        <Text style={styles.modalCloseButtonText}>Cancel     </Text>
+                    </TouchableOpacity>
+                    <View style={{
+                        borderRadius: 10,
+                        backgroundColor: COLORS.dp01,
+                        borderLeftWidth: 1,
+                        borderColor: COLORS.dp08,
+                        height: '80%',
+
+                    }} />
+                    <TouchableOpacity title="Hide modal" style={styles.modalAddButton} onPress={toggleModal} >
+                        <Text style={styles.modalAddButtonText}>Add product</Text>
+                    </TouchableOpacity>
+                </View>
+            </View>
+        </Modal>
+    )
+}
+
+const styles = StyleSheet.create({
+    //modals
+    modalAddItem: {
+        margin: 0,
+    },
+    modalHeaderText: {
+        opacity: 0.9,
+        fontSize: 23,
+        alignSelf: 'center',
+        color: COLORS.textW0 + 'de',
+    },
+    modalText: {
+        left: 10,
+        opacity: 0.9,
+        fontSize: 18,
+        color: COLORS.textB0,
+    },
+    modalAddButtonText: {
+        opacity: 0.8,
+        fontSize: 16,
+        color: COLORS.primary,
+        fontWeight: 'bold',
+    },
+    modalCloseButtonText: {
+        opacity: 0.8,
+        fontSize: 16,
+        color: COLORS.primary,
+        fontWeight: 'bold',
+    },
+    textInput: {
+
+        height: 25,
+        width: '80%',
+        left: 10,
+
+        borderBottomColor: COLORS.primary + 'aa',
+        borderBottomWidth: 1,
+        borderRadius: 3,
+        marginTop: 10,
+        padding: 0,
+        paddingLeft: 5,
+        paddingRight: 5,
+
+        color: COLORS.textW0,
+        fontSize: 18
+
+    },
+    currencyPrefix: {
+        position: 'absolute',
+        alignSelf: 'flex-end',
+        left: 15,
+        color: COLORS.primary + '99',
+        fontSize: 18,
+    },
+    dropdown: {
+
+        zIndex: 1,
+        position: 'absolute',
+        maxHeight: 100,
+        width: 150,
+        top: 40,
+        left: 10,
+
+        borderRadius: 10,
+        backgroundColor: COLORS.dp16 + 'ee',
+    },
+    dropdownProduct: {
+
+        zIndex: 1,
+        width: 150,
+        minHeight: 20
+    },
+    dropdownText: {
+
+        zIndex: 1,
+        left: 10,
+        fontSize: 17,
+        color: COLORS.textW0 + 'ee',
+
+    }
+});
--- a/src/redux/slices/groceryList/itemsSlice.js
+++ b/src/redux/slices/groceryList/itemsSlice.js
@@ -0,0 +1,91 @@
+import { createSlice } from '@reduxjs/toolkit';
+
+const initialState = [
+    {
+        amount: 5,
+        person: 'Wolf',
+        details: 'margarita',
+
+        productId: '20fdc79cde62',
+        checked: false,
+    },
+    {
+        amount: 12,
+        person: 'Everyone',
+
+        productId: '20fdc79cde63',
+        checked: false,
+    },
+    {
+        amount: 2,
+        person: 'Bart',
+
+        productId: '20fdc79cde64',
+        checked: false,
+    },
+    {
+        amount: 2,
+        person: 'Storm',
+        details: 'Gezout',
+
+        productId: '20fdc79cde60',
+        checked: false,
+    },
+
+]
+
+const itemsSlice = createSlice({
+    name: 'items',
+    initialState,
+    reducers: {
+        itemAdded: {
+            reducer(state, action) {
+                state.push(action.payload);
+            },
+            prepare(productId, amount, person, details) {
+                return {
+                    payload: {
+                        amount: Number(amount),
+                        person: person,
+                        details: details,
+
+                        productId: productId,
+                        checked: false,
+                    }
+                }
+            }
+        },
+        checkToggle: {
+            reducer(state, action) {
+                state.find((item) => item.productId === action.payload.productId).checked = !state.find((item) => item.productId === action.payload.productId).checked;
+            },
+            prepare(productId) {
+                return {
+                    payload: {
+                        productId: productId
+                    }
+                }
+            }
+        },
+        amountUp: {
+            reducer(state, action) {
+                state.find((item) => item.productId === action.payload.id).amount += Number(action.payload.amount);
+            },
+            prepare(id, amount) {
+                return {
+                    payload: {
+                        id,
+                        amount,
+                    }
+                }
+            }
+        },
+        removeCheckedItems(state){
+            return state.filter(item=>item.checked === false)
+        }
+    },
+});
+
+export const { itemAdded, checkToggle, amountUp, removeCheckedItems } = itemsSlice.actions;
+
+export default itemsSlice.reducer;
--- a/src/redux/slices/groceryList/productsSlice.js
+++ b/src/redux/slices/groceryList/productsSlice.js
@@ -0,0 +1,96 @@
+import { createSlice } from '@reduxjs/toolkit';
+
+const initialState = [
+    {
+        productName: 'Pizza',
+        tag: 'Meal',
+        image: 'https://media-cdn.tripadvisor.com/media/photo-s/15/2d/23/07/domino-s-pizza.jpg',
+        price: 2.49,
+        nutrients: [{ calories: 120 }, { proteins: 20 }],
+
+
+        checked: false,
+        id: '20fdc79cde60',
+    },
+    {
+        productName: 'Lasagne',
+        tag: 'Meal',
+        image: 'https://www.kitchensanctuary.com/wp-content/uploads/2020/10/Lasagne-square-FS-79.jpg',
+        price: 1.99,
+
+        checked: false,
+        id: '20fdc79cde64',
+    },
+    {
+        productName: 'Aïki noodles',
+        tag: 'Instant',
+        image: 'https://dhf6qt42idbhy.cloudfront.net/medias/sys_master/h3b/h37/10286562541598.jpg',
+        nutrients: [{ calories: 120 }, { proteins: 20 }],
+        price: 1.39,
+
+        checked: false,
+        id: '20fdc79cde63',
+    },
+    {
+        productName: 'Gedroogde worstjes',
+        tag: 'Snack',
+        image: 'https://www.aldi.be/content/aldi/belgium/promotions/source-localenhancement/2019/2019-01/2019-01-02/vast_assortiment/1308/1/0/_jcr_content/assets/imported-images/BILD_INTERNET2/1308_PRIMARY_0_nl-fr-de_Mini_sticks_100_g_Panda_GROEP.png/_jcr_content/renditions/opt.1250w.png.res/1590539744886/opt.1250w.png',
+        price: 1.79,
+
+
+        checked: false,
+        id: '20fdc79cde62',
+    },
+    {
+        productName: 'Berliner ball',
+        tag: 'Snack',
+        image: 'https://upload.wikimedia.org/wikipedia/commons/4/4c/Berliner-Pfannkuchen.jpg',
+        price: 1.79,
+
+
+        checked: false,
+        id: '20fdc79cde61',
+    },
+]
+
+const productsSlice = createSlice({
+    name: 'products',
+    initialState,
+    reducers: {
+        productAdded: {
+            reducer(state, action) {
+                state.push(action.payload);
+            },
+            prepare(productName, tag, price, image, nutrients) {
+                return {
+                    payload: {
+                        productName,
+                        tag,
+                        price,
+                        image,
+                        nutrients,
+
+                        id: Math.floor((1 + Math.random()) * 0x1000000000000).toString(16).substring(1),
+                        checked: false,
+                    }
+                }
+            }
+        },
+        checkToggle: {
+            reducer(state, action) {
+                state.find((product) => product.id === action.payload.id).checked = !state.find((product) => product.id === action.payload.id).checked;
+            },
+            prepare(id) {
+                return {
+                    payload: {
+                        id: id
+                    }
+                }
+            }
+        },
+    },
+});
+
+export const { productAdded, checkToggle } = productsSlice.actions;
+
+export default productsSlice.reducer;
--- a/src/redux/slices/groceryList/storageSlice.js
+++ b/src/redux/slices/groceryList/storageSlice.js
@@ -0,0 +1,13 @@
+import {createSlice} from '@reduxjs/toolkit'
+
+const initialState = [
+
+]
+
+const storageSlice = createSlice({
+    name: 'storage',
+    initialState,
+    reducers:{
+        
+    }
+})
--- a/src/redux/slices/groceryList/tagsSlice.js
+++ b/src/redux/slices/groceryList/tagsSlice.js
@@ -0,0 +1,33 @@
+import { createSlice } from '@reduxjs/toolkit';
+
+const initialState = [
+    { tagName: 'no-tag', color: '#253f34' },
+    { tagName: 'Meat', color: '#ef5350' },
+    { tagName: 'Vegetable', color: '#BDD684' },
+    { tagName: 'Meal', color: '#FA9600' },
+    { tagName: 'Snack', color: '#9575CD' },
+    { tagName: 'Instant', color: '#86CAC5' },
+]
+
+const tagsSlice = createSlice({
+    name: 'tags',
+    initialState,
+    reducers: {
+        tagAdded: {
+            reducer(state, action) {
+                state.push(action.payload)
+            },
+            prepare(tagName, color) {
+                return {
+                    payload: {
+                        tagName,
+                        color
+                    }
+                }
+            }
+        }
+    }
+})
+
+export const {tagAdded} = tagsSlice.actions
+export default tagsSlice.reducer
--- a/src/redux/slices/groceryList/toggleSlice.js
+++ b/src/redux/slices/groceryList/toggleSlice.js
@@ -0,0 +1,27 @@
+import { createSlice } from '@reduxjs/toolkit';
+
+const initialState = {
+    addItemModalVisible: false,
+    addProductModalVisible: false,
+    popupVisibility: false,
+}
+const toggleSlice = createSlice({
+    name: 'toggle',
+    initialState,
+    reducers: {
+        toggleVisibility: {
+            reducer(state, action) {
+                state[action.payload] = !state[action.payload];
+            },
+            prepare(toggleAction) {
+                return {
+                    payload: toggleAction
+                }
+            },
+        },
+    },
+});
+
+export const { toggleVisibility } = toggleSlice.actions;
+
+export default toggleSlice.reducer;
--- a/src/redux/store.js
+++ b/src/redux/store.js
@@ -0,0 +1,17 @@
+import { configureStore } from '@reduxjs/toolkit';
+
+import itemsReducer from './slices/groceryList/itemsSlice';
+import productsReducer from './slices/groceryList/productsSlice';
+import toggleReducer from './slices/groceryList/toggleSlice';
+import tagsReducer from './slices/groceryList/tagsSlice';
+
+
+
+export default configureStore({
+  reducer: {
+    items: itemsReducer,
+    products: productsReducer,
+    tags: tagsReducer,
+    toggle: toggleReducer,
+  },
+})
--- a/src/screens/MainScreen.js
+++ b/src/screens/MainScreen.js
@@ -0,0 +1,53 @@
+import React from 'react';
+import { StyleSheet, View, ScrollView, Text, StatusBar } from 'react-native';
+import { useHeaderHeight } from '@react-navigation/stack';
+
+//dependencies\
+//components
+import O_Card from '../components/O_Card_Grocery';
+import { COLORS } from '../themes/Colors';
+
+
+function MainScreen({ navigation }) {
+  return (
+    <View style={{ backgroundColor: COLORS.dp00 }}>
+      <StatusBar translucent backgroundColor='#00000055' />
+      <ScrollView>
+        <View style={{ height: useHeaderHeight()}} />
+        <Text style={styles.O_CardTitle}>O-Cards</Text>
+        <View style={styles.cardColumns}>
+          <View style={styles.cardsLeft}>
+            {/* Left O-Card buttons */}
+            <O_Card navigation={navigation} width={'100%'} height={70} text={"Grocery list"}><Text style={styles.O_CardTitle}>Hello</Text></O_Card>
+          </View>
+          <View style={styles.cardsRight}>
+            {/* Right O-Card buttons */}
+            <View style={{ height: 1000 }} />
+          </View>
+        </View>
+      </ScrollView>
+    </View>
+  );
+}
+const styles = StyleSheet.create({
+  O_CardTitle: {
+    marginBottom: '2%',
+    fontSize: 22,
+    color: COLORS.textW1,
+    marginLeft: '3%',
+  },
+
+  cardColumns: {
+    width: '100%',
+    flexDirection: 'row',
+    justifyContent: 'space-evenly',
+  },
+  cardsLeft: {
+    width: '47.58%',
+  },
+  cardsRight: {
+    width: '47.58%',
+  }
+}
+);
+export default MainScreen;
--- a/src/screens/storageManagement/GroceryList.js
+++ b/src/screens/storageManagement/GroceryList.js
@@ -0,0 +1,148 @@
+import React, { useRef, useEffect, useState } from 'react';
+import { StyleSheet, View, ScrollView, Text, Animated, TouchableOpacity, Image } from 'react-native';
+
+import { useHeaderHeight } from '@react-navigation/stack';
+//dependencies\
+//components
+import { AddItemButton, PushItemsToStorageButton, RemoveItemsButton, AddNewRecipeButton } from '../../components/groceryComponents/GroceryListButtons';
+import { ListedItem } from '../../components/groceryComponents/ListedItem';
+
+//redux
+
+import { useSelector } from 'react-redux';
+
+//themes
+import { COLORS } from '../../themes/Colors';
+import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
+
+const AnimButtons = () => {
+  const [toggle, setToggle] = useState(0); // toggle for sub-buttons
+  const yValue = useRef(new Animated.Value(0)).current; // animation start value
+
+  //animation:
+  useEffect(() => {
+    toggle ? Animated.spring(yValue,
+      {
+        toValue: 1,
+        friction: 5,
+        useNativeDriver: true,
+      }
+    ).start() :
+      Animated.timing(yValue,
+        {
+          toValue: 0,
+          duration: 200,
+          useNativeDriver: true,
+        }
+      ).start()
+
+  }, [toggle])
+  //components
+  return (
+    <View style={styles.buttonsView} >
+
+      <Animated.View style={{
+        position: 'absolute',
+        transform: [{
+          translateY: yValue.interpolate({
+            inputRange: [0, 1],
+            outputRange: [0, -65]
+          })
+        }],
+      }}>
+        {/* top button */}
+
+        <RemoveItemsButton />
+
+      </Animated.View>
+
+      <Animated.View style={{
+        position: 'absolute',
+        transform: [{
+          translateY: yValue.interpolate({
+            inputRange: [0, 1],
+            outputRange: [0, -130]
+          })
+        }],
+      }}>
+        {/* middle button */}
+
+        <PushItemsToStorageButton />
+
+      </Animated.View>
+
+      <Animated.View style={{
+        position: 'absolute',
+        transform: [{
+          translateX: yValue.interpolate({
+            inputRange: [0, 1],
+            outputRange: [0, 70]
+          })
+        }],
+      }}>
+        {/* bottom button */}
+
+        <AddNewRecipeButton />
+
+      </Animated.View>
+
+      {/* Button to toggle sub-buttons */}
+      <TouchableOpacity style={{ width: 60, height: 60, borderRadius: 60 / 2, backgroundColor: COLORS.primary, alignItems: 'center', justifyContent: 'center' }}
+        onPress={() => toggle ? setToggle(0) : setToggle(1)}>
+        <MaterialCommunityIcons name="view-headline" color={COLORS.dp00} size={40} />
+      </TouchableOpacity>
+    </View>
+  );
+}
+
+
+
+function GroceryList() {
+  const items = useSelector(state => state.items);
+
+  const itemList = items.map((item, index) => {
+    return <ListedItem key={index} id={item.productId} />
+  });
+  return (
+    <View style={[styles.container]}>
+      {/* Scroll */}
+      <ScrollView>
+        <View style={{ height: useHeaderHeight() }} />
+        <View style=
+          {{
+            top: 5,
+          }}>
+          {itemList}
+        </View>
+        <View style={{ height: 500 }}></View>
+      </ScrollView>
+
+
+      {/* buttons */}
+      <View style={styles.itemLocation} >
+        <AddItemButton />
+
+      </View>
+      <AnimButtons />
+    </View>
+  );
+}
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  buttonsView: {
+    flexDirection: 'row',
+    position: 'absolute',
+    alignItems: 'flex-start',
+    left: 8,
+    bottom: 10,
+    //backgroundColor: 'red',
+  },
+  itemLocation: {
+    position: 'absolute',
+    right: 8,
+    bottom: 10,
+  }
+});
+export default GroceryList;
--- a/src/screens/storageManagement/Products.js
+++ b/src/screens/storageManagement/Products.js
@@ -0,0 +1,59 @@
+import React from 'react';
+import { StyleSheet, View, ScrollView, Text } from 'react-native';
+import { useHeaderHeight } from '@react-navigation/stack';
+
+//dependencies\
+//components
+import { AddProductButton } from '../../components/groceryComponents/ProductButtons';
+import { ListedProduct } from '../../components/groceryComponents/ListedProduct';
+
+import { COLORS } from '../../themes/Colors';
+
+//redux
+import { useSelector } from 'react-redux';
+
+
+function Products() {
+    const products = useSelector(state => state.products)
+    const productsList = products.map((product, index) => {
+        return <ListedProduct key={index} id={product.id}/>
+    });
+    return (
+        <View style={[styles.container]}>
+            {/* Scroll */}
+            <ScrollView>
+                <View style={{ height: useHeaderHeight() }} />
+                <View style=
+                    {{
+                        top: 5,
+                    }}>
+                    {productsList}
+                </View>
+                <View style={{ height: 3000 }}></View>
+            </ScrollView>
+            {/* buttons */}
+            <View style={styles.addProductView} >
+                <AddProductButton />
+            </View>
+        </View>
+    );
+}
+const styles = StyleSheet.create({
+    container: {
+        flex: 1,
+    },
+    buttonsView: {
+        flexDirection: 'row',
+        position: 'absolute',
+        alignItems: 'flex-start',
+        left: 8,
+        bottom: 10,
+        //backgroundColor: 'red',
+    },
+    addProductView: {
+        position: 'absolute',
+        right: 8,
+        bottom: 10,
+    }
+});
+export default Products;
--- a/src/screens/storageManagement/Storage.js
+++ b/src/screens/storageManagement/Storage.js
@@ -0,0 +1,26 @@
+import React from 'react';
+import { StyleSheet, View, ScrollView, Text } from 'react-native';
+
+//dependencies\
+//components
+import AddItemButton from '../../components/groceryComponents/GroceryListButtons';
+import { COLORS } from '../../themes/Colors';
+
+
+function Storage() {
+  return (
+    <View style={styles.dp00}>
+      <View>
+      </View>
+      <ScrollView>
+      </ScrollView>
+    </View>
+  );
+}
+const styles = StyleSheet.create({
+  background: {
+      flex:1,
+      backgroundColor: COLORS.dp00,
+  }
+});
+export default Storage;
--- a/src/themes/Colors.js
+++ b/src/themes/Colors.js
@@ -0,0 +1,64 @@
+// Usefull tool: https://material.io/resources/color/#!/?view.left=0&view.right=0&primary.color=5d8a09&secondary.color=642222
+export const COLORS = {
+  //Primary colors:
+  primary: '#98f8b6',        //primary (light: #3e897c) #005c51 52c7b8  b6fcec  #98f8b6
+  primaryVar: '#aaf898',     //variant
+  primaryVar2: '#F8EF98',     //variant
+
+  actionSend: '#aaf898', 
+  actionCancel: '#ef5350',  
+
+  //secondary colors:
+  secondary: '#f2aeac',      //secondary
+  secondaryVar: '#ffffff',   //secondary variant
+
+
+
+  //layout colors     #DAE9FF
+  dp00: '#0C0F12',  //0%
+  dp01: '#161a1e',  //5%
+  dp02: '#1a1e23',  //7%
+  dp03: '#1f2225',  //8%
+  dp04: '#1c2025',  //9%
+  dp06: '#23272c',  //11%
+  dp08: '#25292e',  //12%
+  dp12: '#292e33',  //14%
+  dp16: '#2b3036',  //15%
+  dp24: '#2d3238',  //16%
+
+  //text
+  textW0: '#ffffff',    //text on background
+  textW1: '#ffffff88',    //text on background
+  textW2: '#ffffffDE',    //text on background
+  textW3: '#ffffff33',    //text on background
+  textB0: '#000000EE',  //text on surface
+  textB1: '#00000088',  //text on surface
+  textB2: '#000000DE',  //text on surface
+
+  error: '#ffffff',       //error
+}
+
+// |   00dp    |    0%   | #0C0F12 |
+// |   01dp    |    5%   | #181b1e |
+// |   02dp    |    7%   | #1d2023 |
+// |   03dp    |    8%   | #1f2225 |
+// |   04dp    |    9%   | #222527 |
+// |   06dp    |   11%   | #27292c |
+// |   08dp    |   12%   | #2e2e2e |
+// |   12dp    |   14%   | #333333 |
+// |   16dp    |   15%   | #343434 |
+// |   24dp    |   16%   | #383838 |
+
+
+//   | elevation | overlay |   hex   |
+// | --------- | ------- | ------- |
+// |   00dp    |    0%   | #121212 |
+// |   01dp    |    5%   | #1e1e1e |
+// |   02dp    |    7%   | #222222 |
+// |   03dp    |    8%   | #242424 |
+// |   04dp    |    9%   | #272727 |
+// |   06dp    |   11%   | #2c2c2c |
+// |   08dp    |   12%   | #2e2e2e |
+// |   12dp    |   14%   | #333333 |
+// |   16dp    |   15%   | #343434 |
+// |   24dp    |   16%   | #383838 |
--- a/yarn.lock
+++ b/yarn.lock