Unable to call Method from another class in React Native

Question

I have the following Snack setup (please use Android version):

https://snack.expo.io/@sj458147/stackoverflow-unable-to-call-method

When clicking Go to step 2 - I get undefined is not an object, the View should scroll by calling the method - moveToPage
If a user was to swipe the Modal View, it would move to next the next View. How can I stop this interaction (the view should only scroll when the user clicks a button and not by swiping).
Expo gives the message this.refs is deprecated, how would I update this code?

sdkcy · Accepted Answer · 2019-01-28 15:17:03Z

2

you need to use React.createRef() in your constructor. And use this reference in your component. In go() function, to achieve moveToPage(2) you need to use current of your reference like in the below;

class ShowModal2 extends Component {
  constructor(props){
    super(props);
    this.MyScrollView = React.createRef();
  }

  go = () => {
    this.MyScrollView.current.moveToPage(2);
  };

  render() {
    return (
      <Modal
        style={styles.modal}
        isVisible={true}
        onBackdropPress={this.hideModal}>
        <MyScrollView ref={this.MyScrollView}>
        ......

and apply same approach to other class

class MyScrollView extends Component {
  constructor() {
    super();
    this.state = { page: '' }
    this.scrollView = React.createRef();
  }
  moveToPage(page) {
    this.scrollView.current.scrollTo({ x: ((page - 1) * device_width), y: 0, 
    animated: true });
    alert(page);
  }

  render() {
    return (
      <View style={styles.container}>
        <ScrollView ref={this.scrollView} showsHorizontalScrollIndicator={false} horizontal={true} pagingEnabled={true}>
      ......

and check from link please-> https://snack.expo.io/@sdkcy/stackoverflow-unable-to-call-method

answered Jan 28, 2019 at 15:17

sdkcy

3,5381 gold badge18 silver badges23 bronze badges

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

2 Comments

Moni C Over a year ago

Thank you, perfect. Just one thing, currently the user can swipe to the next view, is there a way to stop this, the slide should only move when a button is pressed. Thanks

sdkcy Over a year ago

if you add scrollEnabled={false} to ScrollView component in MyScrollView class, it wont slide. Please try and let me know.

Collectives™ on Stack Overflow

Unable to call Method from another class in React Native

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