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

Using forwardRef with typescript and react native

$
0
0

I have Onboarding and Slider components. I want to pass prop scrollview's ref to slider component and using it in button to get next slider on screen

     const Onboarding = () => {  const { width } = useOrientation();  const [currentIndex, setCurrentIndex] = useState<number>(0);  const scroll = useRef<Animated.ScrollView>(null);  const onScroll = ({ nativeEvent }: any) => {    // the current offset, {x: number, y: number}    // page index    const index = Math.round(nativeEvent.contentOffset.x / width);    setCurrentIndex(index);  };  return (<Box flex={1}><Animated.ScrollView ref={scroll} onScroll={onScroll} horizontal>        {slides.map((data, index) => (<Slide            key={index}            data={data}            ref={scroll}            {...{ currentIndex, index }}          />        ))}</Animated.ScrollView></Box>  );};interface SlideProps {  data: {    label: string;    description: string;    src: string;  };  currentIndex: number;  index: number;}export const Slide = forwardRef<Animated.ScrollView, SlideProps>(  ({ data, currentIndex, index }: SlideProps, ref) => {    const { width, height } = Dimensions.get("window");    const aspect = height / width;    return (      //error here<TouchableOpacity onPress={() => ref?.current?.getNode().scrollTo(width*(index+1))}> </TouchableOpacity>)

Error :Property 'current' does not exist on type '((instance: ScrollView | null) => void) | MutableRefObject<ScrollView | null>'.Property 'current' does not exist on type '(instance: ScrollView | null) => void


Viewing all articles
Browse latest Browse all 6214

Trending Articles



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