Can you create an example?

[efstathiosntonas]

Hi @lucasfeijo, can you please share a minimum example using this module? Thanks

[lucasfeijo]

Hey @efstathiosntonas, it's been a while since I've worked with React Native, but I'll try to dig out something for you.

[efstathiosntonas]

Thanks Lucas!

[lucasfeijo]

This is not plug and play, I chopped it from old files I had lying around, but it's enough to demonstrate how to inject react-native-reply into a text input.

There's code to show a suggestion box above the text input when it detects an @ symbol, but you're gonna have to tweak that part.

const ChatInput = ({ conversationInfo }: ChatInputProps) => {
  const [
    mentionProps, // spread these on the text input
    {
      isMentioning,
      keyword,
      onSuggestionPick,
      setRawText: setMessage,
      rawText,
    },
  ] = useMentionsInput();

  const suggestionList = useMemo(() => {
    if (!isMentionSuggestingEnabled) return null;
    if (isMentioning && !showingSuggestions) setShowingSuggestions(true);

    // Trim out the @ from the keyword
    let trimmedKeyword = String(keyword).substring(1);
    let query = trimmedKeyword;

    // Recommend replying to the last user that posted on
    // this chat that isn't the current user
    if (keyword && !trimmedKeyword) {
      const latestMessage = _.find(
        chatData?.messages,
        ({ from_id }) => from_id !== meId
      );
      query = latestMessage ? String(latestMessage.from_id) : "";
    }

    const searchSet = canMentionAnyone ? allUsers : users;
    const results = fuzzySearchUsers(Object.values(searchSet), query);

    const atAllButton = (() => {
      if (
        !query ||
        ["a", "al", "all"].includes(query) ||
        (keyword && !trimmedKeyword)
      ) {
        return renderMentionAllButton(() =>
          onSuggestionPick({
            id: "all",
            name: "All Room Members",
            username: "all",
          })
        );
      }
      return null;
    })();

    setSuggestionsEstimatedHeight(
      (() => {
        const maxItems = 3 - (atAllButton ? 1 : 0);
        const itemsVisibleCount = Math.min(results.length, maxItems);
        const userRowsHeight = itemsVisibleCount * USER_CELL_HEIGHT;
        const extraPeek =
          (itemsVisibleCount === 3 && !atAllButton && results.length > 3) ||
          (itemsVisibleCount === 2 && atAllButton && results.length > 2)
            ? 15
            : 0;
        return (
          userRowsHeight + (atAllButton ? AT_ALL_BUTTON_HEIGHT : 0) + extraPeek
        );
      })()
    );

    useEffect(() => {
      if (showingSuggestions) {
        Animated.timing(suggestionsListHeight, {
          toValue: suggestionsEstimatedHeight,
          duration: 250,
          easing: Easing.inOut(Easing.ease),
          useNativeDriver: false,
        }).start();
      } else {
        Animated.timing(suggestionsListHeight, {
          toValue: 0,
          duration: 200,
          easing: Easing.inOut(Easing.ease),
          useNativeDriver: false,
        }).start();
      }
    }, [showingSuggestions, suggestionsEstimatedHeight]);

    return (
      <Animated.View
        style={[
          styles.mentionsContainer,
          {
            height: suggestionsListHeight,
          },
        ]}
      >
        {!_.isEmpty(keyword) && isMentioning ? (
          <FlatList
            inverted
            keyboardShouldPersistTaps={"handled"}
            data={results}
            ListHeaderComponent={atAllButton}
            renderItem={({ item }) => (
              <PersonItem
                item={searchSet[item.id]}
                term={trimmedKeyword}
                onPress={() =>
                  onSuggestionPick({
                    id: String(item.id),
                    name: item.full_name,
                    username: item.full_name,
                  })
                }
                onLongPress={() => routeTo.personDetailsInModal(item)}
              />
            )}
          />
        ) : null}
      </Animated.View>
    );
  }, [keyword, isMentioning]);

  return (
    <>
      {isMentioning && (
        <>
          <Divider />
          {suggestionList}
        </>
      )}
      <View style={styles.composeWrapper}>
        <TextInput
          {...mentionProps}
          selection={undefined}
          ref={inputRef}
          multiline
          placeholder="Message"
          keyboardType={Platform.select({
            ios: isMentionSuggestingEnabled ? "twitter" : "default",
            default: "default",
          })}
          style={{
            alignSelf: "flex-start",
            textAlignVertical: isEditorFullscreen ? "top" : "auto",
            backgroundColor: "#fff",
            fontSize: 16,
            color: "#000",
            fontWeight: "400",
            padding: 10,
            paddingTop: 8,
            minHeight: 36,
            width: "100%",
            height: isEditorFullscreen ? "100%" : "auto",
            borderColor: Colors.SKY_DARK,
            borderWidth: StyleSheet.hairlineWidth,
            borderRadius: 5,
          }}
        />
      </View>
    </>
  );
};

[efstathiosntonas]

Thanks Lucas, will try it out. I was trying to inject on a TextInput for like an hour 😂😂

[star-heng]

anything else？