let there be light

.prettierrc

@@ -0,0 +1,7 @@
+{
+  "trailingComma": "none",
+  "semi": false,
+  "singleQuote": true,
+  "endOfLine":"auto",
+  "tabWidth": 2
+}

App.tsx

@@ -1,20 +1,8 @@
-import { StatusBar } from 'expo-status-bar';
-import { StyleSheet, Text, View } from 'react-native';
+import React from 'react';
+import TimerSection from './src/components/TimerSection';
 
 export default function App() {
   return (
-    <View style={styles.container}>
-      <Text>Open up App.tsx to start working on your app!</Text>
-      <StatusBar style="auto" />
-    </View>
+    <TimerSection />
   );
-}
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    backgroundColor: '#fff',
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-});
+}

android/app/src/main/java/com/raymag/drpomodoro/MainApplication.java

@@ -7,6 +7,7 @@
 
 import com.facebook.react.PackageList;
 import com.facebook.react.ReactApplication;
+import com.swmansion.gesturehandler.RNGestureHandlerPackage;
 import com.facebook.react.ReactInstanceManager;
 import com.facebook.react.ReactNativeHost;
 import com.facebook.react.ReactPackage;

android/settings.gradle

@@ -1,4 +1,6 @@
 rootProject.name = 'pomodoro'
+include ':react-native-gesture-handler'
+project(':react-native-gesture-handler').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-gesture-handler/android')
 
 apply from: new File(["node", "--print", "require.resolve('expo/package.json')"].execute(null, rootDir).text.trim(), "../scripts/autolinking.gradle");
 useExpoModules()

package.json

@@ -6,16 +6,20 @@
     "android": "react-native run-android",
     "ios": "react-native run-ios",
     "build": "eas build -p android --profile development",
-    "prepare": "husky install"
+    "lint": "eslint src --max-warnings=0"
   },
   "dependencies": {
+    "@types/styled-components": "^5.1.25",
+    "@types/styled-components-react-native": "^5.1.3",
     "expo": "~45.0.0",
     "expo-splash-screen": "~0.15.1",
     "expo-status-bar": "~1.3.0",
     "react": "17.0.2",
     "react-dom": "17.0.2",
     "react-native": "0.68.2",
-    "react-native-web": "0.17.7"
+    "react-native-gesture-handler": "^2.4.2",
+    "react-native-web": "0.17.7",
+    "styled-components": "^5.3.5"
   },
   "devDependencies": {
     "@babel/core": "^7.12.9",
@@ -25,14 +29,16 @@
     "@typescript-eslint/parser": "^5.27.0",
     "eslint": "^8.17.0",
     "eslint-plugin-react": "^7.30.0",
+    "eslint-plugin-react-native": "^4.0.0",
     "husky": "^8.0.1",
     "lint-staged": "^13.0.0",
     "prettier": "2.6.2",
     "typescript": "~4.3.5"
   },
   "private": true,
   "lint-staged": {
-    "*.js": "eslint --cache --fix",
-    "*.{js,css,md}": "prettier --write"
+    "src/**/*": [
+      "yarn lint"
+    ]
   }
 }

src/components/TimerSection/TabBar/index.tsx

@@ -0,0 +1,42 @@
+import React from 'react'
+import { Container, Typography, Tab } from './style'
+
+export enum TimerType {
+  POMODORO = 'POMODORO',
+  SHORT_BREAK = 'SHORT BREAK',
+  LONG_BREAK = 'LONG BREAK'
+}
+
+// type Props = {
+//   selectedTimerType: TimerType
+//   setSelectedTimerType: (timerType: TimerType) => void
+// }
+
+// type TabProps = {
+//   label: string
+//   onSelect: () => void
+// }
+
+// const Tab = ({ label, onSelect }: TabProps) => {
+//   return <Typography onPress={onSelect}>{label}</Typography>
+// }
+
+const TabBar = () => {
+  const timerTypes = [
+    TimerType.POMODORO,
+    TimerType.SHORT_BREAK,
+    TimerType.LONG_BREAK
+  ]
+
+  return (
+    <Container>
+      {timerTypes.map((timerType: TimerType, index: number) => (
+        <Tab key={index} onPress={() => console.log(timerType)}>
+          <Typography>{timerType}</Typography>
+        </Tab>
+      ))}
+    </Container>
+  )
+}
+
+export default TabBar

src/components/TimerSection/TabBar/style.ts

@@ -0,0 +1,8 @@
+import styled from 'styled-components/native'
+import { RectButton } from 'react-native-gesture-handler'
+
+export const Container = styled.View``
+
+export const Typography = styled.Text``
+
+export const Tab = styled(RectButton)``

src/components/TimerSection/index.tsx

@@ -0,0 +1,24 @@
+import React, { useState } from 'react'
+import { Container, Text } from './style'
+import TabBar, { TimerType } from './TabBar'
+
+const TimerSection = () => {
+  const [selectedTimerType, setSelectedTimerType] = useState<TimerType>(
+    TimerType.POMODORO
+  )
+
+  return (
+    <Container>
+      {/* TabBar  */}
+      <TabBar
+        selectedTimerType={selectedTimerType}
+        setSelectedTimerType={setSelectedTimerType}
+      />
+      {/* Timer  */}
+      {/* Actions  */}
+      <Text>Pomodoro</Text>
+    </Container>
+  )
+}
+
+export default TimerSection

src/components/TimerSection/style.ts

@@ -0,0 +1,10 @@
+import styled from "styled-components/native";
+import theme from '../../../utils/theme';
+
+export const Container = styled.View`
+    background-color: ${theme.colors.primary};
+    padding: 10px;
+`
+
+export const Text = styled.Text`
+`

utils/theme.ts

@@ -0,0 +1,9 @@
+const theme = {
+    colors: {
+        primary: '#3D91EB',
+        secondary: '#4B6989',
+        white: '#FFF'
+    }
+}
+
+export default theme;