Quantcast
Channel: Active questions tagged react-native+typescript - Stack Overflow
Viewing all articles
Browse latest Browse all 6287

React Native @gorhom/bottom-sheet snapPoint error

$
0
0

I have a bottom tab sheet in my react native app and I cant get it to close by default.I have tried adding 0 as the first snapPoint value, but I believe the library has been updated and I'm not sure how to close it by default now.

Snap point '0' is invalid. If you want to allow user to close the sheet, Please use 'enablePanDownToClose' prop

https://gorhom.github.io/react-native-bottom-sheet/

import React, { useCallback, useMemo, useRef } from "react";import { StyleSheet, SafeAreaView, Pressable, Text, View } from "react-native";import BottomSheet from "@gorhom/bottom-sheet";import Field from "../components/Field";import TeamStats from "../components/TeamStats";import PlayerListItem from "../components/PlayerListItem";import { players } from "../assets/data/players";export default function TabOneScreen() {  // ref  const bottomSheetRef = useRef<BottomSheet>(null);  // variables  const snapPoints = [0, "50%"];  // const snapPoints = useMemo(() => [0, "50%"], []);  // callbacks  const viewPlayers = () => {    bottomSheetRef.current?.expand();  };  return (<SafeAreaView style={styles.container}><TeamStats /><Field /><Pressable onPress={viewPlayers} style={styles.buttonContainer}><Text>View players</Text></Pressable><BottomSheet        enablePanDownToClose        ref={bottomSheetRef}        index={0}        snapPoints={snapPoints}><View style={styles.contentContainer}><PlayerListItem player={players[0]} /></View></BottomSheet></SafeAreaView>  );}const styles = StyleSheet.create({  container: {    flex: 1,    alignItems: "center",    backgroundColor: "#4ccf4d",  },  buttonContainer: {    backgroundColor: "orange",    width: "90%",    margin: 20,    padding: 10,    alignItems: "center",    borderRadius: 50,    marginTop: "auto",  },  contentContainer: {    flex: 1,    alignItems: "center",  },});

Viewing all articles
Browse latest Browse all 6287

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>