Skip to main content

Demo

Demo of the BottomSheet component on Android and IOS devices.

npm versionnpm downloadsplatformsexpo compatible

Overview​

Experience our bottom sheet component in action across both Android and iOS platforms. The demonstrations below showcase the smooth animations, gesture controls, and responsive behavior of the component.

Android Demo

Android Demo

iOS Demo

iOS Demo

Features​

  • 🎯 Customizable snap points (10% to 100% of screen height)
  • 🎨 Customizable background and backdrop colors
  • 📱 iOS and Android back gesture/button handling
  • 💫 Smooth animations and gestures using react-native-reanimated
  • 🔄 Context-based state management
  • 📜 Support for both ScrollView and FlatList
  • 🔝 Dynamic height adjustment
  • 🎯 Title and content management through hooks
  • 🛡️ Safe area support
Performance Optimization

For optimal performance, consider these best practices:

  • Memoize content components to prevent unnecessary re-renders
  • Use lightweight components for sheet content
  • Implement proper cleanup in useEffect hooks
  • Avoid heavy computations during sheet animations
Common Pitfalls

Be cautious of these common issues:

  • Avoid setting maxSnapTo below content height
  • Don't modify sheet content during animations
  • Ensure proper handling of keyboard events
  • Test thoroughly on both platforms for gesture conflicts

Key Interactions Demonstrated​

Gesture Controls​

  • Swipe up/down to adjust sheet height
  • Smooth spring animations on release
  • Snap to predefined points

Platform-Specific Behaviors​

  • Native-feeling bounce effects on iOS
  • Material Design-compliant animations on Android
  • Proper handling of back gestures and buttons

Implementation Examples​

ScrollView Variant​

import { useBottomSheet } from '@masumdev/rn-bottom-sheet';

function ScrollViewExample() {
  const { expand, setContent, setSheetTitle } = useBottomSheet();

  const showContent = () => {
    setSheetTitle('Product Details');
    setContent(
      <View style={{ padding: 16 }}>
        <Text style={{ fontSize: 16, marginBottom: 12 }}>
          This is a scrollable content example that demonstrates the ScrollView variant.
        </Text>
        <Button
          title="Add to Cart"
          onPress={() => console.log('Added to cart')}
        />
      </View>
    );
    expand('70%');
  };

  return (
    <Button
      title="Show Details"
      onPress={showContent}
    />
  );
}

FlatList Variant​

import { useBottomSheet } from '@masumdev/rn-bottom-sheet';

function FlatListExample() {
  const {
    expand,
    setContent,
    setSheetTitle,
    setVariant,
    setListData,
    setRenderItem
  } = useBottomSheet();

  const showList = () => {
    setSheetTitle('Product List');
    setVariant('flatlist');

    // Set header content (optional)
    setContent(
      <Text style={{ marginBottom: 16 }}>
        Select a product from the list below:
      </Text>
    );

    // Set list data
    setListData([
      { id: 1, name: 'Product 1', price: '$99' },
      { id: 2, name: 'Product 2', price: '$149' },
      { id: 3, name: 'Product 3', price: '$199' },
    ]);

    // Set render item function
    setRenderItem(({ item }) => (
      <TouchableOpacity
        style={{
          padding: 16,
          borderBottomWidth: 1,
          borderBottomColor: '#eee'
        }}
        onPress={() => console.log('Selected:', item.name)}
      >
        <Text style={{ fontSize: 16 }}>{item.name}</Text>
        <Text style={{ color: '#666' }}>{item.price}</Text>
      </TouchableOpacity>
    ));

    expand('80%');
  };

  return (
    <Button
      title="Show Products"
      onPress={showList}
    />
  );
}

Content Interaction​

  • Scrollable content when sheet is expanded
  • Dynamic content loading
  • Responsive to device orientation changes
Gesture Handling

To provide the best user experience:

  • Implement proper touch handling for nested scrollable content
  • Use appropriate snap points based on content height
  • Consider adding haptic feedback for important interactions
Memory Management

Watch out for these memory-related issues:

  • Large content lists can impact performance
  • Memory leaks from unmanaged listeners
  • Excessive re-renders in dynamic content

Try It Yourself​

To get started with this component in your own project, check out our installation guide and basic usage examples.

Video Tutorial