goals app code

app/App.js

@@ -1,105 +1,71 @@
-import React from 'react';
-import {
-  SafeAreaView,
-  StyleSheet,
-  ScrollView,
-  View,
-  Text,
-  StatusBar,
-} from 'react-native';
-
-import {
-  Header,
-  LearnMoreLinks,
-  Colors,
-  DebugInstructions,
-  ReloadInstructions,
-} from 'react-native/Libraries/NewAppScreen';
+import React, {useRef, useState} from 'react';
+import {StyleSheet, View, FlatList, Button} from 'react-native';
+import GoalInput from './components/GoalInput';
+import GoalItem from './components/GoalItem';
 
 const App = () => {
+  const [goals, setGoals] = useState([]);
+  const [isModalVisible, setIsModalVisible] = useState(false);
+
+  const ref = useRef(null);
+
+  const addGoalHandler = (goalTitle) => {
+    // setGoals([enteredGoal, ...goals]);
+    if (!goalTitle) {
+      return;
+    }
+    setGoals((currentGoals) => [
+      {id: Math.random().toString(), value: goalTitle},
+      ...currentGoals,
+    ]);
+    // setEnteredGoal('');
+    ref.current.reset();
+    setIsModalVisible(false);
+  };
+
+  const removeGoalHandler = (id) => {
+    setGoals((currentGoals) => currentGoals.filter((item) => item.id !== id));
+  };
+
   return (
-    <>
-      <StatusBar barStyle="dark-content" />
-      <SafeAreaView>
-        <ScrollView
-          contentInsetAdjustmentBehavior="automatic"
-          style={styles.scrollView}>
-          <Header />
-          {global.HermesInternal == null ? null : (
-            <View style={styles.engine}>
-              <Text style={styles.footer}>Engine: Hermes</Text>
-            </View>
-          )}
-          <View style={styles.body}>
-            <View style={styles.sectionContainer}>
-              <Text style={styles.sectionTitle}>Step One</Text>
-              <Text style={styles.sectionDescription}>
-                Edit <Text style={styles.highlight}>App.js</Text> to change this
-                screen and then come back to see your edits.
-              </Text>
-            </View>
-            <View style={styles.sectionContainer}>
-              <Text style={styles.sectionTitle}>See Your Changes</Text>
-              <Text style={styles.sectionDescription}>
-                <ReloadInstructions />
-              </Text>
-            </View>
-            <View style={styles.sectionContainer}>
-              <Text style={styles.sectionTitle}>Debug</Text>
-              <Text style={styles.sectionDescription}>
-                <DebugInstructions />
-              </Text>
+    <View style={styles.screen}>
+      <Button title="Add New GOAL" onPress={() => setIsModalVisible(true)} />
+      <GoalInput
+        ref={ref}
+        isVisible={isModalVisible}
+        onAddGoal={addGoalHandler}
+        onCancel={() => setIsModalVisible(false)}
+        goals={goals}
+      />
+      {/* <ScrollView style={styles.sectionBody}>
+        {goals.map((goal, index) => {
+          return (
+            <View style={styles.listItem}>
+              <Text key={index}>{goal}</Text>
             </View>
-            <View style={styles.sectionContainer}>
-              <Text style={styles.sectionTitle}>Learn More</Text>
-              <Text style={styles.sectionDescription}>
-                Read the docs to discover what to do next:
-              </Text>
-            </View>
-            <LearnMoreLinks />
-          </View>
-        </ScrollView>
-      </SafeAreaView>
-    </>
+          );
+        })}
+      </ScrollView> */}
+      <FlatList
+        data={goals}
+        style={styles.sectionBody}
+        keyExtractor={(item) => item.id.toString()}
+        renderItem={(itemData) => {
+          return <GoalItem item={itemData.item} onDelete={removeGoalHandler} />;
+        }}
+      />
+    </View>
   );
 };
 
 const styles = StyleSheet.create({
-  scrollView: {
-    backgroundColor: Colors.lighter,
-  },
-  engine: {
-    position: 'absolute',
-    right: 0,
-  },
-  body: {
-    backgroundColor: Colors.white,
-  },
-  sectionContainer: {
-    marginTop: 32,
-    paddingHorizontal: 24,
-  },
-  sectionTitle: {
-    fontSize: 24,
-    fontWeight: '600',
-    color: Colors.black,
-  },
-  sectionDescription: {
-    marginTop: 8,
-    fontSize: 18,
-    fontWeight: '400',
-    color: Colors.dark,
-  },
-  highlight: {
-    fontWeight: '700',
+  screen: {
+    flex: 1,
+    padding: 40,
   },
-  footer: {
-    color: Colors.dark,
-    fontSize: 12,
-    fontWeight: '600',
-    padding: 4,
-    paddingRight: 12,
-    textAlign: 'right',
+  sectionBody: {
+    // width: '80%',
+    marginTop: 10,
   },
 });
 

app/components/GoalInput.js

@@ -0,0 +1,100 @@
+import React, {
+  forwardRef,
+  useEffect,
+  useImperativeHandle,
+  useState,
+} from 'react';
+import {Button, Modal, StyleSheet, TextInput, View} from 'react-native';
+import colors from '../config/colors';
+
+const GoalInput = forwardRef((props, ref) => {
+  const [enteredGoal, setEnteredGoal] = useState();
+
+  // function goalInputHandler(enteredText) {
+  //   setEnteredGoal(enteredText);
+  // }
+
+  const goalInputHandler = (enteredText) => {
+    setEnteredGoal(enteredText);
+  };
+
+  //   useEffect(() => {
+  //     setEnteredGoal('');
+  //   }, [props.goals]);
+
+  const reset = () => {
+    setEnteredGoal('');
+  };
+
+  // use of useImperativeHandle hook to allow the child to only expose specific properties
+  // to the parent
+  useImperativeHandle(ref, () => {
+    return {
+      reset: reset,
+    };
+  });
+
+  const handleAddGoal = () => {
+    if (!enteredGoal) {
+      return;
+    }
+    props.onAddGoal(enteredGoal);
+    setEnteredGoal('');
+  };
+
+  const handleCancel = () => {
+    setEnteredGoal('');
+    props.onCancel();
+  };
+
+  return (
+    <Modal visible={props.isVisible} animationType="slide">
+      <View style={styles.inputContainer}>
+        <TextInput
+          placeholder="Enter your GOAL"
+          style={styles.input}
+          onChangeText={goalInputHandler}
+          value={enteredGoal}
+        />
+        <View style={styles.buttonContainer}>
+          <View style={styles.button}>
+            <Button
+              title="Add"
+              // onPress={() => props.onAddGoal(enteredGoal)}
+              // onPress={props.onAddGoal.bind(this, enteredGoal)}
+              onPress={handleAddGoal}
+            />
+          </View>
+          <View style={styles.button}>
+            <Button title="Cancel" color="red" onPress={handleCancel} />
+          </View>
+        </View>
+      </View>
+    </Modal>
+  );
+});
+
+const styles = StyleSheet.create({
+  inputContainer: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  input: {
+    borderWidth: 1,
+    width: '80%',
+    paddingStart: 10,
+    marginBottom: 10,
+    borderColor: colors.faded_grey,
+  },
+  buttonContainer: {
+    width: '60%',
+    flexDirection: 'row',
+    justifyContent: 'space-around',
+  },
+  button: {
+    width: '40%',
+  },
+});
+
+export default GoalInput;

app/components/GoalItem.js

@@ -0,0 +1,42 @@
+import React from 'react';
+import {StyleSheet, Text, TouchableOpacity, View} from 'react-native';
+import colors from '../config/colors';
+
+const GoalItem = ({item, onDelete}) => {
+  return (
+    <TouchableOpacity
+      activeOpacity={0.8}
+      onPress={() => onDelete(item.id)}
+      style={styles.containter}>
+      <Text>{item.value}</Text>
+    </TouchableOpacity>
+  );
+};
+
+const styles = StyleSheet.create({
+  containter: {
+    padding: 10,
+    margin: 10,
+    backgroundColor: colors.badge,
+    borderWidth: 1,
+    borderColor: colors.faded_grey,
+    borderRadius: 4,
+  },
+});
+
+export default GoalItem;
+
+// import React from 'react';
+// import { View, StyleSheet} from 'react-native';
+
+// function GoalItem(props) {
+//    return (
+//       <View style={styles.containter}></View>
+//    );
+// };
+
+// const styles = StyleSheet.create({
+//     containter: {}
+// });
+
+// export default GoalItem;

app/config/colors.js

@@ -0,0 +1,19 @@
+export default {
+  primary: '#2949b3',
+  secondary: '#283084',
+  background: '#f7f7f7',
+  black: '#000',
+  text: '#333333',
+  white: '#fff',
+  medium: '#6e6969',
+  light: '#00a69c',
+  dark: '#0c0c0c',
+  grey: '#959595',
+  line: '#dbdbdb',
+  light_grey: '#E0E0E0',
+  light_blue: '#9FA8DA',
+  faded_grey: '#a5a5a5',
+  seperator: '#f4f4f4',
+  dark_seperator: '#eaeaea',
+  badge: '#ff5858',
+};

readme.md

@@ -7,3 +7,12 @@ ReactJs - A javascript library for building user interfaces. ReactDOM.render() a
 
 <img src="https://github.com/vikassharma96/react-native-aaps/blob/main/app/assets/images/1.png"/>
 <img src="https://github.com/vikassharma96/react-native-aaps/blob/main/app/assets/images/2.png"/>
+
+1)Basics Component - View | Text | Image | TextInput | ScrollView | StyleSheet
+2)FlexBox works such that it positions elements inside of a view next to each other or above each other. Justify content, we can control how items are distributed along their main axis and with row, the main axis is from left to right, if that would be column, the main axis would be from top to bottom. Not only does every view by default use flexbox, it also by default organizes children in a column, so from top to bottom. That's also a difference to the web. In this outer view, are organized such that they align themselves along the cross axis by stretching. We have two important axis main axis and cross axis.
+3)ScrollView can be very inefficient as renders all the elements in advance, even the ones that are not on the screen. More efficient way is to use FlatList.
+4)Hooks -
+a)Basic Hooks - useState | useEffect | useContext
+b)Additional Hooks - useReducer | useCallback | useMemo | useRef | useImperativeHandle |useLayoutEffect | useDebugValue
+Use of useImperativeHandle hook to allow the child to only expose specific properties to the parent.
+6)forwardRef - forward ref use when we want to pass ref to our component