[ BUG ] Unable to scroll on Select dropdown

[coycoylaniba]

Describe the bug I'm using frameworkless React Native setup. I'm using select on a long list of items but the problem is the SelectContent contents does not have scroll. Please help.

To Reproduce init frameworkless setup and follow RNR setup then just add the select component

Expected behavior Select should respect maximum height and able to scroll.

Screenshots I can't scroll down to the bottom and height overflows.

Platform (please complete the following information):

• Type: Emulator
• OS: Android

[mrzachnugent]

Have you tried the example from the showcase? https://github.com/mrzachnugent/react-native-reusables/blob/main/apps/showcase/app/select.tsx#L69

Its the bottom select in the web preview: https://rnr-showcase.vercel.app/select

[CorentinRobertSmood]

I had same error i try the show case copy paste and not works for me only on android at this time, on web it's OK

[Alessandro-filho]

Well, I'm not a professional and I had to remove the animations to make it work, so I don't know if I removed or added what I shouldn't have, but I made it work (at least for the android app).

select.tsx

[0xJaeg]

It also works in mine. I just removed the animated view.

<SelectPrimitive.Portal hostName={portalHost}> <SelectPrimitive.Overlay style={Platform.OS !== "web" ? StyleSheet.absoluteFill : undefined} > {/* Removed the animated view because scrolling doesn't work on anroid. /} {/ <Animated.View entering={FadeIn} exiting={FadeOut}> /} <SelectPrimitive.Content ref={ref} className={cn( "relative z-50 max-h-96 overflow-auto min-w-[8rem] rounded-md border border-border bg-popover shadow-md shadow-foreground/10 py-2 px-1 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2", position === "popper" && "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1", open ? "web:zoom-in-95 web:animate-in web:fade-in-0" : "web:zoom-out-95 web:animate-out web:fade-out-0", className )} position={position} {...props} > <SelectScrollUpButton /> <SelectPrimitive.Viewport className={cn( "p-1", position === "popper" && "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]" )} > {children} </SelectPrimitive.Viewport> <SelectScrollDownButton /> </SelectPrimitive.Content> {/ </Animated.View> */} </SelectPrimitive.Overlay> </SelectPrimitive.Portal>

[coycoylaniba]

@Alessandro-filho fix works well! thanks much!

Edit: Only problem is that, if I use it on options that can accumulate only less than 250px, it will have empty space when dropdown is open, only works for long list.

[DanC5]

FYI to anyone else that finds this issue, removing the Animated.View on Android also fixes the same scrolling issue with the popover component. I used this wrapper as a replacement..

const AnimatedWrapper = ({ children }: { children: React.ReactNode }) => {
    return Platform.OS === 'ios' ? (
      <Animated.View entering={FadeIn.duration(200)} exiting={FadeOut}>
        {children}
      </Animated.View>
    ) : (
      <>{children}</>
    );
  };

[DuckyMomo20012]

To fix this, you may add ScrollView from react-native-gesture-handler under the SelectContent component. Therefore, you don't have to use useRef from Select examples or modify the original Select component.

• Tested with:

"react-native-gesture-handler": "~2.20.2",
"react-native-reanimated": "~3.16.7",
"@rn-primitives/select": "1.1.0",
"expo": "~52.0.44",
"react-native": "0.76.9"

• For example:

import { ScrollView } from 'react-native-gesture-handler';
import {
  Select,
  SelectContent,
  SelectGroup,
  SelectItem,
  SelectLabel,
  SelectTrigger,
  SelectValue,
} from '@/components/ui/select';

const Component = () => {
  return (
    <Select>
      <SelectTrigger>
        <SelectValue placeholder="Select version" />
      </SelectTrigger>

      <SelectContent>
        <ScrollView>{/* ... */}</ScrollView>
      </SelectContent>
    </Select>
  );
};

[abdullahSolace]

I was facing the same issue and resolved it by following this approach: https://github.com/mrzachnugent/react-native-reusables/issues/163#issuecomment-2198220936

[mrzachnugent]

Now available: https://reactnativereusables.com/docs/components/select#scrollable