Remove stylesheets completely in place of styled components

Author: ahummel25

.expo-shared/assets.json

@@ -16,6 +16,7 @@ module.exports = {
         allowUndefined: true
       }
     ],
-    ['@babel/plugin-proposal-class-properties']
+    ['@babel/plugin-proposal-class-properties'], // Comment out when running "yarn run <ios or android>", but needed for doing serverless web app deploy
+    ['@babel/plugin-transform-flow-strip-types'] // Needed for react navigation issue - https://github.com/react-navigation/react-navigation/issues/6058
   ]
 };

babel.config.js

@@ -49,6 +49,8 @@
     "yup": "^0.32.0"
   },
   "devDependencies": {
+    "@babel/plugin-proposal-class-properties": "^7.13.0",
+    "@babel/plugin-transform-flow-strip-types": "^7.13.0",
     "@expo/next-adapter": "^2.1.41",
     "@testing-library/jest-native": "^4.0.0",
     "@testing-library/react-native": "^7.1.0",

package.json

@@ -40,13 +40,17 @@ export interface LoadFontProps {
   fontsToLoad: {
     [fontFamily: string]: FontSource;
   };
+  // eslint-disable-next-line no-unused-vars
   setFontLoaded: (fontLoaded: boolean) => void;
 }
 
 export interface TextInputProps {
+  // eslint-disable-next-line no-unused-vars
   onChangeText?: (text: string) => void;
+  // eslint-disable-next-line no-unused-vars
   onBlur?: (e: NativeSyntheticEvent<TextInputFocusEventData>) => void;
   onSubmitEditing?: (
+    // eslint-disable-next-line no-unused-vars
     e: NativeSyntheticEvent<TextInputSubmitEditingEventData>
   ) => void;
   placeholder?: string;

src/interfaces/index.ts

@@ -1,10 +1,9 @@
-import React, { FC, FormEvent, useRef } from 'react';
+import React, { FC, FormEvent } from 'react';
 import {
   GestureResponderEvent,
   KeyboardAvoidingView,
   NativeSyntheticEvent,
   Platform,
-  StyleSheet,
   Text,
   TextInput,
   TextInputSubmitEditingEventData
@@ -27,27 +26,16 @@ const loginSchema = Yup.object().shape({
   password: Yup.string().required('Password is required')
 });
 
-const styles = StyleSheet.create({
-  errorInput: {
-    color: 'red',
-    fontSize: 12,
-    marginLeft: 16
-  },
-  fbLoginButton: {
-    height: 45,
-    marginTop: 10,
-    backgroundColor: 'transparent'
-  },
-  loginButton: {
-    borderRadius: 5,
+const FBLoginButton = styled(Button).attrs({
+  buttonStyle: {
+    backgroundColor: 'transparent',
     height: 45,
-    marginTop: 10,
-    backgroundColor: colors.lightBlue
+    marginTop: 10
   },
-  signUp: {
-    textAlign: 'center'
+  titleStyle: {
+    color: colors.lightBlue
   }
-});
+})``;
 
 const KeyboardAvoidingViewStyled = styled(({ ...rest }) => (
   <KeyboardAvoidingView {...rest} />
@@ -57,6 +45,14 @@ const KeyboardAvoidingViewStyled = styled(({ ...rest }) => (
   width: ${Platform.OS == 'web' ? '100%' : '75%'};
 `;
 
+const LoginButton = styled(Button).attrs({
+  buttonStyle: {
+    borderRadius: 5,
+    height: 45,
+    marginTop: 10
+  }
+})``;
+
 const LoginFormView = styled.View`
   flex: 1;
   height: 2000px;
@@ -71,7 +67,11 @@ const LogoText = styled.Text`
   text-align: center;
 `;
 
-const SignUpText = styled(
+const SignUpText = styled.Text`
+  text-align: center;
+`;
+
+const SignUpTextNav = styled(
   ({ navigation, ...rest }: SignUpButtonProps): JSX.Element => {
     const router = useRouter();
     return (
@@ -93,29 +93,32 @@ const SignUpText = styled(
   color: ${colors.lightBlue};
 `;
 
+const StyledErrorText = styled.Text`
+  color: red;
+  font-size: 12px;
+  margin-left: 16px;
+`;
+
 const TextLoginInputField = styled(
   ({
     touched,
     error,
     ...rest
-  }: TextInputProps & TouchedProps & ErrorProps): JSX.Element => {
-    const passwordInput = useRef<TextInput>(null);
-
-    return (
-      <>
-        <TextInput
-          accessible
-          accessibilityLabel="textinput"
-          autoCapitalize="none"
-          ref={passwordInput}
-          {...rest}
-        />
-        {touched && error ? (
-          <Text style={styles.errorInput}>{error}</Text>
-        ) : null}
-      </>
-    );
-  }
+  }: TextInputProps & TouchedProps & ErrorProps): JSX.Element => (
+    <>
+      <TextInput
+        accessible
+        accessibilityLabel="textinput"
+        autoCapitalize="none"
+        {...rest}
+      />
+      {touched && error ? (
+        <>
+          <StyledErrorText>{error}</StyledErrorText>
+        </>
+      ) : null}
+    </>
+  )
 )`
   font-size: 14px;
   border-radius: 5px;
@@ -232,8 +235,8 @@ const Login: FC<LoginProps> = ({ navigation }): JSX.Element => (
                 touched={touched.password}
                 value={values.password}
               />
-              <Button
-                buttonStyle={[styles.loginButton]}
+              <LoginButton
+                // buttonStyle={[styles.loginButton]}
                 onPress={(event: GestureResponderEvent): void => {
                   handleSubmit(
                     (event as unknown) as FormEvent<HTMLFormElement>
@@ -244,15 +247,18 @@ const Login: FC<LoginProps> = ({ navigation }): JSX.Element => (
             </>
           )}
         </Formik>
-        <Button
-          buttonStyle={[styles.fbLoginButton]}
-          titleStyle={{ color: colors.lightBlue }}
+        <FBLoginButton
+          //   buttonStyle={[styles.fbLoginButton]}
+          //   titleStyle={{ color: colors.lightBlue }}
+          onPress={(event: GestureResponderEvent): void => {
+            console.log(event);
+          }}
           title="Login with Facebook"
         />
-        <Text style={styles.signUp}>
+        <SignUpText>
           Don&apos;t have an account?{' '}
-          <SignUpText navigation={navigation}>Sign up here</SignUpText>.
-        </Text>
+          <SignUpTextNav navigation={navigation}>Sign up here</SignUpTextNav>.
+        </SignUpText>
       </LoginFormView>
     </KeyboardAvoidingViewStyled>
   </>

src/pages/login.tsx

@@ -737,7 +737,7 @@
     "@babel/helper-plugin-utils" "^7.10.4"
     "@babel/plugin-syntax-flow" "^7.12.1"
 
-"@babel/plugin-transform-flow-strip-types@^7.0.0":
+"@babel/plugin-transform-flow-strip-types@^7.0.0", "@babel/plugin-transform-flow-strip-types@^7.13.0":
   version "7.13.0"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-flow-strip-types/-/plugin-transform-flow-strip-types-7.13.0.tgz#58177a48c209971e8234e99906cb6bd1122addd3"
   integrity sha512-EXAGFMJgSX8gxWD7PZtW/P6M+z74jpx3wm/+9pn+c2dOawPpBkUX7BrfyPvo6ZpXbgRIEuwgwDb/MGlKvu2pOg==