rgommezz / react-native-scroll-bottom-sheet

Cross platform scrollable bottom sheet with virtualisation support, native animations at 60 FPS and fully implemented in JS land :fire:
MIT License
1.55k stars 67 forks source link

Can't make the bottom sheet full height #40

Closed henoktsegaye closed 4 years ago

henoktsegaye commented 4 years ago

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

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,
  },
});

Your Environment

version
Platform (Android, iOS or both) Android
react-native-scroll-bottom-sheet 0.63
react-native 0.61
react-native-gesture-handler 1.5.6
react-native-reanimated 0.11
wobsoriano commented 4 years ago

Incorrect arrangement of snapPoints. Try

const snapPoints = [0, '50%', windowHeight -200]; // top, center, bottom
snapPoints={snapPoints}