CODEWITHSUNDEEP
react-nativetouchablehighlight
Hesller Huller
Hesller Huller

Reputation: 11

React-Native: how to disable TouchableHighlight when scrolling during animation?

I need to disable a button when scrolling using Animated.ScrollView in react-native.

I am trying to apply something like: 

disabled={this.state.scrollY._value <= 30 ? false : true}

in the props of the TouchableHighlight.

From what I have learned, it is not possible to apply the value: this.state.scrollY._value directly into the 'disabled' prop of the TouchableHighlight. However I really dont know how to proceed -.-

I am really grateful for any help.

my button is in the following format:

<Animated.View>
 <TouchableHighlight>
  <Icon />
 </TouchableHighlight>
</Animated.View>

here is the complete code:

<Animated.View style={{
        position: 'absolute',
        elevation: 5,
        justifyContent: 'center',
        flex: 1,
        height: 100,
        width: 100,
        opacity: 1,
        left: SCREEN_WIDTH / 2 - SIZE / 2,
        top: 120,
        opacity: buttonTopDisappearance,
      }}>
        <TouchableHighlight
          onPress={() => {
            this.toggleView(playBack);
            if (!playBack) {
              this.setState({ playBack: true })
            } else {
              this.setState({ playBack: false })
            }
          }}
          underlayColor="#2882D8"
          disabled={this.state.scrollY._value <= 30 ? false : true}
          style={{
            flex: 1,
            alignItems: 'center',
            justifyContent: 'center',
            width: null,
            height: null,
            borderRadius: SIZE / 2,
            backgroundColor: '#48A2F8',
            position: 'relative',
            elevation: 6,
          }}
        >
          <IconFontAwesome name="plus" size={24} color="#F8F8F8" />
        </TouchableHighlight>
      </Animated.View>

Upvotes: 1

Views: 673

Answers (0)

Related Questions