Change state/prop in video react-native-video component

Question

Im new to react and are experimenting a bit with react-native-video. Im trying to change a prop in the react-native-video library by clicking on a touchable element. But Im getting the errormessage:

undefined is not an object (evaluating 'this.state.setState')

Im sure this is an easy problem. I basically just want to find out how to initiate, call and change the state of the props when I am touching the defined Touchable area. In this example I want to change the rate from 0.1 to 1.

Here is my code:

type Props = {};
export default class App extends Component<Props> {
  state = {
    rate: 0.1,
  };

  _onPressButton() {
    Alert.alert('You tapped the button!')
    this.state.setState({ rate: 1 });
  }

  render() {

    return (
      <View style={styles.container}>

        <Video
          source={require('./assets/grid.mp4')}
          ref={(ref) => {
            this.player = ref
          }}                                      
          onBuffer={this.onBuffer}                
          onError={this.videoError}               
          style={styles.backgroundVideo}
          rate={this.state.rate}
        />

        <TouchableWithoutFeedback onPress={this._onPressButton}>
          <View style={styles.square1}>
            <Text style={styles.welcome}>My text</Text>
          </View>
        </TouchableWithoutFeedback>
      </View>
    );
  }
}

sorry. it wasnt meant to. I accepted two answers and that wasnt possible it seems. Thanks! — acroscene
– acroscene, Commented Jun 17, 2019 at 13:16
Unfortunately you cannot accept two answers, but you can change your mind at any time. But of course it's up to you, to decide who has the best answer. But never mind — Tim
– Tim, Commented Jun 17, 2019 at 13:17

Wai Ha Lee · Accepted Answer · 2019-06-17 13:19:22Z

1

You are not binding your function.

_onPressButton() {
    Alert.alert('You tapped the button!')
    this.state.setState({ rate: 1 });
  }

should be an arrow function like this

_onPressButton = () => {
    Alert.alert('You tapped the button!')
    this.state.setState({ rate: 1 });
  }

or you need to make a constructor and write this._onPressButton.bind(this) in it.

edited Jun 17, 2019 at 13:19

Wai Ha Lee

8,856102 gold badges61 silver badges100 bronze badges

answered Jun 17, 2019 at 13:07

Andreas Engebretsen

854 bronze badges

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

Comments

Tim · Accepted Answer · 2019-06-17 13:09:11Z

1

As the error mentions:

undefined is not an object (evaluating 'this.state.setState')

this.state has no object called setState

Change:

_onPressButton() {
    Alert.alert('You tapped the button!')
    this.state.setState({ rate: 1 });
  }

To:

_onPressButton() {
    Alert.alert('You tapped the button!')
    this.setState({ rate: 1 });
  }

Additionally you need to change:

<TouchableWithoutFeedback onPress={this._onPressButton}>

to

<TouchableWithoutFeedback onPress={() => this._onPressButton()}>

edited Jun 17, 2019 at 13:09

answered Jun 17, 2019 at 13:00

Tim

10.7k4 gold badges39 silver badges51 bronze badges

Comments

Jono · Accepted Answer · 2019-06-17 13:10:11Z

1

Your onPressButton method is not bound to the context, and as the above answers mentioned you need to use this.setState({ rate: 1 });.

You could either add a constructor and use .bind(this) like below:

constructor(props) {
    super(props);

    this. _onPressButton = this. _onPressButton.bind(this)
  }

Or you could use an auto-binding arrow function like below:

_onPressButton = () => {
    Alert.alert('You tapped the button!')
    this.setState({ rate: 1 });
  }

answered Jun 17, 2019 at 13:10

Jono

6374 silver badges8 bronze badges

Collectives™ on Stack Overflow

Change state/prop in video react-native-video component

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related