ammarahm-ed / react-native-actions-sheet

A Cross Platform(Android, iOS & Web) ActionSheet with a flexible api, native performance and zero dependency code for react native. Create anything you want inside ActionSheet.
https://rnas.vercel.app
MIT License
1.42k stars 119 forks source link

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

Open tibbe opened 1 year ago

tibbe commented 1 year ago

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 commented 1 year ago

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 commented 3 months ago

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