react-native-actions-sheet icon indicating copy to clipboard operation
react-native-actions-sheet copied to clipboard

Issue with snapToIndex using react native actions sheet

Open mantu-bit opened this issue 10 months ago • 4 comments

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/

mantu-bit avatar Dec 31 '24 10:12 mantu-bit