@hero-design/rn 8.32.0 → 8.33.0

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

@@ -2261,6 +2261,7 @@ Array [
                             },
                           ]
                         }
+                        testID="selected-icon-Monday"
                         themeIntent="primary"
                         themeSize="small"
                       />
@@ -2416,6 +2417,7 @@ Array [
                             },
                           ]
                         }
+                        testID="selected-icon-Tuesday"
                         themeIntent="primary"
                         themeSize="small"
                       />
@@ -4357,6 +4359,7 @@ Array [
                             },
                           ]
                         }
+                        testID="selected-icon-B1"
                         themeIntent="primary"
                         themeSize="small"
                       />
@@ -4502,6 +4505,7 @@ Array [
                             },
                           ]
                         }
+                        testID="selected-icon-B2"
                         themeIntent="primary"
                         themeSize="small"
                       />
@@ -4646,3 +4650,1165 @@ Array [
   </Modal>,
 ]
 `;
+
+exports[`rendering renders correctly when receives sections 2`] = `
+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 {
+                "marginTop": 8,
+                "width": "100%",
+              },
+              undefined,
+            ]
+          }
+        >
+          <View
+            style={
+              Array [
+                Object {
+                  "alignItems": "center",
+                  "backgroundColor": "#ffffff",
+                  "borderRadius": 8,
+                  "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,
+                  },
+                  Array [
+                    Object {
+                      "backgroundColor": "#ffffff",
+                    },
+                    undefined,
+                  ],
+                ]
+              }
+              testID="text-input-border"
+              themeFocused={false}
+              themeState="filled"
+            />
+            <View
+              pointerEvents="none"
+              style={
+                Array [
+                  Object {
+                    "backgroundColor": "#ffffff",
+                    "flexDirection": "row",
+                    "left": 16,
+                    "paddingHorizontal": 4,
+                    "position": "absolute",
+                    "top": -4,
+                    "zIndex": 1,
+                  },
+                  Object {
+                    "backgroundColor": "#ffffff",
+                  },
+                ]
+              }
+              testID="label-container"
+            >
+              <Text
+                allowFontScaling={false}
+                style={
+                  Array [
+                    Object {
+                      "color": "#001f23",
+                      "fontFamily": "BeVietnamPro-Regular",
+                      "fontSize": 14,
+                      "letterSpacing": 0.42,
+                      "lineHeight": 22,
+                    },
+                    Array [
+                      Object {
+                        "color": "#001f23",
+                        "fontSize": 12,
+                        "lineHeight": 12,
+                      },
+                      Object {
+                        "backgroundColor": "#ffffff",
+                      },
+                    ],
+                  ]
+                }
+                testID="input-label"
+                themeFontSize="medium"
+                themeFontWeight="regular"
+                themeIntent="body"
+                themeState="filled"
+                themeTypeface="neutral"
+              >
+                Allow notifications
+              </Text>
+            </View>
+            <View
+              style={
+                Array [
+                  Object {
+                    "alignItems": "center",
+                    "alignSelf": "stretch",
+                    "flexDirection": "row",
+                    "flexGrow": 2,
+                    "flexShrink": 1,
+                  },
+                  undefined,
+                ]
+              }
+            >
+              <TextInput
+                accessibilityState={
+                  Object {
+                    "disabled": false,
+                  }
+                }
+                allowFontScaling={false}
+                editable={true}
+                multiline={true}
+                onBlur={[Function]}
+                onChangeText={[Function]}
+                onFocus={[Function]}
+                placeholder=" "
+                pointerEvents="none"
+                style={
+                  Array [
+                    Object {
+                      "alignSelf": "stretch",
+                      "flexGrow": 2,
+                      "fontFamily": "BeVietnamPro-Regular",
+                      "fontSize": 16,
+                      "height": undefined,
+                      "marginHorizontal": 8,
+                      "maxHeight": 144,
+                      "paddingVertical": 0,
+                      "textAlignVertical": "center",
+                    },
+                    Object {
+                      "backgroundColor": "#ffffff",
+                      "color": "#001f23",
+                    },
+                  ]
+                }
+                testID="text-input"
+                themeVariant="text"
+                value="A1"
+              />
+            </View>
+            <HeroIcon
+              name="arrow-down"
+              style={
+                Array [
+                  Object {
+                    "color": "#001f23",
+                    "fontSize": 24,
+                  },
+                  undefined,
+                ]
+              }
+              testID="input-suffix"
+              themeIntent="text"
+              themeSize="medium"
+            />
+          </View>
+          <View
+            style={
+              Array [
+                Object {
+                  "minHeight": 16,
+                  "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
+          collapsable={false}
+          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
+                allowFontScaling={false}
+                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}
+                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>
+          <RCTScrollView
+            ListFooterComponent={null}
+            data={
+              Array [
+                Object {
+                  "category": "A",
+                  "data": Array [
+                    Object {
+                      "text": "A1",
+                      "value": "a1",
+                    },
+                  ],
+                },
+                Object {
+                  "category": "B",
+                  "data": Array [
+                    Object {
+                      "text": "B1",
+                      "value": "b1",
+                    },
+                    Object {
+                      "text": "B2",
+                      "value": "b2",
+                    },
+                  ],
+                },
+              ]
+            }
+            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]}
+            renderItem={[Function]}
+            scrollEventThrottle={50}
+            stickyHeaderIndices={
+              Array [
+                0,
+                3,
+              ]
+            }
+            style={
+              Array [
+                Object {
+                  "paddingHorizontal": 12,
+                },
+                Object {},
+              ]
+            }
+          >
+            <View>
+              <View
+                onLayout={[Function]}
+                style={null}
+              >
+                <View
+                  style={
+                    Array [
+                      Object {
+                        "alignContent": "center",
+                        "backgroundColor": "#f6f6f7",
+                        "display": "flex",
+                        "flexDirection": "row",
+                        "justifyContent": "space-between",
+                        "marginBottom": 16,
+                        "paddingHorizontal": 16,
+                        "paddingVertical": 8,
+                      },
+                      Object {
+                        "marginBottom": 0,
+                      },
+                    ]
+                  }
+                >
+                  <View
+                    style={
+                      Array [
+                        Object {
+                          "display": "flex",
+                          "flexDirection": "row",
+                        },
+                        undefined,
+                      ]
+                    }
+                  >
+                    <View
+                      style={
+                        Array [
+                          Object {
+                            "marginRight": 8,
+                          },
+                          undefined,
+                        ]
+                      }
+                    />
+                    <Text
+                      allowFontScaling={false}
+                      style={
+                        Array [
+                          Object {
+                            "color": "#001f23",
+                            "fontFamily": "BeVietnamPro-Regular",
+                            "fontSize": 16,
+                            "letterSpacing": 0.48,
+                            "lineHeight": 24,
+                          },
+                          undefined,
+                        ]
+                      }
+                      themeFontSize="large"
+                      themeFontWeight="regular"
+                      themeIntent="body"
+                      themeTypeface="neutral"
+                    >
+                      A
+                    </Text>
+                  </View>
+                </View>
+              </View>
+              <View
+                onLayout={[Function]}
+                style={null}
+              >
+                <View>
+                  <View
+                    highlighted={false}
+                    section={
+                      Object {
+                        "category": "A",
+                        "data": Array [
+                          Object {
+                            "text": "A1",
+                            "value": "a1",
+                          },
+                        ],
+                      }
+                    }
+                    style={
+                      Array [
+                        Object {
+                          "marginTop": 12,
+                        },
+                        undefined,
+                      ]
+                    }
+                    trailingItem={
+                      Object {
+                        "text": "A1",
+                        "value": "a1",
+                      }
+                    }
+                    trailingSection={
+                      Object {
+                        "category": "B",
+                        "data": Array [
+                          Object {
+                            "text": "B1",
+                            "value": "b1",
+                          },
+                          Object {
+                            "text": "B2",
+                            "value": "b2",
+                          },
+                        ],
+                      }
+                    }
+                  />
+                  <View
+                    accessibilityState={
+                      Object {
+                        "disabled": false,
+                      }
+                    }
+                    accessible={true}
+                    focusable={true}
+                    onClick={[Function]}
+                    onResponderGrant={[Function]}
+                    onResponderMove={[Function]}
+                    onResponderRelease={[Function]}
+                    onResponderTerminate={[Function]}
+                    onResponderTerminationRequest={[Function]}
+                    onStartShouldSetResponder={[Function]}
+                    style={
+                      Array [
+                        Object {
+                          "alignItems": "center",
+                          "backgroundColor": "#ece8ef",
+                          "borderRadius": 4,
+                          "flexDirection": "row",
+                          "opacity": 1,
+                          "padding": 16,
+                        },
+                        undefined,
+                      ]
+                    }
+                  >
+                    <View
+                      style={
+                        Array [
+                          Object {
+                            "flex": 1,
+                          },
+                          undefined,
+                        ]
+                      }
+                    >
+                      <Text
+                        allowFontScaling={false}
+                        style={
+                          Array [
+                            Object {
+                              "color": "#001f23",
+                              "fontFamily": "BeVietnamPro-Regular",
+                              "fontSize": 16,
+                              "letterSpacing": 0.48,
+                              "lineHeight": 24,
+                            },
+                            undefined,
+                          ]
+                        }
+                        themeFontSize="large"
+                        themeFontWeight="regular"
+                        themeIntent="body"
+                        themeTypeface="neutral"
+                      >
+                        A1
+                      </Text>
+                    </View>
+                    <View
+                      style={
+                        Array [
+                          Object {
+                            "marginLeft": 8,
+                          },
+                          undefined,
+                        ]
+                      }
+                    >
+                      <HeroIcon
+                        name="checkmark"
+                        style={
+                          Array [
+                            Object {
+                              "color": "#401960",
+                              "fontSize": 20,
+                            },
+                            Object {
+                              "marginRight": 12,
+                            },
+                          ]
+                        }
+                        testID="selected-icon-A1"
+                        themeIntent="primary"
+                        themeSize="small"
+                      />
+                    </View>
+                  </View>
+                  <View
+                    highlighted={false}
+                    leadingItem={
+                      Object {
+                        "text": "A1",
+                        "value": "a1",
+                      }
+                    }
+                    section={
+                      Object {
+                        "category": "A",
+                        "data": Array [
+                          Object {
+                            "text": "A1",
+                            "value": "a1",
+                          },
+                        ],
+                      }
+                    }
+                    style={
+                      Array [
+                        Object {
+                          "marginTop": 12,
+                        },
+                        undefined,
+                      ]
+                    }
+                    trailingSection={
+                      Object {
+                        "category": "B",
+                        "data": Array [
+                          Object {
+                            "text": "B1",
+                            "value": "b1",
+                          },
+                          Object {
+                            "text": "B2",
+                            "value": "b2",
+                          },
+                        ],
+                      }
+                    }
+                  />
+                </View>
+              </View>
+              <View
+                onLayout={[Function]}
+                style={null}
+              />
+              <View
+                onLayout={[Function]}
+                style={null}
+              >
+                <View
+                  style={
+                    Array [
+                      Object {
+                        "alignContent": "center",
+                        "backgroundColor": "#f6f6f7",
+                        "display": "flex",
+                        "flexDirection": "row",
+                        "justifyContent": "space-between",
+                        "marginBottom": 16,
+                        "paddingHorizontal": 16,
+                        "paddingVertical": 8,
+                      },
+                      Object {
+                        "marginBottom": 0,
+                      },
+                    ]
+                  }
+                >
+                  <View
+                    style={
+                      Array [
+                        Object {
+                          "display": "flex",
+                          "flexDirection": "row",
+                        },
+                        undefined,
+                      ]
+                    }
+                  >
+                    <View
+                      style={
+                        Array [
+                          Object {
+                            "marginRight": 8,
+                          },
+                          undefined,
+                        ]
+                      }
+                    />
+                    <Text
+                      allowFontScaling={false}
+                      style={
+                        Array [
+                          Object {
+                            "color": "#001f23",
+                            "fontFamily": "BeVietnamPro-Regular",
+                            "fontSize": 16,
+                            "letterSpacing": 0.48,
+                            "lineHeight": 24,
+                          },
+                          undefined,
+                        ]
+                      }
+                      themeFontSize="large"
+                      themeFontWeight="regular"
+                      themeIntent="body"
+                      themeTypeface="neutral"
+                    >
+                      B
+                    </Text>
+                  </View>
+                </View>
+              </View>
+              <View
+                onLayout={[Function]}
+                style={null}
+              >
+                <View>
+                  <View
+                    highlighted={false}
+                    leadingSection={
+                      Object {
+                        "category": "A",
+                        "data": Array [
+                          Object {
+                            "text": "A1",
+                            "value": "a1",
+                          },
+                        ],
+                      }
+                    }
+                    section={
+                      Object {
+                        "category": "B",
+                        "data": Array [
+                          Object {
+                            "text": "B1",
+                            "value": "b1",
+                          },
+                          Object {
+                            "text": "B2",
+                            "value": "b2",
+                          },
+                        ],
+                      }
+                    }
+                    style={
+                      Array [
+                        Object {
+                          "marginTop": 12,
+                        },
+                        undefined,
+                      ]
+                    }
+                    trailingItem={
+                      Object {
+                        "text": "B1",
+                        "value": "b1",
+                      }
+                    }
+                  />
+                  <View
+                    accessibilityState={
+                      Object {
+                        "disabled": false,
+                      }
+                    }
+                    accessible={true}
+                    focusable={true}
+                    onClick={[Function]}
+                    onResponderGrant={[Function]}
+                    onResponderMove={[Function]}
+                    onResponderRelease={[Function]}
+                    onResponderTerminate={[Function]}
+                    onResponderTerminationRequest={[Function]}
+                    onStartShouldSetResponder={[Function]}
+                    style={
+                      Array [
+                        Object {
+                          "alignItems": "center",
+                          "backgroundColor": "#ffffff",
+                          "borderRadius": 4,
+                          "flexDirection": "row",
+                          "opacity": 1,
+                          "padding": 16,
+                        },
+                        undefined,
+                      ]
+                    }
+                  >
+                    <View
+                      style={
+                        Array [
+                          Object {
+                            "flex": 1,
+                          },
+                          undefined,
+                        ]
+                      }
+                    >
+                      <Text
+                        allowFontScaling={false}
+                        style={
+                          Array [
+                            Object {
+                              "color": "#001f23",
+                              "fontFamily": "BeVietnamPro-Regular",
+                              "fontSize": 16,
+                              "letterSpacing": 0.48,
+                              "lineHeight": 24,
+                            },
+                            undefined,
+                          ]
+                        }
+                        themeFontSize="large"
+                        themeFontWeight="regular"
+                        themeIntent="body"
+                        themeTypeface="neutral"
+                      >
+                        B1
+                      </Text>
+                    </View>
+                  </View>
+                  <View
+                    highlighted={false}
+                    leadingItem={
+                      Object {
+                        "text": "B1",
+                        "value": "b1",
+                      }
+                    }
+                    leadingSection={
+                      Object {
+                        "category": "A",
+                        "data": Array [
+                          Object {
+                            "text": "A1",
+                            "value": "a1",
+                          },
+                        ],
+                      }
+                    }
+                    section={
+                      Object {
+                        "category": "B",
+                        "data": Array [
+                          Object {
+                            "text": "B1",
+                            "value": "b1",
+                          },
+                          Object {
+                            "text": "B2",
+                            "value": "b2",
+                          },
+                        ],
+                      }
+                    }
+                    style={
+                      Array [
+                        Object {
+                          "marginTop": 4,
+                        },
+                        undefined,
+                      ]
+                    }
+                    trailingItem={
+                      Object {
+                        "text": "B2",
+                        "value": "b2",
+                      }
+                    }
+                  />
+                </View>
+              </View>
+              <View
+                onLayout={[Function]}
+                style={null}
+              >
+                <View>
+                  <View
+                    accessibilityState={
+                      Object {
+                        "disabled": false,
+                      }
+                    }
+                    accessible={true}
+                    focusable={true}
+                    onClick={[Function]}
+                    onResponderGrant={[Function]}
+                    onResponderMove={[Function]}
+                    onResponderRelease={[Function]}
+                    onResponderTerminate={[Function]}
+                    onResponderTerminationRequest={[Function]}
+                    onStartShouldSetResponder={[Function]}
+                    style={
+                      Array [
+                        Object {
+                          "alignItems": "center",
+                          "backgroundColor": "#ffffff",
+                          "borderRadius": 4,
+                          "flexDirection": "row",
+                          "opacity": 1,
+                          "padding": 16,
+                        },
+                        undefined,
+                      ]
+                    }
+                  >
+                    <View
+                      style={
+                        Array [
+                          Object {
+                            "flex": 1,
+                          },
+                          undefined,
+                        ]
+                      }
+                    >
+                      <Text
+                        allowFontScaling={false}
+                        style={
+                          Array [
+                            Object {
+                              "color": "#001f23",
+                              "fontFamily": "BeVietnamPro-Regular",
+                              "fontSize": 16,
+                              "letterSpacing": 0.48,
+                              "lineHeight": 24,
+                            },
+                            undefined,
+                          ]
+                        }
+                        themeFontSize="large"
+                        themeFontWeight="regular"
+                        themeIntent="body"
+                        themeTypeface="neutral"
+                      >
+                        B2
+                      </Text>
+                    </View>
+                  </View>
+                  <View
+                    highlighted={false}
+                    leadingItem={
+                      Object {
+                        "text": "B2",
+                        "value": "b2",
+                      }
+                    }
+                    leadingSection={
+                      Object {
+                        "category": "A",
+                        "data": Array [
+                          Object {
+                            "text": "A1",
+                            "value": "a1",
+                          },
+                        ],
+                      }
+                    }
+                    section={
+                      Object {
+                        "category": "B",
+                        "data": Array [
+                          Object {
+                            "text": "B1",
+                            "value": "b1",
+                          },
+                          Object {
+                            "text": "B2",
+                            "value": "b2",
+                          },
+                        ],
+                      }
+                    }
+                    style={
+                      Array [
+                        Object {
+                          "marginTop": 12,
+                        },
+                        undefined,
+                      ]
+                    }
+                  />
+                </View>
+              </View>
+              <View
+                onLayout={[Function]}
+                style={null}
+              />
+            </View>
+          </RCTScrollView>
+          <View>
+            <View
+              style={
+                Array [
+                  Object {
+                    "alignItems": "center",
+                    "flexDirection": "row",
+                    "justifyContent": "flex-end",
+                    "paddingHorizontal": 12,
+                    "paddingVertical": 2,
+                  },
+                  undefined,
+                ]
+              }
+            >
+              <View
+                accessibilityState={
+                  Object {
+                    "disabled": false,
+                  }
+                }
+                accessible={true}
+                focusable={true}
+                onClick={[Function]}
+                onResponderGrant={[Function]}
+                onResponderMove={[Function]}
+                onResponderRelease={[Function]}
+                onResponderTerminate={[Function]}
+                onResponderTerminationRequest={[Function]}
+                onStartShouldSetResponder={[Function]}
+                style={
+                  Array [
+                    Object {
+                      "alignItems": "center",
+                      "backgroundColor": "transparent",
+                      "borderRadius": 4,
+                      "borderWidth": 0,
+                      "flexDirection": "row",
+                      "justifyContent": "center",
+                      "padding": 12,
+                    },
+                    undefined,
+                  ]
+                }
+              >
+                <Text
+                  allowFontScaling={false}
+                  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,
+                          "textAlign": "center",
+                        },
+                        undefined,
+                      ],
+                    ]
+                  }
+                  themeFontSize="medium"
+                  themeFontWeight="regular"
+                  themeIntent="body"
+                  themeTypeface="neutral"
+                  themeVariant="text-primary"
+                >
+                  Confirm
+                </Text>
+              </View>
+            </View>
+          </View>
+        </RCTSafeAreaView>
+      </View>
+    </View>
+  </Modal>,
+]
+`;