Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Buttons are not touchable when used above BottomSheet #29

Open
BasselTurky opened this issue Feb 13, 2022 · 0 comments
Open

Buttons are not touchable when used above BottomSheet #29

BasselTurky opened this issue Feb 13, 2022 · 0 comments

Comments

@BasselTurky
Copy link

BasselTurky commented Feb 13, 2022

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant