[4/7] Add/ screen folders and navigation controls (#3)

* Fi/gitignore

* Add/NavigationSetting_1

* Add/navigation_2

* Add/react-native-svg

* Add/Navigator_done

.gitignore

@@ -64,3 +64,4 @@ yarn-error.log
 
 # testing
 /coverage
+node_modules

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+  "java.configuration.updateBuildConfiguration": "interactive"
+}

App.js

@@ -6,21 +6,14 @@
  */
 
 import React from 'react';
-import {SafeAreaView, ScrollView, Text, View} from 'react-native';
+import {SafeAreaView, ScrollView, Text, View, StyleSheet} from 'react-native';
+import MainStackNavigator from './src/navigation/MainStackNavigator';
+import 'react-native-gesture-handler';
 
-function App() {
-  return (
-    <SafeAreaView style={{}}>
-      <ScrollView style={{}}>
-        <View
-          style={{
-            backgroundColor: 'white',
-          }}>
-          <Text>TEST!!!</Text>
-        </View>
-      </ScrollView>
-    </SafeAreaView>
-  );
+export default function App() {
+  return <MainStackNavigator />;
 }
 
-export default App;
+const styles = StyleSheet.create({
+  entire: {},
+});

android/app/build.gradle

@@ -108,6 +108,8 @@ dependencies {
     // The version of react-native is set by the React Native Gradle Plugin
     implementation("com.facebook.react:react-android")
     implementation("com.facebook.react:flipper-integration")
+    // implementation("androidx.appcompat:appcompat:1.1.0-rc01")
+    // implementation("androidx.swiperefreshlayout:swiperefreshlayout:1.1.0-alpha02")
 
     if (hermesEnabled.toBoolean()) {
         implementation("com.facebook.react:hermes-android")

package.json

@@ -10,8 +10,18 @@
     "test": "jest"
   },
   "dependencies": {
+    "@react-native-community/masked-view": "^0.1.11",
+    "@react-navigation/bottom-tabs": "^6.5.20",
+    "@react-navigation/native": "^6.1.17",
+    "@react-navigation/native-stack": "^6.9.26",
+    "@react-navigation/stack": "^6.3.29",
     "react": "18.2.0",
-    "react-native": "0.73.6"
+    "react-native": "0.73.6",
+    "react-native-gesture-handler": "^2.16.0",
+    "react-native-reanimated": "^3.8.1",
+    "react-native-safe-area-context": "^4.9.0",
+    "react-native-screens": "^3.30.1",
+    "react-native-svg": "^15.1.0"
   },
   "devDependencies": {
     "@babel/core": "^7.20.0",

src/assets/UsePressAnimation.js

@@ -0,0 +1,28 @@
+import {useState} from 'react';
+import {Animated} from 'react-native';
+
+export const usePressAnimation = (initialValue = 1, toValue = 0.97) => {
+  const [scaleValue] = useState(new Animated.Value(initialValue));
+
+  const handlePressIn = () => {
+    Animated.spring(scaleValue, {
+      toValue: toValue,
+      friction: 3,
+      useNativeDriver: true,
+    }).start();
+  };
+
+  const handlePressOut = () => {
+    Animated.spring(scaleValue, {
+      toValue: initialValue,
+      friction: 3,
+      useNativeDriver: true,
+    }).start();
+  };
+
+  return {
+    scaleValue,
+    handlePressIn,
+    handlePressOut,
+  };
+};

src/assets/color.js

@@ -0,0 +1,7 @@
+export const COLOR_PRIMARY = '#003C71';
+export const COLOR_SECONDARY = '#A4D65E';
+export const COLOR_BACKGROUND = '#F5F5F5'; //FFFFFF
+export const COLOR_TEXT_BLACK = '#000000';
+export const COLOR_TEXT_DARKGRAY = '#535353';
+export const COLOR_GRAY = '#888888';
+export const COLOR_WHITE = '#FFFFFF';

src/components/AnimationButton.js

@@ -0,0 +1,41 @@
+import React from 'react';
+import {TouchableOpacity, Animated, StyleSheet} from 'react-native';
+import {usePressAnimation} from '../assets/UsePressAnimation';
+import {COLOR_GRAY} from '../assets/color';
+
+const AnimatedButton = ({
+  children,
+  onPress,
+  onLongPress,
+  style,
+  disabled = false,
+}) => {
+  const {scaleValue, handlePressIn, handlePressOut} = usePressAnimation();
+  const AnimatedTouchableOpacity =
+    Animated.createAnimatedComponent(TouchableOpacity);
+
+  return (
+    <TouchableOpacity
+      onLongPress={onLongPress}
+      activeOpacity={0.9}
+      onPressIn={handlePressIn}
+      onPressOut={handlePressOut}
+      onPress={onPress}
+      disabled={disabled}
+      style={[
+        // {transform: [{scale: scaleValue}]},
+        style,
+        disabled ? styles.disabledButton : {},
+      ]}>
+      {children}
+    </TouchableOpacity>
+  );
+};
+
+const styles = StyleSheet.create({
+  disabledButton: {
+    backgroundColor: COLOR_GRAY,
+  },
+});
+
+export default AnimatedButton;