chore: added test screen to test issue #44

Highlights:
- Added new test screen with the example code from issue #44
  (#44)
- Could not reproduce the issue with the TouchableOpacity not being
  pressable

Author: e-younan

example/src/navigation/AppNavigation.tsx

@@ -15,6 +15,7 @@ import {
   ArbitraryYTransitionHeaderUsageScreen,
   InvertedUsageScreen,
   CustomOnScrollWorkletUsageScreen,
+  TestScreen,
 } from '../screens';
 
 const Stack = createNativeStackNavigator<RootStackParamList>();
@@ -50,5 +51,6 @@ export default () => (
       name="CustomOnScrollWorkletUsageScreen"
       component={CustomOnScrollWorkletUsageScreen}
     />
+    <Stack.Screen name="TestScreen" component={TestScreen} />
   </Stack.Navigator>
 );

example/src/navigation/types.ts

@@ -15,6 +15,7 @@ export type RootStackParamList = {
   ArbitraryYTransitionHeaderUsageScreen: undefined;
   InvertedUsageScreen: undefined;
   CustomOnScrollWorkletUsageScreen: undefined;
+  TestScreen: undefined;
 };
 
 // Overrides the typing for useNavigation in @react-navigation/native to support the internal
@@ -83,3 +84,5 @@ export type CustomOnScrollWorkletUsageScreenNavigationProps = NativeStackScreenP
   RootStackParamList,
   'CustomOnScrollWorkletUsageScreen'
 >;
+
+export type TestScreenNavigationProps = NativeStackScreenProps<RootStackParamList, 'TestScreen'>;

example/src/screens/Home.tsx

@@ -76,6 +76,11 @@ const SCREEN_LIST_CONFIG: ScreenConfigItem[] = [
     description:
       "A simple example with a custom worklet that tracks the scroll container's offset.",
   },
+  {
+    name: 'Test Screen',
+    route: 'TestScreen',
+    description: 'A simple example of the library using the ScrollView.',
+  },
 ];
 
 const HeaderComponent: React.FC<ScrollHeaderProps> = ({ showNavBar }) => {

example/src/screens/index.ts

@@ -13,3 +13,4 @@ export { default as TwitterProfileScreen } from './usage/TwitterProfile';
 export { default as AbsoluteHeaderBlurSurfaceUsageScreen } from './usage/AbsoluteHeaderBlurSurface';
 export { default as ArbitraryYTransitionHeaderUsageScreen } from './usage/ArbitraryYTransitionHeader';
 export { default as CustomOnScrollWorkletUsageScreen } from './usage/CustomWorklet';
+export { default as TestScreen } from './usage/TestScreen';

example/src/screens/usage/TestScreen.tsx

@@ -0,0 +1,108 @@
+import React, { useCallback, useMemo, useState } from 'react';
+import { RefreshControl, StyleSheet, Text, TouchableOpacity, View } from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import {
+  Header,
+  LargeHeader,
+  ScalingView,
+  ScrollViewWithHeaders,
+  ScrollHeaderProps,
+  ScrollLargeHeaderProps,
+} from '@codeherence/react-native-header';
+
+import { range } from '../../utils';
+import { BackButton } from '../../components';
+import type { TestScreenNavigationProps } from '../../navigation';
+
+const HeaderComponent: React.FC<ScrollHeaderProps> = ({ showNavBar }) => {
+  return (
+    <Header
+      showNavBar={showNavBar}
+      headerCenterFadesIn={false}
+      borderColor="red"
+      initialBorderColor="blue"
+      headerCenter={
+        <Text style={styles.navBarTitle} numberOfLines={1}>
+          Header
+        </Text>
+      }
+      headerLeft={<BackButton />}
+    />
+  );
+};
+
+const Simple: React.FC<TestScreenNavigationProps> = () => {
+  const { bottom } = useSafeAreaInsets();
+  const [refreshing, setRefreshing] = useState(false);
+
+  const data = useMemo(() => range({ end: 100 }), []);
+
+  const onRefresh = async () => {
+    if (refreshing) return;
+
+    setRefreshing(true);
+    // Mimic some asynchronous task
+    await new Promise((res) => setTimeout(res, 2500));
+    setRefreshing(false);
+  };
+
+  const LargeHeaderComponent: React.FC<ScrollLargeHeaderProps> = useCallback(({ scrollY }) => {
+    return (
+      <LargeHeader>
+        <ScalingView scrollY={scrollY}>
+          <View
+            style={{
+              flexDirection: 'row',
+              justifyContent: 'space-between',
+              alignItems: 'center',
+              paddingHorizontal: 24,
+            }}
+          >
+            <Text style={{ fontSize: 24 }}>List</Text>
+            <TouchableOpacity onPress={() => console.log('Pressed')}>
+              <Text>Icon</Text>
+            </TouchableOpacity>
+          </View>
+        </ScalingView>
+      </LargeHeader>
+    );
+  }, []);
+
+  return (
+    <ScrollViewWithHeaders
+      HeaderComponent={HeaderComponent}
+      LargeHeaderComponent={LargeHeaderComponent}
+      automaticallyAdjustsScrollIndicatorInsets={false}
+      scrollIndicatorInsets={{ bottom }}
+      contentContainerStyle={{ paddingBottom: bottom }}
+      refreshControl={
+        <RefreshControl refreshing={refreshing} colors={['#8E8E93']} onRefresh={onRefresh} />
+      }
+    >
+      <View style={styles.children}>
+        {data.map((i) => (
+          <View key={`text-${i}`} style={styles.box} />
+        ))}
+      </View>
+    </ScrollViewWithHeaders>
+  );
+};
+
+export default Simple;
+
+const styles = StyleSheet.create({
+  children: { marginTop: 16, paddingHorizontal: 16 },
+  box: {
+    backgroundColor: 'lightgray',
+    height: 50,
+    marginVertical: 8,
+    borderRadius: 8,
+  },
+  navBarTitle: { fontSize: 16, fontWeight: 'bold' },
+  largeHeaderStyle: { flexDirection: 'row-reverse' },
+  largeHeaderSubtitleStyle: {
+    fontSize: 16,
+    fontWeight: 'bold',
+    paddingHorizontal: 16,
+  },
+});