styles

kanzitelli · Oct 6, 2020 · 545a953 · 545a953
1 parent 3ff2968
commit 545a953
Show file tree

Hide file tree

Showing 3 changed files with 45 additions and 42 deletions.
diff --git a/src/components/Button.tsx b/src/components/Button.tsx
@@ -7,7 +7,7 @@ import {
 import AntIcon from 'react-native-vector-icons/AntDesign';
 import { TouchableOpacity } from 'react-native-gesture-handler';
 
-import useStyles, { ThemedStylesFuncType } from '../utils/useStyles';
+import useStyles from '../utils/useStyles';
 
 type ButtonTitleProps = {
   title: string;
@@ -55,12 +55,12 @@ export const ButtonIcon: React.FC<ButtonIconProps> = ({
   )
 }
 
-const _styles: ThemedStylesFuncType = theme => StyleSheet.create({
+const _styles = (theme: ThemeType) => StyleSheet.create({
   buttonContainer: {
     margin: theme.sizes.s,
   },
   buttonIcon: {
-    fontSize: 32,
+    fontSize: 28,
     color: theme.colors.text,
   },
   text: {

diff --git a/src/screens/CounterScreen.tsx b/src/screens/CounterScreen.tsx
@@ -13,7 +13,7 @@ import { useNavigationButtonPress } from 'react-native-navigation-hooks/dist/hoo
 import { useStores } from '../stores';
 import Constants from '../utils/constants';
 import { ButtonIcon } from '../components/Button';
-import useStyles, { ThemedStylesFuncType } from '../utils/useStyles';
+import useStyles from '../utils/useStyles';
 
 const CounterScreen: NavigationFunctionComponent = observer(({
   componentId,
@@ -52,7 +52,7 @@ const _styles = (theme: ThemeType) => StyleSheet.create({
     alignItems: 'center',
   },
   text: {
-    fontSize: 80,
+    fontSize: 64,
     margin: theme.sizes.s,
     textAlign: 'center',
     color: theme.colors.text,

diff --git a/src/screens/ExpoScreen.tsx b/src/screens/ExpoScreen.tsx
@@ -19,6 +19,7 @@ import { useServices } from '../services';
 import Reanimated2 from '../components/Reanimated2';
 import { ButtonTitle } from '../components/Button';
 import useStyles, { ThemedStylesFuncType } from '../utils/useStyles';
+import { ScrollView } from 'react-native-gesture-handler';
 
 
 const ExpoScreen: NavigationFunctionComponent = observer(({
@@ -42,41 +43,43 @@ const ExpoScreen: NavigationFunctionComponent = observer(({
 
   return (
     <SafeAreaView style={styles.container}>
-      <View style={styles.section}>
-        <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>
-
-      <View style={styles.section}>
-        <Text style={styles.header}>
-          { 'Reanimated 2' }
-        </Text>
-
-        <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>
+      <ScrollView>
+        <View style={styles.section}>
+          <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>
+
+        <View style={styles.section}>
+          <Text style={styles.header}>
+            { 'Reanimated 2' }
+          </Text>
+
+          <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>
+      </ScrollView>
     </SafeAreaView>
   );
 });
@@ -90,12 +93,12 @@ const _styles = (theme: ThemeType) => StyleSheet.create({
     padding: theme.sizes.m,
   },
   header: {
-    fontSize: 26,
+    fontSize: 24,
     fontWeight: 'bold',
     color: theme.colors.text,
   },
   text: {
-    fontSize: 18,
+    fontSize: 16,
     margin: theme.sizes.s,
     color: theme.colors.text,
   }