Environment Variables (#69)

* Clean up frontend

* Fix linting issue

* Add environment variables

* Sneak in fix for typescript compiler error

* Clean up frontend (#68)

* Clean up frontend

* Fix linting issue

Author: Advayp

frontend/.gitignore

@@ -36,3 +36,5 @@ yarn-error.*
 *.tsbuildinfo
 
 app-example
+
+.env

frontend/app/(tabs)/explore.tsx

@@ -1,10 +1,17 @@
 import React from 'react';
-import { Text, SafeAreaView } from 'react-native';
+import { Text, SafeAreaView, Button } from 'react-native';
+import { TEST } from 'react-native-dotenv';
 
 export default function TabTwoScreen() {
   return (
     <SafeAreaView>
       <Text>Tab Two</Text>
+      <Button
+        title="asdf"
+        onPress={() => {
+          console.log(TEST);
+        }}
+      />
     </SafeAreaView>
   );
 }

frontend/babel.config.js

@@ -0,0 +1,15 @@
+module.exports = function (api) {
+  api.cache(false);
+  return {
+    presets: ['babel-preset-expo'],
+    plugins: [
+      [
+        'module:react-native-dotenv',
+        {
+          moduleName: 'react-native-dotenv',
+          verbose: false,
+        },
+      ],
+    ],
+  };
+};

frontend/components/ExternalLink.tsx

@@ -11,6 +11,7 @@ export function ExternalLink({ href, ...rest }: Props) {
     <Link
       target="_blank"
       {...rest}
+      //@ts-ignore
       href={href}
       onPress={async (event) => {
         if (Platform.OS !== 'web') {

frontend/components/ParallaxScrollView.tsx

@@ -1,11 +1,6 @@
 import type { PropsWithChildren, ReactElement } from 'react';
 import { StyleSheet } from 'react-native';
-import Animated, {
-  interpolate,
-  useAnimatedRef,
-  useAnimatedStyle,
-  useScrollViewOffset,
-} from 'react-native-reanimated';
+import Animated, { useAnimatedRef } from 'react-native-reanimated';
 
 import { ThemedView } from './ThemedView';
 import { useBottomTabOverflow } from './ui/TabBarBackground';
@@ -26,28 +21,8 @@ export default function ParallaxScrollView({
 }: Props) {
   const colorScheme = useColorScheme() ?? 'light';
   const scrollRef = useAnimatedRef<Animated.ScrollView>();
-  const scrollOffset = useScrollViewOffset(scrollRef);
   const bottom = useBottomTabOverflow();
-  const headerAnimatedStyle = useAnimatedStyle(() => {
-    return {
-      transform: [
-        {
-          translateY: interpolate(
-            scrollOffset.value,
-            [-HEADER_HEIGHT, 0, HEADER_HEIGHT],
-            [-HEADER_HEIGHT / 2, 0, HEADER_HEIGHT * 0.75]
-          ),
-        },
-        {
-          scale: interpolate(
-            scrollOffset.value,
-            [-HEADER_HEIGHT, 0, HEADER_HEIGHT],
-            [2, 1, 1]
-          ),
-        },
-      ],
-    };
-  });
+
 
   return (
     <ThemedView style={styles.container}>
@@ -61,7 +36,6 @@ export default function ParallaxScrollView({
           style={[
             styles.header,
             { backgroundColor: headerBackgroundColor[colorScheme] },
-            headerAnimatedStyle,
           ]}
         >
           {headerImage}

frontend/package-lock.json

@@ -53,6 +53,7 @@
     "eslint-plugin-import": "^2.31.0",
     "jest": "^29.2.1",
     "jest-expo": "~52.0.3",
+    "react-native-dotenv": "^3.4.11",
     "react-test-renderer": "18.3.1",
     "typescript": "^5.3.3"
   },