stream-chat-react-native-core 4.0.0-beta.2 → 4.0.0-beta.3

package/src/components/MessageInput/__tests__/__snapshots__/MessageInput.test.js.snap

@@ -684,651 +684,9 @@ Array [
       }
     />
   </View>,
-  <View
-    animatedStyle={
-      Object {
-        "value": Object {
-          "opacity": 0,
-          "transform": Array [
-            Object {
-              "translateY": 1334,
-            },
-          ],
-        },
-      }
-    }
-    collapsable={false}
-    pointerEvents="none"
-    style={
-      Object {
-        "bottom": 0,
-        "left": 0,
-        "opacity": 0,
-        "position": "absolute",
-        "right": 0,
-        "top": 0,
-        "transform": Array [
-          Object {
-            "translateY": 1334,
-          },
-        ],
-      }
-    }
-  >
-    <View
-      animatedStyle={
-        Object {
-          "value": Object {
-            "backgroundColor": "#FCFCFC",
-            "opacity": 1,
-          },
-        }
-      }
-      collapsable={false}
-      style={
-        Object {
-          "backgroundColor": "#FCFCFC",
-          "bottom": 0,
-          "left": 0,
-          "opacity": 1,
-          "position": "absolute",
-          "right": 0,
-          "top": 0,
-        }
-      }
-    />
-    <View
-      animatedStyle={
-        Object {
-          "value": Object {},
-        }
-      }
-      collapsable={false}
-      forwardedRef={[Function]}
-      onGestureHandlerEvent={[Function]}
-      onGestureHandlerStateChange={[Function]}
-      style={
-        Object {
-          "bottom": 0,
-          "left": 0,
-          "position": "absolute",
-          "right": 0,
-          "top": 0,
-        }
-      }
-    >
-      <View
-        animatedStyle={
-          Object {
-            "value": Object {},
-          }
-        }
-        collapsable={false}
-        forwardedRef={[Function]}
-        onGestureHandlerEvent={[Function]}
-        onGestureHandlerStateChange={[Function]}
-        style={
-          Object {
-            "bottom": 0,
-            "left": 0,
-            "position": "absolute",
-            "right": 0,
-            "top": 0,
-          }
-        }
-      >
-        <View
-          animatedStyle={
-            Object {
-              "value": Object {},
-            }
-          }
-          collapsable={false}
-          forwardedRef={[Function]}
-          onGestureHandlerEvent={[Function]}
-          onGestureHandlerStateChange={[Function]}
-          style={
-            Object {
-              "bottom": 0,
-              "left": 0,
-              "position": "absolute",
-              "right": 0,
-              "top": 0,
-            }
-          }
-        >
-          <View
-            animatedStyle={
-              Object {
-                "value": Object {},
-              }
-            }
-            collapsable={false}
-            forwardedRef={[Function]}
-            onGestureHandlerEvent={[Function]}
-            onGestureHandlerStateChange={[Function]}
-            style={
-              Object {
-                "bottom": 0,
-                "left": 0,
-                "position": "absolute",
-                "right": 0,
-                "top": 0,
-              }
-            }
-          >
-            <View
-              animatedStyle={
-                Object {
-                  "value": Object {
-                    "transform": Array [
-                      Object {
-                        "scaleX": -1,
-                      },
-                      Object {
-                        "translateX": 0,
-                      },
-                    ],
-                  },
-                }
-              }
-              collapsable={false}
-              style={
-                Object {
-                  "alignItems": "center",
-                  "flexDirection": "row",
-                  "transform": Array [
-                    Object {
-                      "scaleX": -1,
-                    },
-                    Object {
-                      "translateX": 0,
-                    },
-                  ],
-                }
-              }
-            />
-          </View>
-        </View>
-      </View>
-    </View>
-    <View
-      onLayout={[Function]}
-      pointerEvents="box-none"
-    >
-      <RCTSafeAreaView
-        animatedStyle={
-          Object {
-            "value": Object {
-              "opacity": 1,
-              "transform": Array [
-                Object {
-                  "translateY": 0,
-                },
-              ],
-            },
-          }
-        }
-        collapsable={false}
-        emulateUnlessSupported={true}
-        style={
-          Object {
-            "backgroundColor": "#FFFFFF",
-            "opacity": 1,
-            "paddingTop": undefined,
-            "transform": Array [
-              Object {
-                "translateY": 0,
-              },
-            ],
-          }
-        }
-      >
-        <View
-          style={
-            Array [
-              Object {
-                "flexDirection": "row",
-                "height": 56,
-              },
-              Object {},
-            ]
-          }
-        >
-          <View
-            accessible={true}
-            focusable={true}
-            onClick={[Function]}
-            onResponderGrant={[Function]}
-            onResponderMove={[Function]}
-            onResponderRelease={[Function]}
-            onResponderTerminate={[Function]}
-            onResponderTerminationRequest={[Function]}
-            onStartShouldSetResponder={[Function]}
-            style={
-              Object {
-                "opacity": 1,
-              }
-            }
-          >
-            <View
-              style={
-                Array [
-                  Object {
-                    "flex": 1,
-                    "justifyContent": "center",
-                    "marginLeft": 8,
-                  },
-                  Object {},
-                ]
-              }
-            >
-              <RNSVGSvgView
-                align="xMidYMid"
-                bbHeight={24}
-                bbWidth={24}
-                focusable={false}
-                height={24}
-                meetOrSlice={0}
-                minX={0}
-                minY={0}
-                style={
-                  Array [
-                    Object {
-                      "backgroundColor": "transparent",
-                      "borderWidth": 0,
-                    },
-                    Object {
-                      "flex": 0,
-                      "height": 24,
-                      "width": 24,
-                    },
-                  ]
-                }
-                vbHeight={24}
-                vbWidth={24}
-                width={24}
-              >
-                <RNSVGGroup>
-                  <RNSVGPath
-                    clipRule={0}
-                    d="M7.05 7.05a1 1 0 000 1.414L10.586 12 7.05 15.536a1 1 0 101.414 1.414L12 13.414l3.536 3.536a1 1 0 001.414-1.414L13.414 12l3.536-3.536a1 1 0 00-1.414-1.414L12 10.586 8.464 7.05a1 1 0 00-1.414 0z"
-                    fill={4278190080}
-                    fillRule={0}
-                    propList={
-                      Array [
-                        "fill",
-                        "fillRule",
-                      ]
-                    }
-                  />
-                </RNSVGGroup>
-              </RNSVGSvgView>
-            </View>
-          </View>
-          <View
-            style={
-              Array [
-                Object {
-                  "alignItems": "center",
-                  "flex": 1,
-                  "justifyContent": "center",
-                },
-                Object {},
-              ]
-            }
-          >
-            <Text
-              style={
-                Array [
-                  Object {
-                    "fontSize": 16,
-                    "fontWeight": "700",
-                  },
-                  Object {
-                    "color": "#000000",
-                  },
-                  Object {},
-                ]
-              }
-            >
-              Unknown User
-            </Text>
-          </View>
-          <View
-            style={
-              Array [
-                Object {
-                  "marginRight": 8,
-                  "width": 24,
-                },
-                Object {},
-              ]
-            }
-          />
-        </View>
-      </RCTSafeAreaView>
-    </View>
-    <View
-      animatedStyle={
-        Object {
-          "value": Object {},
-        }
-      }
-      collapsable={false}
-      onLayout={[Function]}
-      pointerEvents="box-none"
-      style={
-        Object {
-          "bottom": 0,
-          "left": 0,
-          "position": "absolute",
-          "right": 0,
-        }
-      }
-    >
-      <RCTSafeAreaView
-        animatedStyle={
-          Object {
-            "value": Object {
-              "opacity": 1,
-              "transform": Array [
-                Object {
-                  "translateY": 0,
-                },
-              ],
-            },
-          }
-        }
-        collapsable={false}
-        emulateUnlessSupported={true}
-        style={
-          Object {
-            "backgroundColor": "#FFFFFF",
-            "opacity": 1,
-            "transform": Array [
-              Object {
-                "translateY": 0,
-              },
-            ],
-          }
-        }
-      >
-        <View
-          style={
-            Array [
-              Object {
-                "flexDirection": "row",
-                "height": 56,
-              },
-              Object {},
-            ]
-          }
-        >
-          <View
-            accessible={true}
-            focusable={true}
-            onClick={[Function]}
-            onResponderGrant={[Function]}
-            onResponderMove={[Function]}
-            onResponderRelease={[Function]}
-            onResponderTerminate={[Function]}
-            onResponderTerminationRequest={[Function]}
-            onStartShouldSetResponder={[Function]}
-            style={
-              Object {
-                "opacity": 1,
-              }
-            }
-          >
-            <View
-              style={
-                Array [
-                  Object {
-                    "flex": 1,
-                    "justifyContent": "center",
-                    "marginLeft": 8,
-                  },
-                  Object {},
-                ]
-              }
-            >
-              <RNSVGSvgView
-                align="xMidYMid"
-                bbHeight={24}
-                bbWidth={24}
-                focusable={false}
-                height={24}
-                meetOrSlice={0}
-                minX={0}
-                minY={0}
-                style={
-                  Array [
-                    Object {
-                      "backgroundColor": "transparent",
-                      "borderWidth": 0,
-                    },
-                    Object {
-                      "flex": 0,
-                      "height": 24,
-                      "width": 24,
-                    },
-                  ]
-                }
-                vbHeight={24}
-                vbWidth={24}
-                width={24}
-              >
-                <RNSVGGroup>
-                  <RNSVGPath
-                    clipRule={0}
-                    d="M5.306 9.695a1.043 1.043 0 001.476 0l5.219-5.225 5.218 5.224a1.043 1.043 0 001.476 0 1.046 1.046 0 000-1.478l-5.904-5.91a1.04 1.04 0 00-.8-.304 1.04 1.04 0 00-.781.305l-5.904 5.91a1.046 1.046 0 000 1.478z"
-                    fill={4278190080}
-                    fillRule={0}
-                    propList={
-                      Array [
-                        "fill",
-                        "fillRule",
-                      ]
-                    }
-                  />
-                  <RNSVGRect
-                    fill={4278190080}
-                    height={16}
-                    propList={
-                      Array [
-                        "fill",
-                      ]
-                    }
-                    rx={1}
-                    width={2}
-                    x={11}
-                    y={2}
-                  />
-                  <RNSVGPath
-                    clipRule={0}
-                    d="M4 12a2 2 0 00-2 2v6a2 2 0 002 2h16a2 2 0 002-2v-6a2 2 0 00-2-2h-5v2h4a1 1 0 011 1v4a1 1 0 01-1 1H5a1 1 0 01-1-1v-4a1 1 0 011-1h4v-2H4z"
-                    fill={4278190080}
-                    fillRule={0}
-                    propList={
-                      Array [
-                        "fill",
-                        "fillRule",
-                      ]
-                    }
-                  />
-                </RNSVGGroup>
-              </RNSVGSvgView>
-            </View>
-          </View>
-          <View
-            style={
-              Array [
-                Object {
-                  "alignItems": "center",
-                  "flex": 1,
-                  "justifyContent": "center",
-                },
-                Object {},
-              ]
-            }
-          >
-            <Text
-              style={
-                Array [
-                  Object {
-                    "fontSize": 16,
-                    "fontWeight": "600",
-                  },
-                  Object {
-                    "color": "#000000",
-                  },
-                  Object {},
-                ]
-              }
-            >
-              0 of 0
-            </Text>
-          </View>
-          <View
-            accessible={true}
-            focusable={true}
-            onClick={[Function]}
-            onResponderGrant={[Function]}
-            onResponderMove={[Function]}
-            onResponderRelease={[Function]}
-            onResponderTerminate={[Function]}
-            onResponderTerminationRequest={[Function]}
-            onStartShouldSetResponder={[Function]}
-            style={
-              Object {
-                "opacity": 1,
-              }
-            }
-          >
-            <View
-              style={
-                Array [
-                  Object {
-                    "flex": 1,
-                    "justifyContent": "center",
-                    "marginRight": 8,
-                  },
-                  Object {},
-                ]
-              }
-            >
-              <RNSVGSvgView
-                align="xMidYMid"
-                bbHeight={24}
-                bbWidth={24}
-                focusable={false}
-                height={24}
-                meetOrSlice={0}
-                minX={0}
-                minY={0}
-                style={
-                  Array [
-                    Object {
-                      "backgroundColor": "transparent",
-                      "borderWidth": 0,
-                    },
-                    Object {
-                      "flex": 0,
-                      "height": 24,
-                      "width": 24,
-                    },
-                  ]
-                }
-                vbHeight={24}
-                vbWidth={24}
-                width={24}
-              >
-                <RNSVGGroup>
-                  <RNSVGPath
-                    clipRule={0}
-                    d="M4 5a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zM10 5a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 01-1 1h-2a1 1 0 01-1-1V5zM17 4a1 1 0 00-1 1v2a1 1 0 001 1h2a1 1 0 001-1V5a1 1 0 00-1-1h-2zM4 11a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1v-2zM11 10a1 1 0 00-1 1v2a1 1 0 001 1h2a1 1 0 001-1v-2a1 1 0 00-1-1h-2zM16 11a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 01-1 1h-2a1 1 0 01-1-1v-2zM5 16a1 1 0 00-1 1v2a1 1 0 001 1h2a1 1 0 001-1v-2a1 1 0 00-1-1H5zM10 17a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 01-1 1h-2a1 1 0 01-1-1v-2zM17 16a1 1 0 00-1 1v2a1 1 0 001 1h2a1 1 0 001-1v-2a1 1 0 00-1-1h-2z"
-                    fill={4278190080}
-                    fillRule={0}
-                    propList={
-                      Array [
-                        "fill",
-                        "fillRule",
-                      ]
-                    }
-                  />
-                </RNSVGGroup>
-              </RNSVGSvgView>
-            </View>
-          </View>
-        </View>
-      </RCTSafeAreaView>
-    </View>
-    <View
-      animatedIndex={
-        MutableValue {
-          "_animation": null,
-          "_id": 4,
-          "_listeners": Array [
-            [Function],
-          ],
-          "_setter": [Function],
-          "_value": 0,
-        }
-      }
-      containerHeight={1334}
-      handleComponent={[Function]}
-      handleHeight={40}
-      index={0}
-      onChange={[Function]}
-      snapPoints={
-        Array [
-          0,
-          1200.6,
-        ]
-      }
-    >
-      <RCTScrollView
-        contentContainerStyle={
-          Array [
-            Object {
-              "flexGrow": 1,
-            },
-            Object {
-              "backgroundColor": "#FFFFFF",
-            },
-            Object {},
-          ]
-        }
-        data={Array []}
-        disableVirtualization={false}
-        getItem={[Function]}
-        getItemCount={[Function]}
-        horizontal={false}
-        initialNumToRender={10}
-        keyExtractor={[Function]}
-        maxToRenderPerBatch={10}
-        onContentSizeChange={[Function]}
-        onEndReachedThreshold={2}
-        onLayout={[Function]}
-        onMomentumScrollEnd={[Function]}
-        onScroll={[Function]}
-        onScrollBeginDrag={[Function]}
-        onScrollEndDrag={[Function]}
-        removeClippedSubviews={false}
-        renderItem={[Function]}
-        scrollEventThrottle={50}
-        stickyHeaderIndices={Array []}
-        updateCellsBatchingPeriod={50}
-        viewabilityConfigCallbackPairs={Array []}
-        windowSize={21}
-      >
-        <View />
-      </RCTScrollView>
-    </View>
-  </View>,
   <View
     containerHeight={1334}
+    enablePanDownToClose={true}
     handleComponent={[Function]}
     handleHeight={20}
     index={-1}

package/src/components/MessageInput/hooks/useCooldown.ts

@@ -1,5 +1,7 @@
 import { useState } from 'react';
+
 import { BuiltinRoles, ChannelResponse, Role } from 'stream-chat';
+
 import { useChannelContext } from '../../../contexts/channelContext/ChannelContext';
 import { useChatContext } from '../../../contexts/chatContext/ChatContext';
 import type {

package/src/components/MessageInput/hooks/useCountdown.ts

@@ -1,4 +1,5 @@
 import { useEffect, useState } from 'react';
+
 import { ONE_SECOND_IN_MS, secondsUntil } from '../../../utils/date';
 
 /**

package/src/components/MessageList/MessageList.tsx

@@ -8,6 +8,8 @@ import {
   ViewToken,
 } from 'react-native';
 
+import type { Channel as StreamChannel } from 'stream-chat';
+
 import {
   isMessageWithStylesReadByAndDateSeparator,
   MessageType,
@@ -43,16 +45,14 @@ import {
   PaginatedMessageListContextValue,
   usePaginatedMessageListContext,
 } from '../../contexts/paginatedMessageListContext/PaginatedMessageListContext';
-import { ThreadContextValue, useThreadContext } from '../../contexts/threadContext/ThreadContext';
 import { mergeThemes, ThemeProvider, useTheme } from '../../contexts/themeContext/ThemeContext';
+import { ThreadContextValue, useThreadContext } from '../../contexts/threadContext/ThreadContext';
 import {
   isDayOrMoment,
   TranslationContextValue,
   useTranslationContext,
 } from '../../contexts/translationContext/TranslationContext';
 
-import type { Channel as StreamChannel } from 'stream-chat';
-
 import type {
   DefaultAttachmentType,
   DefaultChannelType,

package/src/components/MessageList/MessageSystem.tsx

@@ -1,6 +1,8 @@
 import React from 'react';
 import { StyleProp, StyleSheet, Text, View, ViewStyle } from 'react-native';
 
+import type { MessageType } from './hooks/useMessageList';
+
 import { useTheme } from '../../contexts/themeContext/ThemeContext';
 import {
   isDayOrMoment,
@@ -8,8 +10,6 @@ import {
   useTranslationContext,
 } from '../../contexts/translationContext/TranslationContext';
 
-import type { MessageType } from './hooks/useMessageList';
-
 import type {
   DefaultAttachmentType,
   DefaultChannelType,