Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Issue with snapToIndex using react native actions sheet #407

Open
mantu-bit opened this issue Dec 31, 2024 · 3 comments
Open

Issue with snapToIndex using react native actions sheet #407

mantu-bit opened this issue Dec 31, 2024 · 3 comments

Comments

@mantu-bit
Copy link

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/

@badalsaibo
Copy link

I think first you need to show then do snapToIndex

@mantu-bit
Copy link
Author

No i don't think so, What if i want to snapToIndex on specific button clicks

@badalsaibo
Copy link

I mean just run .show() before running any snapToIndex()

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants