title: ReactJS - Component with optional props inside React Context
body: <p>In my app, there is a <a href="https://github.com/gorhom/react-native-bottom-sheet" rel="nofollow noreferrer">bottom sheet</a> in the top level of my navigation system. As it is showed/hidden when the user interacts with the elements of other deeper screens inside the navigation system, I have had to wrap it inside a React Context. Take a look at this <a href="https://github.com/gorhom/react-native-bottom-sheet/issues/259" rel="nofollow noreferrer">idea</a>.</p>
  <p>Now, imagine that this context is rendering my custom bottom sheet component:</p>
  <pre><code>function MessageOptions({ onDeleteButtonPress, onReportButtonPress, ... }) {
      ... 
      
      const handleOnDeleteButtonPress = () =&gt; {
        ...
        onDeleteButtonPress?.();
      }
  
      const handleOnReportButtonPress = () =&gt; {
        ...
        onReportButtonPress?.();
      }
  
      ...
  
      return (
        &lt;View style={globalStyles.overlayed} pointerEvents=&quot;box-none&quot;&gt;
          &lt;OptionsBottomSheet
            ref={menuRef}
            snapPoints={[155, 0]}
            initialSnap={1}
            topItems={getTopItems()}
            bottomItems={getBottomItems()}
            onCloseEnd={onCloseEnd}
          /&gt;
        &lt;/View&gt;
      );
  }
  </code></pre>
  <p>As you can see, it is receiving two optional props, &quot;onDeleteButtonPress&quot; and &quot;onReportButtonPress&quot;.</p>
  <p>My idea is to consume the context which renders this custom bottom sheet component, in  all my chat bubbles, just to open the bottom sheet when they are long pressed.</p>
  <p>This is the context provider:</p>
  <pre><code>import React, { createContext, useRef } from &quot;react&quot;;
  
  import useStateWithCallback from &quot;../../hooks/useStateWithCallback&quot;;
  import MessageOptions from &quot;../../components/Messaging/Options/MessageOptions&quot;;
  
  const MessageOptionsContext = createContext(null);
  
  export default MessageOptionsContext;
  
  export function MessageOptionsProvider({ children }) {
    ...
  
    return (
      &lt;MessageOptionsContext.Provider
        value={{
          open,
          close,
        }}
      &gt;
        {children}
        &lt;MessageOptions
          ref={messageOptionsRef}
          message={message}
          // onReportButtonPress={onReportButtonPress}
          // onDeleteButtonPress={onDeleteButtonPress}
          onCloseEnd={handleOnCloseEnd}
        /&gt;
      &lt;/MessageOptionsContext.Provider&gt;
    );
  }
  </code></pre>
  <p>When the user presses the delete button, I will be removing the specific message from the screen's messages list state.</p>
  <p><strong>How can I pass the methods from the parent (ChatScreen) of the consumer (Bubble) to the provider (MessageOptionsProvider)?</strong></p>
  <p>This is the flow of my app:</p>
  <pre><code>ChatScreen --&gt; (contains the messages list (array) state)
      |
      |
      ---&gt; BubbleList
               |
               |
               ---&gt; Bubble (consumes the bottom sheet context) 
  </code></pre>
  <p>I am doing this to avoid repeating my self in different routes of my app, but for being transparent, I am a little stuck in this use case.</p>
  <p>Any ideas? It seems to be impossible?</p>