Closed henoktsegaye closed 4 years ago
The bottom sheet is not full height, even if snap points are set to 100%
How can we make the bottom scrollable sheet full height?
import React from 'react'; import { Dimensions, StyleSheet, View } from 'react-native'; import ScrollBottomSheet from 'react-native-scroll-bottom-sheet'; import {Text} from '@ui-kitten/components'; const windowHeight = Dimensions.get('window').height; export default function Example() { return ( <View style={styles.container}> <ScrollBottomSheet // If you are using TS, that'll infer the renderItem `item` type componentType="FlatList" snapPoints={[188, '100%', windowHeight -200]} initialSnapIndex={2} renderHandle={() => ( <View style={styles.header}> <View style={styles.panelHandle}/> <Text category="h4" > Explore Houses Neaerby </Text> </View> )} data={Array.from({ length: 20 }).map((_, i) => String(i))} keyExtractor={i => i} renderItem={({ item }) => ( <View style={styles.item}> <Text>{`Item ${item}`}</Text> </View> )} contentContainerStyle={styles.contentContainerStyle} /> </View> ); } const styles = StyleSheet.create({ container: { flex: 1, }, contentContainerStyle: { padding: 16, backgroundColor: '#F3F4F9', }, header: { alignItems: 'center', backgroundColor: 'white', paddingVertical: 20, borderTopLeftRadius: 20, borderTopRightRadius: 20 }, panelHandle: { width: 40, height: 2, backgroundColor: 'rgba(0,0,0,0.3)', borderRadius: 4 }, item: { padding: 20, justifyContent: 'center', backgroundColor: 'white', alignItems: 'center', marginVertical: 10, }, });
Incorrect arrangement of snapPoints. Try
snapPoints
const snapPoints = [0, '50%', windowHeight -200]; // top, center, bottom snapPoints={snapPoints}
Current Behavior
The bottom sheet is not full height, even if snap points are set to 100%
How can we make the bottom scrollable sheet full height?
Expected Behavior
How to reproduce
Your Environment