diff --git a/example/screens/SectionListExample.tsx b/example/screens/SectionListExample.tsx index 192ff26..dd1acdd 100644 --- a/example/screens/SectionListExample.tsx +++ b/example/screens/SectionListExample.tsx @@ -9,7 +9,7 @@ import React from 'react'; import Constants from 'expo-constants'; import { FontAwesome5, Ionicons } from '@expo/vector-icons'; -import { Dimensions, Platform, StyleSheet, Text, View } from 'react-native'; +import { Dimensions, Platform, StyleSheet, Text, View, TouchableHighlight } from 'react-native'; import { Colors, ProgressBar } from 'react-native-paper'; import ScrollBottomSheet from 'react-native-scroll-bottom-sheet'; import { StackNavigationProp } from '@react-navigation/stack'; @@ -36,7 +36,8 @@ const navBarHeight = 56; const sections = createMockData(); const SectionListExample: React.FC<Props> = () => { - const snapPointsFromTop = [96, '45%', windowHeight - 264]; + const snapPointsFromTop = [96, '45%', windowHeight]; + const sheetRef = React.useRef<ScrollBottomSheet<ListItemData>>(null); const animatedPosition = React.useRef(new Value(0.5)); const handleLeftRotate = concat( interpolate(animatedPosition.current, { @@ -76,6 +77,11 @@ const SectionListExample: React.FC<Props> = () => { return ( <View style={styles.container}> + <View style={{ flexDirection: 'row', justifyContent: 'space-around', width: '100%'}}> + <TouchableHighlight onPress={() => sheetRef.current?.snapTo(0)}><Text>Snap to 0</Text></TouchableHighlight> + <TouchableHighlight onPress={() => sheetRef.current?.snapTo(1)}><Text>Snap to 1</Text></TouchableHighlight> + <TouchableHighlight onPress={() => sheetRef.current?.snapTo(2)}><Text>Snap to 2</Text></TouchableHighlight> + </View> <View style={styles.balanceContainer}> <Text style={styles.poundSign}>£</Text> <Text style={styles.balance}>4,345</Text> @@ -116,9 +122,11 @@ const SectionListExample: React.FC<Props> = () => { </View> </View> <ScrollBottomSheet<ListItemData> + ref={sheetRef} enableOverScroll removeClippedSubviews={Platform.OS === 'android' && sections.length > 0} componentType="SectionList" + animationType="spring" topInset={statusBarHeight + navBarHeight} animatedPosition={animatedPosition.current} snapPoints={snapPointsFromTop}