improvements

kanzitelli · Oct 5, 2020 · ef666ea · ef666ea
1 parent 3ce84d4
commit ef666ea
Show file tree

Hide file tree

Showing 2 changed files with 45 additions and 15 deletions.
diff --git a/src/screens/CounterScreen.tsx b/src/screens/CounterScreen.tsx
@@ -10,14 +10,16 @@ import { observer } from 'mobx-react';
 import { NavigationFunctionComponent } from 'react-native-navigation';
 import { useNavigationButtonPress } from 'react-native-navigation-hooks/dist/hooks';
 
-import { useStores } from '../store';
+import { useStores } from '../stores';
 import Constants from '../utils/constants';
 import { ButtonIcon } from '../components/Button';
+import useStyles, { ThemedStylesFuncType } from '../utils/useStyles';
 
 const CounterScreen: NavigationFunctionComponent = observer(({
   componentId,
 }) => {
   const { counter } = useStores();
+  const styles = useStyles(_styles);
 
   useNavigationButtonPress(counter.decrement, componentId, Constants.CounterScreen.decButtonId);
   useNavigationButtonPress(counter.increment, componentId, Constants.CounterScreen.incButtonId);
@@ -35,23 +37,25 @@ const CounterScreen: NavigationFunctionComponent = observer(({
   );
 });
 
-const styles = StyleSheet.create({
+const _styles: ThemedStylesFuncType = theme => StyleSheet.create({
   container: {
     flex: 1,
     alignItems: 'center',
     justifyContent: 'center',
+    backgroundColor: theme.colors.bg,
   },
   counterContainer: {
-    padding: 8,
+    padding: theme.sizes.s,
     flexDirection: 'row',
     width: '80%',
     justifyContent: 'space-between',
     alignItems: 'center',
   },
   text: {
     fontSize: 80,
-    margin: 8,
+    margin: theme.sizes.s,
     textAlign: 'center',
+    color: theme.colors.text,
   },
 });
 
@@ -72,7 +76,7 @@ CounterScreen.options = props => ({
         text: Constants.CounterScreen.decButtonTitle,
       }],
     title: {
-      text: 'Counter',
+      text: Constants.ScreenTitles.CounterScreen,
     },
   },
 });

diff --git a/src/screens/ExpoScreen.tsx b/src/screens/ExpoScreen.tsx
@@ -14,14 +14,19 @@ import { Constants as ExpoConstants } from 'react-native-unimodules';
 import * as Network from 'expo-network';
 
 import Constants from '../utils/constants';
-import { useStores } from '../store';
+import { useStores } from '../stores';
+import { useServices } from '../services';
 import Reanimated2 from '../components/Reanimated2';
+import { ButtonTitle } from '../components/Button';
+import useStyles, { ThemedStylesFuncType } from '../utils/useStyles';
 
 
 const ExpoScreen: NavigationFunctionComponent = observer(({
   componentId,
 }) => {
   const { ui } = useStores();
+  const { navigation } = useServices();
+  const styles = useStyles(_styles);
 
   useNavigationComponentDidAppear(() => {
     getNetworkType();
@@ -32,9 +37,7 @@ const ExpoScreen: NavigationFunctionComponent = observer(({
       const networkState = await Network.getNetworkStateAsync();
 
       ui.networkType = networkState.type;
-    } catch (e) {
-      console.log(e);
-    }
+    } catch (e) { }
   }
 
   return (
@@ -43,6 +46,7 @@ const ExpoScreen: NavigationFunctionComponent = observer(({
         <Text style={styles.header}>
           { 'From Expo SDK' }
         </Text>
+
         <Text style={styles.text}>Device ID: {ExpoConstants.deviceId}</Text>
         <Text style={styles.text}>Network type: {ui.networkType}</Text>
       </View>
@@ -54,31 +58,53 @@ const ExpoScreen: NavigationFunctionComponent = observer(({
 
         <Reanimated2 />
       </View>
+
+      <View style={styles.section}>
+        <Text style={styles.header}>
+          { 'Navigation' }
+        </Text>
+
+        <ButtonTitle
+          title={'Push this screen again'}
+          onPress={() => navigation.pushExpo(componentId)}
+        />
+        <ButtonTitle
+          title={'Show it as a modal'}
+          onPress={() => navigation.showExpo()}
+        />
+        <ButtonTitle
+          title={'Close modal'}
+          onPress={() => navigation.dismissModal(componentId)}
+        />
+      </View>
     </SafeAreaView>
   );
 });
 
-const styles = StyleSheet.create({
+const _styles: ThemedStylesFuncType = theme => StyleSheet.create({
   container: {
     flex: 1,
+    backgroundColor: theme.colors.bg,
   },
   section: {
-    padding: 16,
+    padding: theme.sizes.m,
   },
   header: {
-    fontSize: 32,
+    fontSize: 26,
     fontWeight: 'bold',
+    color: theme.colors.text,
   },
   text: {
-    fontSize: 22,
-    margin: 8,
+    fontSize: 18,
+    margin: theme.sizes.s,
+    color: theme.colors.text,
   }
 });
 
 ExpoScreen.options = props => ({
   topBar: {
     title: {
-      text: 'Expo',
+      text: Constants.ScreenTitles.ExpoScreen,
     },
   },
 });