diff --git a/src/components/BottomSheet.tsx b/src/components/BottomSheet.tsx index 096eff05..072fe891 100644 --- a/src/components/BottomSheet.tsx +++ b/src/components/BottomSheet.tsx @@ -3,6 +3,8 @@ import { BottomSheetBackdrop, BottomSheetModal, BottomSheetScrollView, + TouchableOpacity, + TouchableWithoutFeedback, } from '@gorhom/bottom-sheet'; import React, { useEffect, useMemo, useState } from 'react'; import { @@ -10,7 +12,6 @@ import { LayoutChangeEvent, Platform, StyleSheet, - TouchableOpacity, useWindowDimensions, View, } from 'react-native'; @@ -199,14 +200,31 @@ const Item: React.FC< ); - return props.switch ? ( - - {children} - - + + const switchProps = props.switch; + + return switchProps ? ( + Platform.OS === 'android' ? ( + /** Android switches are activated by pressing anywhere on the cell */ + switchProps.onValueChange(!switchProps.value)} + style={styles.itemContainer} + > + + {children} + + + + ) : ( + /** iOS switches are activated only by pressing the switch */ + + {children} + + + ) ) : ( = ({ } }, [title]); - const onTitleLayout = (e: LayoutChangeEvent) => { - setTitleHeight(e.nativeEvent.layout.height); - }; - - const onListLayout = (e: LayoutChangeEvent) => { - setListHeight(e.nativeEvent.layout.height); - }; - - const snapPoints = useMemo(() => { - const contentHeight = titleHeight + listHeight; - const maxLimit = 0.85 * screenHeight; - if (contentHeight === 0) { - return [1]; - } - return contentHeight < maxLimit ? [contentHeight] : [maxLimit]; - }, [listHeight, titleHeight, screenHeight]); + let snapPoints: number[]; + const contentHeight = titleHeight + listHeight; + const maxLimit = 0.85 * screenHeight; + if (contentHeight === 0) { + snapPoints = [1]; + } else { + snapPoints = contentHeight < maxLimit ? [contentHeight] : [maxLimit]; + } const expandSection = (sectionKey: string) => { const animations: Animated.CompositeAnimation[] = []; @@ -415,12 +425,20 @@ export const BottomSheet: React.FC = ({ > <> {title ? ( - + { + setTitleHeight(e.nativeEvent.layout.height); + }} + > {title} ) : null} - + { + setListHeight(e.nativeEvent.layout.height); + }} + > {animatedSections.map((section, index) => (
; +export type SNSwitchProps = Omit; export const SNSwitch: React.FC = props => { const theme = useContext(ThemeContext); return (