`registerSheet` doesn't works

[cybaj]

the below is the code

/**
 * @format
 */
import {StrictMode} from 'react';

import {NavigationContainer} from '@react-navigation/native';
import createCustomNavigator, {Screens} from '@navigator';
import {ThemeProvider} from '@theme';
import {SheetProvider} from 'react-native-actions-sheet';
import './sheets/index';
import {View} from 'react-native';

function App(): JSX.Element {
  const My = createCustomNavigator();

  return (
    <StrictMode>
      <ThemeProvider>
        <SheetProvider context="main">
          <View style={{flex: 1}}>
            <NavigationContainer>
              {
                // @ts-ignore
                <My.Navigator>
                  <My.Screen {...Screens.Map} />
                  <My.Screen {...Screens.Feed} />
                  <My.Screen {...Screens.SpotCreator} />
                  <My.Screen {...Screens.RooadCreator} />
                  <My.Screen {...Screens.Console} />
                  <My.Screen {...Screens.Mypage} />
                </My.Navigator>
              }
            </NavigationContainer>
          </View>
        </SheetProvider>
      </ThemeProvider>
    </StrictMode>
  );
}

it is './sheets/index';

import CreationSheet from '../navigator/creationsheet';
import {registerSheet} from 'react-native-actions-sheet';

registerSheet('sheet', CreationSheet, 'main');

it is '../navigator/creationsheet'

import ActionSheet from 'react-native-actions-sheet';
import {View, Text} from 'react-native';
import type {SheetProps} from 'react-native-actions-sheet';

export const CreationSheet = ({...props}: SheetProps) => {
  return (
    <ActionSheet>
      <View>
        <Text>Hi</Text>
      </View>
    </ActionSheet>
  );
};

export default CreationSheet;

and

// ...

  const sheetContext = useProviderContext();

  const handleCreationButtonClick = useCallback(() => {
    // SheetManager.show('creation-sheet');
    console.debug(SheetManager.get('sheet', 'main'));
    console.debug(SheetManager.get('sheet'));
    console.debug(SheetManager);
    console.debug(sheetContext);
    ToastAndroid.show('handled', ToastAndroid.SHORT);
  }, [sheetContext]);

// ...
            if (route.key === 'creation-button') {
              return (
                <Pressable
                  key={route.key}
                  onPress={handleCreationButtonClick}
                  style={{flex: 1}}>
                  <TabItemContainer key={route.key}>
                    <Icon
                      style={{
                        ...theme.fonts.bottomTabIcon,
                      }}
                      size={theme.size.bottomTab.iconSize}
                      name="plus-a"
                    />
                  </TabItemContainer>
                </Pressable>
              );
            }

and this is log when I click with it.

 DEBUG  undefined
 DEBUG  undefined
 DEBUG  {"add": [Function anonymous], "get": [Function anonymous], "registerRef": [Function anonymous], "remove": [Function anonymous]}
 DEBUG  global

I think it is quiet important that const sheetContext = useProviderContext(); returns with global not main I specified with.

I have started to use this library since few hours ago, I couldn't not convinced with this is right approach to use it. But ... I tried some variations of usage under the code, and I have exhausted...

Please, check it out, and tell me some any feedback, any kind of workaround.

[cybaj]

By my own sheet context, I workaround it.

import {forwardRef} from 'react';
import ActionSheet from 'react-native-actions-sheet';
import {View, Text} from 'react-native';
import type {ActionSheetRef, SheetProps} from 'react-native-actions-sheet';

export const CreationSheet = forwardRef<ActionSheetRef, SheetProps>(
  ({...props}: SheetProps, ref) => {
    return (
      <ActionSheet
        containerStyle={{paddingBottom: 300}}
        id={props.sheetId}
        ref={ref}>
        <View>
          <Text>Hi</Text>
        </View>
      </ActionSheet>
    );
  },
);
CreationSheet.displayName = 'CreationSheet';

export default CreationSheet;

import CreationSheet from '../navigator/creationsheet';
import {ActionSheetRef} from 'react-native-actions-sheet';
import {
  createContext,
  PropsWithChildren,
  useContext,
  useRef,
  RefObject,
} from 'react';
import {View} from 'react-native';

interface SheetContextType {
  creationSheet: RefObject<ActionSheetRef | null> | null;
}

const defaultSheetContext: SheetContextType = {
  creationSheet: null,
};

const SheetContext = createContext<SheetContextType>(defaultSheetContext);

export function SheetProvider({children}: PropsWithChildren) {
  const creationRef = useRef<ActionSheetRef>(null);
  return (
    <SheetContext.Provider value={{creationSheet: creationRef}}>
      {children}
      <View>
        <CreationSheet sheetId="creation" ref={creationRef} />
      </View>
    </SheetContext.Provider>
  );
}

export const useSheetContext = (): SheetContextType => useContext(SheetContext);

[ammarahm-ed]

Have to tried doing

SheetManager.show("your-sheet-id", { context: "main"})