React-native-reanimated-bottom-sheet: Unable hide bottom sheet when click touchable

Created on 26 Jul 2019 · 5Comments · Source: osdnk/react-native-reanimated-bottom-sheet

i have bottom sheet with close button on header, but when pressed bottom sheet cannot snap to specified index given,

here my code:

import { default as React } from 'react';
import { Dimensions, StyleSheet, View } from 'react-native';
import { default as BottomSheet } from 'reanimated-bottom-sheet';
import { default as Animated } from 'react-native-reanimated';
import { Portal } from 'react-native-paper';
import { AntDesign } from '@expo/vector-icons';

import { Text, Touchable } from '../common';
import { IProduct } from '../../interface';
import { color } from '../../theme/color';

interface IAddToCartProps {
  product: IProduct;
}

const window = Dimensions.get('window');

class AddToCartSheet extends React.Component<IAddToCartProps> {
  bottomSheet = React.createRef<BottomSheet>();

  sheetOpenValue = new Animated.Value(1);

  constructor(props) {
    super(props);

    this.renderContent = this.renderContent.bind(this);
    this.renderHeader = this.renderHeader.bind(this);
    this.hideBottomSheet = this.hideBottomSheet.bind(this);
  }

  showBottomSheet(): void {
    if (this.bottomSheet.current) {
      this.bottomSheet.current.snapTo(0);
    }
  }

  hideBottomSheet(): void {
    // alert called but no snapTo
    alert('pressed')
    this.bottomSheet.current.snapTo(1)
  }

  renderHeader() {
    return (
      <View style={styles.header}>
        <Touchable borderless={true} onPress={this.hideBottomSheet}>
          <AntDesign name="close" size={21} color={color.typoMedium} />
        </Touchable>
        <Text font="Medium" style={styles.headerTitle}>
          Sesuaikan
        </Text>
      </View>
    );
  }

  renderContent() {
    return (
      <View style={styles.content}>
        <Text>wkwlland</Text>
      </View>
    );
  }

  render() {
    const { cond, greaterOrEq } = Animated;

    return (
      <Portal>
        <Animated.View
          style={[
            styles.overlay,
            {
              opacity: cond(greaterOrEq(this.sheetOpenValue, 0.95), 0, 1),
            },
          ]}
          pointerEvents="none"
        />
        <BottomSheet
          renderHeader={this.renderHeader}
          renderContent={this.renderContent}
          ref={this.bottomSheet}
          snapPoints={[350, 0]}
          initialSnap={1}
          enabledInnerScrolling={false}
          callbackNode={this.sheetOpenValue}
        />
      </Portal>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  header: {
    flexDirection: 'row',
    alignItems: 'center',
    backgroundColor: '#ffffff',
    paddingTop: 20,
    borderTopLeftRadius: 20,
    borderTopRightRadius: 20,
    height: 50,
    paddingHorizontal: 16,
    width: window.width,
  },
  headerTitle: {
    marginLeft: 16,
    fontSize: 18,
  },
  content: {
    height: 350,
    paddingTop: 20,
    backgroundColor: '#ffffff',
  },
  overlay: {
    flex: 1,
    backgroundColor: 'rgba(0,0,0, .4)',
    ...StyleSheet.absoluteFillObject,
  },
});

export { AddToCartSheet };

Source

ardyfeb

All 5 comments

yes this problem still there and touchable does not work in android that is import from react native, if you import from react-native-gesture-handler then onPress is worked but your sheet will not be close, then for this you need to true enabledInnerScrolling prop then it works fine