@osano/osano-cmp-react-native 0.17.3 → 0.18.0

package/lib/module/views/Drawer/Drawer.ConsentCategories.js

@@ -1,4 +1,5 @@
-function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+"use strict";
+
 import React, { useCallback, useContext, useEffect, useMemo, useRef } from 'react';
 import { ActivityIndicator, FlatList, Platform, StyleSheet, Text, View } from 'react-native';
 import Translator from '../../utils/Translator';
@@ -19,6 +20,7 @@ import { setSpecialFeatureConsent } from '../../iab/tcf/actions';
 import { purposeMap } from '../../iab/tcf/constants';
 import { getCategoryDisclosures, getStack, isCategoryAccepted, isCategoryDisabled } from '../../selectors';
 import DrawerHeader from './Drawer.Header';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const Loading = () => {
   const {
     config
@@ -29,7 +31,7 @@ const Loading = () => {
   const {
     infoDialogForegroundColor
   } = palette || {};
-  return /*#__PURE__*/React.createElement(ActivityIndicator, {
+  return /*#__PURE__*/_jsx(ActivityIndicator, {
     size: "small",
     color: infoDialogForegroundColor
   });
@@ -53,15 +55,18 @@ const TextDisclosure = props => {
   const {
     name
   } = props;
-  return /*#__PURE__*/React.createElement(View, {
-    style: styles.col
-  }, /*#__PURE__*/React.createElement(View, {
-    style: styles.row
-  }, /*#__PURE__*/React.createElement(Text, {
-    style: drawerForeground
-  }, /*#__PURE__*/React.createElement(Locale, {
-    path: name
-  }))));
+  return /*#__PURE__*/_jsx(View, {
+    style: styles.col,
+    children: /*#__PURE__*/_jsx(View, {
+      style: styles.row,
+      children: /*#__PURE__*/_jsx(Text, {
+        style: drawerForeground,
+        children: /*#__PURE__*/_jsx(Locale, {
+          path: name
+        })
+      })
+    })
+  });
 };
 const CookieDisclosure = props => {
   const {
@@ -89,41 +94,54 @@ const CookieDisclosure = props => {
     purpose,
     last
   } = props;
-  return /*#__PURE__*/React.createElement(View, {
-    style: [styles.col, styles.disclosure, last ? styles.disclosureLast : undefined]
-  }, /*#__PURE__*/React.createElement(View, {
-    style: [styles.row, styles.spaceBetween, isRTL ? styles.rtl : styles.ltr]
-  }, /*#__PURE__*/React.createElement(Text, {
-    style: [drawerForeground, styles.disclosureLabel]
-  }, /*#__PURE__*/React.createElement(Locale, {
-    path: "disclosure.cookie.name"
-  })), /*#__PURE__*/React.createElement(Text, {
-    style: [drawerForeground, styles.disclosureDescription]
-  }, name)), /*#__PURE__*/React.createElement(View, {
-    style: [styles.row, styles.spaceBetween, isRTL ? styles.rtl : styles.ltr]
-  }, /*#__PURE__*/React.createElement(Text, {
-    style: [drawerForeground, styles.disclosureLabel]
-  }, /*#__PURE__*/React.createElement(Locale, {
-    path: "disclosure.cookie.provider"
-  })), /*#__PURE__*/React.createElement(Text, {
-    style: [drawerForeground, styles.disclosureDescription]
-  }, provider)), /*#__PURE__*/React.createElement(View, {
-    style: [styles.row, styles.spaceBetween, isRTL ? styles.rtl : styles.ltr]
-  }, /*#__PURE__*/React.createElement(Text, {
-    style: [drawerForeground, styles.disclosureLabel]
-  }, /*#__PURE__*/React.createElement(Locale, {
-    path: "disclosure.cookie.expiry"
-  })), /*#__PURE__*/React.createElement(Text, {
-    style: [drawerForeground, styles.disclosureDescription]
-  }, expiry)), /*#__PURE__*/React.createElement(View, {
-    style: [styles.row, styles.spaceBetween, isRTL ? styles.rtl : styles.ltr]
-  }, /*#__PURE__*/React.createElement(Text, {
-    style: [drawerForeground, styles.disclosureLabel]
-  }, /*#__PURE__*/React.createElement(Locale, {
-    path: "disclosure.cookie.purpose"
-  })), /*#__PURE__*/React.createElement(Text, {
-    style: [drawerForeground, styles.disclosureDescription]
-  }, purpose)));
+  return /*#__PURE__*/_jsxs(View, {
+    style: [styles.col, styles.disclosure, last ? styles.disclosureLast : undefined],
+    children: [/*#__PURE__*/_jsxs(View, {
+      style: [styles.row, styles.spaceBetween, isRTL ? styles.rtl : styles.ltr],
+      children: [/*#__PURE__*/_jsx(Text, {
+        style: [drawerForeground, styles.disclosureLabel],
+        children: /*#__PURE__*/_jsx(Locale, {
+          path: "disclosure.cookie.name"
+        })
+      }), /*#__PURE__*/_jsx(Text, {
+        style: [drawerForeground, styles.disclosureDescription],
+        children: name
+      })]
+    }), /*#__PURE__*/_jsxs(View, {
+      style: [styles.row, styles.spaceBetween, isRTL ? styles.rtl : styles.ltr],
+      children: [/*#__PURE__*/_jsx(Text, {
+        style: [drawerForeground, styles.disclosureLabel],
+        children: /*#__PURE__*/_jsx(Locale, {
+          path: "disclosure.cookie.provider"
+        })
+      }), /*#__PURE__*/_jsx(Text, {
+        style: [drawerForeground, styles.disclosureDescription],
+        children: provider
+      })]
+    }), /*#__PURE__*/_jsxs(View, {
+      style: [styles.row, styles.spaceBetween, isRTL ? styles.rtl : styles.ltr],
+      children: [/*#__PURE__*/_jsx(Text, {
+        style: [drawerForeground, styles.disclosureLabel],
+        children: /*#__PURE__*/_jsx(Locale, {
+          path: "disclosure.cookie.expiry"
+        })
+      }), /*#__PURE__*/_jsx(Text, {
+        style: [drawerForeground, styles.disclosureDescription],
+        children: expiry
+      })]
+    }), /*#__PURE__*/_jsxs(View, {
+      style: [styles.row, styles.spaceBetween, isRTL ? styles.rtl : styles.ltr],
+      children: [/*#__PURE__*/_jsx(Text, {
+        style: [drawerForeground, styles.disclosureLabel],
+        children: /*#__PURE__*/_jsx(Locale, {
+          path: "disclosure.cookie.purpose"
+        })
+      }), /*#__PURE__*/_jsx(Text, {
+        style: [drawerForeground, styles.disclosureDescription],
+        children: purpose
+      })]
+    })]
+  });
 };
 const Disclosures = props => {
   const {
@@ -137,21 +155,22 @@ const Disclosures = props => {
   // The following selector will return an empty array if the disclosures have not been fetched yet,
   // otherwise it will return the disclosures for the given category, or a No Results disclosure
   const categoryDisclosures = getCategoryDisclosures(state, category);
-  return /*#__PURE__*/React.createElement(View, {
-    style: styles.listItem
-  }, !loadingDisclosures && categoryDisclosures.length > 0 ? categoryDisclosures.map((disclosure, i, list) => {
-    switch (disclosure.type) {
-      case 'cookie':
-        return /*#__PURE__*/React.createElement(CookieDisclosure, _extends({
-          key: i,
-          last: i === list.length - 1
-        }, disclosure));
-      default:
-        return /*#__PURE__*/React.createElement(TextDisclosure, _extends({
-          key: i
-        }, disclosure));
-    }
-  }) : /*#__PURE__*/React.createElement(Loading, null));
+  return /*#__PURE__*/_jsx(View, {
+    style: styles.listItem,
+    children: !loadingDisclosures && categoryDisclosures.length > 0 ? categoryDisclosures.map((disclosure, i, list) => {
+      switch (disclosure.type) {
+        case 'cookie':
+          return /*#__PURE__*/_jsx(CookieDisclosure, {
+            last: i === list.length - 1,
+            ...disclosure
+          }, i);
+        default:
+          return /*#__PURE__*/_jsx(TextDisclosure, {
+            ...disclosure
+          }, i);
+      }
+    }) : /*#__PURE__*/_jsx(Loading, {})
+  });
 };
 const PurposeLinkRenderer = ({
   item
@@ -165,14 +184,14 @@ const PurposeLinkRenderer = ({
     config
   } = useContext(OsanoPrivateContext);
   const partnerCount = config?.getCountOfVendorsUsingPurpose('purposes', Number(id)) ?? 0;
-  const partnerCountString = partnerCount > 1 ? /*#__PURE__*/React.createElement(Locale, {
+  const partnerCountString = partnerCount > 1 ? /*#__PURE__*/_jsx(Locale, {
     path: "iab.partnerCountPlural",
     options: {
       interpolations: {
         partnerCount: partnerCount.toString()
       }
     }
-  }) : /*#__PURE__*/React.createElement(Locale, {
+  }) : /*#__PURE__*/_jsx(Locale, {
     path: "iab.partnerCount",
     options: {
       interpolations: {
@@ -180,12 +199,15 @@ const PurposeLinkRenderer = ({
       }
     }
   });
-  return /*#__PURE__*/React.createElement(Link, {
+  return /*#__PURE__*/_jsx(Link, {
     style: style,
-    onPress: onPress
-  }, /*#__PURE__*/React.createElement(Text, null, /*#__PURE__*/React.createElement(Locale, {
-    path: `iab.purposes.${id}.name`
-  }), " (", partnerCountString, ")"));
+    onPress: onPress,
+    children: /*#__PURE__*/_jsxs(Text, {
+      children: [/*#__PURE__*/_jsx(Locale, {
+        path: `iab.purposes.${id}.name`
+      }), " (", partnerCountString, ")"]
+    })
+  });
 };
 const CategoryListItem = props => {
   const {
@@ -221,12 +243,12 @@ const CategoryListItem = props => {
   const state = getState();
   const useTcf = config?.tcfIsApplicable;
   const descriptions = useMemo(() => {
-    const allDescriptions = (`${translate(`categories.${category}.description`)}`.split('\n\n') || []).map((d, i) => /*#__PURE__*/React.createElement(Text, {
-      key: i,
+    const allDescriptions = (`${translate(`categories.${category}.description`)}`.split('\n\n') || []).map((d, i) => /*#__PURE__*/_jsx(Text, {
       style: [{
         fontSize: 12
-      }, drawerForeground]
-    }, d));
+      }, drawerForeground],
+      children: d
+    }, i));
     return allDescriptions.length > 0 ? allDescriptions : null;
   }, [drawerForeground]);
   const purposes = useMemo(() => (useTcf && purposeMap[`${category}`] || []).map(purposeId => ({
@@ -237,14 +259,15 @@ const CategoryListItem = props => {
       type: 'purpose'
     }))
   })), [dispatch, category, useTcf]);
-  const ListHeaderComponent = useMemo(() => /*#__PURE__*/React.createElement(Text, {
+  const ListHeaderComponent = useMemo(() => /*#__PURE__*/_jsx(Text, {
     style: [drawerForeground, {
       fontSize: 14,
       marginBottom: 8
-    }]
-  }, /*#__PURE__*/React.createElement(Locale, {
-    path: `iab.basis.consent`
-  })), [drawerForeground]);
+    }],
+    children: /*#__PURE__*/_jsx(Locale, {
+      path: `iab.basis.consent`
+    })
+  }), [drawerForeground]);
   const checked = isCategoryAccepted(state, category);
   const disabled = isCategoryDisabled(state, category);
   const shouldHideDisclosures = hideDisclosures || category === ConsentCategory.OPT_OUT;
@@ -265,51 +288,58 @@ const CategoryListItem = props => {
       customerId: config?.customerId
     }));
   }, [config]);
-  return /*#__PURE__*/React.createElement(View, {
+  return /*#__PURE__*/_jsxs(View, {
     style: {
       flex: 1,
       alignItems: 'stretch',
       justifyContent: 'flex-start'
-    }
-  }, /*#__PURE__*/React.createElement(View, {
-    style: [styles.listItem, {
-      flex: 1,
-      paddingBottom: 24
-    }]
-  }, /*#__PURE__*/React.createElement(View, {
-    style: styles.row
-  }, /*#__PURE__*/React.createElement(Toggle, {
-    align: isRTL ? 'left' : 'right',
-    disabled: disabled,
-    onValueChange: handleValueChange,
-    style: styles.switch,
-    value: checked
-  }, /*#__PURE__*/React.createElement(Text, {
-    style: toggleTextStyle
-  }, /*#__PURE__*/React.createElement(Locale, {
-    path: `categories.${category}.label`
-  })))), descriptions, /*#__PURE__*/React.createElement(FlatList, {
-    ListHeaderComponent: purposes.length ? ListHeaderComponent : null,
-    data: purposes,
-    renderItem: ({
-      item
-    }) => /*#__PURE__*/React.createElement(PurposeLinkRenderer, {
-      item: item
-    }),
-    style: {
-      marginTop: purposes.length ? 16 : 0
-    }
-  })), !shouldHideDisclosures ? /*#__PURE__*/React.createElement(View, {
-    style: {
-      marginTop: -24
-    }
-  }, /*#__PURE__*/React.createElement(ExpansionPanel, {
-    title: "messaging.viewCookies",
-    style: styles.listItem,
-    onOpen: handleToggleDisclosure
-  }, /*#__PURE__*/React.createElement(Disclosures, {
-    category: category
-  }))) : null);
+    },
+    children: [/*#__PURE__*/_jsxs(View, {
+      style: [styles.listItem, {
+        flex: 1,
+        paddingBottom: 24
+      }],
+      children: [/*#__PURE__*/_jsx(View, {
+        style: styles.row,
+        children: /*#__PURE__*/_jsx(Toggle, {
+          align: isRTL ? 'left' : 'right',
+          disabled: disabled,
+          onValueChange: handleValueChange,
+          style: styles.switch,
+          value: checked,
+          children: /*#__PURE__*/_jsx(Text, {
+            style: toggleTextStyle,
+            children: /*#__PURE__*/_jsx(Locale, {
+              path: `categories.${category}.label`
+            })
+          })
+        })
+      }), descriptions, /*#__PURE__*/_jsx(FlatList, {
+        ListHeaderComponent: purposes.length ? ListHeaderComponent : null,
+        data: purposes,
+        renderItem: ({
+          item
+        }) => /*#__PURE__*/_jsx(PurposeLinkRenderer, {
+          item: item
+        }),
+        style: {
+          marginTop: purposes.length ? 16 : 0
+        }
+      })]
+    }), !shouldHideDisclosures ? /*#__PURE__*/_jsx(View, {
+      style: {
+        marginTop: -24
+      },
+      children: /*#__PURE__*/_jsx(ExpansionPanel, {
+        title: "messaging.viewCookies",
+        style: styles.listItem,
+        onOpen: handleToggleDisclosure,
+        children: /*#__PURE__*/_jsx(Disclosures, {
+          category: category
+        })
+      })
+    }) : null]
+  });
 };
 const SpecialFeatureListItem = ({
   specialFeatureId
@@ -341,28 +371,35 @@ const SpecialFeatureListItem = ({
   const handleValueChange = useBoundCallback((specialFeatureId, acceptOrDeny) => {
     dispatch(setSpecialFeatureConsent(specialFeatureId, acceptOrDeny));
   }, [specialFeatureId]);
-  return /*#__PURE__*/React.createElement(View, null, /*#__PURE__*/React.createElement(View, {
-    style: [styles.row, styles.listItem]
-  }, /*#__PURE__*/React.createElement(Toggle, {
-    align: isRTL ? 'left' : 'right',
-    onValueChange: handleValueChange,
-    style: styles.switch,
-    value: checked
-  }, /*#__PURE__*/React.createElement(Text, {
-    style: [drawerForeground, styles.toggleLabel]
-  }, /*#__PURE__*/React.createElement(Locale, {
-    path: name
-  })))), /*#__PURE__*/React.createElement(Text, {
-    style: [styles.listItem, drawerForeground, hasLegalDescription ? {} : styles.paragraph]
-  }, /*#__PURE__*/React.createElement(Locale, {
-    path: description
-  })), hasLegalDescription ? /*#__PURE__*/React.createElement(ExpansionPanel, {
-    style: styles.listItem,
-    title: "messaging.moreDetails"
-  }, /*#__PURE__*/React.createElement(TextDisclosure, {
-    type: "text",
-    name: descriptionLegal
-  })) : null);
+  return /*#__PURE__*/_jsxs(View, {
+    children: [/*#__PURE__*/_jsx(View, {
+      style: [styles.row, styles.listItem],
+      children: /*#__PURE__*/_jsx(Toggle, {
+        align: isRTL ? 'left' : 'right',
+        onValueChange: handleValueChange,
+        style: styles.switch,
+        value: checked,
+        children: /*#__PURE__*/_jsx(Text, {
+          style: [drawerForeground, styles.toggleLabel],
+          children: /*#__PURE__*/_jsx(Locale, {
+            path: name
+          })
+        })
+      })
+    }), /*#__PURE__*/_jsx(Text, {
+      style: [styles.listItem, drawerForeground, hasLegalDescription ? {} : styles.paragraph],
+      children: /*#__PURE__*/_jsx(Locale, {
+        path: description
+      })
+    }), hasLegalDescription ? /*#__PURE__*/_jsx(ExpansionPanel, {
+      style: styles.listItem,
+      title: "messaging.moreDetails",
+      children: /*#__PURE__*/_jsx(TextDisclosure, {
+        type: "text",
+        name: descriptionLegal
+      })
+    }) : null]
+  });
 };
 const CategoryListHeader = ({
   style
@@ -393,32 +430,59 @@ const CategoryListHeader = ({
   const useTcf = config?.tcfIsApplicable;
   const policyLinkInDrawer = config?.policyLinkInDrawer;
   const extraLinks = policyLinkInDrawer || useTcf;
-  return /*#__PURE__*/React.createElement(View, {
-    style: [styles.listItem, styles.listHeader, style]
-  }, /*#__PURE__*/React.createElement(View, {
-    style: extraLinks ? styles.paragraph : undefined
-  }, /*#__PURE__*/React.createElement(Text, {
-    style: drawerForeground,
-    testID: "drawer-description"
-  }, /*#__PURE__*/React.createElement(Locale, {
-    path: "drawer.description"
-  }))), extraLinks ? /*#__PURE__*/React.createElement(View, null, policyLinkInDrawer ? /*#__PURE__*/React.createElement(Text, null, /*#__PURE__*/React.createElement(StoragePolicyLink, {
-    testID: "drawer-policy-link-1",
-    policyLinkText: config?.policyLinkText || '',
-    href: config?.storagePolicyHref || ''
-  }), config?.additionalLinks && config?.additionalLinks?.length >= 1 ? /*#__PURE__*/React.createElement(Text, null, " | ") : null, /*#__PURE__*/React.createElement(StoragePolicyLink, {
-    testID: "drawer-policy-link-2",
-    policyLinkText: config?.additionalLinks?.at(0)?.at(0),
-    href: config?.additionalLinks?.at(0)?.at(1)
-  })) : null, useTcf ? /*#__PURE__*/React.createElement(Link, {
-    onPress: handleGoIabVendors
-  }, /*#__PURE__*/React.createElement(Locale, {
-    path: 'iab.vendor.title'
-  })) : null, useTcf ? /*#__PURE__*/React.createElement(Link, {
-    onPress: handleGoIabDisclosures
-  }, /*#__PURE__*/React.createElement(Locale, {
-    path: 'iab.legal.title'
-  })) : null) : null, useTcf ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(AcceptAllButton, null), /*#__PURE__*/React.createElement(RejectAllButton, null)) : null);
+  return /*#__PURE__*/_jsxs(View, {
+    style: [styles.listItem, styles.listHeader, style],
+    children: [/*#__PURE__*/_jsx(View, {
+      style: extraLinks ? styles.paragraph : undefined,
+      children: /*#__PURE__*/_jsx(Text, {
+        style: drawerForeground,
+        testID: "drawer-description",
+        children: /*#__PURE__*/_jsx(Locale, {
+          path: "drawer.description"
+        })
+      })
+    }), extraLinks ? /*#__PURE__*/_jsxs(View, {
+      children: [policyLinkInDrawer ? /*#__PURE__*/_jsxs(Text, {
+        children: [/*#__PURE__*/_jsx(StoragePolicyLink, {
+          testID: "drawer-policy-link-1",
+          policyLinkText: config?.policyLinkText || '',
+          href: config?.storagePolicyHref || ''
+        }), config?.additionalLinks && config?.additionalLinks?.length >= 1 ? /*#__PURE__*/_jsx(Text, {
+          children: " | "
+        }) : null, /*#__PURE__*/_jsx(StoragePolicyLink, {
+          testID: "drawer-policy-link-2",
+          policyLinkText: config?.additionalLinks?.at(0)?.at(0),
+          href: config?.additionalLinks?.at(0)?.at(1)
+        })]
+      }) : null, useTcf ? /*#__PURE__*/_jsx(Link, {
+        onPress: handleGoIabVendors,
+        children: /*#__PURE__*/_jsx(Locale, {
+          path: 'iab.vendor.title'
+        })
+      }) : null, useTcf ? /*#__PURE__*/_jsx(Link, {
+        onPress: handleGoIabDisclosures,
+        children: /*#__PURE__*/_jsx(Locale, {
+          path: 'iab.legal.title'
+        })
+      }) : null]
+    }) : null, useTcf ? /*#__PURE__*/_jsxs(View, {
+      style: {
+        marginTop: 16,
+        flex: 1,
+        flexDirection: 'row',
+        gap: 16
+      },
+      children: [/*#__PURE__*/_jsx(AcceptAllButton, {
+        style: {
+          flex: 1
+        }
+      }), /*#__PURE__*/_jsx(RejectAllButton, {
+        style: {
+          flex: 1
+        }
+      })]
+    }) : null]
+  });
 };
 const CategoryListFooter = () => {
   const {
@@ -427,19 +491,22 @@ const CategoryListFooter = () => {
   } = useContext(OsanoPrivateContext);
   const handleSave = useCallback(() => {
     cmp && dispatch(saveConsent(cmp));
-    dispatch(close(cmp));
-  }, []);
-  return /*#__PURE__*/React.createElement(View, {
-    style: [styles.listItem, styles.listFooter]
-  }, /*#__PURE__*/React.createElement(SaveButton, {
-    onPress: handleSave
-  }), /*#__PURE__*/React.createElement(View, {
-    style: styles.poweredBy
-  }, /*#__PURE__*/React.createElement(Link, {
-    href: "https://www.osano.com/?utm_campaign=cmp&utm_source=cmp-dialog&utm_medium=drawer"
-  }, /*#__PURE__*/React.createElement(Locale, {
-    path: "messaging.poweredBy"
-  }))));
+    dispatch(close());
+  }, [cmp]);
+  return /*#__PURE__*/_jsxs(View, {
+    style: [styles.listItem, styles.listFooter],
+    children: [/*#__PURE__*/_jsx(SaveButton, {
+      onPress: handleSave
+    }), /*#__PURE__*/_jsx(View, {
+      style: styles.poweredBy,
+      children: /*#__PURE__*/_jsx(Link, {
+        href: "https://www.osano.com/?utm_campaign=cmp&utm_source=cmp-dialog&utm_medium=drawer",
+        children: /*#__PURE__*/_jsx(Locale, {
+          path: "messaging.poweredBy"
+        })
+      })
+    })]
+  });
 };
 const ListItemRenderer = ({
   item,
@@ -455,16 +522,16 @@ const ListItemRenderer = ({
   } : undefined;
   switch (type) {
     case 'info':
-      return /*#__PURE__*/React.createElement(CategoryListHeader, {
+      return /*#__PURE__*/_jsx(CategoryListHeader, {
         style: style
       });
     case 'category':
-      return /*#__PURE__*/React.createElement(CategoryListItem, {
+      return /*#__PURE__*/_jsx(CategoryListItem, {
         style: style,
         category: id
       });
     case 'specialFeature':
-      return /*#__PURE__*/React.createElement(SpecialFeatureListItem, {
+      return /*#__PURE__*/_jsx(SpecialFeatureListItem, {
         style: style,
         specialFeatureId: id
       });
@@ -495,7 +562,7 @@ export const ConsentCategoriesDrawer = () => {
     }, 0);
   }, []);
   const ListHeaderComponent = useMemo(() => {
-    return /*#__PURE__*/React.createElement(DrawerHeader, {
+    return /*#__PURE__*/_jsx(DrawerHeader, {
       title: "drawer.header",
       canGoBack: false,
       onHeaderLayoutChange: handleHeaderLayoutChange
@@ -556,22 +623,24 @@ export const ConsentCategoriesDrawer = () => {
       }
     }
   }, [stack, animateDirection]);
-  return /*#__PURE__*/React.createElement(View, {
-    style: styles.renderItem
-  }, Platform.OS === 'web' ? null : ListHeaderComponent, /*#__PURE__*/React.createElement(FlatList, {
-    ref: flatListRef,
-    style: {
-      marginTop: Platform.OS === 'web' ? 0 : -headerHeight
-    },
-    data: categories,
-    stickyHeaderIndices: Platform.OS === 'web' ? [0] : undefined,
-    ListHeaderComponent: Platform.OS === 'web' ? ListHeaderComponent : undefined,
-    ListFooterComponent: CategoryListFooter,
-    renderItem: ListItemRenderer,
-    ItemSeparatorComponent: Divider,
-    removeClippedSubviews: false,
-    extraData: extraData
-  }));
+  return /*#__PURE__*/_jsxs(View, {
+    style: styles.renderItem,
+    children: [Platform.OS === 'web' ? null : ListHeaderComponent, /*#__PURE__*/_jsx(FlatList, {
+      ref: flatListRef,
+      style: {
+        marginTop: Platform.OS === 'web' ? 0 : -headerHeight
+      },
+      data: categories,
+      keyExtractor: (item, index) => `${item.type}-${item.id}-${index}`,
+      stickyHeaderIndices: Platform.OS === 'web' ? [0] : undefined,
+      ListHeaderComponent: Platform.OS === 'web' ? ListHeaderComponent : undefined,
+      ListFooterComponent: CategoryListFooter,
+      renderItem: ListItemRenderer,
+      ItemSeparatorComponent: Divider,
+      removeClippedSubviews: false,
+      extraData: extraData
+    })]
+  });
 };
 export default ConsentCategoriesDrawer;
 const styles = StyleSheet.create({