@hero-design/rn 7.10.2 → 7.12.0

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

@@ -1,627 +1,1133 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`OptionList renders correctly 1`] = `
-<View
-  style={
+exports[`OptionList render isLoading correctly 1`] = `
+<RCTScrollView
+  ListFooterComponent={
+    <View
+      style={
+        Object {
+          "alignItems": "center",
+          "display": "flex",
+          "height": 56,
+        }
+      }
+    >
+      <Spinner />
+    </View>
+  }
+  data={
     Array [
       Object {
-        "padding": 16,
+        "text": "A",
+        "value": "a",
+      },
+      Object {
+        "text": "B",
+        "value": "b",
+      },
+      Object {
+        "text": "C",
+        "value": "c",
       },
-      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",
-        "backgroundColor": "#f1e9fb",
-        "borderRadius": 4,
-        "flexDirection": "row",
-        "justifyContent": "space-between",
-        "opacity": 1,
-        "padding": 16,
-      }
+  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]}
+  onScrollToIndexFailed={[Function]}
+  removeClippedSubviews={false}
+  renderItem={[Function]}
+  scrollEventThrottle={50}
+  stickyHeaderIndices={Array []}
+  style={
+    Object {
+      "paddingHorizontal": 16,
     }
-  >
+  }
+  viewabilityConfigCallbackPairs={Array []}
+>
+  <View>
     <View
-      style={
-        Object {
-          "flex": 1,
-        }
-      }
+      onLayout={[Function]}
+      style={null}
     >
-      <Text
-        style={
-          Array [
+      <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 {
-              "color": "#292a2b",
-              "fontFamily": "BeVietnamPro-Regular",
-              "fontSize": 16,
-              "letterSpacing": 0.48,
-              "lineHeight": 24,
-            },
-            undefined,
-          ]
-        }
-        themeFontSize="large"
-        themeFontWeight="regular"
-        themeIntent="body"
-      >
-        A
-      </Text>
+              "alignItems": "center",
+              "backgroundColor": "#f1e9fb",
+              "borderRadius": 4,
+              "flexDirection": "row",
+              "justifyContent": "space-between",
+              "opacity": 1,
+              "padding": 16,
+            }
+          }
+        >
+          <View
+            style={
+              Object {
+                "flex": 1,
+              }
+            }
+          >
+            <Text
+              style={
+                Array [
+                  Object {
+                    "color": "#292a2b",
+                    "fontFamily": "BeVietnamPro-Regular",
+                    "fontSize": 16,
+                    "letterSpacing": 0.48,
+                    "lineHeight": 24,
+                  },
+                  undefined,
+                ]
+              }
+              themeFontSize="large"
+              themeFontWeight="regular"
+              themeIntent="body"
+            >
+              A
+            </Text>
+          </View>
+          <HeroIcon
+            name="checkmark"
+            style={
+              Array [
+                Object {
+                  "color": "#292a2b",
+                  "fontSize": 20,
+                },
+                undefined,
+              ]
+            }
+            themeIntent="text"
+            themeSize="small"
+          />
+        </View>
+      </View>
     </View>
-    <HeroIcon
-      name="checkmark"
-      style={
-        Array [
-          Object {
-            "color": "#292a2b",
-            "fontSize": 20,
-          },
-          undefined,
-        ]
-      }
-      themeIntent="text"
-      themeSize="small"
-    />
-  </View>
-  <View
-    style={
-      Array [
-        Object {
-          "marginTop": 4,
-        },
-        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",
-        "backgroundColor": "#ffffff",
-        "borderRadius": 4,
-        "flexDirection": "row",
-        "justifyContent": "space-between",
-        "opacity": 1,
-        "padding": 16,
-      }
-    }
-  >
     <View
-      style={
-        Object {
-          "flex": 1,
-        }
-      }
+      onLayout={[Function]}
+      style={null}
     >
-      <Text
-        style={
-          Array [
+      <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",
+              "justifyContent": "space-between",
+              "opacity": 1,
+              "padding": 16,
+            }
+          }
+        >
+          <View
+            style={
+              Object {
+                "flex": 1,
+              }
+            }
+          >
+            <Text
+              style={
+                Array [
+                  Object {
+                    "color": "#292a2b",
+                    "fontFamily": "BeVietnamPro-Regular",
+                    "fontSize": 16,
+                    "letterSpacing": 0.48,
+                    "lineHeight": 24,
+                  },
+                  undefined,
+                ]
+              }
+              themeFontSize="large"
+              themeFontWeight="regular"
+              themeIntent="body"
+            >
+              B
+            </Text>
+          </View>
+        </View>
+      </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 {
-              "color": "#292a2b",
-              "fontFamily": "BeVietnamPro-Regular",
-              "fontSize": 16,
-              "letterSpacing": 0.48,
-              "lineHeight": 24,
-            },
-            undefined,
-          ]
+              "alignItems": "center",
+              "backgroundColor": "#ffffff",
+              "borderRadius": 4,
+              "flexDirection": "row",
+              "justifyContent": "space-between",
+              "opacity": 1,
+              "padding": 16,
+            }
+          }
+        >
+          <View
+            style={
+              Object {
+                "flex": 1,
+              }
+            }
+          >
+            <Text
+              style={
+                Array [
+                  Object {
+                    "color": "#292a2b",
+                    "fontFamily": "BeVietnamPro-Regular",
+                    "fontSize": 16,
+                    "letterSpacing": 0.48,
+                    "lineHeight": 24,
+                  },
+                  undefined,
+                ]
+              }
+              themeFontSize="large"
+              themeFontWeight="regular"
+              themeIntent="body"
+            >
+              C
+            </Text>
+          </View>
+        </View>
+      </View>
+    </View>
+    <View
+      onLayout={[Function]}
+    >
+      <View
+        style={
+          Object {
+            "alignItems": "center",
+            "display": "flex",
+            "height": 56,
+          }
         }
-        themeFontSize="large"
-        themeFontWeight="regular"
-        themeIntent="body"
       >
-        B
-      </Text>
+        <View
+          style={
+            Array [
+              Object {},
+              undefined,
+            ]
+          }
+        >
+          <View
+            style={
+              Array [
+                Object {
+                  "alignItems": "center",
+                  "height": "100%",
+                  "justifyContent": "center",
+                },
+                undefined,
+              ]
+            }
+          >
+            <View
+              collapsable={false}
+              nativeID="animatedComponent"
+              style={
+                Object {
+                  "transform": Array [
+                    Object {
+                      "rotate": "0deg",
+                    },
+                  ],
+                }
+              }
+            >
+              <View
+                collapsable={false}
+                nativeID="animatedComponent"
+                style={
+                  Array [
+                    Object {
+                      "flexDirection": "row",
+                      "marginBottom": 8,
+                    },
+                    Object {},
+                  ]
+                }
+                themePosition="top"
+              >
+                <View
+                  collapsable={false}
+                  nativeID="animatedComponent"
+                  style={
+                    Array [
+                      Object {
+                        "backgroundColor": "#7622d7",
+                        "borderRadius": 8,
+                        "height": 16,
+                        "opacity": 1,
+                        "width": 16,
+                      },
+                      Object {},
+                    ]
+                  }
+                  themePosition="topLeft"
+                />
+                <View
+                  collapsable={false}
+                  nativeID="animatedComponent"
+                  style={
+                    Array [
+                      Object {
+                        "backgroundColor": "#7622d7",
+                        "borderRadius": 8,
+                        "height": 16,
+                        "marginLeft": 8,
+                        "opacity": 0.7,
+                        "width": 16,
+                      },
+                      Object {},
+                    ]
+                  }
+                  themePosition="topRight"
+                />
+              </View>
+              <View
+                collapsable={false}
+                nativeID="animatedComponent"
+                style={
+                  Array [
+                    Object {
+                      "flexDirection": "row",
+                      "marginBottom": 0,
+                    },
+                    Object {},
+                  ]
+                }
+                themePosition="bottom"
+              >
+                <View
+                  collapsable={false}
+                  nativeID="animatedComponent"
+                  style={
+                    Array [
+                      Object {
+                        "backgroundColor": "#7622d7",
+                        "borderRadius": 8,
+                        "height": 16,
+                        "opacity": 0.5,
+                        "width": 16,
+                      },
+                      Object {},
+                    ]
+                  }
+                  themePosition="bottomLeft"
+                />
+                <View
+                  collapsable={false}
+                  nativeID="animatedComponent"
+                  style={
+                    Array [
+                      Object {
+                        "backgroundColor": "#7622d7",
+                        "borderRadius": 8,
+                        "height": 16,
+                        "marginLeft": 8,
+                        "opacity": 0.3,
+                        "width": 16,
+                      },
+                      Object {},
+                    ]
+                  }
+                  themePosition="bottomRight"
+                />
+              </View>
+            </View>
+          </View>
+        </View>
+      </View>
     </View>
   </View>
-  <View
-    style={
-      Array [
-        Object {
-          "marginTop": 4,
-        },
-        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={
+</RCTScrollView>
+`;
+
+exports[`OptionList renders correctly 1`] = `
+<RCTScrollView
+  ListFooterComponent={null}
+  data={
+    Array [
       Object {
-        "alignItems": "center",
-        "backgroundColor": "#ffffff",
-        "borderRadius": 4,
-        "flexDirection": "row",
-        "justifyContent": "space-between",
-        "opacity": 1,
-        "padding": 16,
-      }
+        "text": "A",
+        "value": "a",
+      },
+      Object {
+        "text": "B",
+        "value": "b",
+      },
+      Object {
+        "text": "C",
+        "value": "c",
+      },
+    ]
+  }
+  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]}
+  onScrollToIndexFailed={[Function]}
+  removeClippedSubviews={false}
+  renderItem={[Function]}
+  scrollEventThrottle={50}
+  stickyHeaderIndices={Array []}
+  style={
+    Object {
+      "paddingHorizontal": 16,
     }
-  >
+  }
+  viewabilityConfigCallbackPairs={Array []}
+>
+  <View>
     <View
-      style={
-        Object {
-          "flex": 1,
-        }
-      }
+      onLayout={[Function]}
+      style={null}
     >
-      <Text
-        style={
-          Array [
+      <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 {
-              "color": "#292a2b",
-              "fontFamily": "BeVietnamPro-Regular",
-              "fontSize": 16,
-              "letterSpacing": 0.48,
-              "lineHeight": 24,
-            },
-            undefined,
-          ]
-        }
-        themeFontSize="large"
-        themeFontWeight="regular"
-        themeIntent="body"
-      >
-        C
-      </Text>
+              "alignItems": "center",
+              "backgroundColor": "#f1e9fb",
+              "borderRadius": 4,
+              "flexDirection": "row",
+              "justifyContent": "space-between",
+              "opacity": 1,
+              "padding": 16,
+            }
+          }
+        >
+          <View
+            style={
+              Object {
+                "flex": 1,
+              }
+            }
+          >
+            <Text
+              style={
+                Array [
+                  Object {
+                    "color": "#292a2b",
+                    "fontFamily": "BeVietnamPro-Regular",
+                    "fontSize": 16,
+                    "letterSpacing": 0.48,
+                    "lineHeight": 24,
+                  },
+                  undefined,
+                ]
+              }
+              themeFontSize="large"
+              themeFontWeight="regular"
+              themeIntent="body"
+            >
+              A
+            </Text>
+          </View>
+          <HeroIcon
+            name="checkmark"
+            style={
+              Array [
+                Object {
+                  "color": "#292a2b",
+                  "fontSize": 20,
+                },
+                undefined,
+              ]
+            }
+            themeIntent="text"
+            themeSize="small"
+          />
+        </View>
+      </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",
+              "justifyContent": "space-between",
+              "opacity": 1,
+              "padding": 16,
+            }
+          }
+        >
+          <View
+            style={
+              Object {
+                "flex": 1,
+              }
+            }
+          >
+            <Text
+              style={
+                Array [
+                  Object {
+                    "color": "#292a2b",
+                    "fontFamily": "BeVietnamPro-Regular",
+                    "fontSize": 16,
+                    "letterSpacing": 0.48,
+                    "lineHeight": 24,
+                  },
+                  undefined,
+                ]
+              }
+              themeFontSize="large"
+              themeFontWeight="regular"
+              themeIntent="body"
+            >
+              B
+            </Text>
+          </View>
+        </View>
+      </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",
+              "justifyContent": "space-between",
+              "opacity": 1,
+              "padding": 16,
+            }
+          }
+        >
+          <View
+            style={
+              Object {
+                "flex": 1,
+              }
+            }
+          >
+            <Text
+              style={
+                Array [
+                  Object {
+                    "color": "#292a2b",
+                    "fontFamily": "BeVietnamPro-Regular",
+                    "fontSize": 16,
+                    "letterSpacing": 0.48,
+                    "lineHeight": 24,
+                  },
+                  undefined,
+                ]
+              }
+              themeFontSize="large"
+              themeFontWeight="regular"
+              themeIntent="body"
+            >
+              C
+            </Text>
+          </View>
+        </View>
+      </View>
     </View>
   </View>
-</View>
+</RCTScrollView>
 `;
 
 exports[`OptionList trigger onPress correctly on changing selection 1`] = `
-<View
-  style={
+<RCTScrollView
+  ListFooterComponent={null}
+  data={
     Array [
       Object {
-        "padding": 16,
+        "text": "A",
+        "value": "a",
+      },
+      Object {
+        "text": "B",
+        "value": "b",
+      },
+      Object {
+        "text": "C",
+        "value": "c",
       },
-      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",
-        "backgroundColor": "#f1e9fb",
-        "borderRadius": 4,
-        "flexDirection": "row",
-        "justifyContent": "space-between",
-        "opacity": 1,
-        "padding": 16,
-      }
+  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]}
+  onScrollToIndexFailed={[Function]}
+  removeClippedSubviews={false}
+  renderItem={[Function]}
+  scrollEventThrottle={50}
+  stickyHeaderIndices={Array []}
+  style={
+    Object {
+      "paddingHorizontal": 16,
     }
-  >
+  }
+  viewabilityConfigCallbackPairs={Array []}
+>
+  <View>
     <View
-      style={
-        Object {
-          "flex": 1,
-        }
-      }
+      onLayout={[Function]}
+      style={null}
     >
-      <Text
-        style={
-          Array [
+      <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 {
-              "color": "#292a2b",
-              "fontFamily": "BeVietnamPro-Regular",
-              "fontSize": 16,
-              "letterSpacing": 0.48,
-              "lineHeight": 24,
-            },
-            undefined,
-          ]
-        }
-        themeFontSize="large"
-        themeFontWeight="regular"
-        themeIntent="body"
-      >
-        A
-      </Text>
+              "alignItems": "center",
+              "backgroundColor": "#f1e9fb",
+              "borderRadius": 4,
+              "flexDirection": "row",
+              "justifyContent": "space-between",
+              "opacity": 1,
+              "padding": 16,
+            }
+          }
+        >
+          <View
+            style={
+              Object {
+                "flex": 1,
+              }
+            }
+          >
+            <Text
+              style={
+                Array [
+                  Object {
+                    "color": "#292a2b",
+                    "fontFamily": "BeVietnamPro-Regular",
+                    "fontSize": 16,
+                    "letterSpacing": 0.48,
+                    "lineHeight": 24,
+                  },
+                  undefined,
+                ]
+              }
+              themeFontSize="large"
+              themeFontWeight="regular"
+              themeIntent="body"
+            >
+              A
+            </Text>
+          </View>
+          <HeroIcon
+            name="checkmark"
+            style={
+              Array [
+                Object {
+                  "color": "#292a2b",
+                  "fontSize": 20,
+                },
+                undefined,
+              ]
+            }
+            themeIntent="text"
+            themeSize="small"
+          />
+        </View>
+      </View>
     </View>
-    <HeroIcon
-      name="checkmark"
-      style={
-        Array [
-          Object {
-            "color": "#292a2b",
-            "fontSize": 20,
-          },
-          undefined,
-        ]
-      }
-      themeIntent="text"
-      themeSize="small"
-    />
-  </View>
-  <View
-    style={
-      Array [
-        Object {
-          "marginTop": 4,
-        },
-        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",
-        "backgroundColor": "#f1e9fb",
-        "borderRadius": 4,
-        "flexDirection": "row",
-        "justifyContent": "space-between",
-        "opacity": 1,
-        "padding": 16,
-      }
-    }
-  >
     <View
-      style={
-        Object {
-          "flex": 1,
-        }
-      }
+      onLayout={[Function]}
+      style={null}
     >
-      <Text
-        style={
-          Array [
+      <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 {
-              "color": "#292a2b",
-              "fontFamily": "BeVietnamPro-Regular",
-              "fontSize": 16,
-              "letterSpacing": 0.48,
-              "lineHeight": 24,
-            },
-            undefined,
-          ]
-        }
-        themeFontSize="large"
-        themeFontWeight="regular"
-        themeIntent="body"
-      >
-        B
-      </Text>
+              "alignItems": "center",
+              "backgroundColor": "#f1e9fb",
+              "borderRadius": 4,
+              "flexDirection": "row",
+              "justifyContent": "space-between",
+              "opacity": 1,
+              "padding": 16,
+            }
+          }
+        >
+          <View
+            style={
+              Object {
+                "flex": 1,
+              }
+            }
+          >
+            <Text
+              style={
+                Array [
+                  Object {
+                    "color": "#292a2b",
+                    "fontFamily": "BeVietnamPro-Regular",
+                    "fontSize": 16,
+                    "letterSpacing": 0.48,
+                    "lineHeight": 24,
+                  },
+                  undefined,
+                ]
+              }
+              themeFontSize="large"
+              themeFontWeight="regular"
+              themeIntent="body"
+            >
+              B
+            </Text>
+          </View>
+          <HeroIcon
+            name="checkmark"
+            style={
+              Array [
+                Object {
+                  "color": "#292a2b",
+                  "fontSize": 20,
+                },
+                undefined,
+              ]
+            }
+            themeIntent="text"
+            themeSize="small"
+          />
+        </View>
+      </View>
     </View>
-    <HeroIcon
-      name="checkmark"
-      style={
-        Array [
-          Object {
-            "color": "#292a2b",
-            "fontSize": 20,
-          },
-          undefined,
-        ]
-      }
-      themeIntent="text"
-      themeSize="small"
-    />
-  </View>
-  <View
-    style={
-      Array [
-        Object {
-          "marginTop": 4,
-        },
-        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",
-        "backgroundColor": "#ffffff",
-        "borderRadius": 4,
-        "flexDirection": "row",
-        "justifyContent": "space-between",
-        "opacity": 1,
-        "padding": 16,
-      }
-    }
-  >
     <View
-      style={
-        Object {
-          "flex": 1,
-        }
-      }
+      onLayout={[Function]}
+      style={null}
     >
-      <Text
-        style={
-          Array [
+      <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 {
-              "color": "#292a2b",
-              "fontFamily": "BeVietnamPro-Regular",
-              "fontSize": 16,
-              "letterSpacing": 0.48,
-              "lineHeight": 24,
-            },
-            undefined,
-          ]
-        }
-        themeFontSize="large"
-        themeFontWeight="regular"
-        themeIntent="body"
-      >
-        C
-      </Text>
+              "alignItems": "center",
+              "backgroundColor": "#ffffff",
+              "borderRadius": 4,
+              "flexDirection": "row",
+              "justifyContent": "space-between",
+              "opacity": 1,
+              "padding": 16,
+            }
+          }
+        >
+          <View
+            style={
+              Object {
+                "flex": 1,
+              }
+            }
+          >
+            <Text
+              style={
+                Array [
+                  Object {
+                    "color": "#292a2b",
+                    "fontFamily": "BeVietnamPro-Regular",
+                    "fontSize": 16,
+                    "letterSpacing": 0.48,
+                    "lineHeight": 24,
+                  },
+                  undefined,
+                ]
+              }
+              themeFontSize="large"
+              themeFontWeight="regular"
+              themeIntent="body"
+            >
+              C
+            </Text>
+          </View>
+        </View>
+      </View>
     </View>
   </View>
-</View>
+</RCTScrollView>
 `;
 
 exports[`OptionList trigger onPress correctly on select additional value 1`] = `
-<View
-  style={
+<RCTScrollView
+  ListFooterComponent={null}
+  data={
     Array [
       Object {
-        "padding": 16,
+        "text": "A",
+        "value": "a",
+      },
+      Object {
+        "text": "B",
+        "value": "b",
+      },
+      Object {
+        "text": "C",
+        "value": "c",
       },
-      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",
-        "backgroundColor": "#f1e9fb",
-        "borderRadius": 4,
-        "flexDirection": "row",
-        "justifyContent": "space-between",
-        "opacity": 1,
-        "padding": 16,
-      }
+  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]}
+  onScrollToIndexFailed={[Function]}
+  removeClippedSubviews={false}
+  renderItem={[Function]}
+  scrollEventThrottle={50}
+  stickyHeaderIndices={Array []}
+  style={
+    Object {
+      "paddingHorizontal": 16,
     }
-  >
+  }
+  viewabilityConfigCallbackPairs={Array []}
+>
+  <View>
     <View
-      style={
-        Object {
-          "flex": 1,
-        }
-      }
+      onLayout={[Function]}
+      style={null}
     >
-      <Text
-        style={
-          Array [
+      <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 {
-              "color": "#292a2b",
-              "fontFamily": "BeVietnamPro-Regular",
-              "fontSize": 16,
-              "letterSpacing": 0.48,
-              "lineHeight": 24,
-            },
-            undefined,
-          ]
-        }
-        themeFontSize="large"
-        themeFontWeight="regular"
-        themeIntent="body"
-      >
-        A
-      </Text>
+              "alignItems": "center",
+              "backgroundColor": "#f1e9fb",
+              "borderRadius": 4,
+              "flexDirection": "row",
+              "justifyContent": "space-between",
+              "opacity": 1,
+              "padding": 16,
+            }
+          }
+        >
+          <View
+            style={
+              Object {
+                "flex": 1,
+              }
+            }
+          >
+            <Text
+              style={
+                Array [
+                  Object {
+                    "color": "#292a2b",
+                    "fontFamily": "BeVietnamPro-Regular",
+                    "fontSize": 16,
+                    "letterSpacing": 0.48,
+                    "lineHeight": 24,
+                  },
+                  undefined,
+                ]
+              }
+              themeFontSize="large"
+              themeFontWeight="regular"
+              themeIntent="body"
+            >
+              A
+            </Text>
+          </View>
+          <HeroIcon
+            name="checkmark"
+            style={
+              Array [
+                Object {
+                  "color": "#292a2b",
+                  "fontSize": 20,
+                },
+                undefined,
+              ]
+            }
+            themeIntent="text"
+            themeSize="small"
+          />
+        </View>
+      </View>
     </View>
-    <HeroIcon
-      name="checkmark"
-      style={
-        Array [
-          Object {
-            "color": "#292a2b",
-            "fontSize": 20,
-          },
-          undefined,
-        ]
-      }
-      themeIntent="text"
-      themeSize="small"
-    />
-  </View>
-  <View
-    style={
-      Array [
-        Object {
-          "marginTop": 4,
-        },
-        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",
-        "backgroundColor": "#ffffff",
-        "borderRadius": 4,
-        "flexDirection": "row",
-        "justifyContent": "space-between",
-        "opacity": 1,
-        "padding": 16,
-      }
-    }
-  >
     <View
-      style={
-        Object {
-          "flex": 1,
-        }
-      }
+      onLayout={[Function]}
+      style={null}
     >
-      <Text
-        style={
-          Array [
+      <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 {
-              "color": "#292a2b",
-              "fontFamily": "BeVietnamPro-Regular",
-              "fontSize": 16,
-              "letterSpacing": 0.48,
-              "lineHeight": 24,
-            },
-            undefined,
-          ]
-        }
-        themeFontSize="large"
-        themeFontWeight="regular"
-        themeIntent="body"
-      >
-        B
-      </Text>
+              "alignItems": "center",
+              "backgroundColor": "#ffffff",
+              "borderRadius": 4,
+              "flexDirection": "row",
+              "justifyContent": "space-between",
+              "opacity": 1,
+              "padding": 16,
+            }
+          }
+        >
+          <View
+            style={
+              Object {
+                "flex": 1,
+              }
+            }
+          >
+            <Text
+              style={
+                Array [
+                  Object {
+                    "color": "#292a2b",
+                    "fontFamily": "BeVietnamPro-Regular",
+                    "fontSize": 16,
+                    "letterSpacing": 0.48,
+                    "lineHeight": 24,
+                  },
+                  undefined,
+                ]
+              }
+              themeFontSize="large"
+              themeFontWeight="regular"
+              themeIntent="body"
+            >
+              B
+            </Text>
+          </View>
+        </View>
+      </View>
     </View>
-  </View>
-  <View
-    style={
-      Array [
-        Object {
-          "marginTop": 4,
-        },
-        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",
-        "backgroundColor": "#ffffff",
-        "borderRadius": 4,
-        "flexDirection": "row",
-        "justifyContent": "space-between",
-        "opacity": 1,
-        "padding": 16,
-      }
-    }
-  >
     <View
-      style={
-        Object {
-          "flex": 1,
-        }
-      }
+      onLayout={[Function]}
+      style={null}
     >
-      <Text
-        style={
-          Array [
+      <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 {
-              "color": "#292a2b",
-              "fontFamily": "BeVietnamPro-Regular",
-              "fontSize": 16,
-              "letterSpacing": 0.48,
-              "lineHeight": 24,
-            },
-            undefined,
-          ]
-        }
-        themeFontSize="large"
-        themeFontWeight="regular"
-        themeIntent="body"
-      >
-        C
-      </Text>
+              "alignItems": "center",
+              "backgroundColor": "#ffffff",
+              "borderRadius": 4,
+              "flexDirection": "row",
+              "justifyContent": "space-between",
+              "opacity": 1,
+              "padding": 16,
+            }
+          }
+        >
+          <View
+            style={
+              Object {
+                "flex": 1,
+              }
+            }
+          >
+            <Text
+              style={
+                Array [
+                  Object {
+                    "color": "#292a2b",
+                    "fontFamily": "BeVietnamPro-Regular",
+                    "fontSize": 16,
+                    "letterSpacing": 0.48,
+                    "lineHeight": 24,
+                  },
+                  undefined,
+                ]
+              }
+              themeFontSize="large"
+              themeFontWeight="regular"
+              themeIntent="body"
+            >
+              C
+            </Text>
+          </View>
+        </View>
+      </View>
     </View>
   </View>
-</View>
+</RCTScrollView>
 `;