Relocated database and form to a separate screen

src/App.js

@@ -9,6 +9,7 @@ import HomeScreen from './screens/Home';
 import App_2 from './screens/Home/src/components/mqttfile';
 import store from './redux/store';
 import { Provider } from 'react-redux';
+import PlantsScreen from './screens/PlantsScreen';
 
 const Tab = createBottomTabNavigator();
 
@@ -19,6 +20,7 @@ const App = () => {
         <Tab.Navigator>
           <Tab.Screen name="Sensors" component={HomeScreen} />
           <Tab.Screen name="Mqtt" component={App_2} />
+          <Tab.Screen name="Plants" component={PlantsScreen} />
         </Tab.Navigator>
       </NavigationContainer>
     </Provider>

src/screens/Home/index.js

@@ -37,7 +37,6 @@ const HomeScreen = () => {
           <Sensor initial={0} label={'Pa'} dataType={'pressure'} />
           <Sensor initial={0} label={'%'} dataType={'humidity'} />
           <ReduxTest />
-          <Database />
         </ScrollView>
       </KeyboardAvoidingView>
     </TouchableWithoutFeedback>

src/screens/Home/src/components/Database.js

@@ -149,6 +149,8 @@ export default class Database extends React.Component {
           title="Clear data"
           onPress={this.handleClear}
         ></Button>
+
+        <Text style={styles.text}>{JSON.stringify(this.state.data)}</Text>
       </View>
     );
   }
@@ -213,6 +215,9 @@ const styles = {
     borderWidth: 2,
     minWidth: 300,
   },
+  text: {
+    maxWidth: 300,
+  },
   errorText: {
     color: 'red',
     maxWidth: 300,

src/screens/PlantsScreen.js

@@ -0,0 +1,38 @@
+import React from 'react';
+import {
+  View,
+  Text,
+  Button,
+  StyleSheet,
+  ScrollView,
+  TouchableWithoutFeedback,
+  Keyboard,
+  KeyboardAvoidingView,
+  Platform,
+} from 'react-native';
+import Database from './Home/src/components/Database';
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+});
+
+const PlantsScreen = () => {
+  return (
+    <TouchableWithoutFeedback onPress={Keyboard.dismiss}>
+      <KeyboardAvoidingView
+        behavior={Platform.OS === 'ios' ? 'padding' : 'none'}
+        style={styles.container}
+      >
+        <ScrollView>
+          <Database />
+        </ScrollView>
+      </KeyboardAvoidingView>
+    </TouchableWithoutFeedback>
+  );
+};
+
+export default PlantsScreen;