Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Cannot adjust bottom sheet position when VoiceOver is enabled #1761

Closed
tbesi opened this issue Mar 1, 2024 · 5 comments
Closed

Cannot adjust bottom sheet position when VoiceOver is enabled #1761

tbesi opened this issue Mar 1, 2024 · 5 comments
Labels
bug Something isn't working no-issue-activity

Comments

@tbesi
Copy link

tbesi commented Mar 1, 2024

Bug

On our iOS app we have a bottom sheet where we display a list of stores above a map screen. We are setting snap points at 30%, 45%, 65% and 95%. The initial snap point is the first one at 30%. While on Android the users can slide the bottom sheet to the desired snap point with the two fingers when using TalkBack, the case is not the same with VoiceOver on iOS. While the bottom sheet has an 'adjustable' role the gestures do not seem to do anything at all.

Environment info

Library Version
@gorhom/bottom-sheet ^4.6.1
react-native 0.73.5
react-native-reanimated ^3.7.1
react-native-gesture-handler ^2.15.0

Steps To Reproduce

On iOS:

  1. Have a Bottom Sheet and add some snap points
  2. Set the index to 0
  3. Enable VoiceOver and set the focus on the Bottom Sheet
  4. There is no way to adjust the Bottom Sheet position

Describe what you expected to happen:

  1. Should be able to adjust the bottom sheet position

Reproducible sample code

It can simply be reproduced by using the sample react native app and adding a bottom sheet in the initial screen

import BottomSheet from '@gorhom/bottom-sheet';
import React from 'react';
import {SafeAreaView, StatusBar, Text, useColorScheme} from 'react-native';
import {GestureHandlerRootView} from 'react-native-gesture-handler';

import {Colors, Header} from 'react-native/Libraries/NewAppScreen';

function App(): React.JSX.Element {
  const isDarkMode = useColorScheme() === 'dark';

  const backgroundStyle = {
    backgroundColor: isDarkMode ? Colors.darker : Colors.lighter,
    flex: 1,
  };

  return (
    <GestureHandlerRootView style={{flex: 1}}>
      <SafeAreaView style={backgroundStyle}>
        <StatusBar
          barStyle={isDarkMode ? 'light-content' : 'dark-content'}
          backgroundColor={backgroundStyle.backgroundColor}
        />
        <Header />
        <BottomSheet
          index={0}
          snapPoints={['30%', '45%', '65%', '95%']}
          animateOnMount={true}>
          <Text>Bottom sheet test</Text>
        </BottomSheet>
      </SafeAreaView>
    </GestureHandlerRootView>
  );
}

export default App;
@tbesi tbesi added the bug Something isn't working label Mar 1, 2024
Copy link

github-actions bot commented Apr 1, 2024

This issue is stale because it has been open 30 days with no activity. Remove stale label or comment or this will be closed in 5 days.

@tbesi
Copy link
Author

tbesi commented Apr 1, 2024

This is still an issue. Commenting for activity.

Copy link

github-actions bot commented May 2, 2024

This issue is stale because it has been open 30 days with no activity. Remove stale label or comment or this will be closed in 5 days.

Copy link

github-actions bot commented May 7, 2024

This issue was closed because it has been stalled for 5 days with no activity.

@github-actions github-actions bot closed this as completed May 7, 2024
@virginiab10
Copy link

is still an issue! could be reopened?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working no-issue-activity
Projects
None yet
Development

No branches or pull requests

2 participants