react-native-a11y-order 0.9.1 → 0.11.0-rc

package/README.md

@@ -1,371 +1,85 @@
-# React Native A11y Order
-
-React Native A11y Order Library: Enhance screen reader functionality with advanced control.
+![react-native-a11y-order](/.github/images/react_native_a11y_order.png)
 
-Managing screen reader focus order can be challenging, especially in complex or unconventional scenarios. The `react-native-a11y-order` library is built with a native-first approach to resolve issues related to screen reader focus order and provide additional accessibility features on both Android and iOS platforms.
+# React Native A11y Order
 
-| iOS reader                                                | Android reader                                                |
-| --------------------------------------------------------- | ------------------------------------------------------------- |
-| <img src="/.github/images/ios_example.gif" height="500" /> | <img src="/.github/images/android_example.gif" height="500" /> |
+<div>
+  <img align="right" width="35%" src="/.github/images/ios_example.gif">
+</div>
 
+Native-first React Native library for controlling screen reader focus order on iOS (VoiceOver) and Android (TalkBack).
 
-- Bridgeless
-- New architecture
-- Old architecture
-- Backward compatibility
-- Compatible with Expo prebuild
+- 🔢 **Custom focus order** — define the exact sequence, independent of render order
+- 🃏 **Cards with inner buttons** — card action and nested controls, both accessible at once
+- 🔒 **Focus trap** — keep VoiceOver and TalkBack inside modals, no leaking
+- 📣 **Transition announcements** — notify the screen reader on screen and panel changes
+- ⚡ New Architecture · Old Architecture · Bridgeless · Expo prebuild
 
 > [!TIP]
-> If you need to adjust the horizontal or vertical focus order, consider using `<View collapsable={false}>` as a quick fix.
-> By default, React Native optimizes views, which can sometimes impact the focus order unintentionally.
->
-> While this library is designed to handle complex or unusual focus scenarios, in many cases, using `<View collapsable={false}>` can resolve focus issues without requiring additional work.
+> Before adding this library, try `<View collapsable={false}>` — it fixes most simple focus order issues with no extra dependencies. [Learn more](./docs/guides/collapsable.md)
 
 > [!IMPORTANT]
-> Starting from React Native v0.8.2, an experimental feature `experimental_accessibilityOrder` is available for setting the correct focus order.
-> You can find more information in the [Accessibility documentation](https://reactnative.dev/docs/accessibility).
+> React Native v0.8.2+ includes an experimental `experimental_accessibilityOrder` prop — see [Accessibility docs](https://reactnative.dev/docs/accessibility).
 
+</br>
 
 ## Installation
 
-```sh
-npm install react-native-a11y-order
-```
-
 ```sh
 yarn add react-native-a11y-order
+cd ios && pod install
 ```
 
-## Usage
-
-#### A11y.Order, A11y.Index
-
-To set the focus order for a screen reader in React Native, you can use the following components:
-- `A11y.Order`: A container component that creates an ordering group for focusable elements.
-- `A11y.Index`: A wrapper component that defines the position of an element within the ordering group.
-
-Using these components together simplifies the process of managing focus order in complex UI structures.
-
-To illustrate, let's look at an example:
-
-```js
-import { A11y } from 'react-native-a11y-order';
-
-// ...
-
-export default function App() {
-  return (
-    <View style={styles.container}>
-      <A11y.Order>
-        <A11y.Index index={1}>
-          <Text style={styles.font}>
-            First
-          </Text>
-        </A11y.Index>
-        <A11y.Index index={3}>
-          <Text style={styles.font}>
-            Third
-          </Text>
-        </A11y.Index>
-        <A11y.Index index={2}>
-          <Text style={styles.font}>
-            Second
-          </Text>
-        </A11y.Index>
-      </A11y.Order>
-      <Text style={styles.font}>Fourth</Text>
-      <Text style={styles.font}>Fifth</Text>
-      <Text style={styles.font}>Sixth</Text>
-    </View>
-  );
-}
-```
-
-Additionally, for dynamic interaction scenarios, programmatically setting focus can be highly effective. You can achieve this by using the focus method through a component reference.
-
-```js
-import { A11y, IndexCommands } from 'react-native-a11y-order';
-
-// ...
-
-export default function App() {
-  const ref = React.useRef<IndexCommands>(null);
-
-  return (
-    <View style={styles.container}>
-      <A11y.Order>
-        <A11y.Index ref={ref} index={1}>
-          <Text style={styles.font}>
-            First
-          </Text>
-        </A11y.Index>
-      </A11y.Order>
-      <Button onPress={() => ref.current?.focus()}>
-    </View>
-  );
-}
-```
-A11y.Index Props:
-| Prop | Description |
-| :-- | :-- |
-| ViewProps | Standard React Native View properties, including style, testID, etc. |
-| index | (number) The position of the component in the order sequence. |
-| ref: focus | Reference to a focus command, used to set accessibility focus programmatically. |
-| orderType | Specifies the algorithm used for view ordering (see details below). |
-| onScreenReaderSubViewFocused | Triggered when a subview within the component is focused by the screen reader. |
-| onScreenReaderSubViewBlurred | Triggered when the screen reader focus moves away or is blurred from a subview. |
-| onScreenReaderSubViewFocusChange | Triggered when the focus status of a subview changes (either focused or blurred). |
-
-
-| Value | Description |
-| :-- | :-- |
-| default | Treats the root component as an orderable element. This can be a group or a single element. If multiple elements are present, navigation moves through the inner elements before proceeding to the next index. |
-| legacy | Uses the previous implementation for element search, selecting the first child as the accessibility element for ordering. |
-| search | Searches the child tree for the first accessible element to use in the order. |
-
-
-A11y.Order Props:
-
-| Prop | Description |
-| :-- | :-- |
-| ...ViewProps | Standard React Native View props, including style, testID, etc. |
-
-## A11y.Container
-| View                                                      | A11y.Container                                                    |
-| --------------------------------------------------------- | ------------------------------------------------------------- |
-| <img src="/.github/images/horizontal-scroll-view.gif" height="500" /> | <img src="/.github/images/horizontal-scroll-group.gif" height="500" /> |
-
-The `A11y.Container` component for configuration `UIAccessibilityContainerType` feature on iOS.
-| Props | Description |
-| :-- | :-- |
-| ViewProps | Default view props, including style, testID, etc. |
-| type?: | `none` \| `table` \| `list` \| `landmark` \| `group` — representation of `UIAccessibilityContainerType`. The default value is `group`. |
-
-
-## A11y.View
-`The A11y.View` component can be used to handle and track screen reader focus independently of the `A11y.Index` component.
-
-| Prop | Description |
-| :-- | :-- |
-| onScreenReaderFocused | Triggered when the view gets focus from the screen reader. |
-| onScreenReaderSubViewFocused | Triggered when a subview within the component is focused by the screen reader. |
-| onScreenReaderSubViewBlurred | Triggered when the screen reader focus moves away or is blurred from a subview. |
-| onScreenReaderSubViewFocusChange | Triggered when the focus status of a subview changes (either focused or blurred). |
-| onScreenReaderDescendantFocusChanged | Triggered when any descendant subview is focused by the screen reader. Provides an object containing the focus status and the nativeId of the focused subview, if applicable. Example: < { status: string, nativeId?: string } >. |
-
-```tsx
-<A11y.View
-  onScreenReaderDescendantFocusChanged={(e) => console.log(e)}
-  onScreenReaderSubViewFocused={() => console.log('List has been focused')}
-  onScreenReaderSubViewBlurred={() => console.log('List has been blurred')}
-  onScreenReaderFocused={() => console.log('Focused')}
->
-  ...
-</A11y.View>
-```
-
-## A11y.FocusFrame, A11y.FocusTrap
-
-These components enhance accessibility by providing better control over focus management within specific areas of the screen.
-
-- `A11y.FocusFrame`: Used at the root level of a "screen" to detect and prevent focus leaks, ensuring focus remains contained.
-- `A11y.FocusTrap`: Wraps the content area to explicitly enforce focus confinement within a defined region.
-
-On iOS, `A11y.FocusTrap` uses `accessibilityViewIsModal` to keep focus within the defined area. When `forceLock` is enabled, it additionally uses active enforcement — redirecting VoiceOver back into the trap whenever focus escapes and blocking focus from leaving at the system level.
-
-On Android, `A11y.FocusTrap` uses a custom Activity or Modal to limit focus.
-
-`A11y.FocusTrap` Props:
-
-| Prop | Description |
-| :-- | :-- |
-| ViewProps | Includes all standard React Native View properties, such as style, testID, etc. |
-| lockDisabled? | Disables the focus lock when `true`. |
-| forceLock? | (iOS only) Enables active focus enforcement — VoiceOver is redirected back into the trap whenever focus escapes. Use when `accessibilityViewIsModal` alone is not sufficient. |
-
-```tsx
-<A11y.FocusFrame>
-  ...
-  <A11y.FocusTrap>
-    <Text accessibilityRole="header">Locked Area</Text>
-    <Button
-      title="Confirm"
-      accessibilityLabel="Confirm action"
-    />
-  </A11y.FocusTrap>
-  ...
-</A11y.FocusFrame>
-```
-
-Use `forceLock` when the standard lock is not enough to keep VoiceOver inside the trap:
-
-```tsx
-<A11y.FocusFrame>
-  ...
-  <A11y.FocusTrap forceLock>
-    <Text accessibilityRole="header">Locked Area</Text>
-    <Button
-      title="Confirm"
-      accessibilityLabel="Confirm action"
-    />
-  </A11y.FocusTrap>
-  ...
-</A11y.FocusFrame>
-```
-
-## A11y.PaneTitle, A11y.ScreenChange
-
-Components for screen change announcements
-
+Get started with the [getting started guide](./docs/getting-started/getting-started.md) or jump straight to the [component overview](./docs/guides/overview.md).
 
-React Native currently lacks built-in APIs for announcing modal or screen transitions. To enhance accessibility, you can use A11y.PaneTitle or A11y.ScreenChange:
-- Screen transitions: Announce navigation to a new screen (e.g., "Login Screen").
-- Modal presentations: Announce when a modal appears (e.g., "Confirm Modal").
+## React Native compatibility
 
-| Prop | Description |
+| Library version | React Native |
 | :-- | :-- |
-| title | The title message to be announced for the screen or modal. |
-| detachMessage | The message to be announced when this component is detached (e.g., when leaving the screen). |
-| type | The type of announcement for Android. Options: activity, pane, or announce. |
-| displayed | A trigger for screen focus changes, used to properly update the Android Activity title when switching screens. |
-| withFocusRestore | Ensures that the screen reader focus is preserved and restored appropriately after a screen change. (iOS-specific) |
+| `1.0.0` | ≥ 0.80 |
+| `0.11.0` | ≤ 0.79 |
 
-The `A11y.ScreenChange` component is a simplified version of `A11y.PaneTitle`. It is preconfigured with `type="activity"` to handle screen change announcements on Android. Beyond that, it behaves identically to `A11y.PaneTitle`.
+## What's available
 
-Example:
-```tsx
-export const LoginScreen = ({ navigation }) => {
-  const isFocused = useIsFocused();
-  return (
-    <View>
-      <A11y.ScreenChange
-        title="Login Screen"
-        displayed={isFocused}
-      />
-      <View style={styles.container}>
-        <Text>Welcome to the Login Screen</Text>
-        <Button title="Continue" onPress={() => navigation.navigate('Home')} />
-      </View>
-    </View>
-  );
-};
-```
-
-## A11yModule
-`A11yModule` provides an alternative solution for reliably announcing information on iOS.
-
-The default `AccessibilityInfo.announceForAccessibility` function on iOS can often be disrupted by focus changes. For instance, announcements might get interrupted by actions such as navigating between screens or opening a modal.
-
-To overcome this limitation, `A11yModule.announce` is implemented with a custom solution that leverages native events, ensuring that announcements are delivered reliably and are less likely to be interrupted.
-
-| Function | Description |
+| Export | Purpose |
 | :-- | :-- |
-| announce(message: string): void | Posts a message to be announced by the screen reader with improved reliability on iOS. |
-
-```tsx
-A11yModule.announce('This is a custom announcement, now more reliable on iOS!');
-```
-
-## Migration
-
-<details>
-  <summary>Why?</summary>
-
-The previous versions of this library used native modules to update order, but in a world with Fabric components and new architecture, there is no visible future for managing native components via modules or `findNodeHandler`.
+| [`A11y.Order`](./docs/guides/a11y-order.md) | Container that defines a named focus-order sequence. |
+| [`A11y.Index`](./docs/components/A11yIndex.md) | Positioned slot within an `A11y.Order` sequence. |
+| [`A11y.View`](./docs/components/A11yView.md) | Standalone view with screen reader focus events; no ordering. |
+| [`A11y.Card`](./docs/components/A11yCard.md) | Card that keeps both a card-level action and nested buttons accessible simultaneously. |
+| [`A11y.FocusTrap`](./docs/components/A11yFocusTrap.md) | Confines screen reader focus to a subtree (modal/overlay). |
+| [`A11y.FocusFrame`](./docs/components/A11yFocusTrap.md) | Root boundary required by `A11y.FocusTrap`; detects focus escaping the region. |
+| [`A11y.PaneTitle`](./docs/components/A11yPaneTitle.md) | Announces screen or panel transitions to VoiceOver/TalkBack. |
+| [`A11y.ScreenChange`](./docs/components/A11yPaneTitle.md) | Shorthand for `A11y.PaneTitle` with `type="activity"` pre-set. |
+| [`A11yModule`](./docs/leftovers/announce.md) | Reliable programmatic announcements on iOS. |
 
-I thought a lot about retaining the previous API for support and compatibility, but after investigation, it was decided to deprecate the 'old' API and remove it in future releases.
-
-The new approach is better: we no longer need to manage refs, worry about attaching nodes to the screen, and it works natively. Additionally, this new approach follows the React Native concept, which will make it easier to support in the future (hello there: bridgeless).
-
-</details>
-
-1. Update: `A11yOrder` to `A11y.Order`
-
-```js
-  Previous: <A11yOrder a11yOrder={a11yOrder}>
-  Now: <A11y.Order>
-```
-
-2. Wrap components in `A11y.Index`
-
-```js
-  Previous: <Text style={styles.font} ref={refs[0]}>
-    First
-  </Text>
-  Now: <A11y.Index index={1}>
-    <Text style={styles.font} ref={refs[0]}>
-      First
-    </Text>
-  </A11y.Index>
-```
-
-3. Remove unnecessary refs
-
-```js
-<A11y.Index index={1}>
-  <Text style={styles.font}>
-    First
-  </Text>
-</A11y.Index>
-```
-
-4. Remove deprecated hooks and utilities: `useFocusOrder`, `useDynamicFocusOrder`, `useA11yOrderManager`.
-
-That's all. The index changes, removals, etc., should work out of the box.
-
-## Legacy
-#### A11y.Group
+---
 
-`A11y.Group` (`A11y.Container`) can be used to enhance the experience of screen readers navigating through `ScrollView` or `FlatList` with the horizontal property enabled. You can skip this if you are using the new architecture; however, it is the best for applications that have not yet migrated.
+## Documentation
 
-| View                                                      | A11y.Group                                                    |
-| --------------------------------------------------------- | ------------------------------------------------------------- |
-| <img src="/.github/images/horizontal-scroll-view.gif" height="500" /> | <img src="/.github/images/horizontal-scroll-group.gif" height="500" /> |
+- [Getting started](./docs/getting-started/getting-started.md)
+- [Component overview](./docs/guides/overview.md)
+- [Guides](./docs/README.md#guides)
+- [Component API reference](./docs/components/overview.md)
+- [Migration guide](./docs/migration/migration.md)
 
-```js
-import { A11y, IndexCommands } from 'react-native-a11y-order';
+---
 
-// ...
+## Roadmap
 
-export default function App() {
-  return (
-    <ScrollView
-      style={styles.slider}
-      contentContainerStyle={styles.sliderContainer}
-      horizontal
-    >
-      <A11y.Group style={styles.slide}>
-        <View>
-          <Text>Title: 1</Text>
-        </View>
-        <View>
-          <Text>Description: 1</Text>
-        </View>
-      </A11y.Group>
-      <A11y.Group style={styles.slide}>
-        <View>
-          <Text>Title: 2</Text>
-        </View>
-        <View>
-          <Text>Description: 2</Text>
-        </View>
-      </A11y.Group>
-    </ScrollView>
-  );
-}
-```
+All planned features are implemented and released. No new functionality or API changes are planned.
 
+Future work is limited to:
+- React Native version support (new releases)
+- Bug fixes and issue resolution
 
-| Props | Description |
-| :-- | :-- |
-| ViewProps | Default view props, including style, testID, etc. |
-| type?: | `legacy` or `none` \| `table` \| `list` \| `landmark` \| `group` — representation of `UIAccessibilityContainerType`. The default value is `none`. |
+Both active versions receive fixes:
 
+| Version | React Native | Status |
+| :-- | :-- | :-- |
+| `1.0.0` | ≥ 0.80 | Active — bug fixes and new RN support |
+| `0.11.0` | ≤ 0.79 | Active — bug fixes only |
 
-## Roadmap
-* Add autofocus prop
-* Refactor and optimize performance
-* Add documentation and descriptive examples
+---
 
 ## Contributing
 

package/android/src/main/java/com/a11yorder/A11yOrderPackage.java

@@ -2,13 +2,11 @@ package com.a11yorder;
 
 
 import com.a11yorder.modules.A11yAnnounceModule;
-import com.a11yorder.views.A11yUIContainerView.A11yUIContainerViewManager;
-import com.a11yorder.views.A11yGroupView.A11yGroupViewManager;
+import com.a11yorder.views.A11yCardView.A11yCardViewManager;
 import com.a11yorder.views.A11yIndexView.A11yIndexViewManager;
 import com.a11yorder.views.A11yLockView.A11yLockViewManager;
 import com.a11yorder.views.A11yOrderView.A11yOrderViewManager;
 import com.a11yorder.views.A11yPaneTitle.A11yPaneTitleManager;
-import com.a11yorder.views.A11yView.A11yViewManager;
 import com.facebook.react.module.model.ReactModuleInfo;
 import com.facebook.react.module.model.ReactModuleInfoProvider;
 import com.facebook.react.uimanager.ViewManager;
@@ -29,11 +27,9 @@ public class A11yOrderPackage extends TurboReactPackage {
     List<ViewManager> viewManagers = new ArrayList<>();
     viewManagers.add(new A11yIndexViewManager());
     viewManagers.add(new A11yOrderViewManager());
-    viewManagers.add(new A11yGroupViewManager());
-    viewManagers.add(new A11yUIContainerViewManager());
     viewManagers.add(new A11yPaneTitleManager());
-    viewManagers.add(new A11yViewManager());
     viewManagers.add(new A11yLockViewManager());
+    viewManagers.add(new A11yCardViewManager());
 
     return viewManagers;
   }

package/android/src/main/java/com/a11yorder/core/A11yAutoFocusView.java

@@ -0,0 +1,61 @@
+package com.a11yorder.core;
+
+import android.content.Context;
+import android.view.View;
+import android.view.accessibility.AccessibilityEvent;
+
+import com.a11yorder.services.focus.A11yFocusDelegate;
+import com.a11yorder.services.focus.A11yFocusProtocol;
+import com.facebook.react.bridge.ReactContext;
+
+public class A11yAutoFocusView extends A11yScreenReaderView implements A11yFocusProtocol {
+  private final A11yFocusDelegate a11yFocusDelegate;
+  private Boolean autoFocus = false;
+  private Boolean autoFocusOnce = false;
+  private Boolean hasBeenFocused = false;
+
+  public A11yAutoFocusView(Context context) {
+    super(context);
+    this.a11yFocusDelegate = new A11yFocusDelegate((ReactContext) context, this);
+  }
+
+  @Override
+  public boolean isViewFocused() {
+    View focusTarget = this.isFocusable() ? this : this.getSubChild();
+    if (focusTarget == null) return false;
+    return focusTarget.isAccessibilityFocused();
+  }
+
+  public void setAutoFocus(Boolean value) {
+    this.autoFocus = value;
+  }
+
+  public void focus() {
+    a11yFocusDelegate.requestFocus();
+  }
+
+  @Override
+  public boolean onRequestSendAccessibilityEvent(View child, AccessibilityEvent event) {
+    int eventType = event.getEventType();
+
+    if (eventType == AccessibilityEvent.TYPE_VIEW_ACCESSIBILITY_FOCUSED && autoFocus && !hasBeenFocused) {
+      hasBeenFocused = true;
+      a11yFocusDelegate.onFocused();
+    }
+
+    return super.onRequestSendAccessibilityEvent(child, event);
+  }
+
+  @Override
+  protected void onAttachedToWindow() {
+    super.onAttachedToWindow();
+    if (autoFocus && !autoFocusOnce) {
+      autoFocusOnce = true;
+
+      if (!isViewFocused()) {
+        hasBeenFocused = false;
+        a11yFocusDelegate.requestFocus();
+      }
+    }
+  }
+}

package/android/src/main/java/com/a11yorder/{views/A11yView/A11yView.java → core/A11yScreenReaderView.java}

@@ -1,28 +1,18 @@
-package com.a11yorder.views.A11yView;
-
+package com.a11yorder.core;
 
 import android.content.Context;
 import android.view.View;
 import android.view.accessibility.AccessibilityEvent;
 
-import com.a11yorder.core.A11yViewGroup;
 import com.a11yorder.events.EventHelper;
-import com.a11yorder.services.focus.A11yFocusDelegate;
-import com.a11yorder.services.focus.A11yFocusProtocol;
 import com.facebook.react.bridge.ReactContext;
 
-public class A11yView extends A11yViewGroup implements A11yFocusProtocol {
+public class A11yScreenReaderView extends A11yViewGroup {
   private final Context context;
-  private final A11yFocusDelegate a11yFocusDelegate;
-  private Boolean autoFocus = false;
-
-  private Boolean autoFocusOnce = false;
-  private Boolean hasBeenFocused = false;
 
-  public A11yView(Context context) {
+  public A11yScreenReaderView(Context context) {
     super(context);
     this.context = context;
-    this.a11yFocusDelegate = new A11yFocusDelegate((ReactContext) context, this);
   }
 
   public static String getNativeIdSafe(View view) {
@@ -34,20 +24,6 @@ public class A11yView extends A11yViewGroup implements A11yFocusProtocol {
     }
   }
 
-  public boolean isViewFocused() {
-    View focusTarget = this.isFocusable() ? this : this.getChildAt(0);
-    if (focusTarget == null) return false;
-    return focusTarget.isAccessibilityFocused();
-  }
-
-  public void setAutoFocus(Boolean value) {
-    this.autoFocus = value;
-  }
-
-  public void focus() {
-    a11yFocusDelegate.requestFocus();
-  }
-
   @Override
   public void onPopulateAccessibilityEvent(AccessibilityEvent event) {
     super.onPopulateAccessibilityEvent(event);
@@ -62,11 +38,6 @@ public class A11yView extends A11yViewGroup implements A11yFocusProtocol {
     int eventType = event.getEventType();
     boolean isSubChild = (child == this.getSubChild());
 
-    if (eventType == AccessibilityEvent.TYPE_VIEW_ACCESSIBILITY_FOCUSED && autoFocus && !hasBeenFocused) {
-      hasBeenFocused = true;
-      a11yFocusDelegate.onFocused();
-    }
-
     if (eventType == AccessibilityEvent.TYPE_VIEW_ACCESSIBILITY_FOCUSED && isSubChild) {
       EventHelper.screenReaderFocusChanged((ReactContext) context, this.getId(), true);
     }
@@ -87,17 +58,4 @@ public class A11yView extends A11yViewGroup implements A11yFocusProtocol {
 
     return super.onRequestSendAccessibilityEvent(child, event);
   }
-
-  @Override
-  protected void onAttachedToWindow() {
-    super.onAttachedToWindow();
-    if (autoFocus && !autoFocusOnce) {
-      autoFocusOnce = true;
-
-      if (!isViewFocused()) {
-        hasBeenFocused = false;
-        a11yFocusDelegate.requestFocus();
-      }
-    }
-  }
 }

package/android/src/main/java/com/a11yorder/core/A11yViewOrder.java

@@ -0,0 +1,37 @@
+package com.a11yorder.core;
+
+import android.content.Context;
+import android.view.View;
+
+import com.a11yorder.services.order.A11yOrderService;
+
+public class A11yViewOrder extends A11yAutoFocusView {
+  private final A11yOrderService orderService;
+
+  public A11yViewOrder(Context context) {
+    super(context);
+    this.orderService = new A11yOrderService(this);
+  }
+
+  public void setIndex(int index) {
+    this.orderService.setIndex(index);
+  }
+
+  public void setOrderFocusType(int focusType) {
+    this.orderService.setFocusType(focusType);
+  }
+
+  public void setOrderKey(String orderKey) {
+    this.orderService.setOrderKey(orderKey);
+  }
+
+  @Override
+  protected void onChildAttached(View child) {
+    this.orderService.link(child);
+  }
+
+  @Override
+  protected void onChildRemoved() {
+    this.orderService.detach();
+  }
+}

package/android/src/main/java/com/a11yorder/views/A11yCardView/A11yCardViewManager.java

@@ -0,0 +1,18 @@
+package com.a11yorder.views.A11yCardView;
+
+
+
+import android.view.ViewGroup;
+
+import com.facebook.react.module.annotations.ReactModule;
+import com.facebook.react.uimanager.ThemedReactContext;
+
+@ReactModule(name = com.a11yorder.views.A11yCardView.A11yCardViewManager.NAME)
+public class A11yCardViewManager extends com.a11yorder.A11yCardViewManagerSpec<ViewGroup> {
+  public static final String NAME = "A11yCardView";
+
+  @Override
+  public String getName() {
+    return NAME;
+  }
+}