Open Content by Tap on Header

[fritzfr]

Hi,

I was wondering if it is at all possible to open the content by a tap on the visible header (basically how on Spotify App, the player at the bottom works).

The following is based on the ideas from the Imperative example (https://github.com/osdnk/react-native-reanimated-bottom-sheet/blob/master/Example/Imperative.js). My custom Tab Bar which renders the Header above the react-navigation tab bar:

export default class CustomTabBar extends React.Component {
    bottomSheetRef = React.createRef();

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

    renderHeader = () => {
        return (
                         // Tapping on it should open content (snap to full height)
            <TouchableOpacity
                onPress={() => this.bottomSheetRef.current.snapTo(1)}>
                <Header />
            </TouchableOpacity>
        );
    }

    render() {
        return (
            <View>
                <BottomSheet
                    ref={this.bottomSheetRef}
                    // 130 is right above tab bar, 110% is full height where the header is hidden
                    snapPoints={[130, '110%']}
                    renderContent={this.renderContent}
                    enabledContentTapInteraction
                    enabledBottomClamp
                    renderHeader={this.renderHeader} />
                <View style={{ zIndex: 110 }}>
                    <BottomTabBar {...this.props} />
                </View>
            </View>
        );
    }
}

However, nothing is happening on a tap on the header. I'm clueless on where to look for the problem. Any ideas? In addition, it would be cool to hide the header when the content is expanded. Currently I'm solving this by snapping to > 100% such that the header is off-screen.

[raajnadar]

You are using createRef()

Maybe this is the issue

Note that if you wish to use React.createRef() support for interactions you need to use v.16.3 of React

https://kmagiera.github.io/react-native-gesture-handler/docs/getting-started.html

[fritzfr]

I'm using createRef() because the example I mentioned also uses it. And I am on React 16.9.

[jakovB777]

Hi, you need to include onPress={() => bottomSheetRef.current.snapTo(1)}>

Like this:

<TouchableOpacity
    pointerEvents="none"
    onPress={() => bottomSheetRef.current.snapTo(1)}>
    <Header />
</TouchableOpacity>