diff --git a/NewArch/src/examples/ScrollViewExample.tsx b/NewArch/src/examples/ScrollViewExample.tsx index f2652c52..d6c12098 100644 --- a/NewArch/src/examples/ScrollViewExample.tsx +++ b/NewArch/src/examples/ScrollViewExample.tsx @@ -1,5 +1,5 @@ 'use strict'; -import {Text, ScrollView} from 'react-native'; +import {Text, ScrollView, View, Dimensions} from 'react-native'; import React from 'react'; import {Example} from '../components/Example'; import {Page} from '../components/Page'; @@ -9,6 +9,37 @@ import {usePageFocusManagement} from '../hooks/usePageFocusManagement'; export const ScrollViewExamplePage: React.FunctionComponent<{navigation?: any}> = ({navigation}) => { const firstScrollViewExampleRef = usePageFocusManagement(navigation); const {colors} = useTheme(); + + // Refs and state for keyboard-focusable ScrollViews + const horizontalScrollViewRef = React.useRef(null); + const [scrollOffset, setScrollOffset] = React.useState(0); + + // Keyboard event handler for horizontal ScrollView + const handleHorizontalScrollViewKeyDown = (e: any) => { + if (!horizontalScrollViewRef.current) return; + + const windowWidth = Dimensions.get('window').width; + const scrollAmount = windowWidth * 0.1; // 10% of window width + + if (e.nativeEvent.key === 'ArrowLeft') { + e.preventDefault(); + const newOffset = Math.max(0, scrollOffset - scrollAmount); + setScrollOffset(newOffset); + horizontalScrollViewRef.current.scrollTo({ + x: newOffset, + animated: true, + }); + } else if (e.nativeEvent.key === 'ArrowRight') { + e.preventDefault(); + const newOffset = scrollOffset + scrollAmount; + setScrollOffset(newOffset); + horizontalScrollViewRef.current.scrollTo({ + x: newOffset, + animated: true, + }); + } + }; + const example1jsx = ` Here is a very long snippet of text. The goal is for this text to be @@ -130,6 +161,52 @@ export const ScrollViewExamplePage: React.FunctionComponent<{navigation?: any}> + + + Focus this ScrollView with Tab, then use Arrow Left/Right keys to scroll + + setScrollOffset(event.nativeEvent.contentOffset.x)} + scrollEventThrottle={16}> + + Here is a very long snippet of text that requires horizontal scrolling... + + +`}> + + + Focus this ScrollView with Tab, then use Arrow Left/Right keys to scroll + + setScrollOffset(event.nativeEvent.contentOffset.x)} + scrollEventThrottle={16}> + + Here is a very long snippet of text. The goal is for this text to be + too long to fit inside this view which has a width restriction, so you + can use the arrow keys to scroll horizontally when this ScrollView is focused. + This demonstrates keyboard navigation support for horizontal ScrollViews. + You can press Tab to focus this ScrollView, then use the Left and Right arrow + keys to scroll the content horizontally. This is very useful for accessibility + and keyboard-only navigation. Let's make this text even longer to demonstrate + the scrolling functionality more effectively. + + + +