Quantcast
Channel: Active questions tagged react-native+typescript - Stack Overflow
Viewing all articles
Browse latest Browse all 6314

React Native Typescript Typing for "Backwards" ScrollView

$
0
0

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.


Viewing all articles
Browse latest Browse all 6314

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>