react-native-actions-sheet

react-native-actions-sheet copied to clipboard

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 [email protected] init ActionSheet --version 0.71.7
cd ActionSheet
bundle install
npm i --save [email protected] 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:

Fully pulled up size:

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.

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