@tactics/toddle-styleguide 5.0.2 → 5.0.5

package/src/components/organisms/text-bubble/__snapshots__/text-bubble.test.js.snap

@@ -0,0 +1,3046 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`test text-bubble given the bubbleAlignment is SENT return a text-bubble with right-bottom tip 1`] = `
+<View
+  style={
+    {
+      "gap": 4,
+      "width": "100%",
+    }
+  }
+>
+  <View
+    style={
+      {
+        "minWidth": "50%",
+      }
+    }
+  >
+    <View
+      style={
+        {
+          "flexDirection": "row",
+          "gap": 12,
+        }
+      }
+    >
+      <View
+        style={
+          {
+            "justifyContent": "center",
+            "padding": 2,
+          }
+        }
+      >
+        <RNSVGSvgView
+          align="xMidYMid"
+          bbHeight="26"
+          bbWidth="26"
+          fill="none"
+          focusable={false}
+          height={26}
+          meetOrSlice={0}
+          minX={0}
+          minY={0}
+          style={
+            [
+              {
+                "backgroundColor": "transparent",
+                "borderWidth": 0,
+              },
+              {
+                "flex": 0,
+                "height": 26,
+                "width": 26,
+              },
+            ]
+          }
+          vbHeight={23}
+          vbWidth={22}
+          width={26}
+        >
+          <RNSVGGroup
+            fill={null}
+            propList={
+              [
+                "fill",
+              ]
+            }
+          >
+            <RNSVGPath
+              d="M11 7V11.5M11 16H11.0108M20.75 11.5C20.75 17.0919 16.3848 21.625 11 21.625C5.61522 21.625 1.25 17.0919 1.25 11.5C1.25 5.90812 5.61522 1.375 11 1.375C16.3848 1.375 20.75 5.90812 20.75 11.5Z"
+              fill={
+                {
+                  "payload": 4278190080,
+                  "type": 0,
+                }
+              }
+              propList={
+                [
+                  "stroke",
+                  "strokeWidth",
+                  "strokeLinecap",
+                  "strokeLinejoin",
+                ]
+              }
+              stroke={
+                {
+                  "payload": 4294010984,
+                  "type": 0,
+                }
+              }
+              strokeLinecap={1}
+              strokeLinejoin={1}
+              strokeWidth="2"
+            />
+          </RNSVGGroup>
+        </RNSVGSvgView>
+      </View>
+      <View
+        style={
+          {
+            "backgroundColor": "#F16868",
+            "borderBottomLeftRadius": 8,
+            "borderBottomRightRadius": 32,
+            "borderTopLeftRadius": 24,
+            "borderTopRightRadius": 24,
+            "flex": 1,
+            "justifyContent": "center",
+            "paddingBottom": 16,
+            "paddingLeft": 24,
+            "paddingRight": 24,
+            "paddingTop": 16,
+          }
+        }
+      >
+        <View
+          collapsable={false}
+          handlerTag={7}
+          handlerType="PanGestureHandler"
+          onGestureHandlerEvent={[Function]}
+          onGestureHandlerStateChange={[Function]}
+          onLayout={[Function]}
+          style={
+            {
+              "overflow": "hidden",
+            }
+          }
+        >
+          <View
+            collapsable={false}
+            style={
+              {
+                "bottom": 0,
+                "flexDirection": "row-reverse",
+                "left": 0,
+                "position": "absolute",
+                "right": 0,
+                "top": 0,
+                "transform": [
+                  {
+                    "translateX": -10000,
+                  },
+                ],
+              }
+            }
+          >
+            <View
+              style={
+                {
+                  "alignItems": "center",
+                  "flex": 1,
+                  "flexDirection": "row",
+                  "justifyContent": "space-evenly",
+                }
+              }
+            >
+              <View
+                collapsable={false}
+                style={
+                  {
+                    "alignItems": "center",
+                    "justifyContent": "center",
+                    "opacity": 0,
+                  }
+                }
+              >
+                <View
+                  accessibilityState={
+                    {
+                      "busy": undefined,
+                      "checked": undefined,
+                      "disabled": undefined,
+                      "expanded": undefined,
+                      "selected": undefined,
+                    }
+                  }
+                  accessibilityValue={
+                    {
+                      "max": undefined,
+                      "min": undefined,
+                      "now": undefined,
+                      "text": undefined,
+                    }
+                  }
+                  accessible={true}
+                  collapsable={false}
+                  focusable={true}
+                  onBlur={[Function]}
+                  onClick={[Function]}
+                  onFocus={[Function]}
+                  onResponderGrant={[Function]}
+                  onResponderMove={[Function]}
+                  onResponderRelease={[Function]}
+                  onResponderTerminate={[Function]}
+                  onResponderTerminationRequest={[Function]}
+                  onStartShouldSetResponder={[Function]}
+                  testID="refresh-button"
+                >
+                  <RNSVGSvgView
+                    align="xMidYMid"
+                    bbHeight="24"
+                    bbWidth="24"
+                    fill="none"
+                    focusable={false}
+                    height={24}
+                    meetOrSlice={0}
+                    minX={0}
+                    minY={0}
+                    style={
+                      [
+                        {
+                          "backgroundColor": "transparent",
+                          "borderWidth": 0,
+                        },
+                        {
+                          "flex": 0,
+                          "height": 24,
+                          "width": 24,
+                        },
+                      ]
+                    }
+                    vbHeight={18}
+                    vbWidth={16}
+                    width={24}
+                  >
+                    <RNSVGGroup
+                      fill={null}
+                      propList={
+                        [
+                          "fill",
+                        ]
+                      }
+                    >
+                      <RNSVGPath
+                        d="M1.40005 0.200012C2.00756 0.200012 2.50005 0.692499 2.50005 1.30001V3.61139C3.89715 2.18539 5.84462 1.30001 8.00005 1.30001C11.3544 1.30001 14.2051 3.44426 15.2616 6.43344C15.4641 7.00623 15.1639 7.63468 14.5911 7.83714C14.0183 8.03959 13.3898 7.73937 13.1874 7.16658C12.4318 5.02891 10.3931 3.50001 8.00005 3.50001C6.20162 3.50001 4.60329 4.36353 3.59934 5.70001H6.90005C7.50756 5.70001 8.00005 6.1925 8.00005 6.80001C8.00005 7.40752 7.50756 7.90001 6.90005 7.90001H1.40005C0.792536 7.90001 0.300049 7.40752 0.300049 6.80001V1.30001C0.300049 0.692499 0.792536 0.200012 1.40005 0.200012ZM1.40903 10.1629C1.98182 9.96044 2.61027 10.2607 2.81273 10.8334C3.56828 12.9711 5.60703 14.5 8.00005 14.5C9.79847 14.5 11.3968 13.6365 12.4008 12.3L9.10005 12.3C8.49254 12.3 8.00005 11.8075 8.00005 11.2C8.00005 10.5925 8.49254 10.1 9.10005 10.1H14.6C14.8918 10.1 15.1716 10.2159 15.3779 10.4222C15.5842 10.6285 15.7 10.9083 15.7 11.2V16.7C15.7 17.3075 15.2076 17.8 14.6 17.8C13.9925 17.8 13.5 17.3075 13.5 16.7V14.3886C12.1029 15.8146 10.1555 16.7 8.00005 16.7C4.6457 16.7 1.795 14.5558 0.738478 11.5666C0.536026 10.9938 0.836243 10.3653 1.40903 10.1629Z"
+                        fill={
+                          {
+                            "payload": 4294695385,
+                            "type": 0,
+                          }
+                        }
+                        propList={
+                          [
+                            "fill",
+                          ]
+                        }
+                      />
+                    </RNSVGGroup>
+                  </RNSVGSvgView>
+                </View>
+              </View>
+              <View
+                collapsable={false}
+                style={
+                  {
+                    "alignItems": "center",
+                    "justifyContent": "center",
+                    "opacity": 0,
+                  }
+                }
+              >
+                <View
+                  accessibilityState={
+                    {
+                      "busy": undefined,
+                      "checked": undefined,
+                      "disabled": undefined,
+                      "expanded": undefined,
+                      "selected": undefined,
+                    }
+                  }
+                  accessibilityValue={
+                    {
+                      "max": undefined,
+                      "min": undefined,
+                      "now": undefined,
+                      "text": undefined,
+                    }
+                  }
+                  accessible={true}
+                  collapsable={false}
+                  focusable={true}
+                  onBlur={[Function]}
+                  onClick={[Function]}
+                  onFocus={[Function]}
+                  onResponderGrant={[Function]}
+                  onResponderMove={[Function]}
+                  onResponderRelease={[Function]}
+                  onResponderTerminate={[Function]}
+                  onResponderTerminationRequest={[Function]}
+                  onStartShouldSetResponder={[Function]}
+                  testID="delete-button"
+                >
+                  <RNSVGSvgView
+                    align="xMidYMid"
+                    bbHeight="24"
+                    bbWidth="24"
+                    fill="none"
+                    focusable={false}
+                    height={24}
+                    meetOrSlice={0}
+                    minX={0}
+                    minY={0}
+                    style={
+                      [
+                        {
+                          "backgroundColor": "transparent",
+                          "borderWidth": 0,
+                        },
+                        {
+                          "flex": 0,
+                          "height": 24,
+                          "width": 24,
+                        },
+                      ]
+                    }
+                    vbHeight={18}
+                    vbWidth={17}
+                    width={24}
+                  >
+                    <RNSVGGroup
+                      fill={null}
+                      propList={
+                        [
+                          "fill",
+                        ]
+                      }
+                    >
+                      <RNSVGPath
+                        clipRule={0}
+                        d="M7.34995 0.200012C6.91436 0.200012 6.51616 0.435415 6.32136 0.808077L5.48921 2.40001H1.59995C0.964824 2.40001 0.449951 2.8925 0.449951 3.50001C0.449951 4.10753 0.964824 4.60001 1.59995 4.60001L1.59995 15.6C1.59995 16.815 2.6297 17.8 3.89995 17.8H13.1C14.3702 17.8 15.4 16.815 15.4 15.6V4.60001C16.0351 4.60001 16.55 4.10753 16.55 3.50001C16.55 2.8925 16.0351 2.40001 15.4 2.40001H11.5107L10.6785 0.808077C10.4837 0.435415 10.0855 0.200012 9.64995 0.200012H7.34995ZM5.04995 6.80001C5.04995 6.1925 5.56482 5.70001 6.19995 5.70001C6.83508 5.70001 7.34995 6.1925 7.34995 6.80001V13.4C7.34995 14.0075 6.83508 14.5 6.19995 14.5C5.56482 14.5 5.04995 14.0075 5.04995 13.4V6.80001ZM10.8 5.70001C10.1648 5.70001 9.64995 6.1925 9.64995 6.80001V13.4C9.64995 14.0075 10.1648 14.5 10.8 14.5C11.4351 14.5 11.95 14.0075 11.95 13.4V6.80001C11.95 6.1925 11.4351 5.70001 10.8 5.70001Z"
+                        fill={
+                          {
+                            "payload": 4294695385,
+                            "type": 0,
+                          }
+                        }
+                        fillRule={0}
+                        propList={
+                          [
+                            "fill",
+                            "fillRule",
+                          ]
+                        }
+                      />
+                    </RNSVGGroup>
+                  </RNSVGSvgView>
+                </View>
+              </View>
+            </View>
+            <View
+              onLayout={[Function]}
+            />
+          </View>
+          <View
+            collapsable={false}
+            handlerTag={8}
+            handlerType="TapGestureHandler"
+            onGestureHandlerEvent={[Function]}
+            onGestureHandlerStateChange={[Function]}
+            pointerEvents="auto"
+            style={
+              {
+                "transform": [
+                  {
+                    "translateX": -0,
+                  },
+                ],
+              }
+            }
+          >
+            <Text
+              style={
+                [
+                  [
+                    {
+                      "fontFamily": "Montserrat",
+                      "fontSize": 13,
+                      "lineHeight": 20.4,
+                    },
+                  ],
+                  {
+                    "color": "#FFFFFF",
+                    "textAlign": undefined,
+                    "width": "100%",
+                  },
+                  {
+                    "backgroundColor": "#F16868",
+                    "minHeight": 30,
+                    "textAlignVertical": "center",
+                  },
+                ]
+              }
+            >
+              TEST Bubble
+            </Text>
+          </View>
+        </View>
+      </View>
+    </View>
+  </View>
+  <View
+    style={
+      {
+        "alignSelf": "flex-end",
+        "marginBottom": 2,
+      }
+    }
+  >
+    <Text
+      style={
+        [
+          [
+            {
+              "fontFamily": "Montserrat",
+              "fontSize": 13,
+              "lineHeight": 20.4,
+            },
+          ],
+          {
+            "color": "#9AA5B1",
+            "textAlign": "right",
+            "width": "100%",
+          },
+          {
+            "textAlignVertical": "center",
+          },
+        ]
+      }
+    >
+       
+      25 May, 9:08
+    </Text>
+  </View>
+</View>
+`;
+
+exports[`test text-bubble given the visualState is DEFAULT return a light-blue colored text-bubble AND dark green text 1`] = `
+<View
+  style={
+    {
+      "gap": 4,
+      "width": "100%",
+    }
+  }
+>
+  <View
+    style={
+      {
+        "minWidth": "50%",
+      }
+    }
+  >
+    <View
+      style={
+        {
+          "flexDirection": "row",
+          "gap": 12,
+        }
+      }
+    >
+      <View
+        style={
+          {
+            "justifyContent": "center",
+            "padding": 2,
+          }
+        }
+      >
+        <RNSVGSvgView
+          align="xMidYMid"
+          bbHeight="26"
+          bbWidth="26"
+          fill="none"
+          focusable={false}
+          height={26}
+          meetOrSlice={0}
+          minX={0}
+          minY={0}
+          style={
+            [
+              {
+                "backgroundColor": "transparent",
+                "borderWidth": 0,
+              },
+              {
+                "flex": 0,
+                "height": 26,
+                "width": 26,
+              },
+            ]
+          }
+          vbHeight={23}
+          vbWidth={22}
+          width={26}
+        >
+          <RNSVGGroup
+            fill={null}
+            propList={
+              [
+                "fill",
+              ]
+            }
+          >
+            <RNSVGPath
+              d="M11 7V11.5M11 16H11.0108M20.75 11.5C20.75 17.0919 16.3848 21.625 11 21.625C5.61522 21.625 1.25 17.0919 1.25 11.5C1.25 5.90812 5.61522 1.375 11 1.375C16.3848 1.375 20.75 5.90812 20.75 11.5Z"
+              fill={
+                {
+                  "payload": 4278190080,
+                  "type": 0,
+                }
+              }
+              propList={
+                [
+                  "stroke",
+                  "strokeWidth",
+                  "strokeLinecap",
+                  "strokeLinejoin",
+                ]
+              }
+              stroke={
+                {
+                  "payload": 4294010984,
+                  "type": 0,
+                }
+              }
+              strokeLinecap={1}
+              strokeLinejoin={1}
+              strokeWidth="2"
+            />
+          </RNSVGGroup>
+        </RNSVGSvgView>
+      </View>
+      <View
+        style={
+          {
+            "backgroundColor": "#F16868",
+            "borderBottomLeftRadius": 8,
+            "borderBottomRightRadius": 32,
+            "borderTopLeftRadius": 24,
+            "borderTopRightRadius": 24,
+            "flex": 1,
+            "justifyContent": "center",
+            "paddingBottom": 16,
+            "paddingLeft": 24,
+            "paddingRight": 24,
+            "paddingTop": 16,
+          }
+        }
+      >
+        <View
+          collapsable={false}
+          handlerTag={5}
+          handlerType="PanGestureHandler"
+          onGestureHandlerEvent={[Function]}
+          onGestureHandlerStateChange={[Function]}
+          onLayout={[Function]}
+          style={
+            {
+              "overflow": "hidden",
+            }
+          }
+        >
+          <View
+            collapsable={false}
+            style={
+              {
+                "bottom": 0,
+                "flexDirection": "row-reverse",
+                "left": 0,
+                "position": "absolute",
+                "right": 0,
+                "top": 0,
+                "transform": [
+                  {
+                    "translateX": -10000,
+                  },
+                ],
+              }
+            }
+          >
+            <View
+              style={
+                {
+                  "alignItems": "center",
+                  "flex": 1,
+                  "flexDirection": "row",
+                  "justifyContent": "space-evenly",
+                }
+              }
+            >
+              <View
+                collapsable={false}
+                style={
+                  {
+                    "alignItems": "center",
+                    "justifyContent": "center",
+                    "opacity": 0,
+                  }
+                }
+              >
+                <View
+                  accessibilityState={
+                    {
+                      "busy": undefined,
+                      "checked": undefined,
+                      "disabled": undefined,
+                      "expanded": undefined,
+                      "selected": undefined,
+                    }
+                  }
+                  accessibilityValue={
+                    {
+                      "max": undefined,
+                      "min": undefined,
+                      "now": undefined,
+                      "text": undefined,
+                    }
+                  }
+                  accessible={true}
+                  collapsable={false}
+                  focusable={true}
+                  onBlur={[Function]}
+                  onClick={[Function]}
+                  onFocus={[Function]}
+                  onResponderGrant={[Function]}
+                  onResponderMove={[Function]}
+                  onResponderRelease={[Function]}
+                  onResponderTerminate={[Function]}
+                  onResponderTerminationRequest={[Function]}
+                  onStartShouldSetResponder={[Function]}
+                  testID="refresh-button"
+                >
+                  <RNSVGSvgView
+                    align="xMidYMid"
+                    bbHeight="24"
+                    bbWidth="24"
+                    fill="none"
+                    focusable={false}
+                    height={24}
+                    meetOrSlice={0}
+                    minX={0}
+                    minY={0}
+                    style={
+                      [
+                        {
+                          "backgroundColor": "transparent",
+                          "borderWidth": 0,
+                        },
+                        {
+                          "flex": 0,
+                          "height": 24,
+                          "width": 24,
+                        },
+                      ]
+                    }
+                    vbHeight={18}
+                    vbWidth={16}
+                    width={24}
+                  >
+                    <RNSVGGroup
+                      fill={null}
+                      propList={
+                        [
+                          "fill",
+                        ]
+                      }
+                    >
+                      <RNSVGPath
+                        d="M1.40005 0.200012C2.00756 0.200012 2.50005 0.692499 2.50005 1.30001V3.61139C3.89715 2.18539 5.84462 1.30001 8.00005 1.30001C11.3544 1.30001 14.2051 3.44426 15.2616 6.43344C15.4641 7.00623 15.1639 7.63468 14.5911 7.83714C14.0183 8.03959 13.3898 7.73937 13.1874 7.16658C12.4318 5.02891 10.3931 3.50001 8.00005 3.50001C6.20162 3.50001 4.60329 4.36353 3.59934 5.70001H6.90005C7.50756 5.70001 8.00005 6.1925 8.00005 6.80001C8.00005 7.40752 7.50756 7.90001 6.90005 7.90001H1.40005C0.792536 7.90001 0.300049 7.40752 0.300049 6.80001V1.30001C0.300049 0.692499 0.792536 0.200012 1.40005 0.200012ZM1.40903 10.1629C1.98182 9.96044 2.61027 10.2607 2.81273 10.8334C3.56828 12.9711 5.60703 14.5 8.00005 14.5C9.79847 14.5 11.3968 13.6365 12.4008 12.3L9.10005 12.3C8.49254 12.3 8.00005 11.8075 8.00005 11.2C8.00005 10.5925 8.49254 10.1 9.10005 10.1H14.6C14.8918 10.1 15.1716 10.2159 15.3779 10.4222C15.5842 10.6285 15.7 10.9083 15.7 11.2V16.7C15.7 17.3075 15.2076 17.8 14.6 17.8C13.9925 17.8 13.5 17.3075 13.5 16.7V14.3886C12.1029 15.8146 10.1555 16.7 8.00005 16.7C4.6457 16.7 1.795 14.5558 0.738478 11.5666C0.536026 10.9938 0.836243 10.3653 1.40903 10.1629Z"
+                        fill={
+                          {
+                            "payload": 4294695385,
+                            "type": 0,
+                          }
+                        }
+                        propList={
+                          [
+                            "fill",
+                          ]
+                        }
+                      />
+                    </RNSVGGroup>
+                  </RNSVGSvgView>
+                </View>
+              </View>
+              <View
+                collapsable={false}
+                style={
+                  {
+                    "alignItems": "center",
+                    "justifyContent": "center",
+                    "opacity": 0,
+                  }
+                }
+              >
+                <View
+                  accessibilityState={
+                    {
+                      "busy": undefined,
+                      "checked": undefined,
+                      "disabled": undefined,
+                      "expanded": undefined,
+                      "selected": undefined,
+                    }
+                  }
+                  accessibilityValue={
+                    {
+                      "max": undefined,
+                      "min": undefined,
+                      "now": undefined,
+                      "text": undefined,
+                    }
+                  }
+                  accessible={true}
+                  collapsable={false}
+                  focusable={true}
+                  onBlur={[Function]}
+                  onClick={[Function]}
+                  onFocus={[Function]}
+                  onResponderGrant={[Function]}
+                  onResponderMove={[Function]}
+                  onResponderRelease={[Function]}
+                  onResponderTerminate={[Function]}
+                  onResponderTerminationRequest={[Function]}
+                  onStartShouldSetResponder={[Function]}
+                  testID="delete-button"
+                >
+                  <RNSVGSvgView
+                    align="xMidYMid"
+                    bbHeight="24"
+                    bbWidth="24"
+                    fill="none"
+                    focusable={false}
+                    height={24}
+                    meetOrSlice={0}
+                    minX={0}
+                    minY={0}
+                    style={
+                      [
+                        {
+                          "backgroundColor": "transparent",
+                          "borderWidth": 0,
+                        },
+                        {
+                          "flex": 0,
+                          "height": 24,
+                          "width": 24,
+                        },
+                      ]
+                    }
+                    vbHeight={18}
+                    vbWidth={17}
+                    width={24}
+                  >
+                    <RNSVGGroup
+                      fill={null}
+                      propList={
+                        [
+                          "fill",
+                        ]
+                      }
+                    >
+                      <RNSVGPath
+                        clipRule={0}
+                        d="M7.34995 0.200012C6.91436 0.200012 6.51616 0.435415 6.32136 0.808077L5.48921 2.40001H1.59995C0.964824 2.40001 0.449951 2.8925 0.449951 3.50001C0.449951 4.10753 0.964824 4.60001 1.59995 4.60001L1.59995 15.6C1.59995 16.815 2.6297 17.8 3.89995 17.8H13.1C14.3702 17.8 15.4 16.815 15.4 15.6V4.60001C16.0351 4.60001 16.55 4.10753 16.55 3.50001C16.55 2.8925 16.0351 2.40001 15.4 2.40001H11.5107L10.6785 0.808077C10.4837 0.435415 10.0855 0.200012 9.64995 0.200012H7.34995ZM5.04995 6.80001C5.04995 6.1925 5.56482 5.70001 6.19995 5.70001C6.83508 5.70001 7.34995 6.1925 7.34995 6.80001V13.4C7.34995 14.0075 6.83508 14.5 6.19995 14.5C5.56482 14.5 5.04995 14.0075 5.04995 13.4V6.80001ZM10.8 5.70001C10.1648 5.70001 9.64995 6.1925 9.64995 6.80001V13.4C9.64995 14.0075 10.1648 14.5 10.8 14.5C11.4351 14.5 11.95 14.0075 11.95 13.4V6.80001C11.95 6.1925 11.4351 5.70001 10.8 5.70001Z"
+                        fill={
+                          {
+                            "payload": 4294695385,
+                            "type": 0,
+                          }
+                        }
+                        fillRule={0}
+                        propList={
+                          [
+                            "fill",
+                            "fillRule",
+                          ]
+                        }
+                      />
+                    </RNSVGGroup>
+                  </RNSVGSvgView>
+                </View>
+              </View>
+            </View>
+            <View
+              onLayout={[Function]}
+            />
+          </View>
+          <View
+            collapsable={false}
+            handlerTag={6}
+            handlerType="TapGestureHandler"
+            onGestureHandlerEvent={[Function]}
+            onGestureHandlerStateChange={[Function]}
+            pointerEvents="auto"
+            style={
+              {
+                "transform": [
+                  {
+                    "translateX": -0,
+                  },
+                ],
+              }
+            }
+          >
+            <Text
+              style={
+                [
+                  [
+                    {
+                      "fontFamily": "Montserrat",
+                      "fontSize": 13,
+                      "lineHeight": 20.4,
+                    },
+                  ],
+                  {
+                    "color": "#FFFFFF",
+                    "textAlign": undefined,
+                    "width": "100%",
+                  },
+                  {
+                    "backgroundColor": "#F16868",
+                    "minHeight": 30,
+                    "textAlignVertical": "center",
+                  },
+                ]
+              }
+            >
+              TEST color
+            </Text>
+          </View>
+        </View>
+      </View>
+    </View>
+  </View>
+  <View
+    style={
+      {
+        "alignSelf": "flex-end",
+        "marginBottom": 2,
+      }
+    }
+  >
+    <Text
+      style={
+        [
+          [
+            {
+              "fontFamily": "Montserrat",
+              "fontSize": 13,
+              "lineHeight": 20.4,
+            },
+          ],
+          {
+            "color": "#9AA5B1",
+            "textAlign": "right",
+            "width": "100%",
+          },
+          {
+            "textAlignVertical": "center",
+          },
+        ]
+      }
+    >
+       
+      25 May, 9:08
+    </Text>
+  </View>
+</View>
+`;
+
+exports[`test text-bubble given the visualState is ERROR return a red colored text-bubble AND white text 1`] = `
+<View
+  style={
+    {
+      "gap": 4,
+      "width": "100%",
+    }
+  }
+>
+  <View
+    style={
+      {
+        "minWidth": "50%",
+      }
+    }
+  >
+    <View
+      style={
+        {
+          "flexDirection": "row",
+          "gap": 12,
+        }
+      }
+    >
+      <View
+        style={
+          {
+            "justifyContent": "center",
+            "padding": 2,
+          }
+        }
+      >
+        <RNSVGSvgView
+          align="xMidYMid"
+          bbHeight="26"
+          bbWidth="26"
+          fill="none"
+          focusable={false}
+          height={26}
+          meetOrSlice={0}
+          minX={0}
+          minY={0}
+          style={
+            [
+              {
+                "backgroundColor": "transparent",
+                "borderWidth": 0,
+              },
+              {
+                "flex": 0,
+                "height": 26,
+                "width": 26,
+              },
+            ]
+          }
+          vbHeight={23}
+          vbWidth={22}
+          width={26}
+        >
+          <RNSVGGroup
+            fill={null}
+            propList={
+              [
+                "fill",
+              ]
+            }
+          >
+            <RNSVGPath
+              d="M11 7V11.5M11 16H11.0108M20.75 11.5C20.75 17.0919 16.3848 21.625 11 21.625C5.61522 21.625 1.25 17.0919 1.25 11.5C1.25 5.90812 5.61522 1.375 11 1.375C16.3848 1.375 20.75 5.90812 20.75 11.5Z"
+              fill={
+                {
+                  "payload": 4278190080,
+                  "type": 0,
+                }
+              }
+              propList={
+                [
+                  "stroke",
+                  "strokeWidth",
+                  "strokeLinecap",
+                  "strokeLinejoin",
+                ]
+              }
+              stroke={
+                {
+                  "payload": 4294010984,
+                  "type": 0,
+                }
+              }
+              strokeLinecap={1}
+              strokeLinejoin={1}
+              strokeWidth="2"
+            />
+          </RNSVGGroup>
+        </RNSVGSvgView>
+      </View>
+      <View
+        style={
+          {
+            "backgroundColor": "#F16868",
+            "borderBottomLeftRadius": 8,
+            "borderBottomRightRadius": 32,
+            "borderTopLeftRadius": 24,
+            "borderTopRightRadius": 24,
+            "flex": 1,
+            "justifyContent": "center",
+            "paddingBottom": 16,
+            "paddingLeft": 24,
+            "paddingRight": 24,
+            "paddingTop": 16,
+          }
+        }
+      >
+        <View
+          collapsable={false}
+          handlerTag={1}
+          handlerType="PanGestureHandler"
+          onGestureHandlerEvent={[Function]}
+          onGestureHandlerStateChange={[Function]}
+          onLayout={[Function]}
+          style={
+            {
+              "overflow": "hidden",
+            }
+          }
+        >
+          <View
+            collapsable={false}
+            style={
+              {
+                "bottom": 0,
+                "flexDirection": "row-reverse",
+                "left": 0,
+                "position": "absolute",
+                "right": 0,
+                "top": 0,
+                "transform": [
+                  {
+                    "translateX": -10000,
+                  },
+                ],
+              }
+            }
+          >
+            <View
+              style={
+                {
+                  "alignItems": "center",
+                  "flex": 1,
+                  "flexDirection": "row",
+                  "justifyContent": "space-evenly",
+                }
+              }
+            >
+              <View
+                collapsable={false}
+                style={
+                  {
+                    "alignItems": "center",
+                    "justifyContent": "center",
+                    "opacity": 0,
+                  }
+                }
+              >
+                <View
+                  accessibilityState={
+                    {
+                      "busy": undefined,
+                      "checked": undefined,
+                      "disabled": undefined,
+                      "expanded": undefined,
+                      "selected": undefined,
+                    }
+                  }
+                  accessibilityValue={
+                    {
+                      "max": undefined,
+                      "min": undefined,
+                      "now": undefined,
+                      "text": undefined,
+                    }
+                  }
+                  accessible={true}
+                  collapsable={false}
+                  focusable={true}
+                  onBlur={[Function]}
+                  onClick={[Function]}
+                  onFocus={[Function]}
+                  onResponderGrant={[Function]}
+                  onResponderMove={[Function]}
+                  onResponderRelease={[Function]}
+                  onResponderTerminate={[Function]}
+                  onResponderTerminationRequest={[Function]}
+                  onStartShouldSetResponder={[Function]}
+                  testID="refresh-button"
+                >
+                  <RNSVGSvgView
+                    align="xMidYMid"
+                    bbHeight="24"
+                    bbWidth="24"
+                    fill="none"
+                    focusable={false}
+                    height={24}
+                    meetOrSlice={0}
+                    minX={0}
+                    minY={0}
+                    style={
+                      [
+                        {
+                          "backgroundColor": "transparent",
+                          "borderWidth": 0,
+                        },
+                        {
+                          "flex": 0,
+                          "height": 24,
+                          "width": 24,
+                        },
+                      ]
+                    }
+                    vbHeight={18}
+                    vbWidth={16}
+                    width={24}
+                  >
+                    <RNSVGGroup
+                      fill={null}
+                      propList={
+                        [
+                          "fill",
+                        ]
+                      }
+                    >
+                      <RNSVGPath
+                        d="M1.40005 0.200012C2.00756 0.200012 2.50005 0.692499 2.50005 1.30001V3.61139C3.89715 2.18539 5.84462 1.30001 8.00005 1.30001C11.3544 1.30001 14.2051 3.44426 15.2616 6.43344C15.4641 7.00623 15.1639 7.63468 14.5911 7.83714C14.0183 8.03959 13.3898 7.73937 13.1874 7.16658C12.4318 5.02891 10.3931 3.50001 8.00005 3.50001C6.20162 3.50001 4.60329 4.36353 3.59934 5.70001H6.90005C7.50756 5.70001 8.00005 6.1925 8.00005 6.80001C8.00005 7.40752 7.50756 7.90001 6.90005 7.90001H1.40005C0.792536 7.90001 0.300049 7.40752 0.300049 6.80001V1.30001C0.300049 0.692499 0.792536 0.200012 1.40005 0.200012ZM1.40903 10.1629C1.98182 9.96044 2.61027 10.2607 2.81273 10.8334C3.56828 12.9711 5.60703 14.5 8.00005 14.5C9.79847 14.5 11.3968 13.6365 12.4008 12.3L9.10005 12.3C8.49254 12.3 8.00005 11.8075 8.00005 11.2C8.00005 10.5925 8.49254 10.1 9.10005 10.1H14.6C14.8918 10.1 15.1716 10.2159 15.3779 10.4222C15.5842 10.6285 15.7 10.9083 15.7 11.2V16.7C15.7 17.3075 15.2076 17.8 14.6 17.8C13.9925 17.8 13.5 17.3075 13.5 16.7V14.3886C12.1029 15.8146 10.1555 16.7 8.00005 16.7C4.6457 16.7 1.795 14.5558 0.738478 11.5666C0.536026 10.9938 0.836243 10.3653 1.40903 10.1629Z"
+                        fill={
+                          {
+                            "payload": 4294695385,
+                            "type": 0,
+                          }
+                        }
+                        propList={
+                          [
+                            "fill",
+                          ]
+                        }
+                      />
+                    </RNSVGGroup>
+                  </RNSVGSvgView>
+                </View>
+              </View>
+              <View
+                collapsable={false}
+                style={
+                  {
+                    "alignItems": "center",
+                    "justifyContent": "center",
+                    "opacity": 0,
+                  }
+                }
+              >
+                <View
+                  accessibilityState={
+                    {
+                      "busy": undefined,
+                      "checked": undefined,
+                      "disabled": undefined,
+                      "expanded": undefined,
+                      "selected": undefined,
+                    }
+                  }
+                  accessibilityValue={
+                    {
+                      "max": undefined,
+                      "min": undefined,
+                      "now": undefined,
+                      "text": undefined,
+                    }
+                  }
+                  accessible={true}
+                  collapsable={false}
+                  focusable={true}
+                  onBlur={[Function]}
+                  onClick={[Function]}
+                  onFocus={[Function]}
+                  onResponderGrant={[Function]}
+                  onResponderMove={[Function]}
+                  onResponderRelease={[Function]}
+                  onResponderTerminate={[Function]}
+                  onResponderTerminationRequest={[Function]}
+                  onStartShouldSetResponder={[Function]}
+                  testID="delete-button"
+                >
+                  <RNSVGSvgView
+                    align="xMidYMid"
+                    bbHeight="24"
+                    bbWidth="24"
+                    fill="none"
+                    focusable={false}
+                    height={24}
+                    meetOrSlice={0}
+                    minX={0}
+                    minY={0}
+                    style={
+                      [
+                        {
+                          "backgroundColor": "transparent",
+                          "borderWidth": 0,
+                        },
+                        {
+                          "flex": 0,
+                          "height": 24,
+                          "width": 24,
+                        },
+                      ]
+                    }
+                    vbHeight={18}
+                    vbWidth={17}
+                    width={24}
+                  >
+                    <RNSVGGroup
+                      fill={null}
+                      propList={
+                        [
+                          "fill",
+                        ]
+                      }
+                    >
+                      <RNSVGPath
+                        clipRule={0}
+                        d="M7.34995 0.200012C6.91436 0.200012 6.51616 0.435415 6.32136 0.808077L5.48921 2.40001H1.59995C0.964824 2.40001 0.449951 2.8925 0.449951 3.50001C0.449951 4.10753 0.964824 4.60001 1.59995 4.60001L1.59995 15.6C1.59995 16.815 2.6297 17.8 3.89995 17.8H13.1C14.3702 17.8 15.4 16.815 15.4 15.6V4.60001C16.0351 4.60001 16.55 4.10753 16.55 3.50001C16.55 2.8925 16.0351 2.40001 15.4 2.40001H11.5107L10.6785 0.808077C10.4837 0.435415 10.0855 0.200012 9.64995 0.200012H7.34995ZM5.04995 6.80001C5.04995 6.1925 5.56482 5.70001 6.19995 5.70001C6.83508 5.70001 7.34995 6.1925 7.34995 6.80001V13.4C7.34995 14.0075 6.83508 14.5 6.19995 14.5C5.56482 14.5 5.04995 14.0075 5.04995 13.4V6.80001ZM10.8 5.70001C10.1648 5.70001 9.64995 6.1925 9.64995 6.80001V13.4C9.64995 14.0075 10.1648 14.5 10.8 14.5C11.4351 14.5 11.95 14.0075 11.95 13.4V6.80001C11.95 6.1925 11.4351 5.70001 10.8 5.70001Z"
+                        fill={
+                          {
+                            "payload": 4294695385,
+                            "type": 0,
+                          }
+                        }
+                        fillRule={0}
+                        propList={
+                          [
+                            "fill",
+                            "fillRule",
+                          ]
+                        }
+                      />
+                    </RNSVGGroup>
+                  </RNSVGSvgView>
+                </View>
+              </View>
+            </View>
+            <View
+              onLayout={[Function]}
+            />
+          </View>
+          <View
+            collapsable={false}
+            handlerTag={2}
+            handlerType="TapGestureHandler"
+            onGestureHandlerEvent={[Function]}
+            onGestureHandlerStateChange={[Function]}
+            pointerEvents="auto"
+            style={
+              {
+                "transform": [
+                  {
+                    "translateX": -0,
+                  },
+                ],
+              }
+            }
+          >
+            <Text
+              style={
+                [
+                  [
+                    {
+                      "fontFamily": "Montserrat",
+                      "fontSize": 13,
+                      "lineHeight": 20.4,
+                    },
+                  ],
+                  {
+                    "color": "#FFFFFF",
+                    "textAlign": undefined,
+                    "width": "100%",
+                  },
+                  {
+                    "backgroundColor": "#F16868",
+                    "minHeight": 30,
+                    "textAlignVertical": "center",
+                  },
+                ]
+              }
+            >
+              TEST color
+            </Text>
+          </View>
+        </View>
+      </View>
+    </View>
+  </View>
+  <View
+    style={
+      {
+        "alignSelf": "flex-end",
+        "marginBottom": 2,
+      }
+    }
+  >
+    <Text
+      style={
+        [
+          [
+            {
+              "fontFamily": "Montserrat",
+              "fontSize": 13,
+              "lineHeight": 20.4,
+            },
+          ],
+          {
+            "color": "#9AA5B1",
+            "textAlign": "right",
+            "width": "100%",
+          },
+          {
+            "textAlignVertical": "center",
+          },
+        ]
+      }
+    >
+       
+      25 May, 9:08
+    </Text>
+  </View>
+</View>
+`;
+
+exports[`test text-bubble given the visualState is RECEIVE return a text-bubble with left-bottom tip 1`] = `
+<View
+  style={
+    {
+      "gap": 4,
+      "width": "100%",
+    }
+  }
+>
+  <View
+    style={
+      {
+        "minWidth": "50%",
+      }
+    }
+  >
+    <View
+      style={
+        {
+          "flexDirection": "row",
+          "gap": 12,
+        }
+      }
+    >
+      <View
+        style={
+          {
+            "justifyContent": "center",
+            "padding": 2,
+          }
+        }
+      >
+        <RNSVGSvgView
+          align="xMidYMid"
+          bbHeight="26"
+          bbWidth="26"
+          fill="none"
+          focusable={false}
+          height={26}
+          meetOrSlice={0}
+          minX={0}
+          minY={0}
+          style={
+            [
+              {
+                "backgroundColor": "transparent",
+                "borderWidth": 0,
+              },
+              {
+                "flex": 0,
+                "height": 26,
+                "width": 26,
+              },
+            ]
+          }
+          vbHeight={23}
+          vbWidth={22}
+          width={26}
+        >
+          <RNSVGGroup
+            fill={null}
+            propList={
+              [
+                "fill",
+              ]
+            }
+          >
+            <RNSVGPath
+              d="M11 7V11.5M11 16H11.0108M20.75 11.5C20.75 17.0919 16.3848 21.625 11 21.625C5.61522 21.625 1.25 17.0919 1.25 11.5C1.25 5.90812 5.61522 1.375 11 1.375C16.3848 1.375 20.75 5.90812 20.75 11.5Z"
+              fill={
+                {
+                  "payload": 4278190080,
+                  "type": 0,
+                }
+              }
+              propList={
+                [
+                  "stroke",
+                  "strokeWidth",
+                  "strokeLinecap",
+                  "strokeLinejoin",
+                ]
+              }
+              stroke={
+                {
+                  "payload": 4294010984,
+                  "type": 0,
+                }
+              }
+              strokeLinecap={1}
+              strokeLinejoin={1}
+              strokeWidth="2"
+            />
+          </RNSVGGroup>
+        </RNSVGSvgView>
+      </View>
+      <View
+        style={
+          {
+            "backgroundColor": "#F16868",
+            "borderBottomLeftRadius": 8,
+            "borderBottomRightRadius": 32,
+            "borderTopLeftRadius": 24,
+            "borderTopRightRadius": 24,
+            "flex": 1,
+            "justifyContent": "center",
+            "paddingBottom": 16,
+            "paddingLeft": 24,
+            "paddingRight": 24,
+            "paddingTop": 16,
+          }
+        }
+      >
+        <View
+          collapsable={false}
+          handlerTag={9}
+          handlerType="PanGestureHandler"
+          onGestureHandlerEvent={[Function]}
+          onGestureHandlerStateChange={[Function]}
+          onLayout={[Function]}
+          style={
+            {
+              "overflow": "hidden",
+            }
+          }
+        >
+          <View
+            collapsable={false}
+            style={
+              {
+                "bottom": 0,
+                "flexDirection": "row-reverse",
+                "left": 0,
+                "position": "absolute",
+                "right": 0,
+                "top": 0,
+                "transform": [
+                  {
+                    "translateX": -10000,
+                  },
+                ],
+              }
+            }
+          >
+            <View
+              style={
+                {
+                  "alignItems": "center",
+                  "flex": 1,
+                  "flexDirection": "row",
+                  "justifyContent": "space-evenly",
+                }
+              }
+            >
+              <View
+                collapsable={false}
+                style={
+                  {
+                    "alignItems": "center",
+                    "justifyContent": "center",
+                    "opacity": 0,
+                  }
+                }
+              >
+                <View
+                  accessibilityState={
+                    {
+                      "busy": undefined,
+                      "checked": undefined,
+                      "disabled": undefined,
+                      "expanded": undefined,
+                      "selected": undefined,
+                    }
+                  }
+                  accessibilityValue={
+                    {
+                      "max": undefined,
+                      "min": undefined,
+                      "now": undefined,
+                      "text": undefined,
+                    }
+                  }
+                  accessible={true}
+                  collapsable={false}
+                  focusable={true}
+                  onBlur={[Function]}
+                  onClick={[Function]}
+                  onFocus={[Function]}
+                  onResponderGrant={[Function]}
+                  onResponderMove={[Function]}
+                  onResponderRelease={[Function]}
+                  onResponderTerminate={[Function]}
+                  onResponderTerminationRequest={[Function]}
+                  onStartShouldSetResponder={[Function]}
+                  testID="refresh-button"
+                >
+                  <RNSVGSvgView
+                    align="xMidYMid"
+                    bbHeight="24"
+                    bbWidth="24"
+                    fill="none"
+                    focusable={false}
+                    height={24}
+                    meetOrSlice={0}
+                    minX={0}
+                    minY={0}
+                    style={
+                      [
+                        {
+                          "backgroundColor": "transparent",
+                          "borderWidth": 0,
+                        },
+                        {
+                          "flex": 0,
+                          "height": 24,
+                          "width": 24,
+                        },
+                      ]
+                    }
+                    vbHeight={18}
+                    vbWidth={16}
+                    width={24}
+                  >
+                    <RNSVGGroup
+                      fill={null}
+                      propList={
+                        [
+                          "fill",
+                        ]
+                      }
+                    >
+                      <RNSVGPath
+                        d="M1.40005 0.200012C2.00756 0.200012 2.50005 0.692499 2.50005 1.30001V3.61139C3.89715 2.18539 5.84462 1.30001 8.00005 1.30001C11.3544 1.30001 14.2051 3.44426 15.2616 6.43344C15.4641 7.00623 15.1639 7.63468 14.5911 7.83714C14.0183 8.03959 13.3898 7.73937 13.1874 7.16658C12.4318 5.02891 10.3931 3.50001 8.00005 3.50001C6.20162 3.50001 4.60329 4.36353 3.59934 5.70001H6.90005C7.50756 5.70001 8.00005 6.1925 8.00005 6.80001C8.00005 7.40752 7.50756 7.90001 6.90005 7.90001H1.40005C0.792536 7.90001 0.300049 7.40752 0.300049 6.80001V1.30001C0.300049 0.692499 0.792536 0.200012 1.40005 0.200012ZM1.40903 10.1629C1.98182 9.96044 2.61027 10.2607 2.81273 10.8334C3.56828 12.9711 5.60703 14.5 8.00005 14.5C9.79847 14.5 11.3968 13.6365 12.4008 12.3L9.10005 12.3C8.49254 12.3 8.00005 11.8075 8.00005 11.2C8.00005 10.5925 8.49254 10.1 9.10005 10.1H14.6C14.8918 10.1 15.1716 10.2159 15.3779 10.4222C15.5842 10.6285 15.7 10.9083 15.7 11.2V16.7C15.7 17.3075 15.2076 17.8 14.6 17.8C13.9925 17.8 13.5 17.3075 13.5 16.7V14.3886C12.1029 15.8146 10.1555 16.7 8.00005 16.7C4.6457 16.7 1.795 14.5558 0.738478 11.5666C0.536026 10.9938 0.836243 10.3653 1.40903 10.1629Z"
+                        fill={
+                          {
+                            "payload": 4294695385,
+                            "type": 0,
+                          }
+                        }
+                        propList={
+                          [
+                            "fill",
+                          ]
+                        }
+                      />
+                    </RNSVGGroup>
+                  </RNSVGSvgView>
+                </View>
+              </View>
+              <View
+                collapsable={false}
+                style={
+                  {
+                    "alignItems": "center",
+                    "justifyContent": "center",
+                    "opacity": 0,
+                  }
+                }
+              >
+                <View
+                  accessibilityState={
+                    {
+                      "busy": undefined,
+                      "checked": undefined,
+                      "disabled": undefined,
+                      "expanded": undefined,
+                      "selected": undefined,
+                    }
+                  }
+                  accessibilityValue={
+                    {
+                      "max": undefined,
+                      "min": undefined,
+                      "now": undefined,
+                      "text": undefined,
+                    }
+                  }
+                  accessible={true}
+                  collapsable={false}
+                  focusable={true}
+                  onBlur={[Function]}
+                  onClick={[Function]}
+                  onFocus={[Function]}
+                  onResponderGrant={[Function]}
+                  onResponderMove={[Function]}
+                  onResponderRelease={[Function]}
+                  onResponderTerminate={[Function]}
+                  onResponderTerminationRequest={[Function]}
+                  onStartShouldSetResponder={[Function]}
+                  testID="delete-button"
+                >
+                  <RNSVGSvgView
+                    align="xMidYMid"
+                    bbHeight="24"
+                    bbWidth="24"
+                    fill="none"
+                    focusable={false}
+                    height={24}
+                    meetOrSlice={0}
+                    minX={0}
+                    minY={0}
+                    style={
+                      [
+                        {
+                          "backgroundColor": "transparent",
+                          "borderWidth": 0,
+                        },
+                        {
+                          "flex": 0,
+                          "height": 24,
+                          "width": 24,
+                        },
+                      ]
+                    }
+                    vbHeight={18}
+                    vbWidth={17}
+                    width={24}
+                  >
+                    <RNSVGGroup
+                      fill={null}
+                      propList={
+                        [
+                          "fill",
+                        ]
+                      }
+                    >
+                      <RNSVGPath
+                        clipRule={0}
+                        d="M7.34995 0.200012C6.91436 0.200012 6.51616 0.435415 6.32136 0.808077L5.48921 2.40001H1.59995C0.964824 2.40001 0.449951 2.8925 0.449951 3.50001C0.449951 4.10753 0.964824 4.60001 1.59995 4.60001L1.59995 15.6C1.59995 16.815 2.6297 17.8 3.89995 17.8H13.1C14.3702 17.8 15.4 16.815 15.4 15.6V4.60001C16.0351 4.60001 16.55 4.10753 16.55 3.50001C16.55 2.8925 16.0351 2.40001 15.4 2.40001H11.5107L10.6785 0.808077C10.4837 0.435415 10.0855 0.200012 9.64995 0.200012H7.34995ZM5.04995 6.80001C5.04995 6.1925 5.56482 5.70001 6.19995 5.70001C6.83508 5.70001 7.34995 6.1925 7.34995 6.80001V13.4C7.34995 14.0075 6.83508 14.5 6.19995 14.5C5.56482 14.5 5.04995 14.0075 5.04995 13.4V6.80001ZM10.8 5.70001C10.1648 5.70001 9.64995 6.1925 9.64995 6.80001V13.4C9.64995 14.0075 10.1648 14.5 10.8 14.5C11.4351 14.5 11.95 14.0075 11.95 13.4V6.80001C11.95 6.1925 11.4351 5.70001 10.8 5.70001Z"
+                        fill={
+                          {
+                            "payload": 4294695385,
+                            "type": 0,
+                          }
+                        }
+                        fillRule={0}
+                        propList={
+                          [
+                            "fill",
+                            "fillRule",
+                          ]
+                        }
+                      />
+                    </RNSVGGroup>
+                  </RNSVGSvgView>
+                </View>
+              </View>
+            </View>
+            <View
+              onLayout={[Function]}
+            />
+          </View>
+          <View
+            collapsable={false}
+            handlerTag={10}
+            handlerType="TapGestureHandler"
+            onGestureHandlerEvent={[Function]}
+            onGestureHandlerStateChange={[Function]}
+            pointerEvents="auto"
+            style={
+              {
+                "transform": [
+                  {
+                    "translateX": -0,
+                  },
+                ],
+              }
+            }
+          >
+            <Text
+              style={
+                [
+                  [
+                    {
+                      "fontFamily": "Montserrat",
+                      "fontSize": 13,
+                      "lineHeight": 20.4,
+                    },
+                  ],
+                  {
+                    "color": "#FFFFFF",
+                    "textAlign": undefined,
+                    "width": "100%",
+                  },
+                  {
+                    "backgroundColor": "#F16868",
+                    "minHeight": 30,
+                    "textAlignVertical": "center",
+                  },
+                ]
+              }
+            >
+              TEST Bubble
+            </Text>
+          </View>
+        </View>
+      </View>
+    </View>
+  </View>
+  <View
+    style={
+      {
+        "alignSelf": "flex-end",
+        "marginBottom": 2,
+      }
+    }
+  >
+    <Text
+      style={
+        [
+          [
+            {
+              "fontFamily": "Montserrat",
+              "fontSize": 13,
+              "lineHeight": 20.4,
+            },
+          ],
+          {
+            "color": "#9AA5B1",
+            "textAlign": "right",
+            "width": "100%",
+          },
+          {
+            "textAlignVertical": "center",
+          },
+        ]
+      }
+    >
+       
+      25 May, 9:08
+    </Text>
+  </View>
+</View>
+`;
+
+exports[`test text-bubble given the visualState is RECEIVE return a textBubble with left-bottom tip 1`] = `
+<View
+  style={
+    {
+      "gap": 4,
+      "width": "100%",
+    }
+  }
+>
+  <View
+    style={
+      {
+        "minWidth": "50%",
+      }
+    }
+  >
+    <View
+      style={
+        {
+          "flexDirection": "row",
+          "gap": 12,
+        }
+      }
+    >
+      <View
+        style={
+          {
+            "justifyContent": "center",
+            "padding": 2,
+          }
+        }
+      >
+        <RNSVGSvgView
+          align="xMidYMid"
+          bbHeight="26"
+          bbWidth="26"
+          fill="none"
+          focusable={false}
+          height={26}
+          meetOrSlice={0}
+          minX={0}
+          minY={0}
+          style={
+            [
+              {
+                "backgroundColor": "transparent",
+                "borderWidth": 0,
+              },
+              {
+                "flex": 0,
+                "height": 26,
+                "width": 26,
+              },
+            ]
+          }
+          vbHeight={23}
+          vbWidth={22}
+          width={26}
+        >
+          <RNSVGGroup
+            fill={null}
+            propList={
+              [
+                "fill",
+              ]
+            }
+          >
+            <RNSVGPath
+              d="M11 7V11.5M11 16H11.0108M20.75 11.5C20.75 17.0919 16.3848 21.625 11 21.625C5.61522 21.625 1.25 17.0919 1.25 11.5C1.25 5.90812 5.61522 1.375 11 1.375C16.3848 1.375 20.75 5.90812 20.75 11.5Z"
+              fill={
+                {
+                  "payload": 4278190080,
+                  "type": 0,
+                }
+              }
+              propList={
+                [
+                  "stroke",
+                  "strokeWidth",
+                  "strokeLinecap",
+                  "strokeLinejoin",
+                ]
+              }
+              stroke={
+                {
+                  "payload": 4294010984,
+                  "type": 0,
+                }
+              }
+              strokeLinecap={1}
+              strokeLinejoin={1}
+              strokeWidth="2"
+            />
+          </RNSVGGroup>
+        </RNSVGSvgView>
+      </View>
+      <View
+        style={
+          {
+            "backgroundColor": "#F16868",
+            "borderBottomLeftRadius": 8,
+            "borderBottomRightRadius": 32,
+            "borderTopLeftRadius": 24,
+            "borderTopRightRadius": 24,
+            "flex": 1,
+            "justifyContent": "center",
+            "paddingBottom": 16,
+            "paddingLeft": 24,
+            "paddingRight": 24,
+            "paddingTop": 16,
+          }
+        }
+      >
+        <View
+          collapsable={false}
+          handlerTag={11}
+          handlerType="PanGestureHandler"
+          onGestureHandlerEvent={[Function]}
+          onGestureHandlerStateChange={[Function]}
+          onLayout={[Function]}
+          style={
+            {
+              "overflow": "hidden",
+            }
+          }
+        >
+          <View
+            collapsable={false}
+            style={
+              {
+                "bottom": 0,
+                "flexDirection": "row-reverse",
+                "left": 0,
+                "position": "absolute",
+                "right": 0,
+                "top": 0,
+                "transform": [
+                  {
+                    "translateX": -10000,
+                  },
+                ],
+              }
+            }
+          >
+            <View
+              style={
+                {
+                  "alignItems": "center",
+                  "flex": 1,
+                  "flexDirection": "row",
+                  "justifyContent": "space-evenly",
+                }
+              }
+            >
+              <View
+                collapsable={false}
+                style={
+                  {
+                    "alignItems": "center",
+                    "justifyContent": "center",
+                    "opacity": 0,
+                  }
+                }
+              >
+                <View
+                  accessibilityState={
+                    {
+                      "busy": undefined,
+                      "checked": undefined,
+                      "disabled": undefined,
+                      "expanded": undefined,
+                      "selected": undefined,
+                    }
+                  }
+                  accessibilityValue={
+                    {
+                      "max": undefined,
+                      "min": undefined,
+                      "now": undefined,
+                      "text": undefined,
+                    }
+                  }
+                  accessible={true}
+                  collapsable={false}
+                  focusable={true}
+                  onBlur={[Function]}
+                  onClick={[Function]}
+                  onFocus={[Function]}
+                  onResponderGrant={[Function]}
+                  onResponderMove={[Function]}
+                  onResponderRelease={[Function]}
+                  onResponderTerminate={[Function]}
+                  onResponderTerminationRequest={[Function]}
+                  onStartShouldSetResponder={[Function]}
+                  testID="refresh-button"
+                >
+                  <RNSVGSvgView
+                    align="xMidYMid"
+                    bbHeight="24"
+                    bbWidth="24"
+                    fill="none"
+                    focusable={false}
+                    height={24}
+                    meetOrSlice={0}
+                    minX={0}
+                    minY={0}
+                    style={
+                      [
+                        {
+                          "backgroundColor": "transparent",
+                          "borderWidth": 0,
+                        },
+                        {
+                          "flex": 0,
+                          "height": 24,
+                          "width": 24,
+                        },
+                      ]
+                    }
+                    vbHeight={18}
+                    vbWidth={16}
+                    width={24}
+                  >
+                    <RNSVGGroup
+                      fill={null}
+                      propList={
+                        [
+                          "fill",
+                        ]
+                      }
+                    >
+                      <RNSVGPath
+                        d="M1.40005 0.200012C2.00756 0.200012 2.50005 0.692499 2.50005 1.30001V3.61139C3.89715 2.18539 5.84462 1.30001 8.00005 1.30001C11.3544 1.30001 14.2051 3.44426 15.2616 6.43344C15.4641 7.00623 15.1639 7.63468 14.5911 7.83714C14.0183 8.03959 13.3898 7.73937 13.1874 7.16658C12.4318 5.02891 10.3931 3.50001 8.00005 3.50001C6.20162 3.50001 4.60329 4.36353 3.59934 5.70001H6.90005C7.50756 5.70001 8.00005 6.1925 8.00005 6.80001C8.00005 7.40752 7.50756 7.90001 6.90005 7.90001H1.40005C0.792536 7.90001 0.300049 7.40752 0.300049 6.80001V1.30001C0.300049 0.692499 0.792536 0.200012 1.40005 0.200012ZM1.40903 10.1629C1.98182 9.96044 2.61027 10.2607 2.81273 10.8334C3.56828 12.9711 5.60703 14.5 8.00005 14.5C9.79847 14.5 11.3968 13.6365 12.4008 12.3L9.10005 12.3C8.49254 12.3 8.00005 11.8075 8.00005 11.2C8.00005 10.5925 8.49254 10.1 9.10005 10.1H14.6C14.8918 10.1 15.1716 10.2159 15.3779 10.4222C15.5842 10.6285 15.7 10.9083 15.7 11.2V16.7C15.7 17.3075 15.2076 17.8 14.6 17.8C13.9925 17.8 13.5 17.3075 13.5 16.7V14.3886C12.1029 15.8146 10.1555 16.7 8.00005 16.7C4.6457 16.7 1.795 14.5558 0.738478 11.5666C0.536026 10.9938 0.836243 10.3653 1.40903 10.1629Z"
+                        fill={
+                          {
+                            "payload": 4294695385,
+                            "type": 0,
+                          }
+                        }
+                        propList={
+                          [
+                            "fill",
+                          ]
+                        }
+                      />
+                    </RNSVGGroup>
+                  </RNSVGSvgView>
+                </View>
+              </View>
+              <View
+                collapsable={false}
+                style={
+                  {
+                    "alignItems": "center",
+                    "justifyContent": "center",
+                    "opacity": 0,
+                  }
+                }
+              >
+                <View
+                  accessibilityState={
+                    {
+                      "busy": undefined,
+                      "checked": undefined,
+                      "disabled": undefined,
+                      "expanded": undefined,
+                      "selected": undefined,
+                    }
+                  }
+                  accessibilityValue={
+                    {
+                      "max": undefined,
+                      "min": undefined,
+                      "now": undefined,
+                      "text": undefined,
+                    }
+                  }
+                  accessible={true}
+                  collapsable={false}
+                  focusable={true}
+                  onBlur={[Function]}
+                  onClick={[Function]}
+                  onFocus={[Function]}
+                  onResponderGrant={[Function]}
+                  onResponderMove={[Function]}
+                  onResponderRelease={[Function]}
+                  onResponderTerminate={[Function]}
+                  onResponderTerminationRequest={[Function]}
+                  onStartShouldSetResponder={[Function]}
+                  testID="delete-button"
+                >
+                  <RNSVGSvgView
+                    align="xMidYMid"
+                    bbHeight="24"
+                    bbWidth="24"
+                    fill="none"
+                    focusable={false}
+                    height={24}
+                    meetOrSlice={0}
+                    minX={0}
+                    minY={0}
+                    style={
+                      [
+                        {
+                          "backgroundColor": "transparent",
+                          "borderWidth": 0,
+                        },
+                        {
+                          "flex": 0,
+                          "height": 24,
+                          "width": 24,
+                        },
+                      ]
+                    }
+                    vbHeight={18}
+                    vbWidth={17}
+                    width={24}
+                  >
+                    <RNSVGGroup
+                      fill={null}
+                      propList={
+                        [
+                          "fill",
+                        ]
+                      }
+                    >
+                      <RNSVGPath
+                        clipRule={0}
+                        d="M7.34995 0.200012C6.91436 0.200012 6.51616 0.435415 6.32136 0.808077L5.48921 2.40001H1.59995C0.964824 2.40001 0.449951 2.8925 0.449951 3.50001C0.449951 4.10753 0.964824 4.60001 1.59995 4.60001L1.59995 15.6C1.59995 16.815 2.6297 17.8 3.89995 17.8H13.1C14.3702 17.8 15.4 16.815 15.4 15.6V4.60001C16.0351 4.60001 16.55 4.10753 16.55 3.50001C16.55 2.8925 16.0351 2.40001 15.4 2.40001H11.5107L10.6785 0.808077C10.4837 0.435415 10.0855 0.200012 9.64995 0.200012H7.34995ZM5.04995 6.80001C5.04995 6.1925 5.56482 5.70001 6.19995 5.70001C6.83508 5.70001 7.34995 6.1925 7.34995 6.80001V13.4C7.34995 14.0075 6.83508 14.5 6.19995 14.5C5.56482 14.5 5.04995 14.0075 5.04995 13.4V6.80001ZM10.8 5.70001C10.1648 5.70001 9.64995 6.1925 9.64995 6.80001V13.4C9.64995 14.0075 10.1648 14.5 10.8 14.5C11.4351 14.5 11.95 14.0075 11.95 13.4V6.80001C11.95 6.1925 11.4351 5.70001 10.8 5.70001Z"
+                        fill={
+                          {
+                            "payload": 4294695385,
+                            "type": 0,
+                          }
+                        }
+                        fillRule={0}
+                        propList={
+                          [
+                            "fill",
+                            "fillRule",
+                          ]
+                        }
+                      />
+                    </RNSVGGroup>
+                  </RNSVGSvgView>
+                </View>
+              </View>
+            </View>
+            <View
+              onLayout={[Function]}
+            />
+          </View>
+          <View
+            collapsable={false}
+            handlerTag={12}
+            handlerType="TapGestureHandler"
+            onGestureHandlerEvent={[Function]}
+            onGestureHandlerStateChange={[Function]}
+            pointerEvents="auto"
+            style={
+              {
+                "transform": [
+                  {
+                    "translateX": -0,
+                  },
+                ],
+              }
+            }
+          >
+            <Text
+              style={
+                [
+                  [
+                    {
+                      "fontFamily": "Montserrat",
+                      "fontSize": 13,
+                      "lineHeight": 20.4,
+                    },
+                  ],
+                  {
+                    "color": "#FFFFFF",
+                    "textAlign": undefined,
+                    "width": "100%",
+                  },
+                  {
+                    "backgroundColor": "#F16868",
+                    "minHeight": 30,
+                    "textAlignVertical": "center",
+                  },
+                ]
+              }
+            >
+              TEST Bubble
+            </Text>
+          </View>
+        </View>
+      </View>
+    </View>
+  </View>
+  <View
+    style={
+      {
+        "alignSelf": "flex-end",
+        "marginBottom": 2,
+      }
+    }
+  >
+    <Text
+      style={
+        [
+          [
+            {
+              "fontFamily": "Montserrat",
+              "fontSize": 13,
+              "lineHeight": 20.4,
+            },
+          ],
+          {
+            "color": "#9AA5B1",
+            "textAlign": "right",
+            "width": "100%",
+          },
+          {
+            "textAlignVertical": "center",
+          },
+        ]
+      }
+    >
+       
+      25 May, 9:08
+    </Text>
+  </View>
+</View>
+`;
+
+exports[`test text-bubble given the visualState is WARNING return an orange colored text-bubble AND white text 1`] = `
+<View
+  style={
+    {
+      "gap": 4,
+      "width": "100%",
+    }
+  }
+>
+  <View
+    style={
+      {
+        "minWidth": "50%",
+      }
+    }
+  >
+    <View
+      style={
+        {
+          "flexDirection": "row",
+          "gap": 12,
+        }
+      }
+    >
+      <View
+        style={
+          {
+            "justifyContent": "center",
+            "padding": 2,
+          }
+        }
+      >
+        <RNSVGSvgView
+          align="xMidYMid"
+          bbHeight="26"
+          bbWidth="26"
+          fill="none"
+          focusable={false}
+          height={26}
+          meetOrSlice={0}
+          minX={0}
+          minY={0}
+          style={
+            [
+              {
+                "backgroundColor": "transparent",
+                "borderWidth": 0,
+              },
+              {
+                "flex": 0,
+                "height": 26,
+                "width": 26,
+              },
+            ]
+          }
+          vbHeight={23}
+          vbWidth={22}
+          width={26}
+        >
+          <RNSVGGroup
+            fill={null}
+            propList={
+              [
+                "fill",
+              ]
+            }
+          >
+            <RNSVGPath
+              d="M11 7V11.5M11 16H11.0108M20.75 11.5C20.75 17.0919 16.3848 21.625 11 21.625C5.61522 21.625 1.25 17.0919 1.25 11.5C1.25 5.90812 5.61522 1.375 11 1.375C16.3848 1.375 20.75 5.90812 20.75 11.5Z"
+              fill={
+                {
+                  "payload": 4278190080,
+                  "type": 0,
+                }
+              }
+              propList={
+                [
+                  "stroke",
+                  "strokeWidth",
+                  "strokeLinecap",
+                  "strokeLinejoin",
+                ]
+              }
+              stroke={
+                {
+                  "payload": 4294010984,
+                  "type": 0,
+                }
+              }
+              strokeLinecap={1}
+              strokeLinejoin={1}
+              strokeWidth="2"
+            />
+          </RNSVGGroup>
+        </RNSVGSvgView>
+      </View>
+      <View
+        style={
+          {
+            "backgroundColor": "#F16868",
+            "borderBottomLeftRadius": 8,
+            "borderBottomRightRadius": 32,
+            "borderTopLeftRadius": 24,
+            "borderTopRightRadius": 24,
+            "flex": 1,
+            "justifyContent": "center",
+            "paddingBottom": 16,
+            "paddingLeft": 24,
+            "paddingRight": 24,
+            "paddingTop": 16,
+          }
+        }
+      >
+        <View
+          collapsable={false}
+          handlerTag={3}
+          handlerType="PanGestureHandler"
+          onGestureHandlerEvent={[Function]}
+          onGestureHandlerStateChange={[Function]}
+          onLayout={[Function]}
+          style={
+            {
+              "overflow": "hidden",
+            }
+          }
+        >
+          <View
+            collapsable={false}
+            style={
+              {
+                "bottom": 0,
+                "flexDirection": "row-reverse",
+                "left": 0,
+                "position": "absolute",
+                "right": 0,
+                "top": 0,
+                "transform": [
+                  {
+                    "translateX": -10000,
+                  },
+                ],
+              }
+            }
+          >
+            <View
+              style={
+                {
+                  "alignItems": "center",
+                  "flex": 1,
+                  "flexDirection": "row",
+                  "justifyContent": "space-evenly",
+                }
+              }
+            >
+              <View
+                collapsable={false}
+                style={
+                  {
+                    "alignItems": "center",
+                    "justifyContent": "center",
+                    "opacity": 0,
+                  }
+                }
+              >
+                <View
+                  accessibilityState={
+                    {
+                      "busy": undefined,
+                      "checked": undefined,
+                      "disabled": undefined,
+                      "expanded": undefined,
+                      "selected": undefined,
+                    }
+                  }
+                  accessibilityValue={
+                    {
+                      "max": undefined,
+                      "min": undefined,
+                      "now": undefined,
+                      "text": undefined,
+                    }
+                  }
+                  accessible={true}
+                  collapsable={false}
+                  focusable={true}
+                  onBlur={[Function]}
+                  onClick={[Function]}
+                  onFocus={[Function]}
+                  onResponderGrant={[Function]}
+                  onResponderMove={[Function]}
+                  onResponderRelease={[Function]}
+                  onResponderTerminate={[Function]}
+                  onResponderTerminationRequest={[Function]}
+                  onStartShouldSetResponder={[Function]}
+                  testID="refresh-button"
+                >
+                  <RNSVGSvgView
+                    align="xMidYMid"
+                    bbHeight="24"
+                    bbWidth="24"
+                    fill="none"
+                    focusable={false}
+                    height={24}
+                    meetOrSlice={0}
+                    minX={0}
+                    minY={0}
+                    style={
+                      [
+                        {
+                          "backgroundColor": "transparent",
+                          "borderWidth": 0,
+                        },
+                        {
+                          "flex": 0,
+                          "height": 24,
+                          "width": 24,
+                        },
+                      ]
+                    }
+                    vbHeight={18}
+                    vbWidth={16}
+                    width={24}
+                  >
+                    <RNSVGGroup
+                      fill={null}
+                      propList={
+                        [
+                          "fill",
+                        ]
+                      }
+                    >
+                      <RNSVGPath
+                        d="M1.40005 0.200012C2.00756 0.200012 2.50005 0.692499 2.50005 1.30001V3.61139C3.89715 2.18539 5.84462 1.30001 8.00005 1.30001C11.3544 1.30001 14.2051 3.44426 15.2616 6.43344C15.4641 7.00623 15.1639 7.63468 14.5911 7.83714C14.0183 8.03959 13.3898 7.73937 13.1874 7.16658C12.4318 5.02891 10.3931 3.50001 8.00005 3.50001C6.20162 3.50001 4.60329 4.36353 3.59934 5.70001H6.90005C7.50756 5.70001 8.00005 6.1925 8.00005 6.80001C8.00005 7.40752 7.50756 7.90001 6.90005 7.90001H1.40005C0.792536 7.90001 0.300049 7.40752 0.300049 6.80001V1.30001C0.300049 0.692499 0.792536 0.200012 1.40005 0.200012ZM1.40903 10.1629C1.98182 9.96044 2.61027 10.2607 2.81273 10.8334C3.56828 12.9711 5.60703 14.5 8.00005 14.5C9.79847 14.5 11.3968 13.6365 12.4008 12.3L9.10005 12.3C8.49254 12.3 8.00005 11.8075 8.00005 11.2C8.00005 10.5925 8.49254 10.1 9.10005 10.1H14.6C14.8918 10.1 15.1716 10.2159 15.3779 10.4222C15.5842 10.6285 15.7 10.9083 15.7 11.2V16.7C15.7 17.3075 15.2076 17.8 14.6 17.8C13.9925 17.8 13.5 17.3075 13.5 16.7V14.3886C12.1029 15.8146 10.1555 16.7 8.00005 16.7C4.6457 16.7 1.795 14.5558 0.738478 11.5666C0.536026 10.9938 0.836243 10.3653 1.40903 10.1629Z"
+                        fill={
+                          {
+                            "payload": 4294695385,
+                            "type": 0,
+                          }
+                        }
+                        propList={
+                          [
+                            "fill",
+                          ]
+                        }
+                      />
+                    </RNSVGGroup>
+                  </RNSVGSvgView>
+                </View>
+              </View>
+              <View
+                collapsable={false}
+                style={
+                  {
+                    "alignItems": "center",
+                    "justifyContent": "center",
+                    "opacity": 0,
+                  }
+                }
+              >
+                <View
+                  accessibilityState={
+                    {
+                      "busy": undefined,
+                      "checked": undefined,
+                      "disabled": undefined,
+                      "expanded": undefined,
+                      "selected": undefined,
+                    }
+                  }
+                  accessibilityValue={
+                    {
+                      "max": undefined,
+                      "min": undefined,
+                      "now": undefined,
+                      "text": undefined,
+                    }
+                  }
+                  accessible={true}
+                  collapsable={false}
+                  focusable={true}
+                  onBlur={[Function]}
+                  onClick={[Function]}
+                  onFocus={[Function]}
+                  onResponderGrant={[Function]}
+                  onResponderMove={[Function]}
+                  onResponderRelease={[Function]}
+                  onResponderTerminate={[Function]}
+                  onResponderTerminationRequest={[Function]}
+                  onStartShouldSetResponder={[Function]}
+                  testID="delete-button"
+                >
+                  <RNSVGSvgView
+                    align="xMidYMid"
+                    bbHeight="24"
+                    bbWidth="24"
+                    fill="none"
+                    focusable={false}
+                    height={24}
+                    meetOrSlice={0}
+                    minX={0}
+                    minY={0}
+                    style={
+                      [
+                        {
+                          "backgroundColor": "transparent",
+                          "borderWidth": 0,
+                        },
+                        {
+                          "flex": 0,
+                          "height": 24,
+                          "width": 24,
+                        },
+                      ]
+                    }
+                    vbHeight={18}
+                    vbWidth={17}
+                    width={24}
+                  >
+                    <RNSVGGroup
+                      fill={null}
+                      propList={
+                        [
+                          "fill",
+                        ]
+                      }
+                    >
+                      <RNSVGPath
+                        clipRule={0}
+                        d="M7.34995 0.200012C6.91436 0.200012 6.51616 0.435415 6.32136 0.808077L5.48921 2.40001H1.59995C0.964824 2.40001 0.449951 2.8925 0.449951 3.50001C0.449951 4.10753 0.964824 4.60001 1.59995 4.60001L1.59995 15.6C1.59995 16.815 2.6297 17.8 3.89995 17.8H13.1C14.3702 17.8 15.4 16.815 15.4 15.6V4.60001C16.0351 4.60001 16.55 4.10753 16.55 3.50001C16.55 2.8925 16.0351 2.40001 15.4 2.40001H11.5107L10.6785 0.808077C10.4837 0.435415 10.0855 0.200012 9.64995 0.200012H7.34995ZM5.04995 6.80001C5.04995 6.1925 5.56482 5.70001 6.19995 5.70001C6.83508 5.70001 7.34995 6.1925 7.34995 6.80001V13.4C7.34995 14.0075 6.83508 14.5 6.19995 14.5C5.56482 14.5 5.04995 14.0075 5.04995 13.4V6.80001ZM10.8 5.70001C10.1648 5.70001 9.64995 6.1925 9.64995 6.80001V13.4C9.64995 14.0075 10.1648 14.5 10.8 14.5C11.4351 14.5 11.95 14.0075 11.95 13.4V6.80001C11.95 6.1925 11.4351 5.70001 10.8 5.70001Z"
+                        fill={
+                          {
+                            "payload": 4294695385,
+                            "type": 0,
+                          }
+                        }
+                        fillRule={0}
+                        propList={
+                          [
+                            "fill",
+                            "fillRule",
+                          ]
+                        }
+                      />
+                    </RNSVGGroup>
+                  </RNSVGSvgView>
+                </View>
+              </View>
+            </View>
+            <View
+              onLayout={[Function]}
+            />
+          </View>
+          <View
+            collapsable={false}
+            handlerTag={4}
+            handlerType="TapGestureHandler"
+            onGestureHandlerEvent={[Function]}
+            onGestureHandlerStateChange={[Function]}
+            pointerEvents="auto"
+            style={
+              {
+                "transform": [
+                  {
+                    "translateX": -0,
+                  },
+                ],
+              }
+            }
+          >
+            <Text
+              style={
+                [
+                  [
+                    {
+                      "fontFamily": "Montserrat",
+                      "fontSize": 13,
+                      "lineHeight": 20.4,
+                    },
+                  ],
+                  {
+                    "color": "#FFFFFF",
+                    "textAlign": undefined,
+                    "width": "100%",
+                  },
+                  {
+                    "backgroundColor": "#F16868",
+                    "minHeight": 30,
+                    "textAlignVertical": "center",
+                  },
+                ]
+              }
+            >
+              TEST color
+            </Text>
+          </View>
+        </View>
+      </View>
+    </View>
+  </View>
+  <View
+    style={
+      {
+        "alignSelf": "flex-end",
+        "marginBottom": 2,
+      }
+    }
+  >
+    <Text
+      style={
+        [
+          [
+            {
+              "fontFamily": "Montserrat",
+              "fontSize": 13,
+              "lineHeight": 20.4,
+            },
+          ],
+          {
+            "color": "#9AA5B1",
+            "textAlign": "right",
+            "width": "100%",
+          },
+          {
+            "textAlignVertical": "center",
+          },
+        ]
+      }
+    >
+       
+      25 May, 9:08
+    </Text>
+  </View>
+</View>
+`;
+
+exports[`test text-bubble return a text bubble, that will be send, but does not get send due to an error. It will show the failed text bubble 1`] = `
+<View
+  style={
+    {
+      "gap": 4,
+      "width": "100%",
+    }
+  }
+>
+  <View
+    style={
+      {
+        "minWidth": "50%",
+      }
+    }
+  >
+    <View
+      style={
+        {
+          "flexDirection": "row",
+          "gap": 12,
+        }
+      }
+    >
+      <View
+        style={
+          {
+            "justifyContent": "center",
+            "padding": 2,
+          }
+        }
+      >
+        <RNSVGSvgView
+          align="xMidYMid"
+          bbHeight="26"
+          bbWidth="26"
+          fill="none"
+          focusable={false}
+          height={26}
+          meetOrSlice={0}
+          minX={0}
+          minY={0}
+          style={
+            [
+              {
+                "backgroundColor": "transparent",
+                "borderWidth": 0,
+              },
+              {
+                "flex": 0,
+                "height": 26,
+                "width": 26,
+              },
+            ]
+          }
+          vbHeight={23}
+          vbWidth={22}
+          width={26}
+        >
+          <RNSVGGroup
+            fill={null}
+            propList={
+              [
+                "fill",
+              ]
+            }
+          >
+            <RNSVGPath
+              d="M11 7V11.5M11 16H11.0108M20.75 11.5C20.75 17.0919 16.3848 21.625 11 21.625C5.61522 21.625 1.25 17.0919 1.25 11.5C1.25 5.90812 5.61522 1.375 11 1.375C16.3848 1.375 20.75 5.90812 20.75 11.5Z"
+              fill={
+                {
+                  "payload": 4278190080,
+                  "type": 0,
+                }
+              }
+              propList={
+                [
+                  "stroke",
+                  "strokeWidth",
+                  "strokeLinecap",
+                  "strokeLinejoin",
+                ]
+              }
+              stroke={
+                {
+                  "payload": 4294010984,
+                  "type": 0,
+                }
+              }
+              strokeLinecap={1}
+              strokeLinejoin={1}
+              strokeWidth="2"
+            />
+          </RNSVGGroup>
+        </RNSVGSvgView>
+      </View>
+      <View
+        style={
+          {
+            "backgroundColor": "#F16868",
+            "borderBottomLeftRadius": 8,
+            "borderBottomRightRadius": 32,
+            "borderTopLeftRadius": 24,
+            "borderTopRightRadius": 24,
+            "flex": 1,
+            "justifyContent": "center",
+            "paddingBottom": 16,
+            "paddingLeft": 24,
+            "paddingRight": 24,
+            "paddingTop": 16,
+          }
+        }
+      >
+        <View
+          collapsable={false}
+          handlerTag={13}
+          handlerType="PanGestureHandler"
+          onGestureHandlerEvent={[Function]}
+          onGestureHandlerStateChange={[Function]}
+          onLayout={[Function]}
+          style={
+            {
+              "overflow": "hidden",
+            }
+          }
+        >
+          <View
+            collapsable={false}
+            style={
+              {
+                "bottom": 0,
+                "flexDirection": "row-reverse",
+                "left": 0,
+                "position": "absolute",
+                "right": 0,
+                "top": 0,
+                "transform": [
+                  {
+                    "translateX": -10000,
+                  },
+                ],
+              }
+            }
+          >
+            <View
+              style={
+                {
+                  "alignItems": "center",
+                  "flex": 1,
+                  "flexDirection": "row",
+                  "justifyContent": "space-evenly",
+                }
+              }
+            >
+              <View
+                collapsable={false}
+                style={
+                  {
+                    "alignItems": "center",
+                    "justifyContent": "center",
+                    "opacity": 0,
+                  }
+                }
+              >
+                <View
+                  accessibilityState={
+                    {
+                      "busy": undefined,
+                      "checked": undefined,
+                      "disabled": undefined,
+                      "expanded": undefined,
+                      "selected": undefined,
+                    }
+                  }
+                  accessibilityValue={
+                    {
+                      "max": undefined,
+                      "min": undefined,
+                      "now": undefined,
+                      "text": undefined,
+                    }
+                  }
+                  accessible={true}
+                  collapsable={false}
+                  focusable={true}
+                  onBlur={[Function]}
+                  onClick={[Function]}
+                  onFocus={[Function]}
+                  onResponderGrant={[Function]}
+                  onResponderMove={[Function]}
+                  onResponderRelease={[Function]}
+                  onResponderTerminate={[Function]}
+                  onResponderTerminationRequest={[Function]}
+                  onStartShouldSetResponder={[Function]}
+                  testID="refresh-button"
+                >
+                  <RNSVGSvgView
+                    align="xMidYMid"
+                    bbHeight="24"
+                    bbWidth="24"
+                    fill="none"
+                    focusable={false}
+                    height={24}
+                    meetOrSlice={0}
+                    minX={0}
+                    minY={0}
+                    style={
+                      [
+                        {
+                          "backgroundColor": "transparent",
+                          "borderWidth": 0,
+                        },
+                        {
+                          "flex": 0,
+                          "height": 24,
+                          "width": 24,
+                        },
+                      ]
+                    }
+                    vbHeight={18}
+                    vbWidth={16}
+                    width={24}
+                  >
+                    <RNSVGGroup
+                      fill={null}
+                      propList={
+                        [
+                          "fill",
+                        ]
+                      }
+                    >
+                      <RNSVGPath
+                        d="M1.40005 0.200012C2.00756 0.200012 2.50005 0.692499 2.50005 1.30001V3.61139C3.89715 2.18539 5.84462 1.30001 8.00005 1.30001C11.3544 1.30001 14.2051 3.44426 15.2616 6.43344C15.4641 7.00623 15.1639 7.63468 14.5911 7.83714C14.0183 8.03959 13.3898 7.73937 13.1874 7.16658C12.4318 5.02891 10.3931 3.50001 8.00005 3.50001C6.20162 3.50001 4.60329 4.36353 3.59934 5.70001H6.90005C7.50756 5.70001 8.00005 6.1925 8.00005 6.80001C8.00005 7.40752 7.50756 7.90001 6.90005 7.90001H1.40005C0.792536 7.90001 0.300049 7.40752 0.300049 6.80001V1.30001C0.300049 0.692499 0.792536 0.200012 1.40005 0.200012ZM1.40903 10.1629C1.98182 9.96044 2.61027 10.2607 2.81273 10.8334C3.56828 12.9711 5.60703 14.5 8.00005 14.5C9.79847 14.5 11.3968 13.6365 12.4008 12.3L9.10005 12.3C8.49254 12.3 8.00005 11.8075 8.00005 11.2C8.00005 10.5925 8.49254 10.1 9.10005 10.1H14.6C14.8918 10.1 15.1716 10.2159 15.3779 10.4222C15.5842 10.6285 15.7 10.9083 15.7 11.2V16.7C15.7 17.3075 15.2076 17.8 14.6 17.8C13.9925 17.8 13.5 17.3075 13.5 16.7V14.3886C12.1029 15.8146 10.1555 16.7 8.00005 16.7C4.6457 16.7 1.795 14.5558 0.738478 11.5666C0.536026 10.9938 0.836243 10.3653 1.40903 10.1629Z"
+                        fill={
+                          {
+                            "payload": 4294695385,
+                            "type": 0,
+                          }
+                        }
+                        propList={
+                          [
+                            "fill",
+                          ]
+                        }
+                      />
+                    </RNSVGGroup>
+                  </RNSVGSvgView>
+                </View>
+              </View>
+              <View
+                collapsable={false}
+                style={
+                  {
+                    "alignItems": "center",
+                    "justifyContent": "center",
+                    "opacity": 0,
+                  }
+                }
+              >
+                <View
+                  accessibilityState={
+                    {
+                      "busy": undefined,
+                      "checked": undefined,
+                      "disabled": undefined,
+                      "expanded": undefined,
+                      "selected": undefined,
+                    }
+                  }
+                  accessibilityValue={
+                    {
+                      "max": undefined,
+                      "min": undefined,
+                      "now": undefined,
+                      "text": undefined,
+                    }
+                  }
+                  accessible={true}
+                  collapsable={false}
+                  focusable={true}
+                  onBlur={[Function]}
+                  onClick={[Function]}
+                  onFocus={[Function]}
+                  onResponderGrant={[Function]}
+                  onResponderMove={[Function]}
+                  onResponderRelease={[Function]}
+                  onResponderTerminate={[Function]}
+                  onResponderTerminationRequest={[Function]}
+                  onStartShouldSetResponder={[Function]}
+                  testID="delete-button"
+                >
+                  <RNSVGSvgView
+                    align="xMidYMid"
+                    bbHeight="24"
+                    bbWidth="24"
+                    fill="none"
+                    focusable={false}
+                    height={24}
+                    meetOrSlice={0}
+                    minX={0}
+                    minY={0}
+                    style={
+                      [
+                        {
+                          "backgroundColor": "transparent",
+                          "borderWidth": 0,
+                        },
+                        {
+                          "flex": 0,
+                          "height": 24,
+                          "width": 24,
+                        },
+                      ]
+                    }
+                    vbHeight={18}
+                    vbWidth={17}
+                    width={24}
+                  >
+                    <RNSVGGroup
+                      fill={null}
+                      propList={
+                        [
+                          "fill",
+                        ]
+                      }
+                    >
+                      <RNSVGPath
+                        clipRule={0}
+                        d="M7.34995 0.200012C6.91436 0.200012 6.51616 0.435415 6.32136 0.808077L5.48921 2.40001H1.59995C0.964824 2.40001 0.449951 2.8925 0.449951 3.50001C0.449951 4.10753 0.964824 4.60001 1.59995 4.60001L1.59995 15.6C1.59995 16.815 2.6297 17.8 3.89995 17.8H13.1C14.3702 17.8 15.4 16.815 15.4 15.6V4.60001C16.0351 4.60001 16.55 4.10753 16.55 3.50001C16.55 2.8925 16.0351 2.40001 15.4 2.40001H11.5107L10.6785 0.808077C10.4837 0.435415 10.0855 0.200012 9.64995 0.200012H7.34995ZM5.04995 6.80001C5.04995 6.1925 5.56482 5.70001 6.19995 5.70001C6.83508 5.70001 7.34995 6.1925 7.34995 6.80001V13.4C7.34995 14.0075 6.83508 14.5 6.19995 14.5C5.56482 14.5 5.04995 14.0075 5.04995 13.4V6.80001ZM10.8 5.70001C10.1648 5.70001 9.64995 6.1925 9.64995 6.80001V13.4C9.64995 14.0075 10.1648 14.5 10.8 14.5C11.4351 14.5 11.95 14.0075 11.95 13.4V6.80001C11.95 6.1925 11.4351 5.70001 10.8 5.70001Z"
+                        fill={
+                          {
+                            "payload": 4294695385,
+                            "type": 0,
+                          }
+                        }
+                        fillRule={0}
+                        propList={
+                          [
+                            "fill",
+                            "fillRule",
+                          ]
+                        }
+                      />
+                    </RNSVGGroup>
+                  </RNSVGSvgView>
+                </View>
+              </View>
+            </View>
+            <View
+              onLayout={[Function]}
+            />
+          </View>
+          <View
+            collapsable={false}
+            handlerTag={14}
+            handlerType="TapGestureHandler"
+            onGestureHandlerEvent={[Function]}
+            onGestureHandlerStateChange={[Function]}
+            pointerEvents="auto"
+            style={
+              {
+                "transform": [
+                  {
+                    "translateX": -0,
+                  },
+                ],
+              }
+            }
+          >
+            <Text
+              style={
+                [
+                  [
+                    {
+                      "fontFamily": "Montserrat",
+                      "fontSize": 13,
+                      "lineHeight": 20.4,
+                    },
+                  ],
+                  {
+                    "color": "#FFFFFF",
+                    "textAlign": undefined,
+                    "width": "100%",
+                  },
+                  {
+                    "backgroundColor": "#F16868",
+                    "minHeight": 30,
+                    "textAlignVertical": "center",
+                  },
+                ]
+              }
+            >
+              TEST Bubble
+            </Text>
+          </View>
+        </View>
+      </View>
+    </View>
+  </View>
+  <View
+    style={
+      {
+        "alignSelf": "flex-end",
+        "marginBottom": 2,
+      }
+    }
+  >
+    <Text
+      style={
+        [
+          [
+            {
+              "fontFamily": "Montserrat",
+              "fontSize": 13,
+              "lineHeight": 20.4,
+            },
+          ],
+          {
+            "color": "#9AA5B1",
+            "textAlign": "right",
+            "width": "100%",
+          },
+          {
+            "textAlignVertical": "center",
+          },
+        ]
+      }
+    >
+       
+      25 May, 9:08
+    </Text>
+  </View>
+</View>
+`;