Why get scrollIntoView is not a function

Question

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

i declare use ref variable like so:
```
 const massageTypeRef = useRef();
```

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

Artem Bespolov · Accepted Answer · 2020-12-10 16:28:35Z

2

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',
  },
});

answered Dec 10, 2020 at 16:28

Artem Bespolov

942 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Roei Grinshpan Over a year ago

Ok. But my component is inside another scroll view and its give me errors. How can i handlw this?

Roei Grinshpan Over a year ago

Or there is a function for view that use ref to an element?

Collectives™ on Stack Overflow

Why get scrollIntoView is not a function

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related