CODEWITHSUNDEEP
reactjsreact-nativereact-hooksuse-ref
Roei Grinshpan
Roei Grinshpan

Reputation: 453

Why get scrollIntoView is not a function

its a simple question, i just dont understand why i get "is not a function of a lot of ref functions.

  1. i declare use ref variable like so:

     const massageTypeRef = useRef();

  2. Now I have Text component at the top of the page: Choose type: 3.and i have another button in the bottom , i want when the button clicked, take the user all the way up to the Text component. in my bottom button i have:

      <AnimatedButton
             onPress={() => massageTypeRef.current.scrollIntoView()}/// 
 here i dont know why i get is not a function
              pass
             icon="arrow-up"
             buttonStyle={styles.problembutton}
             textStyle={styles.problembuttontext}
         />

i tried a lot of methods like:

onPress={() =>
                    massageTypeRef.current.scrollIntoView({
                        behavior: "smooth",
                    })

and:

onPress={() =>
                    massageTypeRef.current.scrollTo()
                    })

but i always get: TypeError: massageTypeRef.current.scrollIntoView is not a function. (In 'massageTypeRef.current.scrollIntoView()', 'massageTypeRef.current.scrollIntoView' is undefined)

i build a snack in expo to show what i want to do, for some reason there is work perfect, and when i do the same thing in my projects it give me message "is not a function...." heres the snack https://snack.expo.io/OYWlNQwP4

here link to my github component and project: https://github.com/roeigr7/LIOR/blob/main/src/screens/MeetingPickerScreen.js

Upvotes: 0

Views: 6584

Answers (1)

Artem Bespolov
Artem Bespolov

Reputation: 94

You should use ScrollView with appropriate functions like scrollTo instead of View and height of ScrollView must be more then screen height

https://reactnative.dev/docs/scrollview#snaptoend

import React, { useRef, useState } from 'react';
import { Button, Text, View, StyleSheet, ScrollView } from 'react-native';
import Constants from 'expo-constants';

// You can import from local files
import AssetExample from './components/AssetExample';

// or any pure javascript modules available in npm
import { Card } from 'react-native-paper';

export default function App() {
  const myref = useRef();
  return (
    <ScrollView ref={myref}>
      <View style={styles.txt}>
        <Text style={styles.text}>TEXT THAT THE REF NEED TO GO TO </Text>
      </View>
      <View></View>
      <Button
        title="when press go up to text comp"
        onPress={() => {
          myref.current.scrollTo(0);
        }}
      />
    </ScrollView>
  );
}
const styles = StyleSheet.create({
  text: {
    color: 'black',
    padding: 20,
    backgroundColor: 'grey',
  },
  txt: {
    minHeight: 1600,
    backgroundColor: 'white',
  },
});

Upvotes: 2

Related Questions