App.tsx

import BottomSheet, { BottomSheetView } from '@gorhom/bottom-sheet';
import { StyleSheet, Text, useWindowDimensions } from 'react-native';
import { GestureHandlerRootView } from 'react-native-gesture-handler';
import Animated, { interpolate, useAnimatedStyle, useSharedValue } from 'react-native-reanimated';
import { SafeAreaProvider, useSafeAreaInsets } from "react-native-safe-area-context";

function App() {
  const dimensions = useWindowDimensions();
  const insets = useSafeAreaInsets();

  const animatedPosition = useSharedValue(0);

  const animatedStyles = useAnimatedStyle(() => {
    const scale = interpolate((dimensions.height - animatedPosition.value), [(dimensions.height - insets.top) * 0.3, dimensions.height], [1, 0.85], 'clamp');

    return {
      transform: [{ scale }]
    }
  })
  return (
    <GestureHandlerRootView style={styles.rootContainer}>

      <Animated.View style={[styles.container, animatedStyles]}>
        <Text>Main</Text>
      </Animated.View>

      <BottomSheet
        snapPoints={["30%", "100%"]}
        animatedPosition={animatedPosition}
        topInset={insets.top}
      >
        <BottomSheetView>
          <Text>Content</Text>
        </BottomSheetView>
      </BottomSheet>

    </GestureHandlerRootView>
  );
}

const styles = StyleSheet.create({
  rootContainer: {
    flex: 1,
    backgroundColor: 'black',
  },
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
    borderRadius: 16,
  }
});


export default () => (
  <SafeAreaProvider>
    <App />
  </SafeAreaProvider>
)