Use `SpatialNavigationScrollView` to navigate through long text.

[adheus]

Describe the bug I'm not sure if this is a bug or not but I tried to use a SpatialNavigationScrollView element to make a long description modal scrollable and I had no success.

To Reproduce

<SpatialNavigationScrollView>
      <SpatialNavigationNode isFocusable={true}>
              {({ isFocused }) => 
                  <Text style={{ fontSize: 58, backgroundColor: '#FFF' }}>{"...very long mutltiple lines text"}</Text>
               }
      </SpatialNavigationNode>  
 </SpatialNavigationScrollView>  

Expected behavior Able to scroll through the text inside the SpatialNavigationScrollview.

Screenshots If applicable, add screenshots to help explain your problem.

Version and OS

• Library version: 3.5.0
• React Native version: [e.g. 0.71.2] 0.72.0
• OS [e.g. Android, web] web

[pierpo]

Hey!

We've been implementing scrolls on long text using the scrollview. The implementation is not present on the example, but you can simply add a ref to your scrollview and manually scroll upon remote press 😁 (or button press)

const Content = React.memo(({ text }: { text: string }) => {
  const scrollViewRef = useRef<ScrollView>(null);
  const yScrollRef = useRef(0);

  const onScroll = (e: NativeSyntheticEvent<NativeScrollEvent>) => {
    yScrollRef.current = e.nativeEvent.contentOffset.y;
  };

  const scrollDown = useCallback(() => {
    scrollViewRef.current?.scrollTo({ x: 0, y: yScrollRef.current + 600, animated: true });
  }, [yScrollRef]);

  const scrollUp = useCallback(() => {
    scrollViewRef.current?.scrollTo({ x: 0, y: yScrollRef.current - 600, animated: true });
  }, [yScrollRef]);

  // add listeners to scrollUp and scrollDown

  return (
     <ScrollView onScroll={onScroll} ref={scrollViewRef}>
          <Text>{longText}</Text>
     </ScrollView>
  );
});

[pierpo]

I can dive into more details if needed. Feel free to tell me if this solves your problem, it would be useful to see a part of you screen to understand what you're trying to achieve. 😊

[adheus]

Thank you, @pierpo! I'll give it a try now!

[adheus]

Forgot to close this one! Your solution works nicely, thank you so much, @pierpo !

[pierpo]

Cool! Thank you 😁