I've got a ScrollView
which was working first as JavaScript and then also as TypeScript; this ScrollView
uses the ref
property to capture a reference of the ScrollView
and then invoke one of its functions, scrollToEnd()
. But I've recently beefed up my linting and I'm needing to figure out the proper way to get this reference property instance typed.
I started off with this:
import React from "react";import {ScrollView, StyleProp, ViewStyle} from "react-native";const standardStyle = {flex:1, backgroundColor:'black'};export default class ViewClass { static produceBackwardScrollingView(customStyle : StyleProp<ViewStyle>, contents : any, horizontal : boolean) { let scrollView : any; return (<ScrollView nestedScrollEnabled={true} ref={ref => { scrollView = ref }} onContentSizeChange={() => scrollView.scrollToEnd({animated: true})} style={[standardStyle, customStyle]} horizontal={horizontal}>{contents}</ScrollView> ); }}
After a lot of wrestling with the types, I came up with this which I think is in the right direction, but I'm still getting TypeScript errors.
import React from "react";import {ScrollView, StyleProp, ViewStyle} from "react-native";const standardStyle = {flex:1, backgroundColor:'black'};export default class ViewClass { static produceBackwardScrollingView(customStyle : StyleProp<ViewStyle>, contents : any, horizontal : boolean) { let scrollView : React.RefObject<ScrollView> | ScrollView | null = React.createRef(); return (<ScrollView nestedScrollEnabled={true} ref={ref => { // below: scrollView maybe assigned "ScrollView" or "null" scrollView = ref }} // below: scrollView is possibly null // also below: "Property 'scrollToEnd' does not exist on type 'ScrollView | RefObject<ScrollView>'." onContentSizeChange={() => scrollView.scrollToEnd({animated: true})} style={[standardStyle, customStyle]} horizontal={horizontal}>{contents}</ScrollView> ); }}
My scenario of course uses the ScrollView
, so I guess if there's a better way to make the ScrollView
start from the bottom that should probably fix my code in this instance. But I think this issue is generalizable in the sense that really my main problem is that I can't figure out what the type of my object reference needs to be and how to then invoke a function on it.
Note: I'm still new to React Native and TypeScript, so I may be slow to follow along.