Alignment control: Dropdown throws an exception upon opening

[fluiddot]

Description

An exception is thrown when opening the block alignment controls on most blocks, the only one that is currently working is the Image block.

Exception:

ExceptionsManager.js:180 Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Check the render method of `Dropdown`.

This error is located at:
    in RCTView (at View.js:34)
    in View (at TouchableHighlight.js:289)
    in TouchableHighlight (at TouchableHighlight.js:352)
    in Unknown (at bottom-sheet/index.native.js:578)
    in RCTScrollContentView (at ScrollView.js:1107)
    in RCTScrollView (at ScrollView.js:1238)
    in ScrollView (at ScrollView.js:1264)
    in ScrollView (at bottom-sheet/index.native.js:554)
    in RCTView (at View.js:34)
    in View (at keyboard-avoiding-view.native.js:118)
    in KeyboardAvoidingView (at bottom-sheet/index.native.js:528)
    in RCTView (at View.js:34)
    in View (at createAnimatedComponent.js:217)
    in AnimatedComponent (at createAnimatedComponent.js:278)
    in AnimatedComponentWrapper (at createAnimatableComponent.js:599)
    in withAnimatable(View) (created by ReactNativeModal)
    in RCTView (at View.js:34)
    in View (at AppContainer.js:107)
    in RCTView (at View.js:34)
    in View (at AppContainer.js:134)
    in AppContainer (at Modal.js:228)
    in RCTView (at View.js:34)
    in View (at Modal.js:249)
    in VirtualizedListContextResetter (at Modal.js:247)
    in RCTModalHostView (at Modal.js:234)
    in Modal (created by ReactNativeModal)
    in ReactNativeModal (at bottom-sheet/index.native.js:499)
    in BottomSheet (at with-preferred-color-scheme/index.native.js:30)
    in WithPreferredColorScheme(BottomSheet) (at dropdown-menu/index.native.js:116)
    in Dropdown (at dropdown-menu/index.native.js:68)
    in DropdownMenu (at with-preferred-color-scheme/index.native.js:30)
    in WithPreferredColorScheme(DropdownMenu) (at toolbar-dropdown-menu/index.js:17)
    in ToolbarDropdownMenu (at ui.js:158)
    in BlockAlignmentUI (at block-alignment-control/index.js:7)
    in BlockAlignmentControl (at align.js:147)
    in RCTView (at View.js:34)
    in View (at toolbar-group-container.native.js:21)
    in ToolbarGroupContainer (at with-preferred-color-scheme/index.native.js:30)
    in WithPreferredColorScheme(ToolbarGroupContainer) (at toolbar-group/index.js:94)
    in ToolbarGroup (at slot.native.js:29)
    in SlotComponent (at slot.js:92)
    in Slot (at slot-fill/index.native.js:16)
    in Slot (at slot-fill/index.native.js:23)
    in BlockControlsBlockSlot (at slot.native.js:24)
    in BlockControlsSlot (at block-toolbar/index.native.js:44)
    in BlockToolbar (at header-toolbar/index.native.js:100)
    in RCTScrollContentView (at ScrollView.js:1107)
    in RCTScrollView (at ScrollView.js:1238)
    in ScrollView (at ScrollView.js:1264)
    in ScrollView (at header-toolbar/index.native.js:89)
    in RCTView (at View.js:34)
    in View (at header-toolbar/index.native.js:83)
    in HeaderToolbar (at with-preferred-color-scheme/index.native.js:30)
    in WithPreferredColorScheme(HeaderToolbar) (at with-select/index.js:57)
    in Unknown (at pure/index.tsx:42)
    in WithViewportMatch(WithPreferredColorScheme(HeaderToolbar)) (at with-dispatch/index.js:96)
    in WithDispatch(WithViewportMatch(WithPreferredColorScheme(HeaderToolbar))) (at with-select/index.js:57)
    in Unknown (at pure/index.tsx:42)
    in WithSelect(WithDispatch(WithViewportMatch(WithPreferredColorScheme(HeaderToolbar)))) (at header/index.native.js:49)
    in Header (at layout/index.native.js:171)
    in RCTView (at View.js:34)
    in View (at keyboard-avoiding-view/index.ios.js:123)
    in RCTView (at View.js:34)
    in View (at KeyboardAvoidingView.js:209)
    in KeyboardAvoidingView (at createAnimatedComponent.js:217)
    in AnimatedComponent (at createAnimatedComponent.js:278)
    in AnimatedComponentWrapper (at keyboard-avoiding-view/index.ios.js:104)
    in KeyboardAvoidingView (at layout/index.native.js:160)
    in RCTSafeAreaView (at SafeAreaView.js:51)
    in SafeAreaView (at layout/index.native.js:137)
    in RCTView (at View.js:34)
    in View (at tooltip/index.native.js:268)
    in TooltipSlot (at layout/index.native.js:136)
    in Layout (at with-preferred-color-scheme/index.native.js:30)
    in WithPreferredColorScheme(Layout) (at with-select/index.js:57)
    in Unknown (at pure/index.tsx:42)
    in WithSelect(WithPreferredColorScheme(Layout)) (at editor.native.js:173)
    in BlockRefsProvider (at provider/index.native.js:28)
    in BlockEditorProvider (at with-registry-provider.js:24)
    in Unknown (at with-registry/index.js:23)
    in WithRegistryProvider(BlockEditorProvider) (at provider/index.js:108)
    in BlockContextProvider (at provider/index.js:107)
    in EntityProvider (at provider/index.js:106)
    in EntityProvider (at provider/index.js:105)
    in EditorProvider (at with-registry-provider.js:27)
    in Unknown (at with-registry/index.js:23)
    in WithRegistryProvider(EditorProvider) (at provider/index.native.js:337)
    in NativeEditorProvider (at with-dispatch/index.js:96)
    in WithDispatch(NativeEditorProvider) (at with-select/index.js:57)
    in Unknown (at pure/index.tsx:42)
    in WithSelect(WithDispatch(NativeEditorProvider)) (at editor.native.js:166)
    in SlotFillProvider (at editor.native.js:165)
    in Editor (at with-dispatch/index.js:96)
    in WithDispatch(Editor) (at with-select/index.js:57)
    in Unknown (at pure/index.tsx:42)
    in WithSelect(WithDispatch(Editor)) (at src/index.native.js:31)
    in App (at renderApplication.js:47)
    in RCTView (at View.js:34)
    in View (at AppContainer.js:107)
    in RCTView (at View.js:34)
    in View (at AppContainer.js:134)
    in AppContainer (at renderApplication.js:40)

Step-by-step reproduction instructions

1. Add a Cover block.
2. Tap on the alignment control button located in the toolbar.

3. Observe that an exception is thrown.

Expected behaviour

The alignment control shouldn't throw any exception.

Actual behaviour

The alignment control is not working and throws an exception.

Screenshots or screen recording (optional)

alignment-control-error.mp4

WordPress information

• WordPress version: N/A
• Gutenberg version: N/A
• Are all plugins except Gutenberg deactivated? N/A
• Are you using a default theme (e.g. Twenty Twenty-One)? N/A

Device information

• Device: iPhone 12 Pro Max
• Operating system: iOS 14.5
• WordPress app version: develop

[fluiddot]

I checked recent merged PRs into trunk and I verified that the issue began to happen after the PR #34710 was merged. It would be helpful to review the changes of that PR to address the issue in the native version.