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

snapPoints are confusing/don't seem to work as advertised #306

Open
tibbe opened this issue Jul 17, 2023 · 2 comments
Open

snapPoints are confusing/don't seem to work as advertised #306

tibbe opened this issue Jul 17, 2023 · 2 comments

Comments

@tibbe
Copy link

tibbe commented Jul 17, 2023

If I set snapPoints={[55, 100]} I'd expect that the card would cover 55% or 100% of the viewport but that doesn't seem to be the case at all. The size of the card seems to be whatever fits the contents and if the contents is smaller than 55% of the screen then I can't pull the card up to cover 55%/100%. I can pull it up some small, "random" amount. Standalone sample app using 0.71.7:

npx react-native@0.71.7 init ActionSheet --version 0.71.7
cd ActionSheet
bundle install
npm i --save react-native-actions-sheet@0.8.12 react-native-safe-area-context
cd ios
bundle exec pod install
cd ..
npx react-native run-ios --simulator="iPhone 14"

App.tsx:

import React, {useEffect, useRef} from 'react';
import {StyleSheet, Text, View} from 'react-native';
import ActionSheet, {ActionSheetRef} from 'react-native-actions-sheet';
import {
  SafeAreaProvider,
  useSafeAreaInsets,
} from 'react-native-safe-area-context';

function Screen(): JSX.Element {
  const actionSheetRef = useRef<ActionSheetRef>(null);

  useEffect(() => {
    const ref = actionSheetRef;
    ref.current?.show();
    return () => ref.current?.hide();
  }, []);

  const insets = useSafeAreaInsets();

  return (
    <ActionSheet
      ref={actionSheetRef}
      snapPoints={[55, 100]}
      useBottomSafeAreaPadding
      containerStyle={{
        paddingBottom: insets.bottom,
      }}
      gestureEnabled>
      <View style={styles.container}>
        <Text>Some dummy content.</Text>
      </View>
    </ActionSheet>
  );
}

function App(): JSX.Element {
  return (
    <SafeAreaProvider>
      <Screen />
    </SafeAreaProvider>
  );
}

const styles = StyleSheet.create({
  container: {
    padding: 16,
  },
});

export default App;

Initial size:
Simulator Screenshot - iPhone 14 - 2023-07-17 at 13 39 36

Fully pulled up size:
Simulator Screenshot - iPhone 14 - 2023-07-17 at 13 39 44

@tibbe
Copy link
Author

tibbe commented Jul 17, 2023

I think I figured it out. The snapPoints are relative to the height passed to the containerStyle. In fact it's really important to set the height for things in general to work in a sensible manner. It would be nice if the docs mention this.

@jordanwegener
Copy link

This caught me out too. It's not clear in the docs at all. Thanks @tibbe

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