Merge branch 'main' into imgbot

Author: abhijithsheheer

.github/workflows/create_and_publish_releases.yml

@@ -19,8 +19,8 @@ jobs:
 
       - name: Setup git user
         run: |
-          git config user.name "Paul Sojan"
-          git config user.email "paul.sojan@bigbinary.com"
+          git config user.name "Shashank Bhatotia"
+          git config user.email "shashank.bhatotia@bigbinary.com"
       - name: Setup NodeJS LTS version
         uses: actions/setup-node@8c91899e586c5b171469028077307d293428b516
         with:
@@ -29,9 +29,6 @@ jobs:
       - name: Setup the project
         run: yarn install
 
-      - name: Generate production build
-        run: yarn build
-
       - name: Prefix version tag with "v"
         run: yarn config set version-tag-prefix "v"
 
@@ -50,6 +47,9 @@ jobs:
         if: ${{ contains(github.event.pull_request.labels.*.name, 'major') }}
         run: yarn version --major
 
+      - name: Generate production build
+        run: yarn build
+
       - name: Get the package version from package.json
         uses: tyankatsu0105/read-package-version-actions@5aad2bb630a577ee4255546eb3ee0593df68f6ca
         id: package-version

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bigbinary/neetoui-rn",
-  "version": "2.0.1",
+  "version": "2.0.6",
   "main": ".",
   "author": "BigBinary",
   "license": "MIT",

src/components/Avatar.jsx

@@ -10,7 +10,8 @@ import Animated, {
 } from "react-native-reanimated";
 import { moderateScale } from "react-native-size-matters";
 
-import { Typography, Container } from "@components";
+import { Container } from "./Container";
+import { Typography } from "./Typography";
 
 /**
  * Avatars can be used to represent people in a graphical way.
@@ -97,12 +98,14 @@ export const Avatar = ({
           {acronym.toUpperCase()}
         </Typography>
       </Container>
-      <Animated.Image
-        source={{ uri: imageUrl }}
-        style={profileImageStyle}
-        onLoad={() => (opacity.value = 1)}
-        {...rest}
-      />
+      {imageUrl && (
+        <Animated.Image
+          source={{ uri: imageUrl }}
+          style={profileImageStyle}
+          onLoad={() => (opacity.value = 1)}
+          {...rest}
+        />
+      )}
     </Container>
   );
 };

src/components/BottomSheet.jsx

@@ -1,5 +1,10 @@
 import React, { useCallback, useEffect, useMemo, useState } from "react";
-import { StyleSheet, FlatList, Keyboard } from "react-native";
+import {
+  StyleSheet,
+  FlatList,
+  Keyboard,
+  InteractionManager,
+} from "react-native";
 
 import PropTypes from "prop-types";
 import Modal from "react-native-modal";
@@ -176,6 +181,17 @@ export const BottomSheet = ({
   ...rest
 }) => {
   const [searchText, setSearchText] = useState("");
+  const [isReady, setIsReady] = useState(false);
+
+  useEffect(() => {
+    if (isVisible) {
+      InteractionManager.runAfterInteractions(() => {
+        setIsReady(true);
+      });
+    } else {
+      setIsReady(false);
+    }
+  }, [isVisible]);
 
   const getLabel = useCallback(
     (item, index) => item?.label || labelExtractor(item, index) || item,
@@ -214,7 +230,7 @@ export const BottomSheet = ({
       avoidKeyboard
       hideModalContentWhileAnimating
       useNativeDriver
-      isVisible={isVisible}
+      isVisible={isVisible && isReady}
       style={styles.modalStyle}
       onRequestClose={hide}
       onBackdropPress={() => {

src/components/ChatInput/ChatInput.jsx

@@ -114,7 +114,7 @@ const labels = {
 
 const convertMentionsToHTMLAndPlainText = ({ suggestions, value }) => {
   const mentionsRegex = new RegExp(/@\[[^)]*\)/g);
-  let html = `<p>${value}</p>`;
+  let html = `<p>${value.replace(/\n/g, "<br>")}</p>`; // Replace newlines with <br> for HTML output
   let plainText = value;
   const allMentions = html.matchAll(mentionsRegex);
 
@@ -140,7 +140,6 @@ const convertMentionsToHTMLAndPlainText = ({ suggestions, value }) => {
 
   return { html, plainText };
 };
-
 export const ChatInput = forwardRef(
   (
     {

src/components/RichTextEditor.jsx

@@ -9,9 +9,10 @@ import {
 import styled from "styled-components/native";
 import { space, flexbox, border, layout } from "styled-system";
 
-import { Container } from "@components";
 import { useKeyboard } from "@hooks";
 
+import Container from "./Container";
+
 export const ScrollView = styled.ScrollView.attrs(() => ({
   keyboardShouldPersistTaps: "handled",
   showsVerticalScrollIndicator: true,
@@ -80,13 +81,17 @@ export const RichTextEditor = ({
   toolbarActions,
   editorProps,
   toolBarProps,
+  richTextRef: externalRichTextRef,
   ...rest
 }) => {
-  const richTextRef = useRef();
+  const internalRichTextRef = useRef();
   const keyboardHeight = useKeyboard();
   const [toolbarVisible, setToolbarVisible] = useState(false);
   const showToolbar = keyboardHeight > 0 && toolbarVisible;
 
+  // Use the external ref if provided, otherwise use the internal ref
+  const richTextRef = externalRichTextRef || internalRichTextRef;
+
   const computeToolbarActions = () => {
     const actionItems = [];
     toolbarActions?.map(actionItem => {
@@ -116,11 +121,11 @@ export const RichTextEditor = ({
         onChange={onChange}
         onBlur={() => {
           setToolbarVisible(false);
-          editorProps?.onBlurFn();
+          editorProps?.onBlurFn?.();
         }}
         onFocus={() => {
           setToolbarVisible(true);
-          editorProps?.onFocusFn();
+          editorProps?.onFocusFn?.();
         }}
         {...editorProps}
       />
@@ -160,4 +165,8 @@ RichTextEditor.propTypes = {
   toolBarProps: PropTypes.object,
   editorWrapperStyle: PropTypes.object,
   toolbarWrapperStyle: PropTypes.object,
+  /**
+   * Ref object to control the editor from outside the component.
+   */
+  richTextRef: PropTypes.object,
 };

src/components/SearchBar.jsx

@@ -137,7 +137,7 @@ export const SearchBar = ({
             }}
             {...searchbarProps}
           />
-          {showCancelButton && (
+          {showCancelButton && searchText.length > 0 && (
             <Container>
               <Touchable
                 flexGrow={1}

src/components/SegmentedTopBar/Indicator.jsx

@@ -1,4 +1,4 @@
-import React, { useEffect } from "react";
+import React, { useEffect, useRef } from "react";
 import { StyleSheet } from "react-native";
 
 import PropTypes from "prop-types";
@@ -14,32 +14,62 @@ import { theme } from "@theme";
 
 const springConfig = {
   mass: 1,
-  overshootClamping: true,
+  damping: 18,
+  stiffness: 100,
+  overshootClamping: false,
   restSpeedThreshold: 0.5,
   restDisplacementThreshold: 0.5,
 };
 
 const spacing = moderateScale(6);
 
 export const Indicator = ({ measure }) => {
-  const { x, width, height } = measure;
-
+  const firstRender = useRef(true);
   const translateX = useSharedValue(0);
   const animatedWidth = useSharedValue(0);
 
   useEffect(() => {
-    cancelAnimation(translateX);
-    cancelAnimation(animatedWidth);
+    if (!measure) return;
+
+    const { x, width } = measure;
+
+    if (firstRender.current) {
+      if (translateX.value === 0 && x > 0) {
+        translateX.value = x + spacing / 2;
+      }
+
+      if (animatedWidth.value === 0 && width > 0) {
+        animatedWidth.value = width - spacing;
+      }
 
-    translateX.value = withSpring(x + spacing / 2, springConfig);
-    animatedWidth.value = withSpring(width - spacing, springConfig);
-  }, [animatedWidth, translateX, width, x]);
+      firstRender.current = false;
+    } else {
+      // Cancel any ongoing animations first
+      cancelAnimation(translateX);
+      cancelAnimation(animatedWidth);
+
+      translateX.value = withSpring(x + spacing / 2, springConfig);
+      animatedWidth.value = withSpring(width - spacing, springConfig);
+    }
+  }, [measure]);
 
   const tabTranslateAnimatedStyles = useAnimatedStyle(() => ({
     transform: [{ translateX: translateX.value }],
     width: animatedWidth.value,
   }));
 
+  // Guard against undefined measure
+  if (
+    !measure ||
+    typeof measure.x !== "number" ||
+    typeof measure.width !== "number" ||
+    typeof measure.height !== "number"
+  ) {
+    return null;
+  }
+
+  const { height } = measure;
+
   return (
     <Animated.View
       style={[

src/components/SegmentedTopBar/Tab.jsx

@@ -1,30 +1,63 @@
 import React, { forwardRef, useCallback } from "react";
-import { View } from "react-native";
+import { View, StyleSheet } from "react-native";
 
 import PropTypes from "prop-types";
+import { moderateScale } from "react-native-size-matters";
 
 import { Typography, Touchable } from "@components";
 
-export const Tab = forwardRef(({ label, value, navigation, flex }, ref) => {
-  const handleOnPress = useCallback(
-    () => navigation.navigate(value),
-    [navigation, value]
-  );
-
-  return (
-    <View ref={ref} style={{ flex }}>
-      <Touchable flex={1} justifyContent="center" onPress={handleOnPress}>
-        <Typography
-          fontFamily="sf500"
-          fontSize="xs"
-          numberOfLines={1}
-          textAlign="center"
+export const Tab = forwardRef(
+  ({ label, value, navigation, flex, count }, ref) => {
+    const handleOnPress = useCallback(
+      () => navigation.navigate(value),
+      [navigation, value]
+    );
+
+    return (
+      <View
+        ref={ref}
+        style={[
+          styles.container,
+          {
+            flex,
+            minWidth: count !== undefined ? moderateScale(56) : undefined,
+          },
+        ]}
+      >
+        <Touchable
+          alignItems="center"
+          flex={1}
+          justifyContent="center"
+          onPress={handleOnPress}
         >
-          {label}
-        </Typography>
-      </Touchable>
-    </View>
-  );
+          <Typography
+            fontFamily="sf600"
+            fontSize="xs"
+            numberOfLines={1}
+            textAlign="center"
+          >
+            {label}
+          </Typography>
+          {count !== undefined && (
+            <Typography
+              fontFamily="sf500"
+              fontSize="xs"
+              numberOfLines={1}
+              textAlign="center"
+            >
+              ({count})
+            </Typography>
+          )}
+        </Touchable>
+      </View>
+    );
+  }
+);
+
+const styles = StyleSheet.create({
+  container: {
+    height: "100%",
+  },
 });
 
 Tab.displayName = "Tab";
@@ -34,4 +67,9 @@ Tab.propTypes = {
   label: PropTypes.string.isRequired,
   value: PropTypes.string.isRequired,
   navigation: PropTypes.object,
+  count: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+};
+
+Tab.defaultProps = {
+  flex: 1,
 };