react-native-controlled-mentions: renderSuggestions scrolling not working in android

Hi I want to scroll the suggestion list but i am facing issue with android and its working in ios, below is my code for renderSuggestions function

` const renderSuggestions = ({keyword, onSuggestionPress}) => { if ( keyword === null || keyword === undefined || mappedMembers.length === 0 ) { return null; } const suggestionArrayToRender = mappedMembers.filter(item => item.name.toLowerCase().includes(keyword.toLowerCase()), );

return (
  <View
    style={{
      // backgroundColor: 'red',
      width: 200,
      borderColor: 'gray',
      borderWidth: 0.5,
      opacity: 1,
    }}>
    <ScrollView nestedScrollEnabled style={{flexGrow: 1, height: 200}}>
      {suggestionArrayToRender
        .filter(item =>
          item.name.toLowerCase().includes(keyword.toLowerCase()),
        )
        .map(one => (
          <Pressable
            key={one.id}
            onPress={() => onSuggestionPress(one)}
            style={{padding: 12}}>
            <Text style={{color: COLORS.textBlack}}>{one.name}</Text>
          </Pressable>
        ))}
    </ScrollView>
  </View>
);

} `

About this issue

Original URL
State: open
Created a year ago
Comments: 17 (1 by maintainers)

Most upvoted comments

Hey all!

Thanks for using the library and providing your feedbacks.

I’ve also encountered this problem in my projects. The most compromising solution was using the Portal pattern. You can use this component from the react-native-paper library, from a separate library @gorhom/portal, or you can implement this component yourself.

Here is a very basic and simplified example that I used in production:

import * as React from 'react';
import { FC, useRef, useState } from 'react';
import { FlatList, Pressable, Text, TextInput, View } from 'react-native';
import {
  Suggestion,
  SuggestionsProvidedProps,
  TriggersConfig,
  useMentions,
} from 'react-native-controlled-mentions/dist';
import { Portal, PortalProvider } from '@gorhom/portal';
import { hashtags, messages } from './constants';

// Custom component for rendering suggestions
const Suggestions: FC<
  SuggestionsProvidedProps & { suggestions: Suggestion[]; inputHeight: number }
> = ({ keyword, onSelect, suggestions, inputHeight }) => {
  if (keyword == null) {
    return null;
  }

  return (
    <Portal>
      <View
        style={{
          position: 'absolute',
          width: '100%',
          maxHeight: 200,
          padding: 12,
          bottom: inputHeight,
        }}>
        <FlatList
          style={{
            backgroundColor: 'white',
            borderRadius: 12,
            borderWidth: 1,
            borderColor: 'grey',
          }}
          data={suggestions.filter(one =>
            one.name.toLocaleLowerCase().includes(keyword.toLocaleLowerCase()),
          )}
          renderItem={({ item }) => (
            <Pressable
              key={item.id}
              onPress={() => onSelect(item)}
              style={{ padding: 12 }}>
              <Text>{item.name}</Text>
            </Pressable>
          )}
          keyExtractor={item => item.id.toString()}
          keyboardShouldPersistTaps="handled"
        />
      </View>
    </Portal>
  );
};

// Config of suggestible triggers
const triggersConfig: TriggersConfig<'hashtag'> = {
  hashtag: {
    trigger: '#',
    textStyle: {
      fontWeight: 'bold',
      color: 'grey',
    },
  },
};

const MentionsFunctionalComponent = () => {
  const textInput = useRef<TextInput>(null);

  const [inputHeight, setInputHeight] = useState(0);

  const [textValue, setTextValue] = useState('Hello Mary! How are you?');

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

    triggersConfig,
  });

  return (
    <PortalProvider>
      <View style={{ flex: 1, justifyContent: 'flex-end' }}>
        <FlatList
          data={messages}
          renderItem={({ item }) => (
            <Text style={{ padding: 10 }}>{item.text}</Text>
          )}
          keyExtractor={item => item.id.toString()}
        />

        <Suggestions
          suggestions={hashtags}
          {...triggers.hashtag}
          inputHeight={inputHeight}
        />

        <TextInput
          ref={textInput}
          multiline
          onLayout={event => {
            setInputHeight(event.nativeEvent.layout.height);
          }}
          placeholder="Type here..."
          style={{ padding: 12 }}
          {...textInputProps}
        />
      </View>
    </PortalProvider>
  );
};

export { MentionsFunctionalComponent };

Please note that for iOS there’s no need to use Portal as scrolling together with position: 'absolute' works fine. Thus, you can use the following selector for root component in Suggestions:

const Component = Platform.OS === 'ios' ? Fragment : Portal;

dabakovich on Sep 16, 2023