jai-adapptor

const styles = StyleSheet.create({
  // The sheet is positioned absolutely to sit at the bottom of the screen
  container: {
    position: 'absolute',
    bottom: 0,
    left: 0,
    right: 0,
  },
  sheet: {
    justifyContent: 'flex-start',

jai-adapptor

import { View, Text, StyleSheet } from 'react-native';
import React from 'react';

const MainContent = () => {
  return (
    <View style={styles.container}>
      <Text>MainContent</Text>
    </View>
  );
};

jai-adapptor

import { StyleSheet, ViewStyle, StyleProp } from 'react-native';
import React from 'react';
import { useSkeletonAnimation } from 'react-native-animated-skeleton';
import Animated from 'react-native-reanimated';
interface Props {
  style?: StyleProp<ViewStyle>;
}

const ExampleComponent: React.FC<Props> = ({ style, children }) => {
  const animatedStyle = useSkeletonAnimation({

jai-adapptor

import React, { useEffect, useState } from 'react';
import { Dimensions, SafeAreaView, StyleSheet, Text, View } from 'react-native';
import {
  PanGestureHandler,
  TouchableOpacity,
  ScrollView,
} from 'react-native-gesture-handler';
import Animated, {
  useAnimatedGestureHandler,
  useAnimatedStyle,

jai-adapptor

return (
    <View style={styles.container}>
      <PanGestureHandler onGestureEvent={onGestureEvent}>
        <Animated.View style={[sheetHeightAnimatedStyle, styles.sheet]}>
          <View style={styles.handleContainer}>
            <View style={styles.handle} />
          </View>
          <Animated.View style={sheetContentAnimatedStyle}>
            <Animated.View style={sheetNavigationAnimatedStyle}>
              <TouchableOpacity

jai-adapptor

const sheetHeightAnimatedStyle = useAnimatedStyle(() => ({
    // The 'worklet' directive is included with useAnimatedStyle hook by default
    height: -sheetHeight.value,
  }));

const sheetContentAnimatedStyle = useAnimatedStyle(() => ({
  paddingBottom: position.value === 'maximised' ? 180 : 0,
  paddingTop: position.value === 'maximised' ? 40 : 20,
  paddingHorizontal: 20,
}));

jai-adapptor

const onGestureEvent = useAnimatedGestureHandler({
  // Set the context value to the sheet's current height value
  onStart: (_ev, ctx: any) => {
    ctx.offsetY = sheetHeight.value;
  },
  // Update the sheet's height value based on the gesture
  onActive: (ev, ctx: any) => {
    sheetHeight.value = ctx.offsetY + ev.translationY;
  },
  // Snap the sheet to the correct position once the gesture ends

jai-adapptor

// Animated values
  const position = useSharedValue<SheetPositions>('minimised');
  const sheetHeight = useSharedValue(-minHeight);
  const navHeight = useSharedValue(0);

  const springConfig: WithSpringConfig = {
    damping: 50,
    mass: 0.3,
    stiffness: 120,
    overshootClamping: true,

jai-adapptor

const Sheet: React.FC<SheetProps> = (props) => {
  const [dimensions, setDimensions] = useState({ window, screen });

  useEffect(() => {
    // Watch for screen size changes and update the dimensions
    const subscription = Dimensions.addEventListener(
      'change',
      ({ window, screen }) => {
        setDimensions({ window, screen });
      },

jai-adapptor

// ... imports

interface SheetProps {
  minHeight?: number;
  maxHeight?: number;
  expandedHeight?: number;
}

type SheetPositions = 'minimised' | 'maximised' | 'expanded';