react-native-actions-sheet
react-native-actions-sheet copied to clipboard
Issue with snapToIndex using react native actions sheet
Hey everyone, I am migrating my project bottom sheet integration from gorhum to react native actions sheet. But before that i wanted to try the basic example of it inside my app. I tried and it worked well when i use show() method from ref but it do not work when i use snapToIndex(1). I am not using SheetManager yet, i don't think i will need that, i Just want basic implementation in my project. Below is the code i am using
import { Text, View } from "react-native";
import React, { useEffect, useRef } from "react";
import { createStyleSheet, useStyles } from "react-native-unistyles";
import { Button, ScreenWrapper } from "@/components";
import ActionSheet from "react-native-actions-sheet";
const Notifications = () => {
// const { styles, theme } = useStyles(stylesheet);
const actionSheetRef = useRef(null);
return (
<ScreenWrapper>
<Text>Notifications</Text>
<Button title={"show Action sheet"} onPress={() => actionSheetRef.current?.snapToIndex(1)} />
<ActionSheet
ref={actionSheetRef}
gestureEnabled
initialSnapIndex={0}
snapPoints={[30, 60]}
containerStyle={{ height: 500 }}
onChange={(position, height) => {
console.log("position: " + position);
console.log("height: " + height);
// Position is 0 if action sheet has reached top.
const hasReachedTop = position === 0;
// Get the offset from bottom
const offsetFromBottom = height - position;
}}
>
<View style={{}}>
<Text>Hi, I am here.</Text>
</View>
</ActionSheet>
</ScreenWrapper>
);
};
export default Notifications;
const stylesheet = createStyleSheet((theme) => ({}));
Reddit post: https://www.reddit.com/r/reactnative/comments/1hneu5z/issue_with_snaptoindex_using_react_native_actions/