CODEWITHSUNDEEP
javascriptreactjsreact-native
amit
amit

Reputation: 10261

Styles not updating inside Component

I have a react-native component with PanResponder. I want to drag the entire container and specify the required styles. But I can see for a fact that the styles are not getting updated; the view is not getting refreshed.

Even if I use the componentDidMount() method and do change of background color with a setTimeout the styles don't seem to re-render the view.

On another class I am doing the same thing with PanResponder and dragging to increase height. And it's working there. What seems to be the trouble?

Here is the code. 

'use strict';
var React = require('react-native');
var Dimensions = require('Dimensions');
var Story = require('./Story');

var {
  View,
  StyleSheet,
  PanResponder
} = React;

// <Story data={data[0]} />
// {...this.panResponder.panHandlers}

var width = Dimensions.get('window').width;
var height = Dimensions.get('window').height;
var styles = {
    wrapper: { flex: 1 },
    container: { flex: 1, left: 0, width: width, height: height },
};

var StoryContainer = React.createClass({
    componentWillMount: function(){
        this.panResponder = PanResponder.create({
            onStartShouldSetPanResponder: this.handleStartShouldSetPanResponder,
            onMoveShouldSetPanResponder: this.handleMoveShouldSetPanResponder,
            onPanResponderGrant: this.handlePanResponderGrant,
            onPanResponderMove: this.handlePanResponderMove,
            onPanResponderRelease: this.handlePanResponderEnd,
            onPanResponderTerminate: this.handlePanResponderEnd,
        });
    },

    componentDidMount: function(){
        var that = this;
        setTimeout(function(){
            console.log('updating styles');
            styles.container.backgroundColor = '#000000';
            that.forceUpdate();
        }, 4000);
    },

    render: function(){
        var data = this.props.data;
        return (
            <View style={styles.container}>
                <Story data={data[0]} />
            </View>
        )
    },

    handleStartShouldSetPanResponder: function(evt: Object, gestureState: Object){
        return true;
    },

    handleMoveShouldSetPanResponder: function(evt: Object, gestureState: Object){
        return true;
    },

    handlePanResponderGrant: function(evt: Object, gestureState: Object){
        // return true;
    },

    handlePanResponderMove: function(evt: Object, gestureState: Object){
        console.log(gestureState.dx);
        styles.container.left = styles.container.left + gestureState.dx;
        this.forceUpdate();
    },

    handlePanResponderEnd: function(evt: Object, gestureState: Object){
        // end this sucker
    }
});

module.exports = StoryContainer;

Upvotes: 0

Views: 1192

Answers (1)

Tobia
Tobia

Reputation: 18821

You're using React wrong.

  1. Get rid of all global variables, setTimeout, and forceUpdate
  2. Understand the difference between props and state
  3. Use this.setState() to update your state and this.state.X to make use of it in your render() function.

Upvotes: 2

Related Questions