Can we get the mentioned list out from the text input?

[vineelk8]

Can we get the mentioned list out from the text input because when I start typing @ symbol the mentioned list opens along with the text input. Can we take the mentioned list out of the text input, so that the text input will not stretch along with the mentioned list. Attaching a screenshot of text input when the mentioned list opens.

[IvKr95]

@vineelk8 You can bypass it by using position: absolute on suggestions list

[vineelk8]

@vineelk8 You can bypass it by using position: absolute on suggestions list

Can you please share a sample snippet, if you have @IvKr95

[wanderlust252]

work on android. I will run on IOS later.

[MarkPare]

I'm running into a related issue where I have a ScrollView that is adjacent to (directly above) my MentionInput. I use position: absolute on ScrollView that encapsulates the suggestions menu, but the suggestions menu becomes untappable and unscrollable because the adjacent ScrollView seems to capture all user interactions. Anyone run into something similar?

[wanderlust252]

I'm running into a related issue where I have a ScrollView that is adjacent to (directly above) my MentionInput. I use position: absolute on ScrollView that encapsulates the suggestions menu, but the suggestions menu becomes untappable and unscrollable because the adjacent ScrollView seems to capture all user interactions. Anyone run into something similar?

import ScrollView, TouchableOpacity from react-native-gesture-handler and zIndex:1000

[MarkPare]

@wanderlust252 thanks but still not working for me :( Do you have a short code example to share with adjacent scrollviews that is working? Would be greatly appreciated; have lost 8+ hours to this already.

[wanderlust252]

this is my code.

• MentionInput <MentionInput inputRef={textInputRef} onChange={onChangeComment} value={cmt.content} containerStyle={{ flex: 1 }} style={{ flex: 1, paddingHorizontal: scale(4) }} placeholder={'Nhập bình luận...'} placeholderTextColor={GRAY} partTypes={[ { // getPlainString: (x) => { // console.log('x', x);

              //   return x.trigger + x.name;
              // },
              trigger: '@', // Should be a single character like '@' or '#'
              renderSuggestions,
              textStyle: { fontWeight: 'bold', color: 'blue' }, // The mention style in the input
            },
          ]}
        />
  

• Suggestions const renderSuggestions: FC<MentionSuggestionsProps> = ({ keyword, onSuggestionPress }) => { if (keyword == null) { return null; }

  return ( <ScrollHandler showsVerticalScrollIndicator={false} style={{ zIndex: 1000, backgroundColor: WHITE, borderWidth: 1, borderColor: GRAY5, borderRadius: 8, maxHeight: devices.height * 0.4, position: 'absolute', bottom: scale(36), }}> {suggestions .filter((one) => one.name.toLocaleLowerCase().includes(keyword.toLocaleLowerCase())) .map((one) => ( <TouchableHandler key={one.id} onPress={() => onSuggestionPress(one)} style={{ padding: 12 }}> <Text> {one.name} ({one.id}) </Text> </TouchableHandler> ))} </ScrollHandler> ); };

import { ScrollView as ScrollHandler, TouchableOpacity as TouchableHandler } from 'react-native-gesture-handler';

that all i have. Working on both android and ios.

@wanderlust252 thanks but still not working for me :( Do you have a short code example to share with adjacent scrollviews that is working? Would be greatly appreciated; have lost 8+ hours to this already.

[MarkPare]

Based on the code you shared I can't tell if the content above the MentionInput is scrollable. In my case, the content above is scrollable and that seems to be causing the issue (if the content above is a regular View, things work as expected). Below is the code I'm using that results in the issue I described, where the suggestions menu cannot be scrolled or pressed:

import React, {useState} from 'react';
import { MentionInput, MentionSuggestionsProps } from "react-native-controlled-mentions";
import { ScrollView, TouchableOpacity } from "react-native-gesture-handler";
import {StyleSheet, Text, View} from 'react-native';

const users = [
  {name: 'User 1', id: '1'},
  {name: 'User 2', id: '2'},
  {name: 'User 3', id: '3'},
  {name: 'User 4', id: '4'},
  {name: 'User 5', id: '5'},
  {name: 'User 6', id: '6'},
  {name: 'User 7', id: '7'},
  {name: 'User 8', id: '8'},
  {name: 'User 9', id: '9'},
]

const MyComponent: React.FunctionComponent<{}> = () => {
  const [value, setValue] = useState('');

  const renderSuggestions = (suggestionProps: MentionSuggestionsProps) => {
    const {keyword, onSuggestionPress} = suggestionProps;
    if (keyword == null) return null;

    return (
      <ScrollView
        style={styles.suggestionsContainer}
      >
        {users.map(user => (
          <TouchableOpacity
            key={user.id}
            onPress={() => onSuggestionPress(user)}
          >
            <View style={styles.suggestion}>
              <Text>
                {user.name}
              </Text>
            </View>
          </TouchableOpacity>
        ))}
      </ScrollView>
    );
  };
  return (
    <View style={styles.container}>
      <ScrollView>
        <View style={styles.content}>
          <Text>Content here</Text>
        </View>
      </ScrollView>
      <View style={styles.inputContainer}>
        <MentionInput
          value={value}
          onChange={setValue}
          multiline
          placeholder="Add comment"
          partTypes={[
            {
              trigger: '@', // Should be a single character like '@' or '#'
              renderSuggestions,
              isInsertSpaceAfterMention: true,
            },
          ]}
        />
      </View>
    </View>
  )
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  content: {
    // Simulate lots of content that would
    // make the ScrollView scroll
    height: 1000,
  },
  inputContainer: {
    borderWidth: 1,
    borderColor: 'gray',
    zIndex: 1000,
  },
  suggestionsContainer: {
    position: 'absolute',
    top: -200,
    bottom: 49,
    maxHeight: 500,
    width: '100%',
    backgroundColor: 'white',
    zIndex: 1000,
  },
  suggestion: {
    paddingVertical: 10,
  },
});

export default MyComponent

Importing ScrollView and TouchableOpacity from react-native doesn't seem to make any difference either.

Any suggestions from folks that have a working example similar to this?

[wanderlust252]

https://user-images.githubusercontent.com/34784609/122891178-82d82a00-d36e-11eb-826b-f61e263ad37e.mp4

Based on the code you shared I can't tell if the content above the MentionInput is scrollable. In my case, the content above is scrollable and that seems to be causing the issue (if the content above is not a regular View, things work as expected). Below is the code I'm using that results in the issue I described, where the suggestions menu cannot be scrolled or pressed:

import React, {useState} from 'react';
import { MentionInput, MentionSuggestionsProps } from "react-native-controlled-mentions";
import { ScrollView, TouchableOpacity } from "react-native-gesture-handler";
import {StyleSheet, Text, View} from 'react-native';

const users = [
  {name: 'User 1', id: '1'},
  {name: 'User 2', id: '2'},
  {name: 'User 3', id: '3'},
  {name: 'User 4', id: '4'},
  {name: 'User 5', id: '5'},
  {name: 'User 6', id: '6'},
  {name: 'User 7', id: '7'},
  {name: 'User 8', id: '8'},
  {name: 'User 9', id: '9'},
]

const MyComponent: React.FunctionComponent<{}> = () => {
  const [value, setValue] = useState('');

  const renderSuggestions = (suggestionProps: MentionSuggestionsProps) => {
    const {keyword, onSuggestionPress} = suggestionProps;
    if (keyword == null) return null;

    return (
      <ScrollView
        style={styles.suggestionsContainer}
      >
        {users.map(user => (
          <TouchableOpacity
            key={user.id}
            onPress={() => onSuggestionPress(user)}
          >
            <View style={styles.suggestion}>
              <Text>
                {user.name}
              </Text>
            </View>
          </TouchableOpacity>
        ))}
      </ScrollView>
    );
  };
  return (
    <View style={styles.container}>
      <ScrollView>
        <View style={styles.content}>
          <Text>Content here</Text>
        </View>
      </ScrollView>
      <View style={styles.inputContainer}>
        <MentionInput
          value={value}
          onChange={setValue}
          multiline
          placeholder="Add comment"
          partTypes={[
            {
              trigger: '@', // Should be a single character like '@' or '#'
              renderSuggestions,
              isInsertSpaceAfterMention: true,
            },
          ]}
        />
      </View>
    </View>
  )
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  content: {
    // Simulate lots of content that would
    // make the ScrollView scroll
    height: 1000,
  },
  inputContainer: {
    borderWidth: 1,
    borderColor: 'gray',
    zIndex: 1000,
  },
  suggestionsContainer: {
    position: 'absolute',
    top: -200,
    bottom: 49,
    maxHeight: 500,
    width: '100%',
    backgroundColor: 'white',
    zIndex: 1000,
  },
  suggestion: {
    paddingVertical: 10,
  },
});

export default MyComponent

Importing ScrollView and TouchableOpacity from react-native doesn't seem to make any difference either.

Any suggestions from folks that have a working example similar to this?

i hope that u can find better solution. Sorry if i can't help u.

[MarkPare]

For anyone running into a similar issue, I was able to resolve this by not using position: absolute on the suggestions menu. I didn't get complete clarity on why this doesn't work, but I believe it has to do with having a ScrollView with a sibling ScrollView whose absolute position places it above the first one; the second one will never be scrollable / pressable. Again, not sure why.

Honestly I forget why I thought I needed the position: absolute on the suggestions menu in the first place. Just rendering the suggestions menu above the text input (as it renders by default) and using a maxHeight worked for my use case.

[vineelk8]

I'm running into a related issue where I have a ScrollView that is adjacent to (directly above) my MentionInput. I use position: absolute on ScrollView that encapsulates the suggestions menu, but the suggestions menu becomes untappable and unscrollable because the adjacent ScrollView seems to capture all user interactions. Anyone run into something similar?

@wanderlust252 thanks but still not working for me :( Do you have a short code example to share with adjacent scrollviews that is working? Would be greatly appreciated; have lost 8+ hours to this already.

I'm got the same issue but worked when I imported from react-native-gesture-handler as @wanderlust252 mentioned

[swushi]

https://github.com/dabakovich/react-native-controlled-mentions/issues/75

Check out this issue I wrote up explaining a solution here

[khanh21011999]

I don't know why but my opacity is like this even i set to 1 or zIndex:1000

[khanh21011999]

[dabakovich]

Hi all! Thank all for your feedbacks and especially for participating all in searching for solution of this issue.

Finally, I got a few free days for supporting this package.

A new major v3 release is coming, and this issue is one of the main updates.

Now you will be able to use hook for control mention state. The main idea – suggestions rendering now will be fully controlled by user and is extracted from MentionInput component.

You can find an example of this here: https://github.com/dabakovich/react-native-controlled-mentions/blob/3.0.0-feat-use-mentions/example/mentions-app.tsx#L90

To install this and play by yourself, please use next commands:

yarn add react-native-controlled-mentions@alpha
// or
npm install --save react-native-controlled-mentions@alpha

I'll be happy to get some feedback from you before the major update will be released.

[fukemy]

@dabakovich hi, i tried below solution but not working to me:

const MentionsFunctionalComponent = () => {
  const [textValue, setTextValue] = useState('Hello @[Mary](2)! How are you?');

  const { textInputProps, triggers } = useMentions({
    value: textValue,
    onChange: setTextValue,

    triggersConfig,
    patternsConfig,
  });

  return (
    <SafeAreaView>
      <Suggestions suggestions={users} {...triggers.mention} />
      <Suggestions suggestions={hashtags} {...triggers.hashtag} />

      <TextInput placeholder="Type here..." style={{ padding: 12 }} {...textInputProps} />
    </SafeAreaView>
  );
};

[dabakovich]

@fukemy thanks for your attempt. Can you show me your Suggestions's component props? Be sure, that you have onSelect (old onSuggestionPress) property.

[fukemy]

hi bro, im did wrong, thanks so much, that's exactly what's i want, im modify textInputProps to textInputMentionProps, now it's working.

[dabakovich]

Hi all!

About issues with scrolling suggestions list in absolute component on Android, please look into this comment. Here I shared a pattern that I'm using in production projects, which allows you to have the most stable solution for the Android platform.

I'm closing the issue now. You are welcome to open a new one if you'll get new questions.

@vineelk8 @MarkPare @wanderlust252