Day 8

Author: nerdjfpb

App.js

@@ -1,22 +1,42 @@
 import React, { useState } from 'react'
-import { StyleSheet, View } from 'react-native'
-
-import Counter from './Counter'
+import { StyleSheet, View, Text, Button } from 'react-native'
 
 export default function App() {
 	const [counter, setCounter] = useState(0)
 	return (
 		<View style={styles.container}>
-			<Counter counter={counter} />
+			<Text style={styles.heading}>{counter}</Text>
+			<Button
+				title='Increase +'
+				color='#014294'
+				onPress={() => setCounter(counter + 1)}
+			/>
+			<Button
+				title='Decrease - '
+				color='#ff6160'
+				onPress={() => setCounter(counter - 1)}
+				disabled={counter < 1 ? true : false}
+			/>
+			<Button
+				title='Reset to Zero'
+				color='#fdc5c8'
+				onPress={() => setCounter(0)}
+				disabled={counter < 1 ? true : false}
+			/>
 		</View>
 	)
 }
 
 const styles = StyleSheet.create({
 	container: {
 		flex: 1,
-		backgroundColor: '#fff',
-		alignItems: 'center',
-		justifyContent: 'center'
-	}
+		backgroundColor: '#2a2b3d',
+		padding: 30,
+		justifyContent: 'center',
+	},
+	heading: {
+		color: '#ff6160',
+		fontSize: 100,
+		textAlign: 'center',
+	},
 })

readme.md

@@ -18,3 +18,6 @@ You can check the commits to find the part by part codes.
 - [Day 6 - Core & Native Components in React Native](https://www.instagram.com/p/B-eaneUAxt7/)
 - [Day 7 - Platform specific code in React Native](https://www.instagram.com/p/B-jocETFsN3/)
 
+# Projects
+
+- [Day 8 - Counter App using React Native](https://www.instagram.com/p/B-orhNBAfmj/)