@hero-design/rn 8.0.2 → 8.2.0

package/src/components/Select/MultiSelect/__tests__/__snapshots__/index.spec.tsx.snap

@@ -7,6 +7,7 @@ Array [
   >
     <View
       accessible={true}
+      collapsable={false}
       focusable={true}
       onClick={[Function]}
       onResponderGrant={[Function]}
@@ -270,6 +271,7 @@ Array [
           }
         />
         <RCTSafeAreaView
+          collapsable={false}
           emulateUnlessSupported={true}
           style={
             Object {
@@ -358,6 +360,7 @@ Array [
             >
               <View
                 accessible={true}
+                collapsable={false}
                 focusable={true}
                 onClick={[Function]}
                 onResponderGrant={[Function]}
@@ -593,7 +596,13 @@ Array [
                     }
                   />
                   <View
+                    accessibilityState={
+                      Object {
+                        "disabled": false,
+                      }
+                    }
                     accessible={true}
+                    collapsable={false}
                     focusable={true}
                     onClick={[Function]}
                     onResponderGrant={[Function]}
@@ -732,7 +741,13 @@ Array [
               >
                 <View>
                   <View
+                    accessibilityState={
+                      Object {
+                        "disabled": false,
+                      }
+                    }
                     accessible={true}
+                    collapsable={false}
                     focusable={true}
                     onClick={[Function]}
                     onResponderGrant={[Function]}
@@ -987,7 +1002,13 @@ Array [
                     }
                   />
                   <View
+                    accessibilityState={
+                      Object {
+                        "disabled": false,
+                      }
+                    }
                     accessible={true}
+                    collapsable={false}
                     focusable={true}
                     onClick={[Function]}
                     onResponderGrant={[Function]}
@@ -1126,7 +1147,13 @@ Array [
               >
                 <View>
                   <View
+                    accessibilityState={
+                      Object {
+                        "disabled": false,
+                      }
+                    }
                     accessible={true}
+                    collapsable={false}
                     focusable={true}
                     onClick={[Function]}
                     onResponderGrant={[Function]}
@@ -1286,7 +1313,13 @@ Array [
               }
             >
               <View
+                accessibilityState={
+                  Object {
+                    "disabled": false,
+                  }
+                }
                 accessible={true}
+                collapsable={false}
                 focusable={true}
                 onClick={[Function]}
                 onResponderGrant={[Function]}
@@ -1359,7 +1392,6 @@ Array [
       accessible={true}
       collapsable={false}
       focusable={true}
-      nativeID="animatedComponent"
       onClick={[Function]}
       onResponderGrant={[Function]}
       onResponderMove={[Function]}
@@ -1557,6 +1589,216 @@ Array [
     onRequestClose={[Function]}
     transparent={true}
     visible={false}
+  />,
+]
+`;
+
+exports[`rendering renders correctly when bottom sheet is visible 1`] = `
+Array [
+  <View
+    pointerEvents="auto"
+  >
+    <View
+      accessible={true}
+      collapsable={false}
+      focusable={true}
+      onClick={[Function]}
+      onResponderGrant={[Function]}
+      onResponderMove={[Function]}
+      onResponderRelease={[Function]}
+      onResponderTerminate={[Function]}
+      onResponderTerminationRequest={[Function]}
+      onStartShouldSetResponder={[Function]}
+      style={
+        Object {
+          "opacity": 1,
+        }
+      }
+    >
+      <View
+        pointerEvents="none"
+      >
+        <View
+          pointerEvents="auto"
+          style={
+            Array [
+              Object {
+                "marginVertical": 8,
+                "width": "100%",
+              },
+              undefined,
+            ]
+          }
+        >
+          <View
+            style={
+              Array [
+                Object {
+                  "alignItems": "center",
+                  "flexDirection": "row",
+                  "padding": 16,
+                },
+                undefined,
+              ]
+            }
+          >
+            <View
+              style={
+                Array [
+                  Object {
+                    "borderColor": "#001f23",
+                    "borderRadius": 8,
+                    "borderWidth": 1,
+                    "bottom": 0,
+                    "left": 0,
+                    "position": "absolute",
+                    "right": 0,
+                    "top": 0,
+                  },
+                  undefined,
+                ]
+              }
+              themeFocused={false}
+              themeVariant="filled"
+            />
+            <View
+              pointerEvents="none"
+              style={
+                Array [
+                  Object {
+                    "backgroundColor": "#ffffff",
+                    "flexDirection": "row",
+                    "left": 16,
+                    "paddingHorizontal": 4,
+                    "position": "absolute",
+                    "top": -10,
+                    "zIndex": 1,
+                  },
+                  undefined,
+                ]
+              }
+            >
+              <Text
+                style={
+                  Array [
+                    Object {
+                      "color": "#001f23",
+                      "fontFamily": "BeVietnamPro-Regular",
+                      "fontSize": 12,
+                      "letterSpacing": 0.36,
+                      "lineHeight": 20,
+                    },
+                    Array [
+                      Object {
+                        "color": "#001f23",
+                      },
+                      undefined,
+                    ],
+                  ]
+                }
+                testID="input-label"
+                themeFontSize="small"
+                themeFontWeight="regular"
+                themeIntent="body"
+                themeTypeface="neutral"
+                themeVariant="filled"
+              >
+                Allow notifications
+              </Text>
+            </View>
+            <View
+              style={
+                Array [
+                  Object {
+                    "alignItems": "center",
+                    "alignSelf": "stretch",
+                    "flexDirection": "row",
+                    "flexGrow": 2,
+                    "flexShrink": 1,
+                  },
+                  undefined,
+                ]
+              }
+            >
+              <TextInput
+                accessibilityState={
+                  Object {
+                    "disabled": false,
+                  }
+                }
+                editable={true}
+                multiline={true}
+                onBlur={[Function]}
+                onChangeText={[Function]}
+                onFocus={[Function]}
+                placeholder=" "
+                pointerEvents="none"
+                style={
+                  Array [
+                    Object {
+                      "alignSelf": "stretch",
+                      "flexGrow": 2,
+                      "fontSize": 14,
+                      "marginHorizontal": 8,
+                      "paddingVertical": 0,
+                      "textAlignVertical": "center",
+                    },
+                    Object {
+                      "color": "#001f23",
+                    },
+                  ]
+                }
+                testID="text-input"
+                value="Monday, Tuesday"
+              />
+            </View>
+            <HeroIcon
+              name="arrow-down"
+              style={
+                Array [
+                  Object {
+                    "color": "#001f23",
+                    "fontSize": 16,
+                  },
+                  undefined,
+                ]
+              }
+              testID="input-suffix"
+              themeIntent="text"
+              themeSize="xsmall"
+            />
+          </View>
+          <View
+            style={
+              Array [
+                Object {
+                  "paddingLeft": 16,
+                },
+                undefined,
+              ]
+            }
+          >
+            <View
+              style={
+                Array [
+                  Object {
+                    "flexDirection": "row",
+                    "justifyContent": "space-between",
+                  },
+                  undefined,
+                ]
+              }
+            />
+          </View>
+        </View>
+      </View>
+    </View>
+  </View>,
+  <Modal
+    hardwareAccelerated={false}
+    onRequestClose={[Function]}
+    transparent={true}
+    visible={true}
   >
     <View
       pointerEvents="box-none"
@@ -1595,7 +1837,6 @@ Array [
           accessible={true}
           collapsable={false}
           focusable={true}
-          nativeID="animatedComponent"
           onBlur={[Function]}
           onClick={[Function]}
           onFocus={[Function]}
@@ -1620,7 +1861,6 @@ Array [
         <RCTSafeAreaView
           collapsable={false}
           emulateUnlessSupported={true}
-          nativeID="animatedComponent"
           style={
             Object {
               "backgroundColor": "#ffffff",
@@ -1710,7 +1950,6 @@ Array [
                 accessible={true}
                 collapsable={false}
                 focusable={true}
-                nativeID="animatedComponent"
                 onClick={[Function]}
                 onResponderGrant={[Function]}
                 onResponderMove={[Function]}
@@ -1886,10 +2125,14 @@ Array [
                     }
                   />
                   <View
+                    accessibilityState={
+                      Object {
+                        "disabled": false,
+                      }
+                    }
                     accessible={true}
                     collapsable={false}
                     focusable={true}
-                    nativeID="animatedComponent"
                     onClick={[Function]}
                     onResponderGrant={[Function]}
                     onResponderMove={[Function]}
@@ -2034,10 +2277,14 @@ Array [
               >
                 <View>
                   <View
+                    accessibilityState={
+                      Object {
+                        "disabled": false,
+                      }
+                    }
                     accessible={true}
                     collapsable={false}
                     focusable={true}
-                    nativeID="animatedComponent"
                     onClick={[Function]}
                     onResponderGrant={[Function]}
                     onResponderMove={[Function]}
@@ -2182,10 +2429,14 @@ Array [
               >
                 <View>
                   <View
+                    accessibilityState={
+                      Object {
+                        "disabled": false,
+                      }
+                    }
                     accessible={true}
                     collapsable={false}
                     focusable={true}
-                    nativeID="animatedComponent"
                     onClick={[Function]}
                     onResponderGrant={[Function]}
                     onResponderMove={[Function]}
@@ -2303,10 +2554,14 @@ Array [
               >
                 <View>
                   <View
+                    accessibilityState={
+                      Object {
+                        "disabled": false,
+                      }
+                    }
                     accessible={true}
                     collapsable={false}
                     focusable={true}
-                    nativeID="animatedComponent"
                     onClick={[Function]}
                     onResponderGrant={[Function]}
                     onResponderMove={[Function]}
@@ -2424,10 +2679,14 @@ Array [
               >
                 <View>
                   <View
+                    accessibilityState={
+                      Object {
+                        "disabled": false,
+                      }
+                    }
                     accessible={true}
                     collapsable={false}
                     focusable={true}
-                    nativeID="animatedComponent"
                     onClick={[Function]}
                     onResponderGrant={[Function]}
                     onResponderMove={[Function]}
@@ -2545,10 +2804,14 @@ Array [
               >
                 <View>
                   <View
+                    accessibilityState={
+                      Object {
+                        "disabled": false,
+                      }
+                    }
                     accessible={true}
                     collapsable={false}
                     focusable={true}
-                    nativeID="animatedComponent"
                     onClick={[Function]}
                     onResponderGrant={[Function]}
                     onResponderMove={[Function]}
@@ -2667,3055 +2930,14 @@ Array [
               >
                 <View>
                   <View
+                    accessibilityState={
+                      Object {
+                        "disabled": true,
+                      }
+                    }
                     accessible={true}
                     collapsable={false}
                     focusable={true}
-                    nativeID="animatedComponent"
-                    onClick={[Function]}
-                    onResponderGrant={[Function]}
-                    onResponderMove={[Function]}
-                    onResponderRelease={[Function]}
-                    onResponderTerminate={[Function]}
-                    onResponderTerminationRequest={[Function]}
-                    onStartShouldSetResponder={[Function]}
-                    style={
-                      Object {
-                        "alignItems": "center",
-                        "backgroundColor": "#ffffff",
-                        "borderRadius": 4,
-                        "flexDirection": "row",
-                        "opacity": 0.38,
-                        "padding": 16,
-                      }
-                    }
-                  >
-                    <View
-                      style={
-                        Array [
-                          Object {
-                            "flex": 1,
-                          },
-                          undefined,
-                        ]
-                      }
-                    >
-                      <Text
-                        style={
-                          Array [
-                            Object {
-                              "color": "#001f23",
-                              "fontFamily": "BeVietnamPro-Regular",
-                              "fontSize": 16,
-                              "letterSpacing": 0.48,
-                              "lineHeight": 24,
-                            },
-                            undefined,
-                          ]
-                        }
-                        themeFontSize="large"
-                        themeFontWeight="regular"
-                        themeIntent="body"
-                        themeTypeface="neutral"
-                      >
-                        Sunday
-                      </Text>
-                    </View>
-                  </View>
-                  <View
-                    highlighted={false}
-                    leadingItem={
-                      Object {
-                        "disabled": true,
-                        "text": "Sunday",
-                        "value": "sun",
-                      }
-                    }
-                    section={
-                      Object {
-                        "category": "",
-                        "data": Array [
-                          Object {
-                            "text": "Monday",
-                            "value": "mon",
-                          },
-                          Object {
-                            "text": "Tuesday",
-                            "value": "tue",
-                          },
-                          Object {
-                            "text": "Wednesday",
-                            "value": "wed",
-                          },
-                          Object {
-                            "text": "Thursday",
-                            "value": "thu",
-                          },
-                          Object {
-                            "text": "Friday",
-                            "value": "fri",
-                          },
-                          Object {
-                            "text": "Saturday",
-                            "value": "sat",
-                          },
-                          Object {
-                            "disabled": true,
-                            "text": "Sunday",
-                            "value": "sun",
-                          },
-                        ],
-                      }
-                    }
-                    style={
-                      Array [
-                        Object {
-                          "marginTop": 12,
-                        },
-                        undefined,
-                      ]
-                    }
-                  />
-                </View>
-              </View>
-              <View
-                onLayout={[Function]}
-                style={null}
-              />
-            </View>
-          </RCTScrollView>
-          <View>
-            <View
-              style={
-                Array [
-                  Object {
-                    "borderBottomColor": "#e8e9ea",
-                    "borderBottomWidth": 1,
-                    "maxWidth": "100%",
-                  },
-                  undefined,
-                ]
-              }
-            />
-            <View
-              style={
-                Array [
-                  Object {
-                    "alignItems": "center",
-                    "flexDirection": "row",
-                    "justifyContent": "flex-end",
-                    "paddingHorizontal": 12,
-                    "paddingVertical": 2,
-                  },
-                  undefined,
-                ]
-              }
-            >
-              <View
-                accessible={true}
-                collapsable={false}
-                focusable={true}
-                nativeID="animatedComponent"
-                onClick={[Function]}
-                onResponderGrant={[Function]}
-                onResponderMove={[Function]}
-                onResponderRelease={[Function]}
-                onResponderTerminate={[Function]}
-                onResponderTerminationRequest={[Function]}
-                onStartShouldSetResponder={[Function]}
-                style={
-                  Object {
-                    "alignItems": "center",
-                    "borderWidth": 0,
-                    "flexDirection": "row",
-                    "justifyContent": "center",
-                    "opacity": 1,
-                    "padding": 16,
-                  }
-                }
-              >
-                <Text
-                  disabled={false}
-                  ellipsizeMode="tail"
-                  numberOfLines={1}
-                  style={
-                    Array [
-                      Object {
-                        "color": "#001f23",
-                        "fontFamily": "BeVietnamPro-Regular",
-                        "fontSize": 14,
-                        "letterSpacing": 0.42,
-                        "lineHeight": 22,
-                      },
-                      Array [
-                        Object {
-                          "color": "#401960",
-                          "flexShrink": 1,
-                          "fontFamily": "BeVietnamPro-SemiBold",
-                          "fontSize": 16,
-                          "lineHeight": 24,
-                          "textAlign": "center",
-                        },
-                        undefined,
-                      ],
-                    ]
-                  }
-                  themeFontSize="medium"
-                  themeFontWeight="regular"
-                  themeIntent="body"
-                  themeTypeface="neutral"
-                  themeVariant="text-primary"
-                >
-                  Confirm
-                </Text>
-              </View>
-            </View>
-          </View>
-        </RCTSafeAreaView>
-      </View>
-    </View>
-  </Modal>,
-]
-`;
-
-exports[`rendering renders correctly when bottom sheet is visible 1`] = `
-Array [
-  <View
-    pointerEvents="auto"
-  >
-    <View
-      accessible={true}
-      focusable={true}
-      onClick={[Function]}
-      onResponderGrant={[Function]}
-      onResponderMove={[Function]}
-      onResponderRelease={[Function]}
-      onResponderTerminate={[Function]}
-      onResponderTerminationRequest={[Function]}
-      onStartShouldSetResponder={[Function]}
-      style={
-        Object {
-          "opacity": 1,
-        }
-      }
-    >
-      <View
-        pointerEvents="none"
-      >
-        <View
-          pointerEvents="auto"
-          style={
-            Array [
-              Object {
-                "marginVertical": 8,
-                "width": "100%",
-              },
-              undefined,
-            ]
-          }
-        >
-          <View
-            style={
-              Array [
-                Object {
-                  "alignItems": "center",
-                  "flexDirection": "row",
-                  "padding": 16,
-                },
-                undefined,
-              ]
-            }
-          >
-            <View
-              style={
-                Array [
-                  Object {
-                    "borderColor": "#001f23",
-                    "borderRadius": 8,
-                    "borderWidth": 1,
-                    "bottom": 0,
-                    "left": 0,
-                    "position": "absolute",
-                    "right": 0,
-                    "top": 0,
-                  },
-                  undefined,
-                ]
-              }
-              themeFocused={false}
-              themeVariant="filled"
-            />
-            <View
-              pointerEvents="none"
-              style={
-                Array [
-                  Object {
-                    "backgroundColor": "#ffffff",
-                    "flexDirection": "row",
-                    "left": 16,
-                    "paddingHorizontal": 4,
-                    "position": "absolute",
-                    "top": -10,
-                    "zIndex": 1,
-                  },
-                  undefined,
-                ]
-              }
-            >
-              <Text
-                style={
-                  Array [
-                    Object {
-                      "color": "#001f23",
-                      "fontFamily": "BeVietnamPro-Regular",
-                      "fontSize": 12,
-                      "letterSpacing": 0.36,
-                      "lineHeight": 20,
-                    },
-                    Array [
-                      Object {
-                        "color": "#001f23",
-                      },
-                      undefined,
-                    ],
-                  ]
-                }
-                testID="input-label"
-                themeFontSize="small"
-                themeFontWeight="regular"
-                themeIntent="body"
-                themeTypeface="neutral"
-                themeVariant="filled"
-              >
-                Allow notifications
-              </Text>
-            </View>
-            <View
-              style={
-                Array [
-                  Object {
-                    "alignItems": "center",
-                    "alignSelf": "stretch",
-                    "flexDirection": "row",
-                    "flexGrow": 2,
-                    "flexShrink": 1,
-                  },
-                  undefined,
-                ]
-              }
-            >
-              <TextInput
-                accessibilityState={
-                  Object {
-                    "disabled": false,
-                  }
-                }
-                editable={true}
-                multiline={true}
-                onBlur={[Function]}
-                onChangeText={[Function]}
-                onFocus={[Function]}
-                placeholder=" "
-                pointerEvents="none"
-                style={
-                  Array [
-                    Object {
-                      "alignSelf": "stretch",
-                      "flexGrow": 2,
-                      "fontSize": 14,
-                      "marginHorizontal": 8,
-                      "paddingVertical": 0,
-                      "textAlignVertical": "center",
-                    },
-                    Object {
-                      "color": "#001f23",
-                    },
-                  ]
-                }
-                testID="text-input"
-                value="Monday, Tuesday"
-              />
-            </View>
-            <HeroIcon
-              name="arrow-down"
-              style={
-                Array [
-                  Object {
-                    "color": "#001f23",
-                    "fontSize": 16,
-                  },
-                  undefined,
-                ]
-              }
-              testID="input-suffix"
-              themeIntent="text"
-              themeSize="xsmall"
-            />
-          </View>
-          <View
-            style={
-              Array [
-                Object {
-                  "paddingLeft": 16,
-                },
-                undefined,
-              ]
-            }
-          >
-            <View
-              style={
-                Array [
-                  Object {
-                    "flexDirection": "row",
-                    "justifyContent": "space-between",
-                  },
-                  undefined,
-                ]
-              }
-            />
-          </View>
-        </View>
-      </View>
-    </View>
-  </View>,
-  <Modal
-    hardwareAccelerated={false}
-    onRequestClose={[Function]}
-    transparent={true}
-    visible={true}
-  >
-    <View
-      pointerEvents="box-none"
-      style={
-        Array [
-          Object {
-            "bottom": 0,
-            "flexDirection": "column-reverse",
-            "left": 0,
-            "position": "absolute",
-            "right": 0,
-            "top": 0,
-          },
-          undefined,
-        ]
-      }
-    >
-      <View
-        onLayout={[Function]}
-        style={
-          Array [
-            Array [
-              Object {
-                "flex": 1,
-                "flexDirection": "column-reverse",
-              },
-              undefined,
-            ],
-            Object {
-              "paddingBottom": 0,
-            },
-          ]
-        }
-      >
-        <View
-          accessible={true}
-          collapsable={false}
-          focusable={true}
-          onBlur={[Function]}
-          onClick={[Function]}
-          onFocus={[Function]}
-          onResponderGrant={[Function]}
-          onResponderMove={[Function]}
-          onResponderRelease={[Function]}
-          onResponderTerminate={[Function]}
-          onResponderTerminationRequest={[Function]}
-          onStartShouldSetResponder={[Function]}
-          style={
-            Object {
-              "backgroundColor": "#000000",
-              "bottom": 0,
-              "left": 0,
-              "opacity": 0.48,
-              "position": "absolute",
-              "right": 0,
-              "top": 0,
-            }
-          }
-        />
-        <RCTSafeAreaView
-          emulateUnlessSupported={true}
-          style={
-            Object {
-              "backgroundColor": "#ffffff",
-              "borderTopLeftRadius": 16,
-              "borderTopRightRadius": 16,
-              "elevation": 10,
-              "maxHeight": "94%",
-              "paddingBottom": 0,
-              "shadowColor": "#001f23",
-              "shadowOffset": Object {
-                "height": 3,
-                "width": 0,
-              },
-              "shadowOpacity": 0.4,
-              "shadowRadius": 16,
-              "transform": Array [
-                Object {
-                  "scaleY": 1,
-                },
-                Object {
-                  "translateY": 0,
-                },
-              ],
-              "width": "100%",
-            }
-          }
-        >
-          <View
-            style={
-              Array [
-                Object {
-                  "flexDirection": "row",
-                  "paddingHorizontal": 16,
-                  "paddingVertical": 8,
-                },
-                undefined,
-              ]
-            }
-          >
-            <View
-              style={
-                Array [
-                  Object {
-                    "flex": 1,
-                    "justifyContent": "center",
-                  },
-                  undefined,
-                ]
-              }
-            >
-              <Text
-                style={
-                  Array [
-                    Object {
-                      "color": "#001f23",
-                      "fontFamily": "BeVietnamPro-SemiBold",
-                      "fontSize": 16,
-                      "letterSpacing": 0.48,
-                      "lineHeight": 24,
-                    },
-                    undefined,
-                  ]
-                }
-                themeFontSize="large"
-                themeFontWeight="semi-bold"
-                themeIntent="body"
-                themeTypeface="neutral"
-              >
-                Allow notifications
-              </Text>
-            </View>
-            <View
-              style={
-                Array [
-                  Object {
-                    "alignItems": "center",
-                    "height": 48,
-                    "justifyContent": "center",
-                    "marginLeft": 12,
-                    "width": 48,
-                  },
-                  undefined,
-                ]
-              }
-            >
-              <View
-                accessible={true}
-                focusable={true}
-                onClick={[Function]}
-                onResponderGrant={[Function]}
-                onResponderMove={[Function]}
-                onResponderRelease={[Function]}
-                onResponderTerminate={[Function]}
-                onResponderTerminationRequest={[Function]}
-                onStartShouldSetResponder={[Function]}
-                style={
-                  Object {
-                    "opacity": 1,
-                  }
-                }
-                testID="bottom-sheet-close-icon"
-              >
-                <HeroIcon
-                  name="cancel"
-                  style={
-                    Array [
-                      Object {
-                        "color": "#001f23",
-                        "fontSize": 16,
-                      },
-                      undefined,
-                    ]
-                  }
-                  themeIntent="text"
-                  themeSize="xsmall"
-                />
-              </View>
-            </View>
-          </View>
-          <View
-            style={
-              Array [
-                Object {
-                  "borderBottomColor": "#e8e9ea",
-                  "borderBottomWidth": 1,
-                  "maxWidth": "100%",
-                },
-                undefined,
-              ]
-            }
-          />
-          <RCTScrollView
-            ListFooterComponent={null}
-            data={
-              Array [
-                Object {
-                  "category": "",
-                  "data": Array [
-                    Object {
-                      "text": "Monday",
-                      "value": "mon",
-                    },
-                    Object {
-                      "text": "Tuesday",
-                      "value": "tue",
-                    },
-                    Object {
-                      "text": "Wednesday",
-                      "value": "wed",
-                    },
-                    Object {
-                      "text": "Thursday",
-                      "value": "thu",
-                    },
-                    Object {
-                      "text": "Friday",
-                      "value": "fri",
-                    },
-                    Object {
-                      "text": "Saturday",
-                      "value": "sat",
-                    },
-                    Object {
-                      "disabled": true,
-                      "text": "Sunday",
-                      "value": "sun",
-                    },
-                  ],
-                },
-              ]
-            }
-            getItem={[Function]}
-            getItemCount={[Function]}
-            keyExtractor={[Function]}
-            onContentSizeChange={[Function]}
-            onEndReached={[Function]}
-            onEndReachedThreshold={0.1}
-            onLayout={[Function]}
-            onMomentumScrollBegin={[Function]}
-            onMomentumScrollEnd={[Function]}
-            onScroll={[Function]}
-            onScrollBeginDrag={[Function]}
-            onScrollEndDrag={[Function]}
-            renderItem={[Function]}
-            scrollEventThrottle={50}
-            stickyHeaderIndices={
-              Array [
-                0,
-              ]
-            }
-            style={
-              Array [
-                Object {
-                  "paddingHorizontal": 12,
-                },
-                Object {},
-              ]
-            }
-          >
-            <View>
-              <View
-                onLayout={[Function]}
-                style={null}
-              />
-              <View
-                onLayout={[Function]}
-                style={null}
-              >
-                <View>
-                  <View
-                    highlighted={false}
-                    section={
-                      Object {
-                        "category": "",
-                        "data": Array [
-                          Object {
-                            "text": "Monday",
-                            "value": "mon",
-                          },
-                          Object {
-                            "text": "Tuesday",
-                            "value": "tue",
-                          },
-                          Object {
-                            "text": "Wednesday",
-                            "value": "wed",
-                          },
-                          Object {
-                            "text": "Thursday",
-                            "value": "thu",
-                          },
-                          Object {
-                            "text": "Friday",
-                            "value": "fri",
-                          },
-                          Object {
-                            "text": "Saturday",
-                            "value": "sat",
-                          },
-                          Object {
-                            "disabled": true,
-                            "text": "Sunday",
-                            "value": "sun",
-                          },
-                        ],
-                      }
-                    }
-                    style={
-                      Array [
-                        Object {
-                          "marginTop": 12,
-                        },
-                        undefined,
-                      ]
-                    }
-                    trailingItem={
-                      Object {
-                        "text": "Monday",
-                        "value": "mon",
-                      }
-                    }
-                  />
-                  <View
-                    accessible={true}
-                    focusable={true}
-                    onClick={[Function]}
-                    onResponderGrant={[Function]}
-                    onResponderMove={[Function]}
-                    onResponderRelease={[Function]}
-                    onResponderTerminate={[Function]}
-                    onResponderTerminationRequest={[Function]}
-                    onStartShouldSetResponder={[Function]}
-                    style={
-                      Object {
-                        "alignItems": "center",
-                        "backgroundColor": "#ece8ef",
-                        "borderRadius": 4,
-                        "flexDirection": "row",
-                        "opacity": 1,
-                        "padding": 16,
-                      }
-                    }
-                  >
-                    <View
-                      style={
-                        Array [
-                          Object {
-                            "flex": 1,
-                          },
-                          undefined,
-                        ]
-                      }
-                    >
-                      <Text
-                        style={
-                          Array [
-                            Object {
-                              "color": "#001f23",
-                              "fontFamily": "BeVietnamPro-Regular",
-                              "fontSize": 16,
-                              "letterSpacing": 0.48,
-                              "lineHeight": 24,
-                            },
-                            undefined,
-                          ]
-                        }
-                        themeFontSize="large"
-                        themeFontWeight="regular"
-                        themeIntent="body"
-                        themeTypeface="neutral"
-                      >
-                        Monday
-                      </Text>
-                    </View>
-                    <View
-                      style={
-                        Array [
-                          Object {
-                            "marginLeft": 8,
-                          },
-                          undefined,
-                        ]
-                      }
-                    >
-                      <HeroIcon
-                        name="checkmark"
-                        style={
-                          Array [
-                            Object {
-                              "color": "#401960",
-                              "fontSize": 20,
-                            },
-                            Object {
-                              "marginRight": 12,
-                            },
-                          ]
-                        }
-                        themeIntent="primary"
-                        themeSize="small"
-                      />
-                    </View>
-                  </View>
-                  <View
-                    highlighted={false}
-                    leadingItem={
-                      Object {
-                        "text": "Monday",
-                        "value": "mon",
-                      }
-                    }
-                    section={
-                      Object {
-                        "category": "",
-                        "data": Array [
-                          Object {
-                            "text": "Monday",
-                            "value": "mon",
-                          },
-                          Object {
-                            "text": "Tuesday",
-                            "value": "tue",
-                          },
-                          Object {
-                            "text": "Wednesday",
-                            "value": "wed",
-                          },
-                          Object {
-                            "text": "Thursday",
-                            "value": "thu",
-                          },
-                          Object {
-                            "text": "Friday",
-                            "value": "fri",
-                          },
-                          Object {
-                            "text": "Saturday",
-                            "value": "sat",
-                          },
-                          Object {
-                            "disabled": true,
-                            "text": "Sunday",
-                            "value": "sun",
-                          },
-                        ],
-                      }
-                    }
-                    style={
-                      Array [
-                        Object {
-                          "marginTop": 4,
-                        },
-                        undefined,
-                      ]
-                    }
-                    trailingItem={
-                      Object {
-                        "text": "Tuesday",
-                        "value": "tue",
-                      }
-                    }
-                  />
-                </View>
-              </View>
-              <View
-                onLayout={[Function]}
-                style={null}
-              >
-                <View>
-                  <View
-                    accessible={true}
-                    focusable={true}
-                    onClick={[Function]}
-                    onResponderGrant={[Function]}
-                    onResponderMove={[Function]}
-                    onResponderRelease={[Function]}
-                    onResponderTerminate={[Function]}
-                    onResponderTerminationRequest={[Function]}
-                    onStartShouldSetResponder={[Function]}
-                    style={
-                      Object {
-                        "alignItems": "center",
-                        "backgroundColor": "#ece8ef",
-                        "borderRadius": 4,
-                        "flexDirection": "row",
-                        "opacity": 1,
-                        "padding": 16,
-                      }
-                    }
-                  >
-                    <View
-                      style={
-                        Array [
-                          Object {
-                            "flex": 1,
-                          },
-                          undefined,
-                        ]
-                      }
-                    >
-                      <Text
-                        style={
-                          Array [
-                            Object {
-                              "color": "#001f23",
-                              "fontFamily": "BeVietnamPro-Regular",
-                              "fontSize": 16,
-                              "letterSpacing": 0.48,
-                              "lineHeight": 24,
-                            },
-                            undefined,
-                          ]
-                        }
-                        themeFontSize="large"
-                        themeFontWeight="regular"
-                        themeIntent="body"
-                        themeTypeface="neutral"
-                      >
-                        Tuesday
-                      </Text>
-                    </View>
-                    <View
-                      style={
-                        Array [
-                          Object {
-                            "marginLeft": 8,
-                          },
-                          undefined,
-                        ]
-                      }
-                    >
-                      <HeroIcon
-                        name="checkmark"
-                        style={
-                          Array [
-                            Object {
-                              "color": "#401960",
-                              "fontSize": 20,
-                            },
-                            Object {
-                              "marginRight": 12,
-                            },
-                          ]
-                        }
-                        themeIntent="primary"
-                        themeSize="small"
-                      />
-                    </View>
-                  </View>
-                  <View
-                    highlighted={false}
-                    leadingItem={
-                      Object {
-                        "text": "Tuesday",
-                        "value": "tue",
-                      }
-                    }
-                    section={
-                      Object {
-                        "category": "",
-                        "data": Array [
-                          Object {
-                            "text": "Monday",
-                            "value": "mon",
-                          },
-                          Object {
-                            "text": "Tuesday",
-                            "value": "tue",
-                          },
-                          Object {
-                            "text": "Wednesday",
-                            "value": "wed",
-                          },
-                          Object {
-                            "text": "Thursday",
-                            "value": "thu",
-                          },
-                          Object {
-                            "text": "Friday",
-                            "value": "fri",
-                          },
-                          Object {
-                            "text": "Saturday",
-                            "value": "sat",
-                          },
-                          Object {
-                            "disabled": true,
-                            "text": "Sunday",
-                            "value": "sun",
-                          },
-                        ],
-                      }
-                    }
-                    style={
-                      Array [
-                        Object {
-                          "marginTop": 4,
-                        },
-                        undefined,
-                      ]
-                    }
-                    trailingItem={
-                      Object {
-                        "text": "Wednesday",
-                        "value": "wed",
-                      }
-                    }
-                  />
-                </View>
-              </View>
-              <View
-                onLayout={[Function]}
-                style={null}
-              >
-                <View>
-                  <View
-                    accessible={true}
-                    focusable={true}
-                    onClick={[Function]}
-                    onResponderGrant={[Function]}
-                    onResponderMove={[Function]}
-                    onResponderRelease={[Function]}
-                    onResponderTerminate={[Function]}
-                    onResponderTerminationRequest={[Function]}
-                    onStartShouldSetResponder={[Function]}
-                    style={
-                      Object {
-                        "alignItems": "center",
-                        "backgroundColor": "#ffffff",
-                        "borderRadius": 4,
-                        "flexDirection": "row",
-                        "opacity": 1,
-                        "padding": 16,
-                      }
-                    }
-                  >
-                    <View
-                      style={
-                        Array [
-                          Object {
-                            "flex": 1,
-                          },
-                          undefined,
-                        ]
-                      }
-                    >
-                      <Text
-                        style={
-                          Array [
-                            Object {
-                              "color": "#001f23",
-                              "fontFamily": "BeVietnamPro-Regular",
-                              "fontSize": 16,
-                              "letterSpacing": 0.48,
-                              "lineHeight": 24,
-                            },
-                            undefined,
-                          ]
-                        }
-                        themeFontSize="large"
-                        themeFontWeight="regular"
-                        themeIntent="body"
-                        themeTypeface="neutral"
-                      >
-                        Wednesday
-                      </Text>
-                    </View>
-                  </View>
-                  <View
-                    highlighted={false}
-                    leadingItem={
-                      Object {
-                        "text": "Wednesday",
-                        "value": "wed",
-                      }
-                    }
-                    section={
-                      Object {
-                        "category": "",
-                        "data": Array [
-                          Object {
-                            "text": "Monday",
-                            "value": "mon",
-                          },
-                          Object {
-                            "text": "Tuesday",
-                            "value": "tue",
-                          },
-                          Object {
-                            "text": "Wednesday",
-                            "value": "wed",
-                          },
-                          Object {
-                            "text": "Thursday",
-                            "value": "thu",
-                          },
-                          Object {
-                            "text": "Friday",
-                            "value": "fri",
-                          },
-                          Object {
-                            "text": "Saturday",
-                            "value": "sat",
-                          },
-                          Object {
-                            "disabled": true,
-                            "text": "Sunday",
-                            "value": "sun",
-                          },
-                        ],
-                      }
-                    }
-                    style={
-                      Array [
-                        Object {
-                          "marginTop": 4,
-                        },
-                        undefined,
-                      ]
-                    }
-                    trailingItem={
-                      Object {
-                        "text": "Thursday",
-                        "value": "thu",
-                      }
-                    }
-                  />
-                </View>
-              </View>
-              <View
-                onLayout={[Function]}
-                style={null}
-              >
-                <View>
-                  <View
-                    accessible={true}
-                    focusable={true}
-                    onClick={[Function]}
-                    onResponderGrant={[Function]}
-                    onResponderMove={[Function]}
-                    onResponderRelease={[Function]}
-                    onResponderTerminate={[Function]}
-                    onResponderTerminationRequest={[Function]}
-                    onStartShouldSetResponder={[Function]}
-                    style={
-                      Object {
-                        "alignItems": "center",
-                        "backgroundColor": "#ffffff",
-                        "borderRadius": 4,
-                        "flexDirection": "row",
-                        "opacity": 1,
-                        "padding": 16,
-                      }
-                    }
-                  >
-                    <View
-                      style={
-                        Array [
-                          Object {
-                            "flex": 1,
-                          },
-                          undefined,
-                        ]
-                      }
-                    >
-                      <Text
-                        style={
-                          Array [
-                            Object {
-                              "color": "#001f23",
-                              "fontFamily": "BeVietnamPro-Regular",
-                              "fontSize": 16,
-                              "letterSpacing": 0.48,
-                              "lineHeight": 24,
-                            },
-                            undefined,
-                          ]
-                        }
-                        themeFontSize="large"
-                        themeFontWeight="regular"
-                        themeIntent="body"
-                        themeTypeface="neutral"
-                      >
-                        Thursday
-                      </Text>
-                    </View>
-                  </View>
-                  <View
-                    highlighted={false}
-                    leadingItem={
-                      Object {
-                        "text": "Thursday",
-                        "value": "thu",
-                      }
-                    }
-                    section={
-                      Object {
-                        "category": "",
-                        "data": Array [
-                          Object {
-                            "text": "Monday",
-                            "value": "mon",
-                          },
-                          Object {
-                            "text": "Tuesday",
-                            "value": "tue",
-                          },
-                          Object {
-                            "text": "Wednesday",
-                            "value": "wed",
-                          },
-                          Object {
-                            "text": "Thursday",
-                            "value": "thu",
-                          },
-                          Object {
-                            "text": "Friday",
-                            "value": "fri",
-                          },
-                          Object {
-                            "text": "Saturday",
-                            "value": "sat",
-                          },
-                          Object {
-                            "disabled": true,
-                            "text": "Sunday",
-                            "value": "sun",
-                          },
-                        ],
-                      }
-                    }
-                    style={
-                      Array [
-                        Object {
-                          "marginTop": 4,
-                        },
-                        undefined,
-                      ]
-                    }
-                    trailingItem={
-                      Object {
-                        "text": "Friday",
-                        "value": "fri",
-                      }
-                    }
-                  />
-                </View>
-              </View>
-              <View
-                onLayout={[Function]}
-                style={null}
-              >
-                <View>
-                  <View
-                    accessible={true}
-                    focusable={true}
-                    onClick={[Function]}
-                    onResponderGrant={[Function]}
-                    onResponderMove={[Function]}
-                    onResponderRelease={[Function]}
-                    onResponderTerminate={[Function]}
-                    onResponderTerminationRequest={[Function]}
-                    onStartShouldSetResponder={[Function]}
-                    style={
-                      Object {
-                        "alignItems": "center",
-                        "backgroundColor": "#ffffff",
-                        "borderRadius": 4,
-                        "flexDirection": "row",
-                        "opacity": 1,
-                        "padding": 16,
-                      }
-                    }
-                  >
-                    <View
-                      style={
-                        Array [
-                          Object {
-                            "flex": 1,
-                          },
-                          undefined,
-                        ]
-                      }
-                    >
-                      <Text
-                        style={
-                          Array [
-                            Object {
-                              "color": "#001f23",
-                              "fontFamily": "BeVietnamPro-Regular",
-                              "fontSize": 16,
-                              "letterSpacing": 0.48,
-                              "lineHeight": 24,
-                            },
-                            undefined,
-                          ]
-                        }
-                        themeFontSize="large"
-                        themeFontWeight="regular"
-                        themeIntent="body"
-                        themeTypeface="neutral"
-                      >
-                        Friday
-                      </Text>
-                    </View>
-                  </View>
-                  <View
-                    highlighted={false}
-                    leadingItem={
-                      Object {
-                        "text": "Friday",
-                        "value": "fri",
-                      }
-                    }
-                    section={
-                      Object {
-                        "category": "",
-                        "data": Array [
-                          Object {
-                            "text": "Monday",
-                            "value": "mon",
-                          },
-                          Object {
-                            "text": "Tuesday",
-                            "value": "tue",
-                          },
-                          Object {
-                            "text": "Wednesday",
-                            "value": "wed",
-                          },
-                          Object {
-                            "text": "Thursday",
-                            "value": "thu",
-                          },
-                          Object {
-                            "text": "Friday",
-                            "value": "fri",
-                          },
-                          Object {
-                            "text": "Saturday",
-                            "value": "sat",
-                          },
-                          Object {
-                            "disabled": true,
-                            "text": "Sunday",
-                            "value": "sun",
-                          },
-                        ],
-                      }
-                    }
-                    style={
-                      Array [
-                        Object {
-                          "marginTop": 4,
-                        },
-                        undefined,
-                      ]
-                    }
-                    trailingItem={
-                      Object {
-                        "text": "Saturday",
-                        "value": "sat",
-                      }
-                    }
-                  />
-                </View>
-              </View>
-              <View
-                onLayout={[Function]}
-                style={null}
-              >
-                <View>
-                  <View
-                    accessible={true}
-                    focusable={true}
-                    onClick={[Function]}
-                    onResponderGrant={[Function]}
-                    onResponderMove={[Function]}
-                    onResponderRelease={[Function]}
-                    onResponderTerminate={[Function]}
-                    onResponderTerminationRequest={[Function]}
-                    onStartShouldSetResponder={[Function]}
-                    style={
-                      Object {
-                        "alignItems": "center",
-                        "backgroundColor": "#ffffff",
-                        "borderRadius": 4,
-                        "flexDirection": "row",
-                        "opacity": 1,
-                        "padding": 16,
-                      }
-                    }
-                  >
-                    <View
-                      style={
-                        Array [
-                          Object {
-                            "flex": 1,
-                          },
-                          undefined,
-                        ]
-                      }
-                    >
-                      <Text
-                        style={
-                          Array [
-                            Object {
-                              "color": "#001f23",
-                              "fontFamily": "BeVietnamPro-Regular",
-                              "fontSize": 16,
-                              "letterSpacing": 0.48,
-                              "lineHeight": 24,
-                            },
-                            undefined,
-                          ]
-                        }
-                        themeFontSize="large"
-                        themeFontWeight="regular"
-                        themeIntent="body"
-                        themeTypeface="neutral"
-                      >
-                        Saturday
-                      </Text>
-                    </View>
-                  </View>
-                  <View
-                    highlighted={false}
-                    leadingItem={
-                      Object {
-                        "text": "Saturday",
-                        "value": "sat",
-                      }
-                    }
-                    section={
-                      Object {
-                        "category": "",
-                        "data": Array [
-                          Object {
-                            "text": "Monday",
-                            "value": "mon",
-                          },
-                          Object {
-                            "text": "Tuesday",
-                            "value": "tue",
-                          },
-                          Object {
-                            "text": "Wednesday",
-                            "value": "wed",
-                          },
-                          Object {
-                            "text": "Thursday",
-                            "value": "thu",
-                          },
-                          Object {
-                            "text": "Friday",
-                            "value": "fri",
-                          },
-                          Object {
-                            "text": "Saturday",
-                            "value": "sat",
-                          },
-                          Object {
-                            "disabled": true,
-                            "text": "Sunday",
-                            "value": "sun",
-                          },
-                        ],
-                      }
-                    }
-                    style={
-                      Array [
-                        Object {
-                          "marginTop": 4,
-                        },
-                        undefined,
-                      ]
-                    }
-                    trailingItem={
-                      Object {
-                        "disabled": true,
-                        "text": "Sunday",
-                        "value": "sun",
-                      }
-                    }
-                  />
-                </View>
-              </View>
-              <View
-                onLayout={[Function]}
-                style={null}
-              >
-                <View>
-                  <View
-                    accessible={true}
-                    focusable={true}
-                    onClick={[Function]}
-                    onResponderGrant={[Function]}
-                    onResponderMove={[Function]}
-                    onResponderRelease={[Function]}
-                    onResponderTerminate={[Function]}
-                    onResponderTerminationRequest={[Function]}
-                    onStartShouldSetResponder={[Function]}
-                    style={
-                      Object {
-                        "alignItems": "center",
-                        "backgroundColor": "#ffffff",
-                        "borderRadius": 4,
-                        "flexDirection": "row",
-                        "opacity": 0.38,
-                        "padding": 16,
-                      }
-                    }
-                  >
-                    <View
-                      style={
-                        Array [
-                          Object {
-                            "flex": 1,
-                          },
-                          undefined,
-                        ]
-                      }
-                    >
-                      <Text
-                        style={
-                          Array [
-                            Object {
-                              "color": "#001f23",
-                              "fontFamily": "BeVietnamPro-Regular",
-                              "fontSize": 16,
-                              "letterSpacing": 0.48,
-                              "lineHeight": 24,
-                            },
-                            undefined,
-                          ]
-                        }
-                        themeFontSize="large"
-                        themeFontWeight="regular"
-                        themeIntent="body"
-                        themeTypeface="neutral"
-                      >
-                        Sunday
-                      </Text>
-                    </View>
-                  </View>
-                  <View
-                    highlighted={false}
-                    leadingItem={
-                      Object {
-                        "disabled": true,
-                        "text": "Sunday",
-                        "value": "sun",
-                      }
-                    }
-                    section={
-                      Object {
-                        "category": "",
-                        "data": Array [
-                          Object {
-                            "text": "Monday",
-                            "value": "mon",
-                          },
-                          Object {
-                            "text": "Tuesday",
-                            "value": "tue",
-                          },
-                          Object {
-                            "text": "Wednesday",
-                            "value": "wed",
-                          },
-                          Object {
-                            "text": "Thursday",
-                            "value": "thu",
-                          },
-                          Object {
-                            "text": "Friday",
-                            "value": "fri",
-                          },
-                          Object {
-                            "text": "Saturday",
-                            "value": "sat",
-                          },
-                          Object {
-                            "disabled": true,
-                            "text": "Sunday",
-                            "value": "sun",
-                          },
-                        ],
-                      }
-                    }
-                    style={
-                      Array [
-                        Object {
-                          "marginTop": 12,
-                        },
-                        undefined,
-                      ]
-                    }
-                  />
-                </View>
-              </View>
-              <View
-                onLayout={[Function]}
-                style={null}
-              />
-            </View>
-          </RCTScrollView>
-          <View>
-            <View
-              style={
-                Array [
-                  Object {
-                    "borderBottomColor": "#e8e9ea",
-                    "borderBottomWidth": 1,
-                    "maxWidth": "100%",
-                  },
-                  undefined,
-                ]
-              }
-            />
-            <View
-              style={
-                Array [
-                  Object {
-                    "alignItems": "center",
-                    "flexDirection": "row",
-                    "justifyContent": "flex-end",
-                    "paddingHorizontal": 12,
-                    "paddingVertical": 2,
-                  },
-                  undefined,
-                ]
-              }
-            >
-              <View
-                accessible={true}
-                focusable={true}
-                onClick={[Function]}
-                onResponderGrant={[Function]}
-                onResponderMove={[Function]}
-                onResponderRelease={[Function]}
-                onResponderTerminate={[Function]}
-                onResponderTerminationRequest={[Function]}
-                onStartShouldSetResponder={[Function]}
-                style={
-                  Object {
-                    "alignItems": "center",
-                    "borderWidth": 0,
-                    "flexDirection": "row",
-                    "justifyContent": "center",
-                    "opacity": 1,
-                    "padding": 16,
-                  }
-                }
-              >
-                <Text
-                  disabled={false}
-                  ellipsizeMode="tail"
-                  numberOfLines={1}
-                  style={
-                    Array [
-                      Object {
-                        "color": "#001f23",
-                        "fontFamily": "BeVietnamPro-Regular",
-                        "fontSize": 14,
-                        "letterSpacing": 0.42,
-                        "lineHeight": 22,
-                      },
-                      Array [
-                        Object {
-                          "color": "#401960",
-                          "flexShrink": 1,
-                          "fontFamily": "BeVietnamPro-SemiBold",
-                          "fontSize": 16,
-                          "lineHeight": 24,
-                          "textAlign": "center",
-                        },
-                        undefined,
-                      ],
-                    ]
-                  }
-                  themeFontSize="medium"
-                  themeFontWeight="regular"
-                  themeIntent="body"
-                  themeTypeface="neutral"
-                  themeVariant="text-primary"
-                >
-                  Confirm
-                </Text>
-              </View>
-            </View>
-          </View>
-        </RCTSafeAreaView>
-      </View>
-    </View>
-  </Modal>,
-]
-`;
-
-exports[`rendering renders correctly when input is loading 1`] = `
-Array [
-  <View
-    pointerEvents="none"
-  >
-    <View
-      accessible={true}
-      collapsable={false}
-      focusable={true}
-      nativeID="animatedComponent"
-      onClick={[Function]}
-      onResponderGrant={[Function]}
-      onResponderMove={[Function]}
-      onResponderRelease={[Function]}
-      onResponderTerminate={[Function]}
-      onResponderTerminationRequest={[Function]}
-      onStartShouldSetResponder={[Function]}
-      style={
-        Object {
-          "opacity": 1,
-        }
-      }
-    >
-      <View
-        pointerEvents="none"
-      >
-        <View
-          pointerEvents="none"
-          style={
-            Array [
-              Object {
-                "marginVertical": 8,
-                "width": "100%",
-              },
-              undefined,
-            ]
-          }
-        >
-          <View
-            style={
-              Array [
-                Object {
-                  "alignItems": "center",
-                  "flexDirection": "row",
-                  "padding": 16,
-                },
-                undefined,
-              ]
-            }
-          >
-            <View
-              style={
-                Array [
-                  Object {
-                    "borderColor": "#808f91",
-                    "borderRadius": 8,
-                    "borderWidth": 1,
-                    "bottom": 0,
-                    "left": 0,
-                    "position": "absolute",
-                    "right": 0,
-                    "top": 0,
-                  },
-                  undefined,
-                ]
-              }
-              themeFocused={false}
-              themeVariant="readonly"
-            />
-            <View
-              pointerEvents="none"
-              style={
-                Array [
-                  Object {
-                    "backgroundColor": "#ffffff",
-                    "flexDirection": "row",
-                    "left": 16,
-                    "paddingHorizontal": 4,
-                    "position": "absolute",
-                    "top": -10,
-                    "zIndex": 1,
-                  },
-                  undefined,
-                ]
-              }
-            >
-              <Text
-                style={
-                  Array [
-                    Object {
-                      "color": "#001f23",
-                      "fontFamily": "BeVietnamPro-Regular",
-                      "fontSize": 12,
-                      "letterSpacing": 0.36,
-                      "lineHeight": 20,
-                    },
-                    Array [
-                      Object {
-                        "color": "#808f91",
-                      },
-                      undefined,
-                    ],
-                  ]
-                }
-                testID="input-label"
-                themeFontSize="small"
-                themeFontWeight="regular"
-                themeIntent="body"
-                themeTypeface="neutral"
-                themeVariant="readonly"
-              >
-                Allow notifications
-              </Text>
-            </View>
-            <View
-              style={
-                Array [
-                  Object {
-                    "alignItems": "center",
-                    "alignSelf": "stretch",
-                    "flexDirection": "row",
-                    "flexGrow": 2,
-                    "flexShrink": 1,
-                  },
-                  undefined,
-                ]
-              }
-            >
-              <TextInput
-                accessibilityState={
-                  Object {
-                    "disabled": true,
-                  }
-                }
-                editable={true}
-                multiline={true}
-                onBlur={[Function]}
-                onChangeText={[Function]}
-                onFocus={[Function]}
-                placeholder=" "
-                pointerEvents="none"
-                style={
-                  Array [
-                    Object {
-                      "alignSelf": "stretch",
-                      "flexGrow": 2,
-                      "fontSize": 14,
-                      "marginHorizontal": 8,
-                      "paddingVertical": 0,
-                      "textAlignVertical": "center",
-                    },
-                    Object {
-                      "color": "#001f23",
-                    },
-                  ]
-                }
-                testID="text-input"
-                value="Monday, Tuesday"
-              />
-            </View>
-            <View
-              collapsable={false}
-              nativeID="animatedComponent"
-              style={
-                Object {
-                  "transform": Array [
-                    Object {
-                      "rotate": "0deg",
-                    },
-                  ],
-                }
-              }
-            >
-              <HeroIcon
-                name="loading"
-                style={
-                  Array [
-                    Object {
-                      "color": "#001f23",
-                      "fontSize": 16,
-                    },
-                    undefined,
-                  ]
-                }
-                testID="input-suffix"
-                themeIntent="text"
-                themeSize="xsmall"
-              />
-            </View>
-          </View>
-          <View
-            style={
-              Array [
-                Object {
-                  "paddingLeft": 16,
-                },
-                undefined,
-              ]
-            }
-          >
-            <View
-              style={
-                Array [
-                  Object {
-                    "flexDirection": "row",
-                    "justifyContent": "space-between",
-                  },
-                  undefined,
-                ]
-              }
-            />
-          </View>
-        </View>
-      </View>
-    </View>
-  </View>,
-  <Modal
-    hardwareAccelerated={false}
-    onRequestClose={[Function]}
-    transparent={true}
-    visible={false}
-  >
-    <View
-      pointerEvents="box-none"
-      style={
-        Array [
-          Object {
-            "bottom": 0,
-            "flexDirection": "column-reverse",
-            "left": 0,
-            "position": "absolute",
-            "right": 0,
-            "top": 0,
-          },
-          undefined,
-        ]
-      }
-    >
-      <View
-        onLayout={[Function]}
-        style={
-          Array [
-            Array [
-              Object {
-                "flex": 1,
-                "flexDirection": "column-reverse",
-              },
-              undefined,
-            ],
-            Object {
-              "paddingBottom": 0,
-            },
-          ]
-        }
-      >
-        <View
-          accessible={true}
-          collapsable={false}
-          focusable={true}
-          nativeID="animatedComponent"
-          onBlur={[Function]}
-          onClick={[Function]}
-          onFocus={[Function]}
-          onResponderGrant={[Function]}
-          onResponderMove={[Function]}
-          onResponderRelease={[Function]}
-          onResponderTerminate={[Function]}
-          onResponderTerminationRequest={[Function]}
-          onStartShouldSetResponder={[Function]}
-          style={
-            Object {
-              "backgroundColor": "#000000",
-              "bottom": 0,
-              "left": 0,
-              "opacity": 0.48,
-              "position": "absolute",
-              "right": 0,
-              "top": 0,
-            }
-          }
-        />
-        <RCTSafeAreaView
-          collapsable={false}
-          emulateUnlessSupported={true}
-          nativeID="animatedComponent"
-          style={
-            Object {
-              "backgroundColor": "#ffffff",
-              "borderTopLeftRadius": 16,
-              "borderTopRightRadius": 16,
-              "elevation": 10,
-              "maxHeight": "94%",
-              "paddingBottom": 0,
-              "shadowColor": "#001f23",
-              "shadowOffset": Object {
-                "height": 3,
-                "width": 0,
-              },
-              "shadowOpacity": 0.4,
-              "shadowRadius": 16,
-              "transform": Array [
-                Object {
-                  "scaleY": 1,
-                },
-                Object {
-                  "translateY": 0,
-                },
-              ],
-              "width": "100%",
-            }
-          }
-        >
-          <View
-            style={
-              Array [
-                Object {
-                  "flexDirection": "row",
-                  "paddingHorizontal": 16,
-                  "paddingVertical": 8,
-                },
-                undefined,
-              ]
-            }
-          >
-            <View
-              style={
-                Array [
-                  Object {
-                    "flex": 1,
-                    "justifyContent": "center",
-                  },
-                  undefined,
-                ]
-              }
-            >
-              <Text
-                style={
-                  Array [
-                    Object {
-                      "color": "#001f23",
-                      "fontFamily": "BeVietnamPro-SemiBold",
-                      "fontSize": 16,
-                      "letterSpacing": 0.48,
-                      "lineHeight": 24,
-                    },
-                    undefined,
-                  ]
-                }
-                themeFontSize="large"
-                themeFontWeight="semi-bold"
-                themeIntent="body"
-                themeTypeface="neutral"
-              >
-                Allow notifications
-              </Text>
-            </View>
-            <View
-              style={
-                Array [
-                  Object {
-                    "alignItems": "center",
-                    "height": 48,
-                    "justifyContent": "center",
-                    "marginLeft": 12,
-                    "width": 48,
-                  },
-                  undefined,
-                ]
-              }
-            >
-              <View
-                accessible={true}
-                collapsable={false}
-                focusable={true}
-                nativeID="animatedComponent"
-                onClick={[Function]}
-                onResponderGrant={[Function]}
-                onResponderMove={[Function]}
-                onResponderRelease={[Function]}
-                onResponderTerminate={[Function]}
-                onResponderTerminationRequest={[Function]}
-                onStartShouldSetResponder={[Function]}
-                style={
-                  Object {
-                    "opacity": 1,
-                  }
-                }
-                testID="bottom-sheet-close-icon"
-              >
-                <HeroIcon
-                  name="cancel"
-                  style={
-                    Array [
-                      Object {
-                        "color": "#001f23",
-                        "fontSize": 16,
-                      },
-                      undefined,
-                    ]
-                  }
-                  themeIntent="text"
-                  themeSize="xsmall"
-                />
-              </View>
-            </View>
-          </View>
-          <View
-            style={
-              Array [
-                Object {
-                  "borderBottomColor": "#e8e9ea",
-                  "borderBottomWidth": 1,
-                  "maxWidth": "100%",
-                },
-                undefined,
-              ]
-            }
-          />
-          <RCTScrollView
-            ListFooterComponent={null}
-            data={
-              Array [
-                Object {
-                  "category": "",
-                  "data": Array [
-                    Object {
-                      "text": "Monday",
-                      "value": "mon",
-                    },
-                    Object {
-                      "text": "Tuesday",
-                      "value": "tue",
-                    },
-                    Object {
-                      "text": "Wednesday",
-                      "value": "wed",
-                    },
-                    Object {
-                      "text": "Thursday",
-                      "value": "thu",
-                    },
-                    Object {
-                      "text": "Friday",
-                      "value": "fri",
-                    },
-                    Object {
-                      "text": "Saturday",
-                      "value": "sat",
-                    },
-                    Object {
-                      "disabled": true,
-                      "text": "Sunday",
-                      "value": "sun",
-                    },
-                  ],
-                },
-              ]
-            }
-            getItem={[Function]}
-            getItemCount={[Function]}
-            keyExtractor={[Function]}
-            onContentSizeChange={[Function]}
-            onEndReached={[Function]}
-            onEndReachedThreshold={0.1}
-            onLayout={[Function]}
-            onMomentumScrollBegin={[Function]}
-            onMomentumScrollEnd={[Function]}
-            onScroll={[Function]}
-            onScrollBeginDrag={[Function]}
-            onScrollEndDrag={[Function]}
-            renderItem={[Function]}
-            scrollEventThrottle={50}
-            stickyHeaderIndices={
-              Array [
-                0,
-              ]
-            }
-            style={
-              Array [
-                Object {
-                  "paddingHorizontal": 12,
-                },
-                Object {},
-              ]
-            }
-          >
-            <View>
-              <View
-                onLayout={[Function]}
-                style={null}
-              />
-              <View
-                onLayout={[Function]}
-                style={null}
-              >
-                <View>
-                  <View
-                    highlighted={false}
-                    section={
-                      Object {
-                        "category": "",
-                        "data": Array [
-                          Object {
-                            "text": "Monday",
-                            "value": "mon",
-                          },
-                          Object {
-                            "text": "Tuesday",
-                            "value": "tue",
-                          },
-                          Object {
-                            "text": "Wednesday",
-                            "value": "wed",
-                          },
-                          Object {
-                            "text": "Thursday",
-                            "value": "thu",
-                          },
-                          Object {
-                            "text": "Friday",
-                            "value": "fri",
-                          },
-                          Object {
-                            "text": "Saturday",
-                            "value": "sat",
-                          },
-                          Object {
-                            "disabled": true,
-                            "text": "Sunday",
-                            "value": "sun",
-                          },
-                        ],
-                      }
-                    }
-                    style={
-                      Array [
-                        Object {
-                          "marginTop": 12,
-                        },
-                        undefined,
-                      ]
-                    }
-                    trailingItem={
-                      Object {
-                        "text": "Monday",
-                        "value": "mon",
-                      }
-                    }
-                  />
-                  <View
-                    accessible={true}
-                    collapsable={false}
-                    focusable={true}
-                    nativeID="animatedComponent"
-                    onClick={[Function]}
-                    onResponderGrant={[Function]}
-                    onResponderMove={[Function]}
-                    onResponderRelease={[Function]}
-                    onResponderTerminate={[Function]}
-                    onResponderTerminationRequest={[Function]}
-                    onStartShouldSetResponder={[Function]}
-                    style={
-                      Object {
-                        "alignItems": "center",
-                        "backgroundColor": "#ece8ef",
-                        "borderRadius": 4,
-                        "flexDirection": "row",
-                        "opacity": 1,
-                        "padding": 16,
-                      }
-                    }
-                  >
-                    <View
-                      style={
-                        Array [
-                          Object {
-                            "flex": 1,
-                          },
-                          undefined,
-                        ]
-                      }
-                    >
-                      <Text
-                        style={
-                          Array [
-                            Object {
-                              "color": "#001f23",
-                              "fontFamily": "BeVietnamPro-Regular",
-                              "fontSize": 16,
-                              "letterSpacing": 0.48,
-                              "lineHeight": 24,
-                            },
-                            undefined,
-                          ]
-                        }
-                        themeFontSize="large"
-                        themeFontWeight="regular"
-                        themeIntent="body"
-                        themeTypeface="neutral"
-                      >
-                        Monday
-                      </Text>
-                    </View>
-                    <View
-                      style={
-                        Array [
-                          Object {
-                            "marginLeft": 8,
-                          },
-                          undefined,
-                        ]
-                      }
-                    >
-                      <HeroIcon
-                        name="checkmark"
-                        style={
-                          Array [
-                            Object {
-                              "color": "#401960",
-                              "fontSize": 20,
-                            },
-                            Object {
-                              "marginRight": 12,
-                            },
-                          ]
-                        }
-                        themeIntent="primary"
-                        themeSize="small"
-                      />
-                    </View>
-                  </View>
-                  <View
-                    highlighted={false}
-                    leadingItem={
-                      Object {
-                        "text": "Monday",
-                        "value": "mon",
-                      }
-                    }
-                    section={
-                      Object {
-                        "category": "",
-                        "data": Array [
-                          Object {
-                            "text": "Monday",
-                            "value": "mon",
-                          },
-                          Object {
-                            "text": "Tuesday",
-                            "value": "tue",
-                          },
-                          Object {
-                            "text": "Wednesday",
-                            "value": "wed",
-                          },
-                          Object {
-                            "text": "Thursday",
-                            "value": "thu",
-                          },
-                          Object {
-                            "text": "Friday",
-                            "value": "fri",
-                          },
-                          Object {
-                            "text": "Saturday",
-                            "value": "sat",
-                          },
-                          Object {
-                            "disabled": true,
-                            "text": "Sunday",
-                            "value": "sun",
-                          },
-                        ],
-                      }
-                    }
-                    style={
-                      Array [
-                        Object {
-                          "marginTop": 4,
-                        },
-                        undefined,
-                      ]
-                    }
-                    trailingItem={
-                      Object {
-                        "text": "Tuesday",
-                        "value": "tue",
-                      }
-                    }
-                  />
-                </View>
-              </View>
-              <View
-                onLayout={[Function]}
-                style={null}
-              >
-                <View>
-                  <View
-                    accessible={true}
-                    collapsable={false}
-                    focusable={true}
-                    nativeID="animatedComponent"
-                    onClick={[Function]}
-                    onResponderGrant={[Function]}
-                    onResponderMove={[Function]}
-                    onResponderRelease={[Function]}
-                    onResponderTerminate={[Function]}
-                    onResponderTerminationRequest={[Function]}
-                    onStartShouldSetResponder={[Function]}
-                    style={
-                      Object {
-                        "alignItems": "center",
-                        "backgroundColor": "#ece8ef",
-                        "borderRadius": 4,
-                        "flexDirection": "row",
-                        "opacity": 1,
-                        "padding": 16,
-                      }
-                    }
-                  >
-                    <View
-                      style={
-                        Array [
-                          Object {
-                            "flex": 1,
-                          },
-                          undefined,
-                        ]
-                      }
-                    >
-                      <Text
-                        style={
-                          Array [
-                            Object {
-                              "color": "#001f23",
-                              "fontFamily": "BeVietnamPro-Regular",
-                              "fontSize": 16,
-                              "letterSpacing": 0.48,
-                              "lineHeight": 24,
-                            },
-                            undefined,
-                          ]
-                        }
-                        themeFontSize="large"
-                        themeFontWeight="regular"
-                        themeIntent="body"
-                        themeTypeface="neutral"
-                      >
-                        Tuesday
-                      </Text>
-                    </View>
-                    <View
-                      style={
-                        Array [
-                          Object {
-                            "marginLeft": 8,
-                          },
-                          undefined,
-                        ]
-                      }
-                    >
-                      <HeroIcon
-                        name="checkmark"
-                        style={
-                          Array [
-                            Object {
-                              "color": "#401960",
-                              "fontSize": 20,
-                            },
-                            Object {
-                              "marginRight": 12,
-                            },
-                          ]
-                        }
-                        themeIntent="primary"
-                        themeSize="small"
-                      />
-                    </View>
-                  </View>
-                  <View
-                    highlighted={false}
-                    leadingItem={
-                      Object {
-                        "text": "Tuesday",
-                        "value": "tue",
-                      }
-                    }
-                    section={
-                      Object {
-                        "category": "",
-                        "data": Array [
-                          Object {
-                            "text": "Monday",
-                            "value": "mon",
-                          },
-                          Object {
-                            "text": "Tuesday",
-                            "value": "tue",
-                          },
-                          Object {
-                            "text": "Wednesday",
-                            "value": "wed",
-                          },
-                          Object {
-                            "text": "Thursday",
-                            "value": "thu",
-                          },
-                          Object {
-                            "text": "Friday",
-                            "value": "fri",
-                          },
-                          Object {
-                            "text": "Saturday",
-                            "value": "sat",
-                          },
-                          Object {
-                            "disabled": true,
-                            "text": "Sunday",
-                            "value": "sun",
-                          },
-                        ],
-                      }
-                    }
-                    style={
-                      Array [
-                        Object {
-                          "marginTop": 4,
-                        },
-                        undefined,
-                      ]
-                    }
-                    trailingItem={
-                      Object {
-                        "text": "Wednesday",
-                        "value": "wed",
-                      }
-                    }
-                  />
-                </View>
-              </View>
-              <View
-                onLayout={[Function]}
-                style={null}
-              >
-                <View>
-                  <View
-                    accessible={true}
-                    collapsable={false}
-                    focusable={true}
-                    nativeID="animatedComponent"
-                    onClick={[Function]}
-                    onResponderGrant={[Function]}
-                    onResponderMove={[Function]}
-                    onResponderRelease={[Function]}
-                    onResponderTerminate={[Function]}
-                    onResponderTerminationRequest={[Function]}
-                    onStartShouldSetResponder={[Function]}
-                    style={
-                      Object {
-                        "alignItems": "center",
-                        "backgroundColor": "#ffffff",
-                        "borderRadius": 4,
-                        "flexDirection": "row",
-                        "opacity": 1,
-                        "padding": 16,
-                      }
-                    }
-                  >
-                    <View
-                      style={
-                        Array [
-                          Object {
-                            "flex": 1,
-                          },
-                          undefined,
-                        ]
-                      }
-                    >
-                      <Text
-                        style={
-                          Array [
-                            Object {
-                              "color": "#001f23",
-                              "fontFamily": "BeVietnamPro-Regular",
-                              "fontSize": 16,
-                              "letterSpacing": 0.48,
-                              "lineHeight": 24,
-                            },
-                            undefined,
-                          ]
-                        }
-                        themeFontSize="large"
-                        themeFontWeight="regular"
-                        themeIntent="body"
-                        themeTypeface="neutral"
-                      >
-                        Wednesday
-                      </Text>
-                    </View>
-                  </View>
-                  <View
-                    highlighted={false}
-                    leadingItem={
-                      Object {
-                        "text": "Wednesday",
-                        "value": "wed",
-                      }
-                    }
-                    section={
-                      Object {
-                        "category": "",
-                        "data": Array [
-                          Object {
-                            "text": "Monday",
-                            "value": "mon",
-                          },
-                          Object {
-                            "text": "Tuesday",
-                            "value": "tue",
-                          },
-                          Object {
-                            "text": "Wednesday",
-                            "value": "wed",
-                          },
-                          Object {
-                            "text": "Thursday",
-                            "value": "thu",
-                          },
-                          Object {
-                            "text": "Friday",
-                            "value": "fri",
-                          },
-                          Object {
-                            "text": "Saturday",
-                            "value": "sat",
-                          },
-                          Object {
-                            "disabled": true,
-                            "text": "Sunday",
-                            "value": "sun",
-                          },
-                        ],
-                      }
-                    }
-                    style={
-                      Array [
-                        Object {
-                          "marginTop": 4,
-                        },
-                        undefined,
-                      ]
-                    }
-                    trailingItem={
-                      Object {
-                        "text": "Thursday",
-                        "value": "thu",
-                      }
-                    }
-                  />
-                </View>
-              </View>
-              <View
-                onLayout={[Function]}
-                style={null}
-              >
-                <View>
-                  <View
-                    accessible={true}
-                    collapsable={false}
-                    focusable={true}
-                    nativeID="animatedComponent"
-                    onClick={[Function]}
-                    onResponderGrant={[Function]}
-                    onResponderMove={[Function]}
-                    onResponderRelease={[Function]}
-                    onResponderTerminate={[Function]}
-                    onResponderTerminationRequest={[Function]}
-                    onStartShouldSetResponder={[Function]}
-                    style={
-                      Object {
-                        "alignItems": "center",
-                        "backgroundColor": "#ffffff",
-                        "borderRadius": 4,
-                        "flexDirection": "row",
-                        "opacity": 1,
-                        "padding": 16,
-                      }
-                    }
-                  >
-                    <View
-                      style={
-                        Array [
-                          Object {
-                            "flex": 1,
-                          },
-                          undefined,
-                        ]
-                      }
-                    >
-                      <Text
-                        style={
-                          Array [
-                            Object {
-                              "color": "#001f23",
-                              "fontFamily": "BeVietnamPro-Regular",
-                              "fontSize": 16,
-                              "letterSpacing": 0.48,
-                              "lineHeight": 24,
-                            },
-                            undefined,
-                          ]
-                        }
-                        themeFontSize="large"
-                        themeFontWeight="regular"
-                        themeIntent="body"
-                        themeTypeface="neutral"
-                      >
-                        Thursday
-                      </Text>
-                    </View>
-                  </View>
-                  <View
-                    highlighted={false}
-                    leadingItem={
-                      Object {
-                        "text": "Thursday",
-                        "value": "thu",
-                      }
-                    }
-                    section={
-                      Object {
-                        "category": "",
-                        "data": Array [
-                          Object {
-                            "text": "Monday",
-                            "value": "mon",
-                          },
-                          Object {
-                            "text": "Tuesday",
-                            "value": "tue",
-                          },
-                          Object {
-                            "text": "Wednesday",
-                            "value": "wed",
-                          },
-                          Object {
-                            "text": "Thursday",
-                            "value": "thu",
-                          },
-                          Object {
-                            "text": "Friday",
-                            "value": "fri",
-                          },
-                          Object {
-                            "text": "Saturday",
-                            "value": "sat",
-                          },
-                          Object {
-                            "disabled": true,
-                            "text": "Sunday",
-                            "value": "sun",
-                          },
-                        ],
-                      }
-                    }
-                    style={
-                      Array [
-                        Object {
-                          "marginTop": 4,
-                        },
-                        undefined,
-                      ]
-                    }
-                    trailingItem={
-                      Object {
-                        "text": "Friday",
-                        "value": "fri",
-                      }
-                    }
-                  />
-                </View>
-              </View>
-              <View
-                onLayout={[Function]}
-                style={null}
-              >
-                <View>
-                  <View
-                    accessible={true}
-                    collapsable={false}
-                    focusable={true}
-                    nativeID="animatedComponent"
-                    onClick={[Function]}
-                    onResponderGrant={[Function]}
-                    onResponderMove={[Function]}
-                    onResponderRelease={[Function]}
-                    onResponderTerminate={[Function]}
-                    onResponderTerminationRequest={[Function]}
-                    onStartShouldSetResponder={[Function]}
-                    style={
-                      Object {
-                        "alignItems": "center",
-                        "backgroundColor": "#ffffff",
-                        "borderRadius": 4,
-                        "flexDirection": "row",
-                        "opacity": 1,
-                        "padding": 16,
-                      }
-                    }
-                  >
-                    <View
-                      style={
-                        Array [
-                          Object {
-                            "flex": 1,
-                          },
-                          undefined,
-                        ]
-                      }
-                    >
-                      <Text
-                        style={
-                          Array [
-                            Object {
-                              "color": "#001f23",
-                              "fontFamily": "BeVietnamPro-Regular",
-                              "fontSize": 16,
-                              "letterSpacing": 0.48,
-                              "lineHeight": 24,
-                            },
-                            undefined,
-                          ]
-                        }
-                        themeFontSize="large"
-                        themeFontWeight="regular"
-                        themeIntent="body"
-                        themeTypeface="neutral"
-                      >
-                        Friday
-                      </Text>
-                    </View>
-                  </View>
-                  <View
-                    highlighted={false}
-                    leadingItem={
-                      Object {
-                        "text": "Friday",
-                        "value": "fri",
-                      }
-                    }
-                    section={
-                      Object {
-                        "category": "",
-                        "data": Array [
-                          Object {
-                            "text": "Monday",
-                            "value": "mon",
-                          },
-                          Object {
-                            "text": "Tuesday",
-                            "value": "tue",
-                          },
-                          Object {
-                            "text": "Wednesday",
-                            "value": "wed",
-                          },
-                          Object {
-                            "text": "Thursday",
-                            "value": "thu",
-                          },
-                          Object {
-                            "text": "Friday",
-                            "value": "fri",
-                          },
-                          Object {
-                            "text": "Saturday",
-                            "value": "sat",
-                          },
-                          Object {
-                            "disabled": true,
-                            "text": "Sunday",
-                            "value": "sun",
-                          },
-                        ],
-                      }
-                    }
-                    style={
-                      Array [
-                        Object {
-                          "marginTop": 4,
-                        },
-                        undefined,
-                      ]
-                    }
-                    trailingItem={
-                      Object {
-                        "text": "Saturday",
-                        "value": "sat",
-                      }
-                    }
-                  />
-                </View>
-              </View>
-              <View
-                onLayout={[Function]}
-                style={null}
-              >
-                <View>
-                  <View
-                    accessible={true}
-                    collapsable={false}
-                    focusable={true}
-                    nativeID="animatedComponent"
-                    onClick={[Function]}
-                    onResponderGrant={[Function]}
-                    onResponderMove={[Function]}
-                    onResponderRelease={[Function]}
-                    onResponderTerminate={[Function]}
-                    onResponderTerminationRequest={[Function]}
-                    onStartShouldSetResponder={[Function]}
-                    style={
-                      Object {
-                        "alignItems": "center",
-                        "backgroundColor": "#ffffff",
-                        "borderRadius": 4,
-                        "flexDirection": "row",
-                        "opacity": 1,
-                        "padding": 16,
-                      }
-                    }
-                  >
-                    <View
-                      style={
-                        Array [
-                          Object {
-                            "flex": 1,
-                          },
-                          undefined,
-                        ]
-                      }
-                    >
-                      <Text
-                        style={
-                          Array [
-                            Object {
-                              "color": "#001f23",
-                              "fontFamily": "BeVietnamPro-Regular",
-                              "fontSize": 16,
-                              "letterSpacing": 0.48,
-                              "lineHeight": 24,
-                            },
-                            undefined,
-                          ]
-                        }
-                        themeFontSize="large"
-                        themeFontWeight="regular"
-                        themeIntent="body"
-                        themeTypeface="neutral"
-                      >
-                        Saturday
-                      </Text>
-                    </View>
-                  </View>
-                  <View
-                    highlighted={false}
-                    leadingItem={
-                      Object {
-                        "text": "Saturday",
-                        "value": "sat",
-                      }
-                    }
-                    section={
-                      Object {
-                        "category": "",
-                        "data": Array [
-                          Object {
-                            "text": "Monday",
-                            "value": "mon",
-                          },
-                          Object {
-                            "text": "Tuesday",
-                            "value": "tue",
-                          },
-                          Object {
-                            "text": "Wednesday",
-                            "value": "wed",
-                          },
-                          Object {
-                            "text": "Thursday",
-                            "value": "thu",
-                          },
-                          Object {
-                            "text": "Friday",
-                            "value": "fri",
-                          },
-                          Object {
-                            "text": "Saturday",
-                            "value": "sat",
-                          },
-                          Object {
-                            "disabled": true,
-                            "text": "Sunday",
-                            "value": "sun",
-                          },
-                        ],
-                      }
-                    }
-                    style={
-                      Array [
-                        Object {
-                          "marginTop": 4,
-                        },
-                        undefined,
-                      ]
-                    }
-                    trailingItem={
-                      Object {
-                        "disabled": true,
-                        "text": "Sunday",
-                        "value": "sun",
-                      }
-                    }
-                  />
-                </View>
-              </View>
-              <View
-                onLayout={[Function]}
-                style={null}
-              >
-                <View>
-                  <View
-                    accessible={true}
-                    collapsable={false}
-                    focusable={true}
-                    nativeID="animatedComponent"
                     onClick={[Function]}
                     onResponderGrant={[Function]}
                     onResponderMove={[Function]}
@@ -5856,10 +3078,14 @@ Array [
               }
             >
               <View
+                accessibilityState={
+                  Object {
+                    "disabled": false,
+                  }
+                }
                 accessible={true}
                 collapsable={false}
                 focusable={true}
-                nativeID="animatedComponent"
                 onClick={[Function]}
                 onResponderGrant={[Function]}
                 onResponderMove={[Function]}
@@ -5922,6 +3148,229 @@ Array [
 ]
 `;
 
+exports[`rendering renders correctly when input is loading 1`] = `
+Array [
+  <View
+    pointerEvents="none"
+  >
+    <View
+      accessible={true}
+      collapsable={false}
+      focusable={true}
+      onClick={[Function]}
+      onResponderGrant={[Function]}
+      onResponderMove={[Function]}
+      onResponderRelease={[Function]}
+      onResponderTerminate={[Function]}
+      onResponderTerminationRequest={[Function]}
+      onStartShouldSetResponder={[Function]}
+      style={
+        Object {
+          "opacity": 1,
+        }
+      }
+    >
+      <View
+        pointerEvents="none"
+      >
+        <View
+          pointerEvents="none"
+          style={
+            Array [
+              Object {
+                "marginVertical": 8,
+                "width": "100%",
+              },
+              undefined,
+            ]
+          }
+        >
+          <View
+            style={
+              Array [
+                Object {
+                  "alignItems": "center",
+                  "flexDirection": "row",
+                  "padding": 16,
+                },
+                undefined,
+              ]
+            }
+          >
+            <View
+              style={
+                Array [
+                  Object {
+                    "borderColor": "#808f91",
+                    "borderRadius": 8,
+                    "borderWidth": 1,
+                    "bottom": 0,
+                    "left": 0,
+                    "position": "absolute",
+                    "right": 0,
+                    "top": 0,
+                  },
+                  undefined,
+                ]
+              }
+              themeFocused={false}
+              themeVariant="readonly"
+            />
+            <View
+              pointerEvents="none"
+              style={
+                Array [
+                  Object {
+                    "backgroundColor": "#ffffff",
+                    "flexDirection": "row",
+                    "left": 16,
+                    "paddingHorizontal": 4,
+                    "position": "absolute",
+                    "top": -10,
+                    "zIndex": 1,
+                  },
+                  undefined,
+                ]
+              }
+            >
+              <Text
+                style={
+                  Array [
+                    Object {
+                      "color": "#001f23",
+                      "fontFamily": "BeVietnamPro-Regular",
+                      "fontSize": 12,
+                      "letterSpacing": 0.36,
+                      "lineHeight": 20,
+                    },
+                    Array [
+                      Object {
+                        "color": "#808f91",
+                      },
+                      undefined,
+                    ],
+                  ]
+                }
+                testID="input-label"
+                themeFontSize="small"
+                themeFontWeight="regular"
+                themeIntent="body"
+                themeTypeface="neutral"
+                themeVariant="readonly"
+              >
+                Allow notifications
+              </Text>
+            </View>
+            <View
+              style={
+                Array [
+                  Object {
+                    "alignItems": "center",
+                    "alignSelf": "stretch",
+                    "flexDirection": "row",
+                    "flexGrow": 2,
+                    "flexShrink": 1,
+                  },
+                  undefined,
+                ]
+              }
+            >
+              <TextInput
+                accessibilityState={
+                  Object {
+                    "disabled": true,
+                  }
+                }
+                editable={true}
+                multiline={true}
+                onBlur={[Function]}
+                onChangeText={[Function]}
+                onFocus={[Function]}
+                placeholder=" "
+                pointerEvents="none"
+                style={
+                  Array [
+                    Object {
+                      "alignSelf": "stretch",
+                      "flexGrow": 2,
+                      "fontSize": 14,
+                      "marginHorizontal": 8,
+                      "paddingVertical": 0,
+                      "textAlignVertical": "center",
+                    },
+                    Object {
+                      "color": "#001f23",
+                    },
+                  ]
+                }
+                testID="text-input"
+                value="Monday, Tuesday"
+              />
+            </View>
+            <View
+              collapsable={false}
+              style={
+                Object {
+                  "transform": Array [
+                    Object {
+                      "rotate": "0deg",
+                    },
+                  ],
+                }
+              }
+            >
+              <HeroIcon
+                name="loading"
+                style={
+                  Array [
+                    Object {
+                      "color": "#001f23",
+                      "fontSize": 16,
+                    },
+                    undefined,
+                  ]
+                }
+                testID="input-suffix"
+                themeIntent="text"
+                themeSize="xsmall"
+              />
+            </View>
+          </View>
+          <View
+            style={
+              Array [
+                Object {
+                  "paddingLeft": 16,
+                },
+                undefined,
+              ]
+            }
+          >
+            <View
+              style={
+                Array [
+                  Object {
+                    "flexDirection": "row",
+                    "justifyContent": "space-between",
+                  },
+                  undefined,
+                ]
+              }
+            />
+          </View>
+        </View>
+      </View>
+    </View>
+  </View>,
+  <Modal
+    hardwareAccelerated={false}
+    onRequestClose={[Function]}
+    transparent={true}
+    visible={false}
+  />,
+]
+`;
+
 exports[`rendering renders correctly when receives sections 1`] = `
 Array [
   <View
@@ -5929,6 +3378,7 @@ Array [
   >
     <View
       accessible={true}
+      collapsable={false}
       focusable={true}
       onClick={[Function]}
       onResponderGrant={[Function]}
@@ -6187,6 +3637,7 @@ Array [
           }
         />
         <RCTSafeAreaView
+          collapsable={false}
           emulateUnlessSupported={true}
           style={
             Object {
@@ -6275,6 +3726,7 @@ Array [
             >
               <View
                 accessible={true}
+                collapsable={false}
                 focusable={true}
                 onClick={[Function]}
                 onResponderGrant={[Function]}
@@ -6493,7 +3945,13 @@ Array [
                     }
                   />
                   <View
+                    accessibilityState={
+                      Object {
+                        "disabled": false,
+                      }
+                    }
                     accessible={true}
+                    collapsable={false}
                     focusable={true}
                     onClick={[Function]}
                     onResponderGrant={[Function]}
@@ -6710,7 +4168,13 @@ Array [
                     }
                   />
                   <View
+                    accessibilityState={
+                      Object {
+                        "disabled": false,
+                      }
+                    }
                     accessible={true}
+                    collapsable={false}
                     focusable={true}
                     onClick={[Function]}
                     onResponderGrant={[Function]}
@@ -6846,7 +4310,13 @@ Array [
               >
                 <View>
                   <View
+                    accessibilityState={
+                      Object {
+                        "disabled": false,
+                      }
+                    }
                     accessible={true}
+                    collapsable={false}
                     focusable={true}
                     onClick={[Function]}
                     onResponderGrant={[Function]}
@@ -7004,7 +4474,13 @@ Array [
               }
             >
               <View
+                accessibilityState={
+                  Object {
+                    "disabled": false,
+                  }
+                }
                 accessible={true}
+                collapsable={false}
                 focusable={true}
                 onClick={[Function]}
                 onResponderGrant={[Function]}