changes

src/components/AnimatedButton/index.tsx

@@ -23,7 +23,7 @@ const Button = ( props ) => {
         ).start();
     }
     return (
-        <View>
+        <View style = { styles.buttonView }>
             <Pressable
                 style = { styles.button }
                 onPressIn = { fadeIn }

src/screens/HomeScreen.tsx

@@ -1,34 +1,14 @@
 
 import React from 'react';
 import { Pressable, View, Text, StyleSheet } from 'react-native';
+import TextButton from '../components/TextButton';
 import styles from '../styles';
 const HomeScreen = ({ navigation }) => {
     return (
         <View style = { styles.screen }>
             <Text style = { styles.title }>Station Finder</Text>
-            {/* <Pressable
-
-                onPress={() =>
-                    navigation.navigate('Profile', { name: 'Jane' })
-                }
-                style={ ( {pressed} ) => homeScreenButton( pressed ) }
-            ><Text style = { styles.text }>ProfileScreen</Text></Pressable> */}
-            <Pressable
-                onPress={() =>
-                    navigation.navigate('HomeMap', { data: '...map data...' })
-                }
-                style={ ( {pressed} ) => homeScreenButton( pressed ) }
-            ><Text style = { styles.text }>Map</Text></Pressable>
-            {/* <Pressable
-                onPress={() =>
-                    navigation.navigate('StaticMap', { data: '...map data...' })
-                }
-                style={ ( {pressed} ) => homeScreenButton( pressed ) }
-            ><Text style = { styles.text }>StaticMap</Text></Pressable> */}
-            <Pressable
-                onPress = { () => navigation.navigate( 'AboutScreen', {} ) }
-                style = { ( {pressed} ) => homeScreenButton( pressed ) }
-            ><Text style = { styles.text }>About</Text></Pressable>
+            <TextButton onPress={ () => navigation.navigate( 'HomeMap' ) }>Map</TextButton>
+            <TextButton onPress = { () => navigation.navigate( 'AboutScreen', {} ) }>About</TextButton>
         </View>
 
     )

src/styles/index.tsx

@@ -221,13 +221,16 @@ const styles = StyleSheet.create({
     //     flex: 1,
     //     justifyContent: 'center',
     // },
+    buttonView: {
+        width: "80%"
+    },
     button: { 
         justifyContent: 'center',
         alignSelf: 'center',
         margin: 3,
         padding: 6,
         borderRadius: 8,
-        width: "80%",
+        // width: "80%",
         borderColor: 'rgb( 155, 170, 180 )',
         color: 'rgb( 200, 200, 200 )',
         borderWidth: 1,