==== NewDomainModal ====
import BottomSheetKeyboardAwareScrollView from '@/components/BottomSheetKeyboardAwareScrollView';
import { BottomSheetBackdrop, BottomSheetModal } from '@gorhom/bottom-sheet';
import React, { forwardRef, useCallback } from 'react';
import {
  Keyboard,
  Switch,
  Text,
  TextInput,
  TouchableOpacity,
  View,
} from 'react-native';

interface NewDomainModalProps {
  openColorPalette: () => void;
}

const NewDomainModal = forwardRef<BottomSheetModal, NewDomainModalProps>(
  ({ openColorPalette }, ref) => {

    const renderBackdrop = useCallback(
      (props: any) => (
        <BottomSheetBackdrop
          {...props}
          disappearsOnIndex={-1}
          appearsOnIndex={0}
          opacity={0.5}
        />
      ),
      [ref]
    );

    return (
      <BottomSheetModal
        ref={ref}
        stackBehavior='push'
        enablePanDownToClose
        enableDismissOnClose
        backdropComponent={renderBackdrop}
        onChange={(index) => {
          if (index === -1) {
            Keyboard.dismiss();
          }
        }}
      >
        <BottomSheetKeyboardAwareScrollView
          scrollEnabled={false}
        >
              <ColorPickerButton
                color={selectedColor}
                onPress={openColorPalette}
                label='Color'
              />
        </BottomSheetKeyboardAwareScrollView>
      </BottomSheetModal>
    );
  }
);

export default NewDomainModal;

==== ColorPaletteModal ====
import { BottomSheetBackdrop, BottomSheetModal } from '@gorhom/bottom-sheet';
import React, { forwardRef } from 'react';
import { Text } from 'react-native';

const ColorPaletteModal = forwardRef<BottomSheetModal, ColorPaletteModalProps>(
  (ref) => {

    console.log('cpm');

    return (
      <BottomSheetModal
        stackBehavior='push'
        ref={ref}
        snapPoints={['90%']}
        enablePanDownToClose
      >
        <BottomSheetView className='flex-1 p-6'>
          <Text>Color Palette</Text>
        </BottomSheetView>
      </BottomSheetModal>
    );
  }
);

export default ColorPaletteModal;

==== Domains ====
import ColorPaletteModal from '@/components/ColorPaletteModal';
import DomainsHeader from '@/components/home/domains/DomainsHeader';
import NewDomainModal from '@/components/home/domains/NewDomainModal';
import {
  BottomSheetModal,
  BottomSheetModalProvider,
} from '@gorhom/bottom-sheet';
import React, { useCallback, useRef, useState } from 'react';
import { GestureHandlerRootView } from 'react-native-gesture-handler';

const Domains = () => {
  const newDomainModalRef = useRef<BottomSheetModal>(null);
  const colorPaletteModalRef = useRef<BottomSheetModal>(null);

  const openNewDomainModal = useCallback(() => {
    newDomainModalRef.current?.present();
  }, []);

  const openColorPaletteModal = useCallback(() => {
    colorPaletteModalRef.current?.present();
  }, []);

  return (
    <GestureHandlerRootView>
      <BottomSheetModalProvider>
          <DomainsHeader
             domains={domains}
             onNewDomain={openNewDomainModal}
          />

          <NewDomainModal
            ref={newDomainModalRef}
            openColorPalette={openColorPaletteModal}
          />

          <ColorPaletteModal
            ref={colorPaletteModalRef}
          />
      </BottomSheetModalProvider>
    </GestureHandlerRootView>
  );
};

export default Domains;