Add confirm and back buttons to App component with styles

Author: ngocdevv

App.tsx

@@ -1,6 +1,6 @@
 import { useFonts } from "expo-font";
 import { useRef } from 'react';
-import { StyleSheet, View } from 'react-native';
+import { Platform, StyleSheet, Text, TouchableOpacity, View } from 'react-native';
 import { GestureHandlerRootView } from 'react-native-gesture-handler';
 import { useSharedValue } from 'react-native-reanimated';
 import { SafeAreaProvider } from 'react-native-safe-area-context';
@@ -13,6 +13,7 @@ import { TimeRange } from './src/components/time-range';
 const LinesAmount = 200;
 
 export default function App() {
+
   const circularSliderRef = useRef<CircularDraggableSliderRefType>(null);
   const selectedDuration = useSharedValue(1);
   return (
@@ -38,8 +39,20 @@ export default function App() {
                 }}
               />
             </View>
-            <View>
+            <View style={styles.buttonsWrapper}>
+              <TouchableOpacity
+                style={styles.confirmButton}
+                onPress={() => console.log('Confirm pressed')}
+              >
+                <Text style={styles.confirmButtonText}>Confirm</Text>
+              </TouchableOpacity>
 
+              <TouchableOpacity
+                style={styles.backButton}
+                onPress={() => console.log('Back pressed')}
+              >
+                <Text style={styles.backButtonText}>← Back</Text>
+              </TouchableOpacity>
             </View>
             <BottomTab />
           </View>
@@ -89,4 +102,47 @@ const styles = StyleSheet.create({
     backgroundColor: '#000',
     flex: 1,
   },
+  buttonsWrapper: {
+    paddingHorizontal: 20,
+    paddingBottom: 8,
+    gap: 12,
+  },
+  confirmButton: {
+    backgroundColor: '#FFFFFF',
+    borderRadius: 16,
+    paddingVertical: 16,
+    alignItems: 'center',
+    justifyContent: 'center',
+    // iOS shadow
+    ...Platform.select({
+      ios: {
+        shadowColor: '#FFFFFF',
+        shadowOffset: { width: 0, height: 4 },
+        shadowOpacity: 0.3,
+        shadowRadius: 8,
+      },
+      android: {
+        elevation: 8,
+      },
+    }),
+  },
+  confirmButtonText: {
+    color: '#504e4eff',
+    fontSize: 16,
+    fontWeight: '600',
+  },
+  backButton: {
+    backgroundColor: 'transparent',
+    borderRadius: 16,
+    paddingVertical: 16,
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderWidth: 1,
+    borderColor: '#333333',
+  },
+  backButtonText: {
+    color: '#FFFFFF',
+    fontSize: 16,
+    fontWeight: '600',
+  },
 });