Open BasselTurky opened 2 years ago
I am trying to place some buttons to control snap index like in the provided example, but every code I write above the BottomSheet component doesn't respond to clicks/touches.
<DrawerLayout ref={drawer} drawerWidth={160} drawerPosition="right" renderNavigationView={() => { return <DrawerView navigation={navigation} drawer={drawer.current} />; }} drawerType="front" drawerBackgroundColor="skyblue" keyboardDismissMode="on-drag" onDrawerClose={() => { dispatch(setDrawer(false)); }} onDrawerOpen={() => { dispatch(setDrawer(true)); }} > <DrawerLayout ref={searchDrawer} drawerWidth={300} drawerPosition="left" renderNavigationView={() => { return ( <DrawerSearchView navigation={navigation} drawer={searchDrawer.current} /> ); }} drawerType="front" drawerBackgroundColor="lightgreen" keyboardDismissMode="on-drag" // onDrawerClose={() => { // dispatch(setDrawer(false)); // }} // onDrawerOpen={() => { // dispatch(setDrawer(true)); // }} > <TouchableWithoutFeedback onPress={() => { Keyboard.dismiss(); }} > <SafeAreaView style={styles.container}> <View> <View style={styles.search}> <SearchButton /> <Button title="press" /> </View> </View> <BottomSheet keyboardAware="true" keyboardAwareExtraSnapHeight={-30} // keyboardAwareDrag="true" bottomSheerColor="#FFFFFF" // ref="BottomSheet" initialPosition={"19%"} //200, 300 snapPoints={["19%", "80%"]} isBackDrop={true} isBackDropDismissByPress={true} isRoundBorderWithTipHeader={true} // backDropColor="red" // isModal // containerStyle={{ zIndex: 5 }} // tipStyle={{backgroundColor:"red"}} // headerStyle={{ backgroundColor: "red" }} // bodyStyle={{backgroundColor:"red",flex:1}} header={ <View> <Text>Header</Text> </View> } body={ <View> <Text>Body</Text> <View> <TextInput /> </View> </View> } /> {/* Main View Start */} {/* Main View End */} </SafeAreaView> </TouchableWithoutFeedback> </DrawerLayout> </DrawerLayout>
<SearchButton /> <Button title="press" />
these two buttons are not clickable
SearchButton:
import { StyleSheet, Text, View, TouchableOpacity } from "react-native"; import React from "react"; import { FontAwesome5 } from "@expo/vector-icons"; export default function SearchButton() { return ( <TouchableOpacity onPress={() => { console.log("pressed"); }} > <View style={styles.container}> <FontAwesome5 name="search-location" size={40} color="black" /> </View> </TouchableOpacity> ); } const styles = StyleSheet.create({ container: {}, });
Is this bug?
I tried without the two DrawerLayout components and still the same.
I am trying to place some buttons to control snap index like in the provided example, but every code I write above the BottomSheet component doesn't respond to clicks/touches.
these two buttons are not clickable
SearchButton:
Is this bug?
I tried without the two DrawerLayout components and still the same.