Repository: callstack/react-native-paper
Pull request #2467 (2020-12-25 21:37:31)

docs: add react-native-paper-tabs + react-native-bottom-sheet
gorhom/react-native-bottom-sheet is really smooth and react-native-paper-tabs has great integration with React Native Paper and fully implements the Material Design Spec + great web support (no dependencies on web)

<!-- Please provide enough information so that others can review your pull request. -->
<!-- Keep pull requests small and focused on a single change. -->

### Summary
https://www.reactnativepapertabs.com/
https://github.com/web-ridge/react-native-paper-tabs

https://github.com/gorhom/react-native-bottom-sheet
<!-- What existing problem does the pull request solve? Can you solve the issue with a different approach? -->

### Test plan

<!-- List the steps with which we can test this change. Provide screenshots if this changes anything visual. -->



Patch:
diff --git a/.circleci/config.yml b/.circleci/config.yml
index e60dcd79b..995f1bcd3 100644
--- a/.circleci/config.yml
+++ b/.circleci/config.yml
@@ -143,8 +143,8 @@ workflows:
             - install-dependencies
           filters:
             branches:
-              ignore: master
+              ignore: main
       - deploy-docs:
           filters:
             branches:
-              only: master
+              only: main
diff --git a/.circleci/deploy-docs.sh b/.circleci/deploy-docs.sh
index 5e2088742..896c62ec4 100755
--- a/.circleci/deploy-docs.sh
+++ b/.circleci/deploy-docs.sh
@@ -6,7 +6,7 @@ set -euxo pipefail # Exit with nonzero exit code if anything fails
 
 DIR="$(cd "$(dirname "${BASH_SOURCE[0]}")" && pwd)"
 
-SOURCE_BRANCH="master"
+SOURCE_BRANCH="main"
 TARGET_BRANCH="gh-pages"
 
 cd $DIR/../docs
diff --git a/.github/ISSUE_TEMPLATE/config.yml b/.github/ISSUE_TEMPLATE/config.yml
index 4244063be..2ea7e51ce 100644
--- a/.github/ISSUE_TEMPLATE/config.yml
+++ b/.github/ISSUE_TEMPLATE/config.yml
@@ -10,7 +10,7 @@ contact_links:
     url: https://snack.expo.io/@react-native-paper/github.com-callstack-react-native-paper:example
     about: See the official example app.
   - name: Contributing guide
-    url: https://github.com/callstack/react-native-paper/blob/master/CONTRIBUTING.md
+    url: https://github.com/callstack/react-native-paper/blob/main/CONTRIBUTING.md
     about: See our contributing guide.
   - name: Discord channel
     url: https://discord.com/channels/426714625279524876/438316503113138176
diff --git a/.github/workflows/publish.yml b/.github/workflows/publish.yml
index 16a1213a4..73894cde8 100644
--- a/.github/workflows/publish.yml
+++ b/.github/workflows/publish.yml
@@ -2,7 +2,7 @@ name: Expo Publish
 on:
   push:
     branches:
-      - master
+      - main
 jobs:
   publish:
     name: Install and publish
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
index 7149c4d8f..3e838d0a9 100644
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@@ -12,7 +12,7 @@ The core team works directly on GitHub and all work is public.
 
 > **Working on your first pull request?** You can learn how from this *free* series: [How to Contribute to an Open Source Project on GitHub](https://egghead.io/series/how-to-contribute-to-an-open-source-project-on-github).
 
-1. Fork the repo and create your branch from `master` (a guide on [how to fork a repository](https://help.github.com/articles/fork-a-repo/)).
+1. Fork the repo and create your branch from `main` (a guide on [how to fork a repository](https://help.github.com/articles/fork-a-repo/)).
 2. Run `yarn` to setup the development environment.
 3. Do the changes you want and test them out in the example app before sending a pull request.
 
@@ -68,7 +68,7 @@ The documentation is automatically generated from the [TypeScript](https://www.t
 
 ### Publishing a release
 
-We use [release-it](https://github.com/webpro/release-it) to automate our release. If you have publish access to the NPM package, run the following from the master branch to publish a new release:
+We use [release-it](https://github.com/webpro/release-it) to automate our release. If you have publish access to the NPM package, run the following from the main branch to publish a new release:
 
 ```sh
 yarn release
diff --git a/README.md b/README.md
index c516168a8..dcd0884a6 100644
--- a/README.md
+++ b/README.md
@@ -54,7 +54,7 @@ Use official component kits provided by [Material Design](https://material.io/re
 
 <!-- badges -->
 
-[build-badge]: https://img.shields.io/circleci/project/github/callstack/react-native-paper/master.svg?style=flat-square
+[build-badge]: https://img.shields.io/circleci/project/github/callstack/react-native-paper/main.svg?style=flat-square
 [build]: https://circleci.com/gh/callstack/react-native-paper
 [version-badge]: https://img.shields.io/npm/v/react-native-paper.svg?style=flat-square
 [package]: https://www.npmjs.com/package/react-native-paper
diff --git a/docs/pages/1.getting-started.md b/docs/pages/1.getting-started.md
index c9d138ad5..a6674ac31 100644
--- a/docs/pages/1.getting-started.md
+++ b/docs/pages/1.getting-started.md
@@ -119,7 +119,7 @@ export default function Main() {
 
 ## Customization
 
-You can provide a custom theme to customize the colors, fonts etc. with the `Provider` component. Check the [default theme](https://github.com/callstack/react-native-paper/blob/master/src/styles/DefaultTheme.tsx) to see what customization options are supported.
+You can provide a custom theme to customize the colors, fonts etc. with the `Provider` component. Check the [default theme](https://github.com/callstack/react-native-paper/blob/main/src/styles/DefaultTheme.tsx) to see what customization options are supported.
 
 Example:
 
diff --git a/docs/pages/2.theming.md b/docs/pages/2.theming.md
index 231ac9eb7..0a42acc6d 100644
--- a/docs/pages/2.theming.md
+++ b/docs/pages/2.theming.md
@@ -22,7 +22,7 @@ export default function Main() {
 }
 ```
 
-If no prop is specified, this will apply the [default theme](https://github.com/callstack/react-native-paper/blob/master/src/styles/DefaultTheme.tsx) to the components. You can also provide a `theme` prop with a theme object with same properties as the default theme:
+If no prop is specified, this will apply the [default theme](https://github.com/callstack/react-native-paper/blob/main/src/styles/DefaultTheme.tsx) to the components. You can also provide a `theme` prop with a theme object with same properties as the default theme:
 
 ```js
 import * as React from 'react';
@@ -146,7 +146,7 @@ export default function Main() {
 }
 ```
 
-As you can see, custom properties e.g. `myOwnColor` defined in nested object e.g. `colors` needs to be declared in its own interface. You'll find more information in our [example app](https://github.com/callstack/react-native-paper/blob/master/example/src/index.tsx) where we have it implemented.
+As you can see, custom properties e.g. `myOwnColor` defined in nested object e.g. `colors` needs to be declared in its own interface. You'll find more information in our [example app](https://github.com/callstack/react-native-paper/blob/main/example/src/index.tsx) where we have it implemented.
 
 ## Applying a theme to a paper component
 
diff --git a/docs/pages/4.fonts.md b/docs/pages/4.fonts.md
index cdc486954..e92bb8a93 100644
--- a/docs/pages/4.fonts.md
+++ b/docs/pages/4.fonts.md
@@ -47,7 +47,7 @@ The `fontConfig` object accepts `ios`, `android`, `macos`, `windows`, `web`, and
 
 Note: At a minimum, you need to explicitly pass fonts for `android`, `ios`, and `web`.
 
-Check the [default theme](https://github.com/callstack/react-native-paper/blob/master/src/styles/DefaultTheme.tsx) to see what customization options are supported.
+Check the [default theme](https://github.com/callstack/react-native-paper/blob/main/src/styles/DefaultTheme.tsx) to see what customization options are supported.
 
 ```js
 import * as React from 'react';
diff --git a/docs/pages/6.recommended-libraries.md b/docs/pages/6.recommended-libraries.md
index 956676052..75bb69b06 100644
--- a/docs/pages/6.recommended-libraries.md
+++ b/docs/pages/6.recommended-libraries.md
@@ -11,18 +11,26 @@ Here are some of the libraries we recommend:
 ## Tabs
 
 [react-native-community/react-native-tab-view](https://github.com/react-native-community/react-native-tab-view)
-
 Material Design themed [swipeable tabs](https://material.io/design/components/tabs.html), maintained by [@satya164](https://twitter.com/satya164) and [@mosdnk](https://twitter.com/mosdnk).
 
+[react-native-paper-tabs](https://github.com/web-ridge/react-native-paper-tabs)
+Material Design themed [swipeable tabs](https://material.io/design/components/tabs.html) for React Native Paper, maintained by [@RichardLindhout](https://twitter.com/RichardLindhout)
+
 ## Bottom sheet
 
 [osdnk/reanimated-bottom-sheet](https://github.com/osdnk/react-native-reanimated-bottom-sheet)
+An implementation of the [bottom sheet behaviour](https://material.io/design/components/sheets-bottom.html), maintained by [@mosdnk](https://twitter.com/mosdnk).
+
+[gorhom/react-native-bottom-sheet](https://github.com/gorhom/react-native-bottom-sheet)
+An implementation of the [bottom sheet behaviour](https://material.io/design/components/sheets-bottom.html), maintained by [@Gorhom](https://twitter.com/Gorhom).
 
-An implementation [bottom sheet behaviour](https://material.io/design/components/sheets-bottom.html), maintained by [@mosdnk](https://twitter.com/mosdnk).
 
 ## Date Picker
-[web-ridge/react-native-paper-dates](https://github.com/web-ridge/react-native-paper-dates)   
+[web-ridge/react-native-paper-dates](https://github.com/web-ridge/react-native-paper-dates)
+Material Design themed [date picker](https://material.io/components/date-pickers), maintained by [@RichardLindhout](https://twitter.com/RichardLindhout)
+ 
 [react-native-community/react-native-datetimepicker](https://github.com/react-native-community/react-native-datetimepicker)
 
 ## Time Picker
 [web-ridge/react-native-paper-dates](https://github.com/web-ridge/react-native-paper-dates)
+Material Design themed [time picker](https://material.io/components/time-pickers), maintained by [@RichardLindhout](https://twitter.com/RichardLindhout) 
diff --git a/docs/pages/8.theming-with-react-navigation.md b/docs/pages/8.theming-with-react-navigation.md
index bd05f5e8b..c2a94389e 100644
--- a/docs/pages/8.theming-with-react-navigation.md
+++ b/docs/pages/8.theming-with-react-navigation.md
@@ -262,6 +262,6 @@ React Native Paper components will automatically use provided theme thanks to th
 exposed by the library. You can see how it's done in the `Header` component code above.
 
 If light/dark themes are not enough for your use case, you can learn more about creating Material Design themes [here](https://material.io/design/material-theming/implementing-your-theme.html#color).
-On `master` branch of the example app, you will find implemented [Menu](https://callstack.github.io/react-native-paper/menu.html) component, which allows to choose a few custom themes. Inspecting code in `utils` and `Header` may give you some idea how to use your own themes with `Paper`, in addition to dedicated [docs](https://callstack.github.io/react-native-paper/menu.html).
+On `main` branch of the example app, you will find implemented [Menu](https://callstack.github.io/react-native-paper/menu.html) component, which allows to choose a few custom themes. Inspecting code in `utils` and `Header` may give you some idea how to use your own themes with `Paper`, in addition to dedicated [docs](https://callstack.github.io/react-native-paper/menu.html).
 
 Read more about integrating `Paper` with `React Navigation` in a brilliant [article](https://reactnavigation.org/blog/2020/01/29/using-react-navigation-5-with-react-native-paper/) by [@trensik](https://twitter.com/trensik)
diff --git a/example/src/Examples/FABExample.tsx b/example/src/Examples/FABExample.tsx
index 2c319f70c..bbb60ce27 100644
--- a/example/src/Examples/FABExample.tsx
+++ b/example/src/Examples/FABExample.tsx
@@ -67,7 +67,12 @@ const ButtonExample = () => {
               { icon: 'plus', onPress: () => {} },
               { icon: 'star', label: 'Star', onPress: () => {} },
               { icon: 'email', label: 'Email', onPress: () => {} },
-              { icon: 'bell', label: 'Remind', onPress: () => {} },
+              {
+                icon: 'bell',
+                label: 'Remind',
+                onPress: () => {},
+                small: false,
+              },
             ]}
             onStateChange={({ open }: { open: boolean }) => setOpen(open)}
             onPress={() => {
diff --git a/src/components/Appbar/AppbarBackIcon.tsx b/src/components/Appbar/AppbarBackIcon.tsx
index d4ff2e33c..ddda37b0a 100644
--- a/src/components/Appbar/AppbarBackIcon.tsx
+++ b/src/components/Appbar/AppbarBackIcon.tsx
@@ -2,8 +2,10 @@ import * as React from 'react';
 import { Platform, I18nManager, View, Image, StyleSheet } from 'react-native';
 import MaterialCommunityIcon from '../MaterialCommunityIcon';
 
-const AppbarBackIcon = ({ size, color }: { size: number; color: string }) =>
-  Platform.OS === 'ios' ? (
+const AppbarBackIcon = ({ size, color }: { size: number; color: string }) => {
+  const iosIconSize = size - 3;
+
+  return Platform.OS === 'ios' ? (
     <View
       style={[
         styles.wrapper,
@@ -16,7 +18,10 @@ const AppbarBackIcon = ({ size, color }: { size: number; color: string }) =>
     >
       <Image
         source={require('../../assets/back-chevron.png')}
-        style={[styles.icon, { tintColor: color }]}
+        style={[
+          styles.icon,
+          { tintColor: color, width: iosIconSize, height: iosIconSize },
+        ]}
       />
     </View>
   ) : (
@@ -27,6 +32,7 @@ const AppbarBackIcon = ({ size, color }: { size: number; color: string }) =>
       direction={I18nManager.isRTL ? 'rtl' : 'ltr'}
     />
   );
+};
 
 const styles = StyleSheet.create({
   wrapper: {
@@ -34,8 +40,6 @@ const styles = StyleSheet.create({
     justifyContent: 'center',
   },
   icon: {
-    height: 21,
-    width: 21,
     resizeMode: 'contain',
   },
 });
diff --git a/src/components/FAB/FABGroup.tsx b/src/components/FAB/FABGroup.tsx
index 3f03d3b94..2abd7b30f 100644
--- a/src/components/FAB/FABGroup.tsx
+++ b/src/components/FAB/FABGroup.tsx
@@ -24,6 +24,7 @@ type Props = {
    * - `accessibilityLabel`: accessibility label for the action, uses label by default if specified
    * - `color`: custom icon color of the action item
    * - `style`: pass additional styles for the fab item, for example, `backgroundColor`
+   * - `small`: boolean describing whether small or normal sized FAB is rendered. Defaults to `true`
    * - `onPress`: callback that is called when `FAB` is pressed (required)
    */
   actions: Array<{
@@ -32,6 +33,7 @@ type Props = {
     color?: string;
     accessibilityLabel?: string;
     style?: StyleProp<ViewStyle>;
+    small?: boolean;
     onPress: () => void;
     testID?: string;
   }>;
@@ -126,6 +128,7 @@ type Props = {
  *               icon: 'bell',
  *               label: 'Remind',
  *               onPress: () => console.log('Pressed notifications'),
+ *               small: false,
  *             },
  *           ]}
  *           onStateChange={onStateChange}
@@ -270,38 +273,46 @@ const FABGroup = ({
           {actions.map((it, i) => (
             <View
               key={i} // eslint-disable-line react/no-array-index-key
-              style={styles.item}
+              style={[
+                styles.item,
+                {
+                  marginHorizontal:
+                    typeof it.small === 'undefined' || it.small ? 24 : 16,
+                },
+              ]}
               pointerEvents={open ? 'box-none' : 'none'}
             >
               {it.label && (
-                <Card
-                  style={
-                    [
-                      styles.label,
-                      {
-                        transform: [{ scale: scales[i] }],
-                        opacity: opacities[i],
-                      },
-                    ] as StyleProp<ViewStyle>
-                  }
-                  onPress={() => {
-                    it.onPress();
-                    close();
-                  }}
-                  accessibilityLabel={
-                    it.accessibilityLabel !== 'undefined'
-                      ? it.accessibilityLabel
-                      : it.label
-                  }
-                  accessibilityTraits="button"
-                  accessibilityComponentType="button"
-                  accessibilityRole="button"
-                >
-                  <Text style={{ color: labelColor }}>{it.label}</Text>
-                </Card>
+                <View>
+                  <Card
+                    style={
+                      [
+                        styles.label,
+                        {
+                          transform: [{ scale: scales[i] }],
+                          opacity: opacities[i],
+                        },
+                      ] as StyleProp<ViewStyle>
+                    }
+                    onPress={() => {
+                      it.onPress();
+                      close();
+                    }}
+                    accessibilityLabel={
+                      it.accessibilityLabel !== 'undefined'
+                        ? it.accessibilityLabel
+                        : it.label
+                    }
+                    accessibilityTraits="button"
+                    accessibilityComponentType="button"
+                    accessibilityRole="button"
+                  >
+                    <Text style={{ color: labelColor }}>{it.label}</Text>
+                  </Card>
+                </View>
               )}
               <FAB
-                small
+                small={typeof it.small !== 'undefined' ? it.small : true}
                 icon={it.icon}
                 color={it.color}
                 style={
@@ -387,7 +398,6 @@ const styles = StyleSheet.create({
     elevation: 2,
   },
   item: {
-    marginHorizontal: 24,
     marginBottom: 16,
     flexDirection: 'row',
     justifyContent: 'flex-end',
diff --git a/src/components/MaterialCommunityIcon.tsx b/src/components/MaterialCommunityIcon.tsx
index f052e9402..6d5fedbe1 100644
--- a/src/components/MaterialCommunityIcon.tsx
+++ b/src/components/MaterialCommunityIcon.tsx
@@ -45,6 +45,7 @@ try {
         style={[styles.icon, { color, fontSize: size }]}
         // @ts-ignore
         pointerEvents="none"
+        selectable={false}
       >
         □
       </Text>
@@ -83,6 +84,7 @@ const defaultIcon = ({
       styles.icon,
     ]}
     pointerEvents="none"
+    selectable={false}
     {...accessibilityProps}
   />
 );
diff --git a/src/components/Modal.tsx b/src/components/Modal.tsx
index d00e451ce..9ea854396 100644
--- a/src/components/Modal.tsx
+++ b/src/components/Modal.tsx
@@ -41,6 +41,11 @@ type Props = {
    * Style for the content of the modal
    */
   contentContainerStyle?: StyleProp<ViewStyle>;
+  /**
+   * Style for the wrapper of the modal.
+   * Use this prop to change the default wrapper style or to override safe area insets with marginTop and marginBottom.
+   */
+  style?: StyleProp<ViewStyle>;
   /**
    * @optional
    */
@@ -191,6 +196,7 @@ class Modal extends React.Component<Props, State> {
     const {
       children,
       dismissable,
+      style,
       theme,
       contentContainerStyle,
       overlayAccessibilityLabel,
@@ -221,6 +227,7 @@ class Modal extends React.Component<Props, State> {
           style={[
             styles.wrapper,
             { marginTop: TOP_INSET, marginBottom: BOTTOM_INSET },
+            style,
           ]}
           pointerEvents="box-none"
         >


Test patch:
diff --git a/src/components/__tests__/Appbar/__snapshots__/Appbar.test.js.snap b/src/components/__tests__/Appbar/__snapshots__/Appbar.test.js.snap
index 1a7e70722..42af86e28 100644
--- a/src/components/__tests__/Appbar/__snapshots__/Appbar.test.js.snap
+++ b/src/components/__tests__/Appbar/__snapshots__/Appbar.test.js.snap
@@ -92,6 +92,7 @@ exports[`Appbar does not pass any additional props to Searchbar 1`] = `
           allowFontScaling={false}
           importantForAccessibility="no-hide-descendants"
           pointerEvents="none"
+          selectable={false}
           style={
             Array [
               Object {
@@ -210,6 +211,7 @@ exports[`Appbar does not pass any additional props to Searchbar 1`] = `
           allowFontScaling={false}
           importantForAccessibility="no-hide-descendants"
           pointerEvents="none"
+          selectable={false}
           style={
             Array [
               Object {
@@ -374,12 +376,12 @@ exports[`Appbar passes additional props to AppbarBackAction, AppbarContent and A
               style={
                 Array [
                   Object {
-                    "height": 21,
                     "resizeMode": "contain",
-                    "width": 21,
                   },
                   Object {
+                    "height": 21,
                     "tintColor": "#ffffff",
+                    "width": 21,
                   },
                 ]
               }
@@ -531,6 +533,7 @@ exports[`Appbar passes additional props to AppbarBackAction, AppbarContent and A
             allowFontScaling={false}
             importantForAccessibility="no-hide-descendants"
             pointerEvents="none"
+            selectable={false}
             style={
               Array [
                 Object {
diff --git a/src/components/__tests__/Checkbox/__snapshots__/Checkbox.test.js.snap b/src/components/__tests__/Checkbox/__snapshots__/Checkbox.test.js.snap
index 53c6217d7..aee7c5ebc 100644
--- a/src/components/__tests__/Checkbox/__snapshots__/Checkbox.test.js.snap
+++ b/src/components/__tests__/Checkbox/__snapshots__/Checkbox.test.js.snap
@@ -44,6 +44,7 @@ exports[`renders Checkbox with custom testID 1`] = `
       allowFontScaling={false}
       importantForAccessibility="no-hide-descendants"
       pointerEvents="none"
+      selectable={false}
       style={
         Array [
           Object {
@@ -121,6 +122,7 @@ exports[`renders checked Checkbox with color 1`] = `
       allowFontScaling={false}
       importantForAccessibility="no-hide-descendants"
       pointerEvents="none"
+      selectable={false}
       style={
         Array [
           Object {
@@ -198,6 +200,7 @@ exports[`renders checked Checkbox with onPress 1`] = `
       allowFontScaling={false}
       importantForAccessibility="no-hide-descendants"
       pointerEvents="none"
+      selectable={false}
       style={
         Array [
           Object {
@@ -275,6 +278,7 @@ exports[`renders indeterminate Checkbox 1`] = `
       allowFontScaling={false}
       importantForAccessibility="no-hide-descendants"
       pointerEvents="none"
+      selectable={false}
       style={
         Array [
           Object {
@@ -352,6 +356,7 @@ exports[`renders indeterminate Checkbox with color 1`] = `
       allowFontScaling={false}
       importantForAccessibility="no-hide-descendants"
       pointerEvents="none"
+      selectable={false}
       style={
         Array [
           Object {
@@ -429,6 +434,7 @@ exports[`renders unchecked Checkbox with color 1`] = `
       allowFontScaling={false}
       importantForAccessibility="no-hide-descendants"
       pointerEvents="none"
+      selectable={false}
       style={
         Array [
           Object {
@@ -506,6 +512,7 @@ exports[`renders unchecked Checkbox with onPress 1`] = `
       allowFontScaling={false}
       importantForAccessibility="no-hide-descendants"
       pointerEvents="none"
+      selectable={false}
       style={
         Array [
           Object {
diff --git a/src/components/__tests__/Checkbox/__snapshots__/CheckboxItem.test.js.snap b/src/components/__tests__/Checkbox/__snapshots__/CheckboxItem.test.js.snap
index 7d5bf5c51..c06dbe24c 100644
--- a/src/components/__tests__/Checkbox/__snapshots__/CheckboxItem.test.js.snap
+++ b/src/components/__tests__/Checkbox/__snapshots__/CheckboxItem.test.js.snap
@@ -104,6 +104,7 @@ exports[`can render the Android checkbox on different platforms 1`] = `
           allowFontScaling={false}
           importantForAccessibility="no-hide-descendants"
           pointerEvents="none"
+          selectable={false}
           style={
             Array [
               Object {
@@ -266,6 +267,7 @@ exports[`can render the iOS checkbox on different platforms 1`] = `
           allowFontScaling={false}
           importantForAccessibility="no-hide-descendants"
           pointerEvents="none"
+          selectable={false}
           style={
             Array [
               Object {
@@ -400,6 +402,7 @@ exports[`renders unchecked 1`] = `
           allowFontScaling={false}
           importantForAccessibility="no-hide-descendants"
           pointerEvents="none"
+          selectable={false}
           style={
             Array [
               Object {
diff --git a/src/components/__tests__/RadioButton/__snapshots__/RadioButton.test.js.snap b/src/components/__tests__/RadioButton/__snapshots__/RadioButton.test.js.snap
index f04bf0e26..6d3b5cbf3 100644
--- a/src/components/__tests__/RadioButton/__snapshots__/RadioButton.test.js.snap
+++ b/src/components/__tests__/RadioButton/__snapshots__/RadioButton.test.js.snap
@@ -44,6 +44,7 @@ exports[`RadioButton RadioButton with custom testID renders properly 1`] = `
       allowFontScaling={false}
       importantForAccessibility="no-hide-descendants"
       pointerEvents="none"
+      selectable={false}
       style={
         Array [
           Object {
@@ -121,6 +122,7 @@ exports[`RadioButton on default platform renders properly 1`] = `
       allowFontScaling={false}
       importantForAccessibility="no-hide-descendants"
       pointerEvents="none"
+      selectable={false}
       style={
         Array [
           Object {
@@ -198,6 +200,7 @@ exports[`RadioButton on ios platform renders properly 1`] = `
       allowFontScaling={false}
       importantForAccessibility="no-hide-descendants"
       pointerEvents="none"
+      selectable={false}
       style={
         Array [
           Object {
@@ -275,6 +278,7 @@ exports[`RadioButton when RadioButton is wrapped by RadioButtonContext.Provider
       allowFontScaling={false}
       importantForAccessibility="no-hide-descendants"
       pointerEvents="none"
+      selectable={false}
       style={
         Array [
           Object {
diff --git a/src/components/__tests__/RadioButton/__snapshots__/RadioButtonGroup.test.js.snap b/src/components/__tests__/RadioButton/__snapshots__/RadioButtonGroup.test.js.snap
index 2e7ce001e..acd3f033a 100644
--- a/src/components/__tests__/RadioButton/__snapshots__/RadioButtonGroup.test.js.snap
+++ b/src/components/__tests__/RadioButton/__snapshots__/RadioButtonGroup.test.js.snap
@@ -47,6 +47,7 @@ exports[`RadioButtonGroup renders properly 1`] = `
         allowFontScaling={false}
         importantForAccessibility="no-hide-descendants"
         pointerEvents="none"
+        selectable={false}
         style={
           Array [
             Object {
diff --git a/src/components/__tests__/RadioButton/__snapshots__/RadioButtonItem.test.js.snap b/src/components/__tests__/RadioButton/__snapshots__/RadioButtonItem.test.js.snap
index 83476ae4f..e89f0345d 100644
--- a/src/components/__tests__/RadioButton/__snapshots__/RadioButtonItem.test.js.snap
+++ b/src/components/__tests__/RadioButton/__snapshots__/RadioButtonItem.test.js.snap
@@ -200,6 +200,7 @@ exports[`can render the iOS radio button on different platforms 1`] = `
           allowFontScaling={false}
           importantForAccessibility="no-hide-descendants"
           pointerEvents="none"
+          selectable={false}
           style={
             Array [
               Object {
@@ -334,6 +335,7 @@ exports[`renders unchecked 1`] = `
           allowFontScaling={false}
           importantForAccessibility="no-hide-descendants"
           pointerEvents="none"
+          selectable={false}
           style={
             Array [
               Object {
diff --git a/src/components/__tests__/__snapshots__/Avatar.test.js.snap b/src/components/__tests__/__snapshots__/Avatar.test.js.snap
index dcde893e4..46a82917c 100644
--- a/src/components/__tests__/__snapshots__/Avatar.test.js.snap
+++ b/src/components/__tests__/__snapshots__/Avatar.test.js.snap
@@ -23,6 +23,7 @@ exports[`renders avatar with icon 1`] = `
     allowFontScaling={false}
     importantForAccessibility="no-hide-descendants"
     pointerEvents="none"
+    selectable={false}
     style={
       Array [
         Object {
@@ -79,6 +80,7 @@ exports[`renders avatar with icon and custom background color 1`] = `
     allowFontScaling={false}
     importantForAccessibility="no-hide-descendants"
     pointerEvents="none"
+    selectable={false}
     style={
       Array [
         Object {
diff --git a/src/components/__tests__/__snapshots__/BottomNavigation.test.js.snap b/src/components/__tests__/__snapshots__/BottomNavigation.test.js.snap
index 0a2d18594..672354881 100644
--- a/src/components/__tests__/__snapshots__/BottomNavigation.test.js.snap
+++ b/src/components/__tests__/__snapshots__/BottomNavigation.test.js.snap
@@ -162,6 +162,7 @@ exports[`hides labels in non-shifting bottom navigation 1`] = `
                   allowFontScaling={false}
                   importantForAccessibility="no-hide-descendants"
                   pointerEvents="none"
+                  selectable={false}
                   style={
                     Array [
                       Object {
@@ -211,6 +212,7 @@ exports[`hides labels in non-shifting bottom navigation 1`] = `
                   allowFontScaling={false}
                   importantForAccessibility="no-hide-descendants"
                   pointerEvents="none"
+                  selectable={false}
                   style={
                     Array [
                       Object {
@@ -350,6 +352,7 @@ exports[`hides labels in non-shifting bottom navigation 1`] = `
                   allowFontScaling={false}
                   importantForAccessibility="no-hide-descendants"
                   pointerEvents="none"
+                  selectable={false}
                   style={
                     Array [
                       Object {
@@ -399,6 +402,7 @@ exports[`hides labels in non-shifting bottom navigation 1`] = `
                   allowFontScaling={false}
                   importantForAccessibility="no-hide-descendants"
                   pointerEvents="none"
+                  selectable={false}
                   style={
                     Array [
                       Object {
@@ -538,6 +542,7 @@ exports[`hides labels in non-shifting bottom navigation 1`] = `
                   allowFontScaling={false}
                   importantForAccessibility="no-hide-descendants"
                   pointerEvents="none"
+                  selectable={false}
                   style={
                     Array [
                       Object {
@@ -587,6 +592,7 @@ exports[`hides labels in non-shifting bottom navigation 1`] = `
                   allowFontScaling={false}
                   importantForAccessibility="no-hide-descendants"
                   pointerEvents="none"
+                  selectable={false}
                   style={
                     Array [
                       Object {
@@ -854,6 +860,7 @@ exports[`hides labels in shifting bottom navigation 1`] = `
                   allowFontScaling={false}
                   importantForAccessibility="no-hide-descendants"
                   pointerEvents="none"
+                  selectable={false}
                   style={
                     Array [
                       Object {
@@ -903,6 +910,7 @@ exports[`hides labels in shifting bottom navigation 1`] = `
                   allowFontScaling={false}
                   importantForAccessibility="no-hide-descendants"
                   pointerEvents="none"
+                  selectable={false}
                   style={
                     Array [
                       Object {
@@ -1042,6 +1050,7 @@ exports[`hides labels in shifting bottom navigation 1`] = `
                   allowFontScaling={false}
                   importantForAccessibility="no-hide-descendants"
                   pointerEvents="none"
+                  selectable={false}
                   style={
                     Array [
                       Object {
@@ -1091,6 +1100,7 @@ exports[`hides labels in shifting bottom navigation 1`] = `
                   allowFontScaling={false}
                   importantForAccessibility="no-hide-descendants"
                   pointerEvents="none"
+                  selectable={false}
                   style={
                     Array [
                       Object {
@@ -1230,6 +1240,7 @@ exports[`hides labels in shifting bottom navigation 1`] = `
                   allowFontScaling={false}
                   importantForAccessibility="no-hide-descendants"
                   pointerEvents="none"
+                  selectable={false}
                   style={
                     Array [
                       Object {
@@ -1279,6 +1290,7 @@ exports[`hides labels in shifting bottom navigation 1`] = `
                   allowFontScaling={false}
                   importantForAccessibility="no-hide-descendants"
                   pointerEvents="none"
+                  selectable={false}
                   style={
                     Array [
                       Object {
@@ -3010,6 +3022,7 @@ exports[`renders custom icon and label with custom colors in non-shifting bottom
                   allowFontScaling={false}
                   importantForAccessibility="no-hide-descendants"
                   pointerEvents="none"
+                  selectable={false}
                   style={
                     Array [
                       Object {
@@ -3059,6 +3072,7 @@ exports[`renders custom icon and label with custom colors in non-shifting bottom
                   allowFontScaling={false}
                   importantForAccessibility="no-hide-descendants"
                   pointerEvents="none"
+                  selectable={false}
                   style={
                     Array [
                       Object {
@@ -3279,6 +3293,7 @@ exports[`renders custom icon and label with custom colors in non-shifting bottom
                   allowFontScaling={false}
                   importantForAccessibility="no-hide-descendants"
                   pointerEvents="none"
+                  selectable={false}
                   style={
                     Array [
                       Object {
@@ -3328,6 +3343,7 @@ exports[`renders custom icon and label with custom colors in non-shifting bottom
                   allowFontScaling={false}
                   importantForAccessibility="no-hide-descendants"
                   pointerEvents="none"
+                  selectable={false}
                   style={
                     Array [
                       Object {
@@ -3548,6 +3564,7 @@ exports[`renders custom icon and label with custom colors in non-shifting bottom
                   allowFontScaling={false}
                   importantForAccessibility="no-hide-descendants"
                   pointerEvents="none"
+                  selectable={false}
                   style={
                     Array [
                       Object {
@@ -3597,6 +3614,7 @@ exports[`renders custom icon and label with custom colors in non-shifting bottom
                   allowFontScaling={false}
                   importantForAccessibility="no-hide-descendants"
                   pointerEvents="none"
+                  selectable={false}
                   style={
                     Array [
                       Object {
@@ -3945,6 +3963,7 @@ exports[`renders custom icon and label with custom colors in shifting bottom nav
                   allowFontScaling={false}
                   importantForAccessibility="no-hide-descendants"
                   pointerEvents="none"
+                  selectable={false}
                   style={
                     Array [
                       Object {
@@ -3994,6 +4013,7 @@ exports[`renders custom icon and label with custom colors in shifting bottom nav
                   allowFontScaling={false}
                   importantForAccessibility="no-hide-descendants"
                   pointerEvents="none"
+                  selectable={false}
                   style={
                     Array [
                       Object {
@@ -4176,6 +4196,7 @@ exports[`renders custom icon and label with custom colors in shifting bottom nav
                   allowFontScaling={false}
                   importantForAccessibility="no-hide-descendants"
                   pointerEvents="none"
+                  selectable={false}
                   style={
                     Array [
                       Object {
@@ -4225,6 +4246,7 @@ exports[`renders custom icon and label with custom colors in shifting bottom nav
                   allowFontScaling={false}
                   importantForAccessibility="no-hide-descendants"
                   pointerEvents="none"
+                  selectable={false}
                   style={
                     Array [
                       Object {
@@ -4407,6 +4429,7 @@ exports[`renders custom icon and label with custom colors in shifting bottom nav
                   allowFontScaling={false}
                   importantForAccessibility="no-hide-descendants"
                   pointerEvents="none"
+                  selectable={false}
                   style={
                     Array [
                       Object {
@@ -4456,6 +4479,7 @@ exports[`renders custom icon and label with custom colors in shifting bottom nav
                   allowFontScaling={false}
                   importantForAccessibility="no-hide-descendants"
                   pointerEvents="none"
+                  selectable={false}
                   style={
                     Array [
                       Object {
@@ -4746,6 +4770,7 @@ exports[`renders non-shifting bottom navigation 1`] = `
                   allowFontScaling={false}
                   importantForAccessibility="no-hide-descendants"
                   pointerEvents="none"
+                  selectable={false}
                   style={
                     Array [
                       Object {
@@ -4795,6 +4820,7 @@ exports[`renders non-shifting bottom navigation 1`] = `
                   allowFontScaling={false}
                   importantForAccessibility="no-hide-descendants"
                   pointerEvents="none"
+                  selectable={false}
                   style={
                     Array [
                       Object {
@@ -5015,6 +5041,7 @@ exports[`renders non-shifting bottom navigation 1`] = `
                   allowFontScaling={false}
                   importantForAccessibility="no-hide-descendants"
                   pointerEvents="none"
+                  selectable={false}
                   style={
                     Array [
                       Object {
@@ -5064,6 +5091,7 @@ exports[`renders non-shifting bottom navigation 1`] = `
                   allowFontScaling={false}
                   importantForAccessibility="no-hide-descendants"
                   pointerEvents="none"
+                  selectable={false}
                   style={
                     Array [
                       Object {
@@ -5284,6 +5312,7 @@ exports[`renders non-shifting bottom navigation 1`] = `
                   allowFontScaling={false}
                   importantForAccessibility="no-hide-descendants"
                   pointerEvents="none"
+                  selectable={false}
                   style={
                     Array [
                       Object {
@@ -5333,6 +5362,7 @@ exports[`renders non-shifting bottom navigation 1`] = `
                   allowFontScaling={false}
                   importantForAccessibility="no-hide-descendants"
                   pointerEvents="none"
+                  selectable={false}
                   style={
                     Array [
                       Object {
@@ -5681,6 +5711,7 @@ exports[`renders shifting bottom navigation 1`] = `
                   allowFontScaling={false}
                   importantForAccessibility="no-hide-descendants"
                   pointerEvents="none"
+                  selectable={false}
                   style={
                     Array [
                       Object {
@@ -5730,6 +5761,7 @@ exports[`renders shifting bottom navigation 1`] = `
                   allowFontScaling={false}
                   importantForAccessibility="no-hide-descendants"
                   pointerEvents="none"
+                  selectable={false}
                   style={
                     Array [
                       Object {
@@ -5912,6 +5944,7 @@ exports[`renders shifting bottom navigation 1`] = `
                   allowFontScaling={false}
                   importantForAccessibility="no-hide-descendants"
                   pointerEvents="none"
+                  selectable={false}
                   style={
                     Array [
                       Object {
@@ -5961,6 +5994,7 @@ exports[`renders shifting bottom navigation 1`] = `
                   allowFontScaling={false}
                   importantForAccessibility="no-hide-descendants"
                   pointerEvents="none"
+                  selectable={false}
                   style={
                     Array [
                       Object {
@@ -6143,6 +6177,7 @@ exports[`renders shifting bottom navigation 1`] = `
                   allowFontScaling={false}
                   importantForAccessibility="no-hide-descendants"
                   pointerEvents="none"
+                  selectable={false}
                   style={
                     Array [
                       Object {
@@ -6192,6 +6227,7 @@ exports[`renders shifting bottom navigation 1`] = `
                   allowFontScaling={false}
                   importantForAccessibility="no-hide-descendants"
                   pointerEvents="none"
+                  selectable={false}
                   style={
                     Array [
                       Object {
@@ -6374,6 +6410,7 @@ exports[`renders shifting bottom navigation 1`] = `
                   allowFontScaling={false}
                   importantForAccessibility="no-hide-descendants"
                   pointerEvents="none"
+                  selectable={false}
                   style={
                     Array [
                       Object {
@@ -6423,6 +6460,7 @@ exports[`renders shifting bottom navigation 1`] = `
                   allowFontScaling={false}
                   importantForAccessibility="no-hide-descendants"
                   pointerEvents="none"
+                  selectable={false}
                   style={
                     Array [
                       Object {
@@ -6605,6 +6643,7 @@ exports[`renders shifting bottom navigation 1`] = `
                   allowFontScaling={false}
                   importantForAccessibility="no-hide-descendants"
                   pointerEvents="none"
+                  selectable={false}
                   style={
                     Array [
                       Object {
@@ -6654,6 +6693,7 @@ exports[`renders shifting bottom navigation 1`] = `
                   allowFontScaling={false}
                   importantForAccessibility="no-hide-descendants"
                   pointerEvents="none"
+                  selectable={false}
                   style={
                     Array [
                       Object {
diff --git a/src/components/__tests__/__snapshots__/Button.test.js.snap b/src/components/__tests__/__snapshots__/Button.test.js.snap
index 4db1f455b..35e28fb89 100644
--- a/src/components/__tests__/__snapshots__/Button.test.js.snap
+++ b/src/components/__tests__/__snapshots__/Button.test.js.snap
@@ -259,6 +259,7 @@ exports[`renders button with icon 1`] = `
           allowFontScaling={false}
           importantForAccessibility="no-hide-descendants"
           pointerEvents="none"
+          selectable={false}
           style={
             Array [
               Object {
@@ -401,6 +402,7 @@ exports[`renders button with icon in reverse order 1`] = `
           allowFontScaling={false}
           importantForAccessibility="no-hide-descendants"
           pointerEvents="none"
+          selectable={false}
           style={
             Array [
               Object {
diff --git a/src/components/__tests__/__snapshots__/Chip.test.js.snap b/src/components/__tests__/__snapshots__/Chip.test.js.snap
index 711b567b6..b24bb7e84 100644
--- a/src/components/__tests__/__snapshots__/Chip.test.js.snap
+++ b/src/components/__tests__/__snapshots__/Chip.test.js.snap
@@ -73,6 +73,7 @@ exports[`renders chip with close button 1`] = `
           allowFontScaling={false}
           importantForAccessibility="no-hide-descendants"
           pointerEvents="none"
+          selectable={false}
           style={
             Array [
               Object {
@@ -178,6 +179,7 @@ exports[`renders chip with close button 1`] = `
         allowFontScaling={false}
         importantForAccessibility="no-hide-descendants"
         pointerEvents="none"
+        selectable={false}
         style={
           Array [
             Object {
@@ -286,6 +288,7 @@ exports[`renders chip with icon 1`] = `
           allowFontScaling={false}
           importantForAccessibility="no-hide-descendants"
           pointerEvents="none"
+          selectable={false}
           style={
             Array [
               Object {
@@ -615,6 +618,7 @@ exports[`renders selected chip 1`] = `
           allowFontScaling={false}
           importantForAccessibility="no-hide-descendants"
           pointerEvents="none"
+          selectable={false}
           style={
             Array [
               Object {
diff --git a/src/components/__tests__/__snapshots__/DataTable.test.js.snap b/src/components/__tests__/__snapshots__/DataTable.test.js.snap
index a1f7965e5..191a708a7 100644
--- a/src/components/__tests__/__snapshots__/DataTable.test.js.snap
+++ b/src/components/__tests__/__snapshots__/DataTable.test.js.snap
@@ -256,6 +256,7 @@ exports[`renders data table pagination 1`] = `
         allowFontScaling={false}
         importantForAccessibility="no-hide-descendants"
         pointerEvents="none"
+        selectable={false}
         style={
           Array [
             Object {
@@ -341,6 +342,7 @@ exports[`renders data table pagination 1`] = `
         allowFontScaling={false}
         importantForAccessibility="no-hide-descendants"
         pointerEvents="none"
+        selectable={false}
         style={
           Array [
             Object {
@@ -467,6 +469,7 @@ exports[`renders data table pagination with label 1`] = `
         allowFontScaling={false}
         importantForAccessibility="no-hide-descendants"
         pointerEvents="none"
+        selectable={false}
         style={
           Array [
             Object {
@@ -552,6 +555,7 @@ exports[`renders data table pagination with label 1`] = `
         allowFontScaling={false}
         importantForAccessibility="no-hide-descendants"
         pointerEvents="none"
+        selectable={false}
         style={
           Array [
             Object {
@@ -629,6 +633,7 @@ exports[`renders data table title with press handler 1`] = `
       allowFontScaling={false}
       importantForAccessibility="no-hide-descendants"
       pointerEvents="none"
+      selectable={false}
       style={
         Array [
           Object {
@@ -732,6 +737,7 @@ exports[`renders data table title with sort icon 1`] = `
       allowFontScaling={false}
       importantForAccessibility="no-hide-descendants"
       pointerEvents="none"
+      selectable={false}
       style={
         Array [
           Object {
diff --git a/src/components/__tests__/__snapshots__/DrawerItem.test.js.snap b/src/components/__tests__/__snapshots__/DrawerItem.test.js.snap
index 5ce0d910b..183d41b3e 100644
--- a/src/components/__tests__/__snapshots__/DrawerItem.test.js.snap
+++ b/src/components/__tests__/__snapshots__/DrawerItem.test.js.snap
@@ -57,6 +57,7 @@ exports[`renders DrawerItem with icon 1`] = `
         allowFontScaling={false}
         importantForAccessibility="no-hide-descendants"
         pointerEvents="none"
+        selectable={false}
         style={
           Array [
             Object {
@@ -176,6 +177,7 @@ exports[`renders active DrawerItem 1`] = `
         allowFontScaling={false}
         importantForAccessibility="no-hide-descendants"
         pointerEvents="none"
+        selectable={false}
         style={
           Array [
             Object {
diff --git a/src/components/__tests__/__snapshots__/FAB.test.js.snap b/src/components/__tests__/__snapshots__/FAB.test.js.snap
index 6402713a2..593d817cb 100644
--- a/src/components/__tests__/__snapshots__/FAB.test.js.snap
+++ b/src/components/__tests__/__snapshots__/FAB.test.js.snap
@@ -103,6 +103,7 @@ exports[`renders custom color for the icon and label of the FAB 1`] = `
             allowFontScaling={false}
             importantForAccessibility="no-hide-descendants"
             pointerEvents="none"
+            selectable={false}
             style={
               Array [
                 Object {
@@ -236,6 +237,7 @@ exports[`renders disabled FAB 1`] = `
             allowFontScaling={false}
             importantForAccessibility="no-hide-descendants"
             pointerEvents="none"
+            selectable={false}
             style={
               Array [
                 Object {
@@ -377,6 +379,7 @@ exports[`renders extended FAB 1`] = `
             allowFontScaling={false}
             importantForAccessibility="no-hide-descendants"
             pointerEvents="none"
+            selectable={false}
             style={
               Array [
                 Object {
@@ -799,6 +802,7 @@ exports[`renders normal FAB 1`] = `
             allowFontScaling={false}
             importantForAccessibility="no-hide-descendants"
             pointerEvents="none"
+            selectable={false}
             style={
               Array [
                 Object {
@@ -939,6 +943,7 @@ exports[`renders not visible FAB 1`] = `
             allowFontScaling={false}
             importantForAccessibility="no-hide-descendants"
             pointerEvents="none"
+            selectable={false}
             style={
               Array [
                 Object {
@@ -1079,6 +1084,7 @@ exports[`renders small FAB 1`] = `
             allowFontScaling={false}
             importantForAccessibility="no-hide-descendants"
             pointerEvents="none"
+            selectable={false}
             style={
               Array [
                 Object {
@@ -1219,6 +1225,7 @@ exports[`renders visible FAB 1`] = `
             allowFontScaling={false}
             importantForAccessibility="no-hide-descendants"
             pointerEvents="none"
+            selectable={false}
             style={
               Array [
                 Object {
diff --git a/src/components/__tests__/__snapshots__/IconButton.test.js.snap b/src/components/__tests__/__snapshots__/IconButton.test.js.snap
index 33268f8cc..bb83fc296 100644
--- a/src/components/__tests__/__snapshots__/IconButton.test.js.snap
+++ b/src/components/__tests__/__snapshots__/IconButton.test.js.snap
@@ -56,6 +56,7 @@ exports[`renders disabled icon button 1`] = `
       allowFontScaling={false}
       importantForAccessibility="no-hide-descendants"
       pointerEvents="none"
+      selectable={false}
       style={
         Array [
           Object {
@@ -144,6 +145,7 @@ exports[`renders icon button by default 1`] = `
       allowFontScaling={false}
       importantForAccessibility="no-hide-descendants"
       pointerEvents="none"
+      selectable={false}
       style={
         Array [
           Object {
@@ -232,6 +234,7 @@ exports[`renders icon button with color 1`] = `
       allowFontScaling={false}
       importantForAccessibility="no-hide-descendants"
       pointerEvents="none"
+      selectable={false}
       style={
         Array [
           Object {
@@ -320,6 +323,7 @@ exports[`renders icon button with size 1`] = `
       allowFontScaling={false}
       importantForAccessibility="no-hide-descendants"
       pointerEvents="none"
+      selectable={false}
       style={
         Array [
           Object {
@@ -439,6 +443,7 @@ exports[`renders icon change animated 1`] = `
           allowFontScaling={false}
           importantForAccessibility="no-hide-descendants"
           pointerEvents="none"
+          selectable={false}
           style={
             Array [
               Object {
diff --git a/src/components/__tests__/__snapshots__/ListAccordion.test.js.snap b/src/components/__tests__/__snapshots__/ListAccordion.test.js.snap
index bbf66f575..f43978a1e 100644
--- a/src/components/__tests__/__snapshots__/ListAccordion.test.js.snap
+++ b/src/components/__tests__/__snapshots__/ListAccordion.test.js.snap
@@ -88,6 +88,7 @@ exports[`renders expanded accordion 1`] = `
           allowFontScaling={false}
           importantForAccessibility="no-hide-descendants"
           pointerEvents="none"
+          selectable={false}
           style={
             Array [
               Object {
@@ -249,6 +250,7 @@ exports[`renders list accordion with children 1`] = `
           allowFontScaling={false}
           importantForAccessibility="no-hide-descendants"
           pointerEvents="none"
+          selectable={false}
           style={
             Array [
               Object {
@@ -334,6 +336,7 @@ exports[`renders list accordion with children 1`] = `
           allowFontScaling={false}
           importantForAccessibility="no-hide-descendants"
           pointerEvents="none"
+          selectable={false}
           style={
             Array [
               Object {
@@ -491,6 +494,7 @@ exports[`renders list accordion with custom title and description styles 1`] = `
           allowFontScaling={false}
           importantForAccessibility="no-hide-descendants"
           pointerEvents="none"
+          selectable={false}
           style={
             Array [
               Object {
@@ -581,6 +585,7 @@ exports[`renders list accordion with left items 1`] = `
           allowFontScaling={false}
           importantForAccessibility="no-hide-descendants"
           pointerEvents="none"
+          selectable={false}
           style={
             Array [
               Object {
@@ -666,6 +671,7 @@ exports[`renders list accordion with left items 1`] = `
           allowFontScaling={false}
           importantForAccessibility="no-hide-descendants"
           pointerEvents="none"
+          selectable={false}
           style={
             Array [
               Object {
@@ -819,6 +825,7 @@ exports[`renders multiline list accordion 1`] = `
           allowFontScaling={false}
           importantForAccessibility="no-hide-descendants"
           pointerEvents="none"
+          selectable={false}
           style={
             Array [
               Object {
diff --git a/src/components/__tests__/__snapshots__/ListItem.test.js.snap b/src/components/__tests__/__snapshots__/ListItem.test.js.snap
index a9de3da26..1e9c4e19e 100644
--- a/src/components/__tests__/__snapshots__/ListItem.test.js.snap
+++ b/src/components/__tests__/__snapshots__/ListItem.test.js.snap
@@ -154,6 +154,7 @@ exports[`renders list item with custom description 1`] = `
                     allowFontScaling={false}
                     importantForAccessibility="no-hide-descendants"
                     pointerEvents="none"
+                    selectable={false}
                     style={
                       Array [
                         Object {
@@ -450,6 +451,7 @@ exports[`renders list item with left and right items 1`] = `
         allowFontScaling={false}
         importantForAccessibility="no-hide-descendants"
         pointerEvents="none"
+        selectable={false}
         style={
           Array [
             Object {
@@ -539,6 +541,7 @@ exports[`renders list item with left item 1`] = `
         allowFontScaling={false}
         importantForAccessibility="no-hide-descendants"
         pointerEvents="none"
+        selectable={false}
         style={
           Array [
             Object {
diff --git a/src/components/__tests__/__snapshots__/ListSection.test.js.snap b/src/components/__tests__/__snapshots__/ListSection.test.js.snap
index 88bcf0801..50f0b47c3 100644
--- a/src/components/__tests__/__snapshots__/ListSection.test.js.snap
+++ b/src/components/__tests__/__snapshots__/ListSection.test.js.snap
@@ -134,6 +134,7 @@ exports[`renders list section with custom title style 1`] = `
           allowFontScaling={false}
           importantForAccessibility="no-hide-descendants"
           pointerEvents="none"
+          selectable={false}
           style={
             Array [
               Object {
@@ -260,6 +261,7 @@ exports[`renders list section with custom title style 1`] = `
           allowFontScaling={false}
           importantForAccessibility="no-hide-descendants"
           pointerEvents="none"
+          selectable={false}
           style={
             Array [
               Object {
@@ -468,6 +470,7 @@ exports[`renders list section with subheader 1`] = `
           allowFontScaling={false}
           importantForAccessibility="no-hide-descendants"
           pointerEvents="none"
+          selectable={false}
           style={
             Array [
               Object {
@@ -594,6 +597,7 @@ exports[`renders list section with subheader 1`] = `
           allowFontScaling={false}
           importantForAccessibility="no-hide-descendants"
           pointerEvents="none"
+          selectable={false}
           style={
             Array [
               Object {
@@ -775,6 +779,7 @@ exports[`renders list section without subheader 1`] = `
           allowFontScaling={false}
           importantForAccessibility="no-hide-descendants"
           pointerEvents="none"
+          selectable={false}
           style={
             Array [
               Object {
@@ -901,6 +906,7 @@ exports[`renders list section without subheader 1`] = `
           allowFontScaling={false}
           importantForAccessibility="no-hide-descendants"
           pointerEvents="none"
+          selectable={false}
           style={
             Array [
               Object {
diff --git a/src/components/__tests__/__snapshots__/Searchbar.test.js.snap b/src/components/__tests__/__snapshots__/Searchbar.test.js.snap
index 9736c8e1a..a701a983f 100644
--- a/src/components/__tests__/__snapshots__/Searchbar.test.js.snap
+++ b/src/components/__tests__/__snapshots__/Searchbar.test.js.snap
@@ -73,6 +73,7 @@ exports[`renders with placeholder 1`] = `
         allowFontScaling={false}
         importantForAccessibility="no-hide-descendants"
         pointerEvents="none"
+        selectable={false}
         style={
           Array [
             Object {
@@ -191,6 +192,7 @@ exports[`renders with placeholder 1`] = `
         allowFontScaling={false}
         importantForAccessibility="no-hide-descendants"
         pointerEvents="none"
+        selectable={false}
         style={
           Array [
             Object {
@@ -299,6 +301,7 @@ exports[`renders with text 1`] = `
         allowFontScaling={false}
         importantForAccessibility="no-hide-descendants"
         pointerEvents="none"
+        selectable={false}
         style={
           Array [
             Object {
@@ -416,6 +419,7 @@ exports[`renders with text 1`] = `
         allowFontScaling={false}
         importantForAccessibility="no-hide-descendants"
         pointerEvents="none"
+        selectable={false}
         style={
           Array [
             Object {
diff --git a/src/components/__tests__/__snapshots__/TextInput.test.js.snap b/src/components/__tests__/__snapshots__/TextInput.test.js.snap
index dc4d87cd6..dee31c453 100644
--- a/src/components/__tests__/__snapshots__/TextInput.test.js.snap
+++ b/src/components/__tests__/__snapshots__/TextInput.test.js.snap
@@ -621,6 +621,7 @@ exports[`correctly renders left-side icon adornment, and right-side affix adornm
           allowFontScaling={false}
           importantForAccessibility="no-hide-descendants"
           pointerEvents="none"
+          selectable={false}
           style={
             Array [
               Object {
@@ -901,6 +902,7 @@ exports[`correctly renders left-side icon adornment, and right-side affix adornm
           allowFontScaling={false}
           importantForAccessibility="no-hide-descendants"
           pointerEvents="none"
+          selectable={false}
           style={
             Array [
               Object {
diff --git a/src/components/__tests__/__snapshots__/ToggleButton.test.js.snap b/src/components/__tests__/__snapshots__/ToggleButton.test.js.snap
index b6d43c17a..bc96029e5 100644
--- a/src/components/__tests__/__snapshots__/ToggleButton.test.js.snap
+++ b/src/components/__tests__/__snapshots__/ToggleButton.test.js.snap
@@ -67,6 +67,7 @@ exports[`renders disabled toggle button 1`] = `
       allowFontScaling={false}
       importantForAccessibility="no-hide-descendants"
       pointerEvents="none"
+      selectable={false}
       style={
         Array [
           Object {
@@ -166,6 +167,7 @@ exports[`renders toggle button 1`] = `
       allowFontScaling={false}
       importantForAccessibility="no-hide-descendants"
       pointerEvents="none"
+      selectable={false}
       style={
         Array [
           Object {
@@ -267,6 +269,7 @@ exports[`renders unchecked toggle button 1`] = `
       allowFontScaling={false}
       importantForAccessibility="no-hide-descendants"
       pointerEvents="none"
+      selectable={false}
       style={
         Array [
           Object {