updated about us

screens/about.js

@@ -1,19 +1,31 @@
 import React from 'react';
 import {SafeAreaView} from 'react-native';
-import {Layout, Text, TopNavigation} from '@ui-kitten/components';
+import {
+  StyleService,
+  TopNavigation,
+  useStyleSheet,
+} from '@ui-kitten/components';
 
 import {Divider} from '../components/divider';
 import {Footer} from '../components/footer';
+import {About as AboutComponent} from '../components/about';
 
 export const About = () => {
+  const styles = useStyleSheet(themedStyles);
+
   return (
-    <SafeAreaView style={{flex: 1}}>
+    <SafeAreaView style={styles.container}>
       <TopNavigation alignment="center" title="About" />
       <Divider />
-      <Layout style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
-        <Text>About</Text>
-      </Layout>
+      <AboutComponent />
       <Footer />
     </SafeAreaView>
   );
 };
+
+const themedStyles = StyleService.create({
+  container: {
+    flex: 1,
+    backgroundColor: 'background-basic-color-1',
+  },
+});

screens/comparison.js

@@ -1,19 +1,28 @@
 import React from 'react';
 import {SafeAreaView} from 'react-native';
-import {Layout, Text, TopNavigation} from '@ui-kitten/components';
+import {StyleService, useStyleSheet} from '@ui-kitten/components';
 
 import {Details} from '../components/details';
 import {DetailsTopNavigation} from '../components/detailsTopNavigation';
 import {Divider} from '../components/divider';
 import {Footer} from '../components/footer';
 
 export const Comparison = () => {
+  const styles = useStyleSheet(themedStyles);
+
   return (
-    <SafeAreaView style={{flex: 1}}>
+    <SafeAreaView style={styles.container}>
       <DetailsTopNavigation />
       <Divider />
       <Details />
       <Footer />
     </SafeAreaView>
   );
 };
+
+const themedStyles = StyleService.create({
+  container: {
+    flex: 1,
+    backgroundColor: 'background-basic-color-1',
+  },
+});

screens/home.js

@@ -15,14 +15,9 @@ import {Products} from '../components/products';
 
 export const Home = () => {
   const styles = useStyleSheet(themedStyles);
-  const theme = useTheme();
 
   return (
-    <SafeAreaView
-      style={[
-        styles.flex,
-        {backgroundColor: theme['background-basic-color-1']},
-      ]}>
+    <SafeAreaView style={styles.container}>
       <TopNavigation alignment="center" title="Products" />
       <Divider />
       <Products />
@@ -32,12 +27,8 @@ export const Home = () => {
 };
 
 const themedStyles = StyleService.create({
-  flex: {
-    flex: 1,
-  },
   container: {
     flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
+    backgroundColor: 'background-basic-color-1',
   },
 });