ActionSheet for React NativeActionSheet for React Native
/
GitHubGitHub
/
  • Introduction
  • Installation
  • Basic usage
  • Guides
    • Usage with SheetManager
    • Passing data to ActionSheet
    • Using ActionSheet Router
    • Returning results from ActionSheet
    • Ref access from anywhere
    • Using ScrollView
    • Background Interaction
    • Position tracking
    • Handling SafeArea
    • Migrating to v0.8.0
  • Reference
    • ActionSheet props
    • ActionSheetRef
    • SheetManager
    • SheetProps
    • SheetProvider
    • useScrollHandlers
    • registerSheet
    • ShowOptions
    • HideOptions
    • useRouter
    • useSheetRouteParams
    • useSheetIDContext
    • useProviderContext
    • Route
  • Introduction
  • Installation
  • Basic usage
  • Guides
    • Usage with SheetManager
    • Passing data to ActionSheet
    • Using ActionSheet Router
    • Returning results from ActionSheet
    • Ref access from anywhere
    • Using ScrollView
    • Background Interaction
    • Position tracking
    • Handling SafeArea
    • Migrating to v0.8.0
  • Reference
    • ActionSheet props
    • ActionSheetRef
    • SheetManager
    • SheetProps
    • SheetProvider
    • useScrollHandlers
    • registerSheet
    • ShowOptions
    • HideOptions
    • useRouter
    • useSheetRouteParams
    • useSheetIDContext
    • useProviderContext
    • Route
Edit this page on GitHub
Guides
Position tracking

Position tracking

Sometimes you need to track the position of the action sheet on the Screen & show/hide some UI in the background or inside the action sheet.This can be done using the onChange prop.

<ActionSheet
  onChange={(position, height) => {
    // Position is 0 if action sheet has reached top.
    const hasReachedTop = position === 0;
    // Get the offset from bottom
    const offsetFromBottom = height - position;
  }}
/>
Background Interaction
Handling SafeArea
MIT 2023 © Ammar Ahmed.