Unknown change in dent after blur textInput

[kalwinskidawid]

Hey, how do you keep the dent in the same position after blurring the text? I thought the dent would stay at level 2 but it went back to 0 . It only happens when the sheet was at index 0.

<GeneralSheet
          name="general-sheet"
          dismissible={false}
          ref={generalSheetRef}
          detents={[0.12, 0.42, 1]}
          onBackPress={handleBackPress}
          onDetentChange={handleDetentChange}>
          <View
            style={{
              marginTop: 35,
            }}>
            <View style={{ paddingHorizontal: 20, paddingBottom: 10 }}>
              <SearchBar
                placeholder="Search..."
                value={localQuery}
                onChangeText={handleChangeSearch}
                onFocus={() => {
                  generalSheetRef.current?.resize(2);
                  console.log('Search focused');
                }}
                onBlur={() => {
                  console.log('Search stop focused');
                }}
                loseFoucusOnKeyboardHide
              />
            </View>
            <GeneralSheetContent onPressItem={(location) => onPressItemGeneralSheet( location)} />
          </View>
</GeneralSheet>

GeneralSheet:

type GeneratSheetProps = {
  name: string;
  detents: SheetDetent[];
  dismissible: boolean;
  onDetentChange: (event: DetentChangeEvent) => void;
  onBackPress?: (event: BackPressEvent) => void;
} & PropsWithChildren;

export const GeneralSheet = forwardRef<TrueSheet, GeneratSheetProps>((props, ref) => {
  const { colors } = useTheme();

  const backgroundColor = useMemo(() => {
    console.log('Color has changed ');
    return colors.background;
  }, [colors]);

  useEffect(() => {
    console.log('Generate GeneralSheet');
  }, []);

  return (
    <ReanimatedTrueSheet
      name={props.name}
      scrollable
      ref={ref}
      detents={props.detents}
      dismissible={props.dismissible}
      onBackPress={props.onBackPress}
      cornerRadius={24}
      dimmed={false}
      onDetentChange={props.onDetentChange}
      initialDetentAnimated
      grabber={true}
      grabberOptions={{ color: colors.text }}
      backgroundColor={backgroundColor}>
      {props.children}
    </ReanimatedTrueSheet>
  );
});

[lodev09]

Are you on android? Also what's your use-case? Keyboard is already handled internally so you don't really need manually resize the sheet when an input is focused. Just leave it as-is

[lodev09]

What you can do is create a repro with all your use-case. Also create a video on IOS and compare behavior on android.
Also avoid manually controlling keyboard dismiss as sheet already tries to handle it natively.

[kalwinskidawid]

I don't have possibility to build a ios app (I have only Windows).
However to be more precisious I made a simple reproduction

What I get:
(First try with onScrollBeginDrag={Keyboard.dismiss} second try without onScrollBeginDrag
https://github.com/user-attachments/assets/9c0629fd-10b9-49b8-b672-6e590d7c0046

What I'd like to get:

expected.mp4

[lodev09]

ah make sense. I'll fix

[lodev09]

@kalwinskidawid try it here: https://github.com/lodev09/react-native-true-sheet/releases/tag/v3.9.0-beta.4

[kalwinskidawid]

@lodev09 Great! The new version works well!

[kalwinskidawid]

@lodev09 Sorry to bother you. I have one more question about functionality.
Is it possible to make it so that when the keyboard is visible, onPress can be captured on a list item?

When you have a “View” such as my “Recents... [...]”, the ‘onPress’ function works fine (always), even when the keyboard is visible, but when I try to press a list item, it just tries to close the keyboard instead of processing the “onPress” function for the list item.

On the 1st attempt, I press the list item, on the 2nd attempt I press “View” – as you can see, ‘View’ processes onPress and the list item does not.

on_press_list_item.mp4

[lodev09]

Try playing around with keyboardDismissMode on your ScrollView

[kalwinskidawid]

Thanks for the tip, I've come to the conclusion that I should set keyboardShouldPersistTaps="handled".
I forgot that FlatList is actually ScrollView.