diff --git a/app/App.js b/app/App.js
index ed44375..f276f6a 100644
--- a/app/App.js
+++ b/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 (
- <>
-
-
-
-
- {global.HermesInternal == null ? null : (
-
- Engine: Hermes
-
- )}
-
-
- Step One
-
- Edit App.js to change this
- screen and then come back to see your edits.
-
-
-
- See Your Changes
-
-
-
-
-
- Debug
-
-
-
+
+
-
-
-
+ );
+ })}
+ */}
+ item.id.toString()}
+ renderItem={(itemData) => {
+ return ;
+ }}
+ />
+
);
};
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,
},
});
diff --git a/app/components/GoalInput.js b/app/components/GoalInput.js
new file mode 100644
index 0000000..66cccdb
--- /dev/null
+++ b/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 (
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+});
+
+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;
diff --git a/app/components/GoalItem.js b/app/components/GoalItem.js
new file mode 100644
index 0000000..b957d6c
--- /dev/null
+++ b/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 (
+ onDelete(item.id)}
+ style={styles.containter}>
+ {item.value}
+
+ );
+};
+
+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 (
+//
+// );
+// };
+
+// const styles = StyleSheet.create({
+// containter: {}
+// });
+
+// export default GoalItem;
diff --git a/app/config/colors.js b/app/config/colors.js
new file mode 100644
index 0000000..3a812ff
--- /dev/null
+++ b/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',
+};
diff --git a/readme.md b/readme.md
index 4e4fe62..fcb5c1d 100644
--- a/readme.md
+++ b/readme.md
@@ -7,3 +7,12 @@ ReactJs - A javascript library for building user interfaces. ReactDOM.render() a
+
+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