Refactor CircleTime and TimeRange components: Clean up CircleTime rendering, adjust gradient colors, and enhance TimeRange with initial scroll index and item layout

Author: ngocdevv

App.tsx

@@ -20,8 +20,7 @@ export default function App() {
             <Header />
             <Queued />
             <View style={styles.container}>
-              <CircleTime selectedDuration={selectedDuration}
-              />
+              <CircleTime selectedDuration={selectedDuration}/>
               <TimeRange selectedDuration={selectedDuration} />
             </View>
             <Footer />

assets/images/avatar.jpg

@@ -100,7 +100,6 @@ export const CircleTime: React.FC<DraggableSliderProps> = ({
         ]}>
 
         <Animated.View pointerEvents="none">
-
           {lineIndices.map(index => {
             const isBigLine = index % bigLineIndexOffset === 0;
             const midpointOffset = bigLineIndexOffset / 2;
@@ -133,11 +132,11 @@ export const CircleTime: React.FC<DraggableSliderProps> = ({
               />
             );
           })}
+
           {hourLabels.map(({ label, tickIndex }) => {
             if (tickIndex > linesAmount) {
               return null;
             }
-
             return (
               <HourLabel
                 key={label}
@@ -151,7 +150,7 @@ export const CircleTime: React.FC<DraggableSliderProps> = ({
           })}
         </Animated.View>
         <LinearGradient
-          colors={['#000000', '#000000', '#000000', '#00000070', 'transparent']}
+          colors={['#000000', '#000000', '#000000', '#000000f9', '#000000b2', 'transparent']}
           start={{
             x: 0,
             y: 0
@@ -166,20 +165,32 @@ export const CircleTime: React.FC<DraggableSliderProps> = ({
             width: radius * 2 + 94,
             left: -220,
             top: -(WindowHeight / 2 - radius + 8),
-            // backgroundColor: 'red',
-            borderRadius: 1000
+            borderRadius: 1000,
+            alignItems: "flex-end",
+            justifyContent: "center",
           }}
-        />
+        >
+          <LinearGradient
+            colors={['transparent', '#000000', '#000000', '#000000', 'transparent']}
+            start={{
+              x: 0,
+              y: 0
+            }}
+            end={{
+              x: 0,
+              y: 1.1
+            }}
+            style={{
+              height: LABEL_HEIGHT,
+              width: LABEL_WIDTH,
+              borderRadius: 1000,
+              zIndex: 1,
+              left: 4,
+              top: -3
+            }}
+          />
+        </LinearGradient>
       </View>
-      <Animated.View
-        pointerEvents="none"
-        style={[
-          {
-            height: WindowHeight / 2,
-          },
-          styles.timer,
-        ]}
-      />
     </View>
   );
 };
@@ -193,7 +204,7 @@ type HourLabelProps = {
 };
 
 const LABEL_WIDTH = 60;
-const LABEL_HEIGHT = 28;
+const LABEL_HEIGHT = 30;
 const LABEL_RADIUS_OFFSET = 40;
 
 const HourLabel: React.FC<HourLabelProps> = ({

src/components/circle-time/index.tsx

@@ -52,7 +52,7 @@ const styles = StyleSheet.create({
         paddingVertical: 16,
         alignItems: 'center',
         justifyContent: 'center',
-        borderWidth: 1,
+        borderWidth: 2,
         borderColor: '#333333',
     },
     backButtonText: {

src/components/footer/index.tsx

@@ -29,7 +29,7 @@ export const Header = () => {
         <View style={{
             alignItems: "center",
             flexDirection: "row",
-            columnGap: 6
+            columnGap: 8
         }}>
             <Image source={require("../../../assets/images/avatar.jpg")} style={{
                 width: 32,
@@ -47,7 +47,7 @@ export const Header = () => {
             justifyContent: "center",
             alignItems: "center",
         }}>
-            <FontAwesome name="bell" size={14} color="#63666aff" />
+            <FontAwesome name="gear" size={16} color="#63666aff" />
         </View>
 
     </View>;

src/components/header/index.tsx

@@ -19,7 +19,7 @@ const TimeRangeHeight = ITEM_HEIGHT;
 const ArrowWrapperHeight = 24 * SCALE_FACTOR;
 const ArrowIconSize = 10 * SCALE_FACTOR;
 const LabelFontSize = 28 * SCALE_FACTOR;
-const ListWidth = 100 * SCALE_FACTOR;
+const ListWidth = 100 * SCALE_FACTOR - 66;
 const ContainerHeight = TimeRangeHeight + ArrowWrapperHeight * 2;
 const DurationOptions = Array.from({ length: 10 }, (_, index) => index + 1);
 const DurationSnapOffsets = DurationOptions.map((_, index) => index * ITEM_HEIGHT);
@@ -37,6 +37,19 @@ export const TimeRange: React.FC<TimeRangeProps> = ({
         [],
     );
 
+    const getItemLayout = useCallback(
+        (_: unknown, index: number) => ({
+            length: ITEM_HEIGHT,
+            offset: ITEM_HEIGHT * index,
+            index,
+        }),
+        [],
+    );
+
+    const initialScrollIndex = Math.max(
+        0,
+        DurationOptions.indexOf(Math.round(selectedDuration.value)),
+    );
 
     const onScroll = useAnimatedScrollHandler({
         onScroll: event => {
@@ -68,6 +81,8 @@ export const TimeRange: React.FC<TimeRangeProps> = ({
                     scrollEventThrottle={16}
                     decelerationRate="fast"
                     snapToAlignment="center"
+                    getItemLayout={getItemLayout}
+                    initialScrollIndex={initialScrollIndex}
                     snapToOffsets={DurationSnapOffsets}
                     contentContainerStyle={styles.scrollViewContent}
                     showsVerticalScrollIndicator={false}
@@ -81,7 +96,7 @@ export const TimeRange: React.FC<TimeRangeProps> = ({
                     style={{
                         position: 'absolute',
                         top: 0,
-                        left: 40,
+                        left: 0,
                         right: 0,
                         height: 16,
                     }}
@@ -91,7 +106,7 @@ export const TimeRange: React.FC<TimeRangeProps> = ({
                     style={{
                         position: 'absolute',
                         bottom: 0,
-                        left: 40,
+                        left: 0,
                         right: 0,
                         height: 16,
                     }}
@@ -109,9 +124,8 @@ const styles = StyleSheet.create({
     container: {
         height: ContainerHeight,
         position: "absolute",
-        width: ListWidth - 30,
-        right: 0,
-        justifyContent: 'space-between',
+        width: ListWidth,
+        right: 0
     },
     arrowWrapper: {
         alignItems: 'center',