Showing preview only (835K chars total). Download the full file or copy to clipboard to get everything.
Repository: gorhom/react-native-bottom-sheet
Branch: master
Commit: b378f29ce961
Files: 327
Total size: 755.9 KB
Directory structure:
gitextract_h8ekz4ej/
├── .gitattributes
├── .github/
│ ├── FUNDING.yml
│ ├── ISSUE_TEMPLATE/
│ │ ├── bug_template.yaml
│ │ └── feature_request.md
│ ├── PULL_REQUEST_TEMPLATE.md
│ └── workflows/
│ ├── auto-close.yml
│ ├── label-sponsors.yml
│ ├── stale.yml
│ └── website.yml
├── .gitignore
├── .huskyrc.json
├── .release-it.json
├── .vscode/
│ └── settings.json
├── CHANGELOG.md
├── CODE_OF_CONDUCT.md
├── CONTRIBUTING.md
├── LICENSE
├── README.md
├── babel.config.js
├── biome.json
├── commitlint.config.js
├── example/
│ ├── .gitignore
│ ├── App.tsx
│ ├── app.json
│ ├── babel.config.js
│ ├── metro.config.js
│ ├── package.json
│ ├── src/
│ │ ├── Dev.tsx
│ │ ├── Main.tsx
│ │ ├── components/
│ │ │ ├── button/
│ │ │ │ ├── Button.tsx
│ │ │ │ └── index.ts
│ │ │ ├── contactItem/
│ │ │ │ ├── ContactItem.tsx
│ │ │ │ └── index.ts
│ │ │ ├── contactList/
│ │ │ │ ├── ContactList.tsx
│ │ │ │ ├── index.ts
│ │ │ │ ├── styles.ts
│ │ │ │ └── styles.web.ts
│ │ │ ├── customBackground/
│ │ │ │ ├── CustomBackground.tsx
│ │ │ │ └── index.ts
│ │ │ ├── customFooter/
│ │ │ │ ├── CustomFooter.tsx
│ │ │ │ └── index.ts
│ │ │ ├── customHandle/
│ │ │ │ ├── CustomHandle.tsx
│ │ │ │ └── index.ts
│ │ │ ├── headerHandle/
│ │ │ │ ├── HeaderHandle.tsx
│ │ │ │ └── index.ts
│ │ │ └── searchHandle/
│ │ │ ├── SearchHandle.tsx
│ │ │ └── index.ts
│ │ ├── screens/
│ │ │ ├── advanced/
│ │ │ │ ├── BackdropExample.tsx
│ │ │ │ ├── CustomBackgroundExample.tsx
│ │ │ │ ├── CustomHandleExample.tsx
│ │ │ │ ├── CustomThemeExample.tsx
│ │ │ │ ├── DynamicSizingExample.tsx
│ │ │ │ ├── FooterExample.tsx
│ │ │ │ ├── KeyboardHandlingExample.tsx
│ │ │ │ ├── PullToRefreshExample.tsx
│ │ │ │ └── ShadowExample.tsx
│ │ │ ├── basic/
│ │ │ │ └── BasicExamples.tsx
│ │ │ ├── index.ts
│ │ │ ├── integrations/
│ │ │ │ ├── NativeScreensExample.tsx
│ │ │ │ ├── ViewPagerExample.tsx
│ │ │ │ ├── flashlist/
│ │ │ │ │ ├── FlashListExample.tsx
│ │ │ │ │ ├── TweetContent.tsx
│ │ │ │ │ ├── data/
│ │ │ │ │ │ └── tweets.ts
│ │ │ │ │ ├── index.ts
│ │ │ │ │ └── models/
│ │ │ │ │ ├── Author.ts
│ │ │ │ │ └── Tweet.ts
│ │ │ │ ├── legendlist/
│ │ │ │ │ ├── LegendListExample.tsx
│ │ │ │ │ ├── index.ts
│ │ │ │ │ └── renderItem.tsx
│ │ │ │ ├── map/
│ │ │ │ │ ├── BlurredBackground.tsx
│ │ │ │ │ ├── BlurredHandle.tsx
│ │ │ │ │ ├── LocationDetails.tsx
│ │ │ │ │ ├── LocationDetailsBottomSheet.tsx
│ │ │ │ │ ├── LocationItem.tsx
│ │ │ │ │ ├── LocationListBottomSheet.tsx
│ │ │ │ │ ├── MapExample.tsx
│ │ │ │ │ └── Weather.tsx
│ │ │ │ └── navigation/
│ │ │ │ ├── DummyScreen.tsx
│ │ │ │ └── NavigatorExample.tsx
│ │ │ ├── modal/
│ │ │ │ ├── BackdropExample.tsx
│ │ │ │ ├── DetachedExample.tsx
│ │ │ │ ├── DynamicSizingExample.tsx
│ │ │ │ ├── SimpleExample.tsx
│ │ │ │ ├── StackExample.tsx
│ │ │ │ └── withModalProvider.tsx
│ │ │ └── withGestureHandlerRoot.tsx
│ │ ├── types.d.ts
│ │ └── utilities/
│ │ ├── createMockData.ts
│ │ └── transformOrigin.ts
│ ├── tsconfig.json
│ ├── web/
│ │ └── index.html
│ └── webpack.config.js
├── lint-staged.config.js
├── mock.js
├── package.json
├── src/
│ ├── components/
│ │ ├── bottomSheet/
│ │ │ ├── BottomSheet.tsx
│ │ │ ├── BottomSheetBody.tsx
│ │ │ ├── BottomSheetContent.tsx
│ │ │ ├── constants.ts
│ │ │ ├── index.ts
│ │ │ ├── styles.ts
│ │ │ └── types.d.ts
│ │ ├── bottomSheetBackdrop/
│ │ │ ├── BottomSheetBackdrop.tsx
│ │ │ ├── constants.ts
│ │ │ ├── index.ts
│ │ │ ├── styles.ts
│ │ │ └── types.d.ts
│ │ ├── bottomSheetBackground/
│ │ │ ├── BottomSheetBackground.tsx
│ │ │ ├── BottomSheetBackgroundContainer.tsx
│ │ │ ├── index.ts
│ │ │ ├── styles.ts
│ │ │ └── types.d.ts
│ │ ├── bottomSheetDebugView/
│ │ │ ├── BottomSheetDebugView.tsx
│ │ │ ├── ReText.tsx
│ │ │ ├── ReText.webx.tsx
│ │ │ ├── index.ts
│ │ │ ├── styles.ts
│ │ │ └── styles.web.ts
│ │ ├── bottomSheetDraggableView/
│ │ │ ├── BottomSheetDraggableView.tsx
│ │ │ ├── index.ts
│ │ │ └── types.d.ts
│ │ ├── bottomSheetFooter/
│ │ │ ├── BottomSheetFooter.tsx
│ │ │ ├── BottomSheetFooterContainer.tsx
│ │ │ ├── index.ts
│ │ │ ├── styles.ts
│ │ │ └── types.d.ts
│ │ ├── bottomSheetGestureHandlersProvider/
│ │ │ ├── BottomSheetGestureHandlersProvider.tsx
│ │ │ ├── index.ts
│ │ │ └── types.d.ts
│ │ ├── bottomSheetHandle/
│ │ │ ├── BottomSheetHandle.tsx
│ │ │ ├── BottomSheetHandleContainer.tsx
│ │ │ ├── constants.ts
│ │ │ ├── index.ts
│ │ │ ├── styles.ts
│ │ │ └── types.d.ts
│ │ ├── bottomSheetHostingContainer/
│ │ │ ├── BottomSheetHostingContainer.tsx
│ │ │ ├── index.ts
│ │ │ ├── styles.ts
│ │ │ ├── styles.web.ts
│ │ │ └── types.d.ts
│ │ ├── bottomSheetModal/
│ │ │ ├── BottomSheetModal.tsx
│ │ │ ├── constants.ts
│ │ │ ├── index.ts
│ │ │ └── types.d.ts
│ │ ├── bottomSheetModalProvider/
│ │ │ ├── BottomSheetModalProvider.tsx
│ │ │ ├── index.ts
│ │ │ └── types.d.ts
│ │ ├── bottomSheetRefreshControl/
│ │ │ ├── BottomSheetRefreshControl.android.tsx
│ │ │ ├── BottomSheetRefreshControl.tsx
│ │ │ └── index.ts
│ │ ├── bottomSheetScrollable/
│ │ │ ├── BottomSheetDraggableScrollable.tsx
│ │ │ ├── BottomSheetFlashList.tsx
│ │ │ ├── BottomSheetFlashList.web.tsx
│ │ │ ├── BottomSheetFlatList.tsx
│ │ │ ├── BottomSheetScrollView.tsx
│ │ │ ├── BottomSheetSectionList.tsx
│ │ │ ├── BottomSheetVirtualizedList.tsx
│ │ │ ├── ScrollableContainer.android.tsx
│ │ │ ├── ScrollableContainer.tsx
│ │ │ ├── ScrollableContainer.web.tsx
│ │ │ ├── createBottomSheetScrollableComponent.tsx
│ │ │ ├── index.ts
│ │ │ ├── styles.ts
│ │ │ ├── types.d.ts
│ │ │ └── useBottomSheetContentSizeSetter.ts
│ │ ├── bottomSheetTextInput/
│ │ │ ├── BottomSheetTextInput.tsx
│ │ │ ├── index.ts
│ │ │ └── types.ts
│ │ ├── bottomSheetView/
│ │ │ ├── BottomSheetView.tsx
│ │ │ ├── index.ts
│ │ │ ├── styles.ts
│ │ │ └── types.d.ts
│ │ └── touchables/
│ │ ├── Touchables.ios.tsx
│ │ ├── Touchables.tsx
│ │ └── index.ts
│ ├── constants.ts
│ ├── contexts/
│ │ ├── external.ts
│ │ ├── gesture.ts
│ │ ├── index.ts
│ │ ├── internal.ts
│ │ └── modal/
│ │ ├── external.ts
│ │ └── internal.ts
│ ├── hooks/
│ │ ├── index.ts
│ │ ├── useAnimatedDetents.ts
│ │ ├── useAnimatedKeyboard.ts
│ │ ├── useAnimatedLayout.ts
│ │ ├── useBottomSheet.ts
│ │ ├── useBottomSheetContentContainerStyle.ts
│ │ ├── useBottomSheetGestureHandlers.ts
│ │ ├── useBottomSheetInternal.ts
│ │ ├── useBottomSheetModal.ts
│ │ ├── useBottomSheetModalInternal.ts
│ │ ├── useBottomSheetScrollableCreator.tsx
│ │ ├── useBottomSheetSpringConfigs.ts
│ │ ├── useBottomSheetTimingConfigs.ts
│ │ ├── useBoundingClientRect.ts
│ │ ├── useGestureEventsHandlersDefault.tsx
│ │ ├── useGestureEventsHandlersDefault.web.tsx
│ │ ├── useGestureHandler.ts
│ │ ├── usePropsValidator.ts
│ │ ├── useReactiveSharedValue.ts
│ │ ├── useScrollEventsHandlersDefault.ts
│ │ ├── useScrollHandler.ts
│ │ ├── useScrollHandler.web.ts
│ │ ├── useScrollable.ts
│ │ ├── useScrollableSetter.ts
│ │ └── useStableCallback.ts
│ ├── index.ts
│ ├── types.d.ts
│ └── utilities/
│ ├── animate.ts
│ ├── clamp.ts
│ ├── easingExp.ts
│ ├── findNodeHandle.ts
│ ├── findNodeHandle.web.ts
│ ├── getKeyboardAnimationConfigs.ts
│ ├── getRefNativeTag.web.ts
│ ├── id.ts
│ ├── index.ts
│ ├── isFabricInstalled.ts
│ ├── logger.ts
│ ├── noop.ts
│ ├── normalizeSnapPoint.ts
│ ├── snapPoint.ts
│ └── validateSnapPoint.ts
├── tsconfig.json
└── website/
├── .gitignore
├── README.md
├── babel.config.js
├── blog/
│ ├── 2021-08-30-bottom-sheet-v4.mdx
│ ├── 2024-10-05-bottom-sheet-v5.mdx
│ ├── authors.yml
│ └── tags.yml
├── docs/
│ ├── components/
│ │ ├── bottomsheetbackdrop.md
│ │ ├── bottomsheetflashlist.md
│ │ ├── bottomsheetflatlist.md
│ │ ├── bottomsheetfooter.md
│ │ ├── bottomsheetscrollview.md
│ │ ├── bottomsheetsectionlist.md
│ │ ├── bottomsheettextinput.md
│ │ ├── bottomsheetview.md
│ │ └── bottomsheetvirtualizedlist.md
│ ├── faq.md
│ ├── guides/
│ │ ├── adding-shadow.mdx
│ │ ├── custom-backdrop.mdx
│ │ ├── custom-background.mdx
│ │ ├── custom-footer.mdx
│ │ ├── custom-handle.mdx
│ │ ├── detach-modal.mdx
│ │ ├── dynamic-sizing.mdx
│ │ ├── keyboard-handling.mdx
│ │ ├── pull-to-refresh.mdx
│ │ ├── react-navigation.md
│ │ └── web-support.mdx
│ ├── hooks.md
│ ├── index.md
│ ├── methods.md
│ ├── modal/
│ │ ├── hooks.md
│ │ ├── index.mdx
│ │ ├── methods.md
│ │ ├── props.md
│ │ └── usage.md
│ ├── props.md
│ ├── scrollables.md
│ ├── troubleshooting.md
│ └── usage.md
├── docusaurus.config.ts
├── package.json
├── sidebars.ts
├── src/
│ ├── css/
│ │ └── custom.css
│ └── pages/
│ └── sponsors.mdx
├── static/
│ ├── .nojekyll
│ ├── CNAME
│ └── googled4a9e66f4b4d23d7.html
├── tsconfig.json
├── versioned_docs/
│ ├── version-2/
│ │ ├── faq.md
│ │ ├── guides/
│ │ │ ├── adding-shadow.mdx
│ │ │ ├── custom-backdrop.mdx
│ │ │ ├── custom-background.mdx
│ │ │ ├── custom-handle.mdx
│ │ │ └── react-naigation.md
│ │ ├── hooks.md
│ │ ├── index.mdx
│ │ ├── methods.md
│ │ ├── modal/
│ │ │ ├── hooks.md
│ │ │ ├── index.mdx
│ │ │ ├── methods.md
│ │ │ ├── props.md
│ │ │ └── usage.md
│ │ ├── props.md
│ │ ├── scrollables.md
│ │ ├── sidebars.ts
│ │ ├── troubleshooting.md
│ │ └── usage.md
│ └── version-4/
│ ├── components/
│ │ ├── bottomsheetbackdrop.md
│ │ ├── bottomsheetflatlist.md
│ │ ├── bottomsheetfooter.md
│ │ ├── bottomsheetscrollview.md
│ │ ├── bottomsheetsectionlist.md
│ │ ├── bottomsheettextinput.md
│ │ ├── bottomsheetview.md
│ │ └── bottomsheetvirtualizedlist.md
│ ├── faq.md
│ ├── guides/
│ │ ├── adding-shadow.mdx
│ │ ├── custom-backdrop.mdx
│ │ ├── custom-background.mdx
│ │ ├── custom-footer.mdx
│ │ ├── custom-handle.mdx
│ │ ├── detach-modal.mdx
│ │ ├── keyboard-handling.mdx
│ │ ├── pull-to-refresh.mdx
│ │ └── react-navigation.md
│ ├── hooks.md
│ ├── index.md
│ ├── methods.md
│ ├── modal/
│ │ ├── hooks.md
│ │ ├── index.mdx
│ │ ├── methods.md
│ │ ├── props.md
│ │ └── usage.md
│ ├── props.md
│ ├── scrollables.md
│ ├── sidebars.ts
│ ├── troubleshooting.md
│ └── usage.md
├── versioned_sidebars/
│ ├── version-2-sidebars.json
│ └── version-4-sidebars.json
└── versions.json
================================================
FILE CONTENTS
================================================
================================================
FILE: .gitattributes
================================================
*.pbxproj -text
================================================
FILE: .github/FUNDING.yml
================================================
# These are supported funding model platforms
github: gorhom
================================================
FILE: .github/ISSUE_TEMPLATE/bug_template.yaml
================================================
name: Bug Report
description: File a bug report.
title: "[Bug]: "
labels: ["bug", "triage"]
body:
- type: markdown
attributes:
value: |
Thanks for taking the time to fill out this bug report!
⚠️ **Please note that issues that do not follow the template will be closed.**
## Environment Info
- type: dropdown
id: version
attributes:
label: Version
description: What version of the library are you using?
options:
- v5
- v4 (deprecated)
- v2 (deprecated)
default: 0
validations:
required: true
- type: dropdown
id: ra-version
attributes:
label: Reanimated Version
description: What version of React Native Reanimated are you using?
options:
- v3
- v2 (deprecated)
- v1 (deprecated)
default: 0
validations:
required: true
- type: dropdown
id: gh-version
attributes:
label: Gesture Handler Version
description: What version of Gesture Handler are you using?
options:
- v2
- v1 (deprecated)
default: 0
validations:
required: true
- type: dropdown
id: platform
attributes:
label: Platforms
description: What platform\s this bug is occurring on?
multiple: true
options:
- iOS
- Android
- Web
validations:
required: true
- type: textarea
id: what-happened
attributes:
label: What happened?
description: Please provide a clear and concise description of what the bug is? Include screenshots or gifs if needed.
placeholder: Tell us what happened?
validations:
required: true
- type: textarea
id: repo-steps
attributes:
label: Reproduction steps
description: You must provide a clear list of steps and code to reproduce the problem.
placeholder: ex. - drag the bottom sheet...
value: "- "
validations:
required: true
- type: input
id: snack
attributes:
label: Reproduction sample
description: You must provide a reproduction sample code using **Expo Snack** [issue reproduction template](https://snack.expo.dev/@gorhom/bottom-sheet---issue-reproduction-template)
placeholder: ex. https://snack.expo.dev/@gorhom/bottom-sheet---issue-reproduction-template
validations:
required: true
- type: textarea
id: logs
attributes:
label: Relevant log output
description: Please copy and paste any relevant log output. This will be automatically formatted into code, so no need for backticks.
render: shell
================================================
FILE: .github/ISSUE_TEMPLATE/feature_request.md
================================================
---
name: Feature request
about: Suggest an idea for this project
title: ''
labels: enhancement
assignees: ''
---
# Feature Request
<!--
This issue should serve for you to present or pitch an idea to the maintainers - but remember that it would be better if you were to submit a PR instead 🤗
-->
## Why it is needed
<!--
Please tell us a bit more of why you want this feature to be added, what's its origin
-->
## Possible implementation
<!--
It really helps if you could describe from a technical POV how this new feature would work, which code it rely on, etc
-->
### Code sample
<!--
Please show how the new code could work, if doable
-->
================================================
FILE: .github/PULL_REQUEST_TEMPLATE.md
================================================
Please provide enough information so that others can review your pull request:
## Motivation
Explain the **motivation** for making this change. What existing problem does the pull request solve?
================================================
FILE: .github/workflows/auto-close.yml
================================================
name: Auto Close Issue Workflow
on:
issues:
types:
- opened
- reopened
- edited
env:
GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
NUMBER: ${{ github.event.issue.number }}
USER: ${{ github.event.issue.user.login }}
REPO: "gorhom/react-native-bottom-sheet"
jobs:
autoclose:
if: ${{ !contains(github.event.issue.body, 'snack.expo.dev') && !contains(github.event.issue.body, 'gorhom.dev')}}
runs-on: ubuntu-latest
permissions:
issues: write
steps:
- name: Close Issue
run: gh issue close "$NUMBER" --comment "Hello @$USER :wave:, this issue is being automatically closed and locked because it does not follow the issue template." --repo "$REPO"
- name: Label Issue
run: gh issue edit "$NUMBER" --add-label "invalid" --repo "$REPO"
- name: Lock Issue
run: gh issue lock "$NUMBER" -r "spam" --repo "$REPO"
================================================
FILE: .github/workflows/label-sponsors.yml
================================================
name: Label sponsors
on:
pull_request:
types: [opened]
issues:
types: [opened]
jobs:
build:
name: is-sponsor-label
runs-on: ubuntu-latest
steps:
- uses: JasonEtco/is-sponsor-label-action@v1.2.0
with:
label: sponsor
env:
GITHUB_TOKEN: ${{ secrets.ACTIONS_TOKEN }}
================================================
FILE: .github/workflows/stale.yml
================================================
name: Mark stale issues and pull requests
on:
schedule:
- cron: '39 9 * * *'
jobs:
stale:
runs-on: ubuntu-latest
permissions:
issues: write
pull-requests: write
steps:
- uses: actions/stale@v5.0.0
with:
repo-token: ${{ secrets.GITHUB_TOKEN }}
stale-issue-message: '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.'
stale-pr-message: 'This PR is stale because it has been open 30 days with no activity. Remove stale label or comment or this will be closed in 10 days.'
close-issue-message: 'This issue was closed because it has been stalled for 5 days with no activity.'
stale-issue-label: 'no-issue-activity'
stale-pr-label: 'no-pr-activity'
days-before-stale: 30
days-before-pr-stale: 30
days-before-close: 5
days-before-pr-close: 10
exempt-assignees: 'gorhom'
exempt-issue-labels: 'sponsor'
exempt-pr-labels: 'sponsor'
================================================
FILE: .github/workflows/website.yml
================================================
name: Deploy to GitHub Pages
on:
push:
branches:
- master
paths:
- 'website/**'
jobs:
build:
name: Build Docusaurus
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v4
with:
fetch-depth: 0
- uses: actions/setup-node@v4
with:
node-version: 18
cache: yarn
- name: Install dependencies
working-directory: website
run: yarn install --frozen-lockfile
- name: Build website
working-directory: website
run: yarn build
- name: Upload Build Artifact
uses: actions/upload-pages-artifact@v3
with:
path: website/build
deploy:
name: Deploy to GitHub Pages
needs: build
# Grant GITHUB_TOKEN the permissions required to make a Pages deployment
permissions:
pages: write # to deploy to Pages
id-token: write # to verify the deployment originates from an appropriate source
# Deploy to the github-pages environment
environment:
name: github-pages
url: ${{ steps.deployment.outputs.page_url }}
runs-on: ubuntu-latest
steps:
- name: Deploy to GitHub Pages
id: deployment
uses: actions/deploy-pages@v4
================================================
FILE: .gitignore
================================================
# OSX
#
.DS_Store
# XDE
.expo/
# VSCode
jsconfig.json
# Xcode
#
build/
*.pbxuser
!default.pbxuser
*.mode1v3
!default.mode1v3
*.mode2v3
!default.mode2v3
*.perspectivev3
!default.perspectivev3
xcuserdata
*.xccheckout
*.moved-aside
DerivedData
*.hmap
*.ipa
*.xcuserstate
project.xcworkspace
# Android/IJ
#
.idea
.gradle
local.properties
android.iml
# Cocoapods
#
Pods/
# node.js
#
node_modules
npm-debug.log
yarn-debug.log
yarn-error.log
yarn.lock
example/yarn.lock
# BUCK
buck-out/
\.buckd/
android/app/libs
android/keystores/debug.keystore
# generated by bob
lib/
# Dependencies
docs/node_modules
# Production
docs//build
# Generated files
docs/.docusaurus
docs/.cache-loader
# Misc
docs/.DS_Store
docs/.env.local
docs/.env.development.local
docs/.env.test.local
docs/.env.production.local
docs/npm-debug.log*
docs/yarn-debug.log*
docs/yarn-error.log*
================================================
FILE: .huskyrc.json
================================================
{
"hooks": {
"commit-msg": "commitlint -E HUSKY_GIT_PARAMS",
"pre-commit": "lint-staged"
}
}
================================================
FILE: .release-it.json
================================================
{
"git": {
"push": true,
"tagName": "v${version}",
"commitMessage": "chore: release v${version}"
},
"github": {
"release": true
},
"npm": {
"publish": false
},
"plugins": {
"@release-it/conventional-changelog": {
"preset": {
"name": "conventionalcommits",
"types": [
{
"type": "feat",
"section": "🚀 New Features"
},
{
"type": "fix",
"section": "🐛 Bug Fixes"
},
{
"type": "chore",
"section": "🧹 Maintenance Chores"
},
{
"type": "refactor",
"section": "♻️ Code Refactor"
}
]
},
"infile": "CHANGELOG.md"
}
}
}
================================================
FILE: .vscode/settings.json
================================================
{
"editor.defaultFormatter": "biomejs.biome",
"editor.formatOnSave": true,
"editor.codeActionsOnSave": {
"source.fixAll.biome": "explicit",
"source.organizeImports.biome": "explicit"
},
"[typescriptreact]": {
"editor.defaultFormatter": "biomejs.biome"
},
"[javascript]": {
"editor.defaultFormatter": "biomejs.biome"
},
"[typescript]": {
"editor.defaultFormatter": "biomejs.biome"
},
"[json]": {
"editor.defaultFormatter": "biomejs.biome"
},
"[jsonc]": {
"editor.defaultFormatter": "biomejs.biome"
}
}
================================================
FILE: CHANGELOG.md
================================================
# Changelog
## [5.2.8](https://github.com/gorhom/react-native-bottom-sheet/compare/v5.2.7...v5.2.8) (2025-12-04)
### 🐛 Bug Fixes
* **mock:** replace JSX syntax with `createElement` ([#2302](https://github.com/gorhom/react-native-bottom-sheet/issues/2302))(by [@huextrat](https://github.com/huextrat)) ([fdeff8f](https://github.com/gorhom/react-native-bottom-sheet/commit/fdeff8f289186672a14013e404d143922a9be232))
* removed deprecated Easing constant ([#2486](https://github.com/gorhom/react-native-bottom-sheet/issues/2486))(by [@joshua-zbni](https://github.com/joshua-zbni)) ([164d982](https://github.com/gorhom/react-native-bottom-sheet/commit/164d9828b40aeb18f52925731e9602db40c699a5))
### 🧹 Maintenance Chores
* updated example deps ([f3aa263](https://github.com/gorhom/react-native-bottom-sheet/commit/f3aa26310ea6ebc353031c17884e0f4b3a6a3f4d))
## [5.2.7](https://github.com/gorhom/react-native-bottom-sheet/compare/v5.2.6...v5.2.7) (2025-11-26)
### 🐛 Bug Fixes
* fixed function undefined error in useBoundingClientRect ([#2561](https://github.com/gorhom/react-native-bottom-sheet/issues/2561))(by [@tylerdgenius](https://github.com/tylerdgenius), [@fab-nikhil](https://github.com/fab-nikhil), [@pinpong](https://github.com/pinpong)) ([3a99ee4](https://github.com/gorhom/react-native-bottom-sheet/commit/3a99ee4a2bc69ed280f045951edf4cfcf6bc6581))
### 🧹 Maintenance Chores
* updated ts tags for getBoundingClientRect ([6b22037](https://github.com/gorhom/react-native-bottom-sheet/commit/6b220371a4b591ac694cf1a8e16173f28ccdbba5))
## [5.2.6](https://github.com/gorhom/react-native-bottom-sheet/compare/v5.2.5...v5.2.6) (2025-09-05)
### 🐛 Bug Fixes
* **#2452:** prevented the bottom sheet from snapping to -1 when resizing the detent while keyboard is open([#2327](https://github.com/gorhom/react-native-bottom-sheet/issues/2327))(by [@pakerwreah](https://github.com/pakerwreah)) ([c68edac](https://github.com/gorhom/react-native-bottom-sheet/commit/c68edacf50b76ca08ac599a8485a533c710c6289)), closes [#2452](https://github.com/gorhom/react-native-bottom-sheet/issues/2452)
* prevent the bottom sheet from closing when over dragging while keyboard is open ([cce1f7e](https://github.com/gorhom/react-native-bottom-sheet/commit/cce1f7e0cc1b0d3c2a0014ba17624f8671816e15))
## [5.2.5](https://github.com/gorhom/react-native-bottom-sheet/compare/v5.2.4...v5.2.5) (2025-09-04)
### 🐛 Bug Fixes
* **#2449:** adjust next index to current index when animating to a temporary position ([20de151](https://github.com/gorhom/react-native-bottom-sheet/commit/20de1513f571e079d243da9f3bbf3688f10acf7b)), closes [#2449](https://github.com/gorhom/react-native-bottom-sheet/issues/2449)
* **#2449:** adjust next index to the highest detent index when animating by keyboard ([f8cd4fe](https://github.com/gorhom/react-native-bottom-sheet/commit/f8cd4fe37c1b05abd4153f586d61658a3d7954b8)), closes [#2449](https://github.com/gorhom/react-native-bottom-sheet/issues/2449)
* conditionally apply web-only cursor style to avoid TypeScript error ([#2420](https://github.com/gorhom/react-native-bottom-sheet/issues/2420))(by [@kirstilynn](https://github.com/kirstilynn)) ([e5c077b](https://github.com/gorhom/react-native-bottom-sheet/commit/e5c077b9cc630d256ca8d9a895a35b1989394d7a))
### 🧹 Maintenance Chores
* updated the example deps ([c9e0473](https://github.com/gorhom/react-native-bottom-sheet/commit/c9e0473f097d61d467449b68af1170e58267136a))
## [5.2.4](https://github.com/gorhom/react-native-bottom-sheet/compare/v5.2.3...v5.2.4) (2025-08-28)
### 🐛 Bug Fixes
* **#2430:** fixed flickering issue with animation by keyboard ([334e94c](https://github.com/gorhom/react-native-bottom-sheet/commit/334e94c5ffd700261201c07bd153711d38b09ef6))
* **#2430:** fixed the force closing when switching between two text inputs ([086baed](https://github.com/gorhom/react-native-bottom-sheet/commit/086baeda48be71b9b8d020e1b680573a92218b18))
* **#2431:** added handling for evaluating position for detent change while animating ([090afa6](https://github.com/gorhom/react-native-bottom-sheet/commit/090afa64338e27882ae4c32b090e9ce72a2ba38a)), closes [#2431](https://github.com/gorhom/react-native-bottom-sheet/issues/2431)
* memoized the scrollable creator hook ([e51e523](https://github.com/gorhom/react-native-bottom-sheet/commit/e51e52382ee561a2db6022af36ab5181e07c8042))
### 🧹 Maintenance Chores
* updated biome dep ([eb03ab0](https://github.com/gorhom/react-native-bottom-sheet/commit/eb03ab074dc17df9c3ff404f645db3bfbc0c6aab))
## [5.2.3](https://github.com/gorhom/react-native-bottom-sheet/compare/v5.2.2...v5.2.3) (2025-08-18)
## [5.2.2](https://github.com/gorhom/react-native-bottom-sheet/compare/v5.2.1...v5.2.2) (2025-08-18)
### 🐛 Bug Fixes
* **#2364:** fixed layouting issue when dynamic sizing enabled and handle is not provided ([d3275b1](https://github.com/gorhom/react-native-bottom-sheet/commit/d3275b1e97ab7ed975cc28ddcfaa2ffb25624c98))
## [5.2.1](https://github.com/gorhom/react-native-bottom-sheet/compare/v5.2.0...v5.2.1) (2025-08-18)
### 🐛 Bug Fixes
* **#2418:** updated nullability check for highestDetentPosition ([b51ea61](https://github.com/gorhom/react-native-bottom-sheet/commit/b51ea619a2c36d5a2514ad00a43928e206db0512)), closes [#2418](https://github.com/gorhom/react-native-bottom-sheet/issues/2418)
## [5.2.0](https://github.com/gorhom/react-native-bottom-sheet/compare/v5.1.8...v5.2.0) (2025-08-17)
### 🚀 New Features
* added a scrollable creator hook to allow integrate with third party list libraries ([d6250e2](https://github.com/gorhom/react-native-bottom-sheet/commit/d6250e20b19801c5ea50af3e369904ebb90eb7b9))
### 🐛 Bug Fixes
* **#2356:** added missing dependencies to callback hooks ([#2382](https://github.com/gorhom/react-native-bottom-sheet/issues/2382)) ([dfaec13](https://github.com/gorhom/react-native-bottom-sheet/commit/dfaec131efde3126f6ff11e2fd409fd94864ef8c)), closes [#2356](https://github.com/gorhom/react-native-bottom-sheet/issues/2356) [#2356](https://github.com/gorhom/react-native-bottom-sheet/issues/2356)
### 🧹 Maintenance Chores
* updated animated layout hook default return ([99efdd7](https://github.com/gorhom/react-native-bottom-sheet/commit/99efdd77c49db49039afabb14a8d34cd68764afc))
* updated example deps ([248ddd9](https://github.com/gorhom/react-native-bottom-sheet/commit/248ddd97a098627773114d1784c3abb0c5bd028e))
* updated examples ([eb95f3a](https://github.com/gorhom/react-native-bottom-sheet/commit/eb95f3a65e7a7ecd6b317b9e2a28df79780215c7))
* updated types ([a123b17](https://github.com/gorhom/react-native-bottom-sheet/commit/a123b179e3fd86c54b601f9caf2f1f936a79b187))
### ♻️ Code Refactor
* added isForcedClosing to animation state ([ab97f77](https://github.com/gorhom/react-native-bottom-sheet/commit/ab97f7755683ff2553e4daaee471fc6db6adf2ee))
* optimise animation state ([63dc473](https://github.com/gorhom/react-native-bottom-sheet/commit/63dc4733c20e7d9dd4b1f8a5a80894a8395420b8))
* optimise keyboard state, and remove redundant variables ([bd6c8c6](https://github.com/gorhom/react-native-bottom-sheet/commit/bd6c8c66f5617e0c398047a3c0934ab75105b17a))
* optimise layout state ([4dfe07a](https://github.com/gorhom/react-native-bottom-sheet/commit/4dfe07a1a49e5e7a2faf339535d2dc7678f71323))
* optimise next position state ([3d6add6](https://github.com/gorhom/react-native-bottom-sheet/commit/3d6add6d8e9570165241c0c801953c72b47c2921))
* optimise scrollable state ([bacca9d](https://github.com/gorhom/react-native-bottom-sheet/commit/bacca9d024df6be1157e19a607b85ded84d69b7e))
* optimise snap points/detents state ([5de7bd3](https://github.com/gorhom/react-native-bottom-sheet/commit/5de7bd343492d7f0ac978502431a1465e2d7299c))
* removed isContentHeightFixed shared value ([e26426a](https://github.com/gorhom/react-native-bottom-sheet/commit/e26426a17e4793b7749d337fc549d118db0111f2))
* removed next position animated value ([b81a1fd](https://github.com/gorhom/react-native-bottom-sheet/commit/b81a1fd31641b4440754be70c5007add418621b7))
## [5.1.8](https://github.com/gorhom/react-native-bottom-sheet/compare/v5.1.6...v5.1.8) (2025-07-27)
### Bug Fixes
* added support for reanimated v4 ([#2223](https://github.com/gorhom/react-native-bottom-sheet/issues/2223))(by [@skusnierz](https://github.com/skusnierz)) ([d96a18e](https://github.com/gorhom/react-native-bottom-sheet/commit/d96a18eb113739bb7707e2f61e17ece2afb3b174))
* migrate from `useWorkletCallback` ([#2356](https://github.com/gorhom/react-native-bottom-sheet/issues/2356))(by [@tomekzaw](https://github.com/tomekzaw)) ([3620972](https://github.com/gorhom/react-native-bottom-sheet/commit/3620972160f987b4437c06927a9ab768fbffe843))
## [5.1.7](https://github.com/gorhom/react-native-bottom-sheet/compare/v5.1.6...v5.1.7) (2025-07-27)
## [5.1.6](https://github.com/gorhom/react-native-bottom-sheet/compare/v5.1.5...v5.1.6) (2025-06-03)
### Bug Fixes
* **#2267:** early exit when attempting to snap to index while layout is not ready ([0715f03](https://github.com/gorhom/react-native-bottom-sheet/commit/0715f0384a187cdb1df903d693666ac4b12db807)), closes [#2267](https://github.com/gorhom/react-native-bottom-sheet/issues/2267)
* **#2278:** removed flashlist for web ([e17096f](https://github.com/gorhom/react-native-bottom-sheet/commit/e17096feade145f9e6349815398f8aaae758d554)), closes [#2278](https://github.com/gorhom/react-native-bottom-sheet/issues/2278)
* added positions to onAnimate, and prevent index to be negative with keyboard animations ([#2271](https://github.com/gorhom/react-native-bottom-sheet/issues/2271))(by [@souyahia](https://github.com/souyahia)) ([898270e](https://github.com/gorhom/react-native-bottom-sheet/commit/898270e62e0f83c8f8df671a60d6aabe749d890e))
* allow bottom sheet view to resize it self when its content resized ([5397478](https://github.com/gorhom/react-native-bottom-sheet/commit/53974786a18aceab1cc15def1b29c94ef93002e3))
* updated BottomSheetModal mock, add createBottomSheetScrollableComponent and enum mocks ([#2265](https://github.com/gorhom/react-native-bottom-sheet/issues/2265))(by [@gabimoncha](https://github.com/gabimoncha)) ([a77904a](https://github.com/gorhom/react-native-bottom-sheet/commit/a77904ac935278bec4e086700e1e93baa54282b6))
## [5.1.5](https://github.com/gorhom/react-native-bottom-sheet/compare/v5.1.4...v5.1.5) (2025-05-26)
### Bug Fixes
* **#2237:** fixed node handle lookup for virtualized list on web (by [@btoo](https://github.com/btoo)) ([6442b0e](https://github.com/gorhom/react-native-bottom-sheet/commit/6442b0ea54a38d8dcb82f63aade077ead29d382b))
* **#2288:** added unique id to the root bottom sheet modal portal ([711ea7a](https://github.com/gorhom/react-native-bottom-sheet/commit/711ea7a5290ef485b9ba5c65eb45e28d6e495b43)), closes [#2288](https://github.com/gorhom/react-native-bottom-sheet/issues/2288)
* fixed initial content height calculation on web ([4db946e](https://github.com/gorhom/react-native-bottom-sheet/commit/4db946e4af331bb2d3a80002ee6051da9f3593eb))
* prevent canceling touchmove events when not cancelable ([#2244](https://github.com/gorhom/react-native-bottom-sheet/issues/2244))(by [@erickreutz](https://github.com/erickreutz)) ([14d5d1e](https://github.com/gorhom/react-native-bottom-sheet/commit/14d5d1e89f22b5101445799fd0cb836ecb7c4882))
* provide the portal host name with use portal ([67e9097](https://github.com/gorhom/react-native-bottom-sheet/commit/67e909711164aba900c2764034723c8b0e051704))
## [5.1.4](https://github.com/gorhom/react-native-bottom-sheet/compare/v5.1.3...v5.1.4) (2025-05-04)
### Bug Fixes
* **#2237:** fixed recursive loop in findNodeHandle.web (by @TNAJanssen) ([3556ba8](https://github.com/gorhom/react-native-bottom-sheet/commit/3556ba8e1445a78dfc6cfc93997500d52a03368e))
## [5.1.3](https://github.com/gorhom/react-native-bottom-sheet/compare/v5.1.2...v5.1.3) (2025-05-04)
### Bug Fixes
* **#2237:** updated findNodeHandle for web to support React 19 ([47a95f5](https://github.com/gorhom/react-native-bottom-sheet/commit/47a95f517ab5b4680d0f5a45b09464911aafd35e)), closes [#2237](https://github.com/gorhom/react-native-bottom-sheet/issues/2237)
## [5.1.2](https://github.com/gorhom/react-native-bottom-sheet/compare/v5.1.1...v5.1.2) (2025-03-09)
### Bug Fixes
* **#2163:** restart closing animation when container height get updated ([4ed9f3c](https://github.com/gorhom/react-native-bottom-sheet/commit/4ed9f3cb542316a984893efa2025ca5384ffe89a)), closes [#2163](https://github.com/gorhom/react-native-bottom-sheet/issues/2163)
* **#2177:** set absolute fill to backdrop default style ([979ba7c](https://github.com/gorhom/react-native-bottom-sheet/commit/979ba7ce0b9d69abfaefd169ee692bf818fa4d0d)), closes [#2177](https://github.com/gorhom/react-native-bottom-sheet/issues/2177)
## [5.1.1](https://github.com/gorhom/react-native-bottom-sheet/compare/v5.1.0...v5.1.1) (2025-02-09)
### Bug Fixes
* **#2043:** handle unnecessary invocation of index side effect ([#2073](https://github.com/gorhom/react-native-bottom-sheet/issues/2073))(inspired by @IslamRustamov) ([2164c02](https://github.com/gorhom/react-native-bottom-sheet/commit/2164c02e63177f9ac69acc05722c85e8d55cd931)), closes [#2043](https://github.com/gorhom/react-native-bottom-sheet/issues/2043)
# [5.1.0](https://github.com/gorhom/react-native-bottom-sheet/compare/v5.0.6...v5.1.0) (2025-02-06)
### Bug Fixes
* **#2129:** fixed initial isAnimatedOnMount value ([0850cb8](https://github.com/gorhom/react-native-bottom-sheet/commit/0850cb864819f79189592cb66c2b6d179957ba61))
### Features
* added enableBlurKeyboardOnGesture prop to handle blurring keyboard on gesture ([1c31aca](https://github.com/gorhom/react-native-bottom-sheet/commit/1c31acad50a7c171548ea7f4594a4d1d563cf40f))
## [5.0.6](https://github.com/gorhom/react-native-bottom-sheet/compare/v5.0.5...v5.0.6) (2024-11-17)
### Bug Fixes
* clipped views when keyboard is closing ([2320a81](https://github.com/gorhom/react-native-bottom-sheet/commit/2320a81f95e696e22debe5a823740f51fadae0f6))
* removed keyboard height setting from hide event ([61473b5](https://github.com/gorhom/react-native-bottom-sheet/commit/61473b56c3389e5ac9edfeb1dc4b93907e3b5d05))
* updated useStableCallback to set callback in ref without useEffect ([#2010](https://github.com/gorhom/react-native-bottom-sheet/issues/2010))(by [@pavel-krasnov](https://github.com/pavel-krasnov)) ([e898859](https://github.com/gorhom/react-native-bottom-sheet/commit/e89885936391f5ce106983d8aac814bcb422e82c))
* useStableCallback implementation ([87a73c5](https://github.com/gorhom/react-native-bottom-sheet/commit/87a73c59b83ef0b3868c12403a467ea3aebf0dd5))
## [5.0.5](https://github.com/gorhom/react-native-bottom-sheet/compare/v5.0.4...v5.0.5) (2024-10-26)
### Bug Fixes
* **#1983:** updated shared values access as hook dependancies ([#1992](https://github.com/gorhom/react-native-bottom-sheet/issues/1992))(by [@pinpong](https://github.com/pinpong)) ([9757bd2](https://github.com/gorhom/react-native-bottom-sheet/commit/9757bd251cba67cf26489640f20fd1557b1a426e)), closes [#1983](https://github.com/gorhom/react-native-bottom-sheet/issues/1983) [#1983](https://github.com/gorhom/react-native-bottom-sheet/issues/1983)
* added BottomSheetFlashList mock ([#1988](https://github.com/gorhom/react-native-bottom-sheet/issues/1988))(by @Fadikk367) ([13c7d47](https://github.com/gorhom/react-native-bottom-sheet/commit/13c7d47beae6f2451968d30e862f0ea49b7199b6))
## [5.0.4](https://github.com/gorhom/react-native-bottom-sheet/compare/v5.0.3...v5.0.4) (2024-10-20)
### Bug Fixes
* **#1983:** updated shared values access as hook dependancies ([ae41b2d](https://github.com/gorhom/react-native-bottom-sheet/commit/ae41b2da650d2be614d840fbdfe1d29db6d7a575)), closes [#1983](https://github.com/gorhom/react-native-bottom-sheet/issues/1983)
* **#1987:** updated provided style handling for bottom sheet view ([4c8ae25](https://github.com/gorhom/react-native-bottom-sheet/commit/4c8ae252b8ec0bb420b60f8314cc7f04ed12b519)), closes [#1987](https://github.com/gorhom/react-native-bottom-sheet/issues/1987)
## [5.0.3](https://github.com/gorhom/react-native-bottom-sheet/compare/v5.0.2...v5.0.3) (2024-10-20)
### Bug Fixes
* added children type to containerComponent prop type ([#1971](https://github.com/gorhom/react-native-bottom-sheet/issues/1971))(by @Nodonisko) ([203e52f](https://github.com/gorhom/react-native-bottom-sheet/commit/203e52fa5be3e167522776f184d79511bdf35344))
* dynamic sizing with detached static views ([b72e275](https://github.com/gorhom/react-native-bottom-sheet/commit/b72e27519c36671d84973f8b0b9cd1f8a7a8b8c1))
* fixed dynamic scrollables content size with footer in place ([ace0da7](https://github.com/gorhom/react-native-bottom-sheet/commit/ace0da7475d68d4f27d386ead9f71c2eb19fbe31))
* updated reduce motion handling, to respeact user setting and allow overriding ([1ef05c7](https://github.com/gorhom/react-native-bottom-sheet/commit/1ef05c7fee821c356220452ccf61d33d29483c00))
## [5.0.2](https://github.com/gorhom/react-native-bottom-sheet/compare/v5.0.1...v5.0.2) (2024-10-14)
### Bug Fixes
* **#1035,#1043:** updated default animatedNextPositionIndex to INITIAL_VALUE ([#1960](https://github.com/gorhom/react-native-bottom-sheet/issues/1960))(by [@dfalling](https://github.com/dfalling)) ([1cf3e41](https://github.com/gorhom/react-native-bottom-sheet/commit/1cf3e4167f2ffacf36c7abebb527f79048754121)), closes [#1035](https://github.com/gorhom/react-native-bottom-sheet/issues/1035) [#1043](https://github.com/gorhom/react-native-bottom-sheet/issues/1043)
* **#1968:** moved the flashlist optional import into the component body ([ab33e21](https://github.com/gorhom/react-native-bottom-sheet/commit/ab33e2132f8e6fdb4a3c36e34c0f2ff04e09f11f)), closes [#1968](https://github.com/gorhom/react-native-bottom-sheet/issues/1968)
## [5.0.1](https://github.com/gorhom/react-native-bottom-sheet/compare/v5.0.0...v5.0.1) (2024-10-14)
### Bug Fixes
* removed redundant dependency ([3ffc7f7](https://github.com/gorhom/react-native-bottom-sheet/commit/3ffc7f70e8769fc1ecc39754111754b53d12bff8))
# [5.0.0](https://github.com/gorhom/react-native-bottom-sheet/compare/v4.6.4...v5.0.0) (2024-10-13)
### Features
* added web support (#1150) ([`a996b4a`](https://github.com/gorhom/react-native-bottom-sheet/commit/a996b4aa68139136ec75e0921025d235471c838d))
* added flashlist as a scrollable ([9bf39ed](https://github.com/gorhom/react-native-bottom-sheet/commit/9bf39ed08d7377937b0e8b8af65791b178c06492))
* rewrite gesture apis with gesture handler 2 (#1126) ([`6a4d296`](https://github.com/gorhom/react-native-bottom-sheet/commit/6a4d2967684b01e28f23b1b35afbb4cc4dabaf1d))
* added accessibility overrides support ([#1288](https://github.com/gorhom/react-native-bottom-sheet/issues/1288))(by @Mahmoud-SK) ([6203c18](https://github.com/gorhom/react-native-bottom-sheet/commit/6203c18acc9f8dc3a31af5bf5ad80e368deceb52))
* added default dynamic sizing ([#1513](https://github.com/gorhom/react-native-bottom-sheet/issues/1513))(with @Eli-Nathan & [@ororsatti](https://github.com/ororsatti)) ([#1683](https://github.com/gorhom/react-native-bottom-sheet/issues/1683)) ([8017fb6](https://github.com/gorhom/react-native-bottom-sheet/commit/8017fb6b02088d3c66c64a8a23e0f63f22884d36))
* added a new bottom sheet stack behaviour `replace` ([#1897](https://github.com/gorhom/react-native-bottom-sheet/issues/1897))(with [@janodetzel](https://github.com/janodetzel)) ([997d794](https://github.com/gorhom/react-native-bottom-sheet/commit/997d794ccffe8739268ec50dfecca624e10f8752))
### Bug Fixes
* addressed an edge case with scrollview content sizing on initial rendering on safari ([d1226b7](https://github.com/gorhom/react-native-bottom-sheet/commit/d1226b70ac2405b4a98c8e5be6cee94ae110a35b))
* replaced deprecated reanimated Extrapolate with Extrapolation ([#1875](https://github.com/gorhom/react-native-bottom-sheet/issues/1875))(by [@cenksari](https://github.com/cenksari)) ([5af3e80](https://github.com/gorhom/react-native-bottom-sheet/commit/5af3e803b0313154f42fbadba7dae6d32719c01c))
* updated animation sequencing to respect force closing by user ([#1941](https://github.com/gorhom/react-native-bottom-sheet/issues/1941)) ([e4f3fe3](https://github.com/gorhom/react-native-bottom-sheet/commit/e4f3fe339b20a28d8573fa31f0d1b85be3ef2085))
* updated the enable content panning gesture logic ([2962a2d](https://github.com/gorhom/react-native-bottom-sheet/commit/2962a2d5326e517a48fe11d0e0d762beacca890d))
* updated the scrollable locking logic while scrolling ([#1939](https://github.com/gorhom/react-native-bottom-sheet/issues/1939)) ([d2b959c](https://github.com/gorhom/react-native-bottom-sheet/commit/d2b959c1f25f1aaeed1b30d21c43809c72490ef3))
* updated the keyboard handling for Android with keyboard input mode resize ([08db4ab](https://github.com/gorhom/react-native-bottom-sheet/commit/08db4ab4b0058955e9ee2d55f87da8fefb5390ad))
* replace getRefNativeTag with findNodeHandle ([#1823](https://github.com/gorhom/react-native-bottom-sheet/issues/1823))(by @AndreiCalazans) ([866b4ee](https://github.com/gorhom/react-native-bottom-sheet/commit/866b4ee570fc345d59053561c26af67144e8fd6f))
* **BottomSheetContainer:** cannot add new property 'value' ([#1808](https://github.com/gorhom/react-native-bottom-sheet/issues/1808))(by @MoritzCooks) ([ccd6bb5](https://github.com/gorhom/react-native-bottom-sheet/commit/ccd6bb540884f35fb9c0dcd5527ed8bac0c1be91))
* added error message when dynamic sizing enabled with a wrong children type ([8b62dca](https://github.com/gorhom/react-native-bottom-sheet/commit/8b62dca06752a3c047162a693a75173a7c701e3e))
* bottom sheet not appearing for users that have reduced motion turned on ([#1743](https://github.com/gorhom/react-native-bottom-sheet/issues/1743))(by [@fobos531](https://github.com/fobos531)) ([9b4ef4d](https://github.com/gorhom/react-native-bottom-sheet/commit/9b4ef4dabb7ce1f846ae90e2bab39fa9354ff125))
* fixed the mount animation with reduce motion enabled ([#1560](https://github.com/gorhom/react-native-bottom-sheet/issues/1560), [#1674](https://github.com/gorhom/react-native-bottom-sheet/issues/1674)) ([6efd8ae](https://github.com/gorhom/react-native-bottom-sheet/commit/6efd8aeb0e312555fa77609869eedbf46a4a04b3))
* added BottomSheetTextInput to the mock file ([#1698](https://github.com/gorhom/react-native-bottom-sheet/issues/1698))(by [@ghorbani-m](https://github.com/ghorbani-m)) ([dee95e5](https://github.com/gorhom/react-native-bottom-sheet/commit/dee95e5b161d78b0aae34d85abea3d8042417892))
* added footer height to content height when using dynamic sizing ([#1725](https://github.com/gorhom/react-native-bottom-sheet/issues/1725)) ([5009085](https://github.com/gorhom/react-native-bottom-sheet/commit/50090859f9e50932c641df5b0d6f91cc9f3b5bad))
* added missing mock of Touchables ([#1700](https://github.com/gorhom/react-native-bottom-sheet/issues/1700))(by [@jaworek](https://github.com/jaworek)) ([a6f44c0](https://github.com/gorhom/react-native-bottom-sheet/commit/a6f44c01ef8f1b9154ce2313614daf075567f641))
* added support for web without Babel/SWC ([#1741](https://github.com/gorhom/react-native-bottom-sheet/issues/1741))(by [@joshsmith](https://github.com/joshsmith)) ([d620494](https://github.com/gorhom/react-native-bottom-sheet/commit/d620494877e98f4331d8c0a1cb7d375abb06db60))
* fixed the backdrop tap gesture on web ([#1446](https://github.com/gorhom/react-native-bottom-sheet/issues/1446)) ([b0792de](https://github.com/gorhom/react-native-bottom-sheet/commit/b0792dea5ec605b449d40037cbecfd35bf0ff066))
* allowed content max height be applied for dynamic sizing ([57c196c](https://github.com/gorhom/react-native-bottom-sheet/commit/57c196cfdf2f63622fb5ea8d6d32cf21b9dd9367))
* dismiss all action for modals ([#1529](https://github.com/gorhom/react-native-bottom-sheet/issues/1529))(by [@david-gomes5](https://github.com/david-gomes5)) ([17269f1](https://github.com/gorhom/react-native-bottom-sheet/commit/17269f1f55b91f33cec24870ebe00f2510888a4b))
* fixed position x index sequencing with container resizing ([#1675](https://github.com/gorhom/react-native-bottom-sheet/issues/1675)) ([f0ec705](https://github.com/gorhom/react-native-bottom-sheet/commit/f0ec705cd74ea6e31614ab12c0b4fdc097d3820d))
* prevent updating backdrop state when unmounting ([#1657](https://github.com/gorhom/react-native-bottom-sheet/issues/1657))(by [@christophby](https://github.com/christophby)) ([d746d85](https://github.com/gorhom/react-native-bottom-sheet/commit/d746d85b92e2bdb4351ea4d3fde140e3199ac671))
* **web:** use absolute positioning for BottomSheetContainer in web ([#1597](https://github.com/gorhom/react-native-bottom-sheet/issues/1597)) ([d6e3dc9](https://github.com/gorhom/react-native-bottom-sheet/commit/d6e3dc9b327b840895c875dcf016fb5c80a62915))
* (BottomSheetTextInput): reset shouldHandleKeyboardEvents on unmount (#1495)(by @koplyarov) ([`81cd66f`](https://github.com/gorhom/react-native-bottom-sheet/commit/81cd66f9c49843e43231d1d81ec4aa518a9f1b95))
* updated containerOffset top value to default to 0 (#1420)(by @beqramo) ([`b81cb93`](https://github.com/gorhom/react-native-bottom-sheet/commit/b81cb9368b55c24703a9c000a76e89a2d253e141))
* resume close animation when container gets resized (#1374) (#1392) ([`1f69625`](https://github.com/gorhom/react-native-bottom-sheet/commit/1f69625e180fcec4d8d3dec436f8d5bb4eba476b))
* (bottom-sheet-modal): added container component prop to modal (#1309)(by @magrinj) ([`67e1e09`](https://github.com/gorhom/react-native-bottom-sheet/commit/67e1e09acbc0e96e435a0c2247fa1e0bc19f91aa))
* updated scrollables mocks with ReactNative list equivalent (#1394)(by @gkueny) ([`630f87f`](https://github.com/gorhom/react-native-bottom-sheet/commit/630f87ff6bd19c4dfc071783139c938eda3baf6c))
* crash on swipe down (#1367)(by @beqramo) ([`3ccbefc`](https://github.com/gorhom/react-native-bottom-sheet/commit/3ccbefc4d16558867d518f7e0306fbb4d1dbdbeb))
* (BottomSheetScrollView): updated scroll responders props type (#1335)(by @eps1lon) ([`e42fafc`](https://github.com/gorhom/react-native-bottom-sheet/commit/e42fafcc492d01665c296bf551a6a264eb866fc5))
* fixed keyboard dismissing issue with Reanimated v3 (#1346)(by @janicduplessis) ([`1d1a464`](https://github.com/gorhom/react-native-bottom-sheet/commit/1d1a46489bede1d3f119df2fb6f467e778461c39))
- (#1119): fixed race condition between onmount and keyboard animations ([`a1ec74d`](https://github.com/gorhom/react-native-bottom-sheet/commit/a1ec74dbbc85476bb39f3637e9a97214e0cad9a0))
#### Chores And Housekeeping
* updated expo and react native deps (#1445) ([`f6f2304`](https://github.com/gorhom/react-native-bottom-sheet/commit/f6f2304235c05f92d86ce8083caf910b9297a10a))
* updated react native and other deps (#1412) ([`549e461`](https://github.com/gorhom/react-native-bottom-sheet/commit/549e461530a91e1d7c95a5178bd2238ebf84df86))
* fixed types (#1123)(by @stropho) ([`b440964`](https://github.com/gorhom/react-native-bottom-sheet/commit/b44096451d4fed81be7f08b0edf638e4a1c42ccd))
* updated reanimated to v3 (#1324) ([`4829316`](https://github.com/gorhom/react-native-bottom-sheet/commit/4829316beeff95c9e2efa5fbfdfcf7ef37b4af60))
================================================
FILE: CODE_OF_CONDUCT.md
================================================
# Contributor Covenant Code of Conduct
## Our Pledge
We as members, contributors, and leaders pledge to make participation in our
community a harassment-free experience for everyone, regardless of age, body
size, visible or invisible disability, ethnicity, sex characteristics, gender
identity and expression, level of experience, education, socio-economic status,
nationality, personal appearance, race, religion, or sexual identity
and orientation.
We pledge to act and interact in ways that contribute to an open, welcoming,
diverse, inclusive, and healthy community.
## Our Standards
Examples of behavior that contributes to a positive environment for our
community include:
* Demonstrating empathy and kindness toward other people
* Being respectful of differing opinions, viewpoints, and experiences
* Giving and gracefully accepting constructive feedback
* Accepting responsibility and apologizing to those affected by our mistakes,
and learning from the experience
* Focusing on what is best not just for us as individuals, but for the
overall community
Examples of unacceptable behavior include:
* The use of sexualized language or imagery, and sexual attention or
advances of any kind
* Trolling, insulting or derogatory comments, and personal or political attacks
* Public or private harassment
* Publishing others' private information, such as a physical or email
address, without their explicit permission
* Other conduct which could reasonably be considered inappropriate in a
professional setting
## Enforcement Responsibilities
Community leaders are responsible for clarifying and enforcing our standards of
acceptable behavior and will take appropriate and fair corrective action in
response to any behavior that they deem inappropriate, threatening, offensive,
or harmful.
Community leaders have the right and responsibility to remove, edit, or reject
comments, commits, code, wiki edits, issues, and other contributions that are
not aligned to this Code of Conduct, and will communicate reasons for moderation
decisions when appropriate.
## Scope
This Code of Conduct applies within all community spaces, and also applies when
an individual is officially representing the community in public spaces.
Examples of representing our community include using an official e-mail address,
posting via an official social media account, or acting as an appointed
representative at an online or offline event.
## Enforcement
Instances of abusive, harassing, or otherwise unacceptable behavior may be
reported to the community leaders responsible for enforcement at
[@gorhom](https://twitter.com/gorhom) on twitter.
All complaints will be reviewed and investigated promptly and fairly.
All community leaders are obligated to respect the privacy and security of the
reporter of any incident.
## Enforcement Guidelines
Community leaders will follow these Community Impact Guidelines in determining
the consequences for any action they deem in violation of this Code of Conduct:
### 1. Correction
**Community Impact**: Use of inappropriate language or other behavior deemed
unprofessional or unwelcome in the community.
**Consequence**: A private, written warning from community leaders, providing
clarity around the nature of the violation and an explanation of why the
behavior was inappropriate. A public apology may be requested.
### 2. Warning
**Community Impact**: A violation through a single incident or series
of actions.
**Consequence**: A warning with consequences for continued behavior. No
interaction with the people involved, including unsolicited interaction with
those enforcing the Code of Conduct, for a specified period of time. This
includes avoiding interactions in community spaces as well as external channels
like social media. Violating these terms may lead to a temporary or
permanent ban.
### 3. Temporary Ban
**Community Impact**: A serious violation of community standards, including
sustained inappropriate behavior.
**Consequence**: A temporary ban from any sort of interaction or public
communication with the community for a specified period of time. No public or
private interaction with the people involved, including unsolicited interaction
with those enforcing the Code of Conduct, is allowed during this period.
Violating these terms may lead to a permanent ban.
### 4. Permanent Ban
**Community Impact**: Demonstrating a pattern of violation of community
standards, including sustained inappropriate behavior, harassment of an
individual, or aggression toward or disparagement of classes of individuals.
**Consequence**: A permanent ban from any sort of public interaction within
the community.
## Attribution
This Code of Conduct is adapted from the [Contributor Covenant][homepage],
version 2.0, available at
https://www.contributor-covenant.org/version/2/0/code_of_conduct.html.
Community Impact Guidelines were inspired by [Mozilla's code of conduct
enforcement ladder](https://github.com/mozilla/diversity).
[homepage]: https://www.contributor-covenant.org
For answers to common questions about this code of conduct, see the FAQ at
https://www.contributor-covenant.org/faq. Translations are available at
https://www.contributor-covenant.org/translations.
================================================
FILE: CONTRIBUTING.md
================================================
# Contributing
We want this community to be friendly and respectful to each other. Please follow it in all your interactions with the project.
## Development workflow
To get started with the project, run `yarn bootstrap` in the root directory to install the required dependencies for each package:
```sh
yarn bootstrap
```
While developing, you can run the [example app](/example/) to test your changes.
To start the packager:
```sh
yarn example start
```
To run the example app on Android:
```sh
yarn example android
```
To run the example app on iOS:
```sh
yarn example android
```
Make sure your code passes TypeScript and ESLint. Run the following to verify:
```sh
yarn typescript
yarn lint
```
To fix formatting errors, run the following:
```sh
yarn lint --fix
```
Remember to add tests for your change if possible. Run the unit tests by:
```sh
yarn test
```
### Commit message convention
We follow the [conventional commits specification](https://www.conventionalcommits.org/en) for our commit messages:
- `fix`: bug fixes, e.g. fix crash due to deprecated method.
- `feat`: new features, e.g. add new method to the module.
- `refactor`: code refactor, e.g. migrate from class components to hooks.
- `docs`: changes into documentation, e.g. add usage example for the module..
- `test`: adding or updating tests, eg add integration tests using detox.
- `chore`: tooling changes, e.g. change CI config.
Our pre-commit hooks verify that your commit message matches this format when committing.
### Linting and tests
[ESLint](https://eslint.org/), [Prettier](https://prettier.io/), [TypeScript](https://www.typescriptlang.org/)
We use [TypeScript](https://www.typescriptlang.org/) for type checking, [ESLint](https://eslint.org/) with [Prettier](https://prettier.io/) for linting and formatting the code, and [Jest](https://jestjs.io/) for testing.
Our pre-commit hooks verify that the linter and tests pass when committing.
### Scripts
The `package.json` file contains various scripts for common tasks:
- `yarn bootstrap`: setup project by installing all dependencies and pods.
- `yarn typescript`: type-check files with TypeScript.
- `yarn lint`: lint files with ESLint.
- `yarn test`: run unit tests with Jest.
- `yarn example start`: start the Metro server for the example app.
- `yarn example android`: run the example app on Android.
- `yarn example ios`: run the example app on iOS.
### Sending a pull request
> **Working on your first pull request?** You can learn how from this _free_ series: [How to Contribute to an Open Source Project on GitHub](https://egghead.io/series/how-to-contribute-to-an-open-source-project-on-github).
When you're sending a pull request:
- Prefer small pull requests focused on one change.
- Verify that linters and tests are passing.
- Review the documentation to make sure it looks good.
- Follow the pull request template when opening a pull request.
- For pull requests that change the API or implementation, discuss with maintainers first by opening an issue.
================================================
FILE: LICENSE
================================================
MIT License
Copyright (c) 2020 Mo Gorhom
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
================================================
FILE: README.md
================================================
# React Native Bottom Sheet
[](https://www.npmjs.com/package/@gorhom/bottom-sheet) [](https://www.npmjs.com/package/@gorhom/bottom-sheet) [](https://www.npmjs.com/package/@gorhom/bottom-sheet)<br>
[](https://www.npmjs.com/package/@gorhom/bottom-sheet) [](https://www.npmjs.com/package/@gorhom/bottom-sheet) [](https://expo.io/) <br> 
A performant interactive bottom sheet with fully configurable options 🚀
---
## Features
- ⭐️ Support React Native Web, [read more](https://gorhom.dev/react-native-bottom-sheet/web-support).
- ⭐️ Dynamic Sizing, [read more](https://gorhom.dev/react-native-bottom-sheet/dynamic-sizing).
- ⭐️ Support FlashList, [read more](https://gorhom.dev/react-native-bottom-sheet/components/bottomsheetflashlist).
- Modal presentation view, [Bottom Sheet Modal](https://gorhom.dev/react-native-bottom-sheet/modal).
- Smooth gesture interactions & snapping animations.
- Seamless [keyboard handling](https://gorhom.dev/react-native-bottom-sheet/keyboard-handling) for iOS & Android.
- Support [pull to refresh](https://gorhom.dev/react-native-bottom-sheet/pull-to-refresh) for scrollables.
- Support `FlatList`, `SectionList`, `ScrollView` & `View` scrolling interactions, [read more](https://gorhom.dev/react-native-bottom-sheet/scrollables).
- Support `React Navigation` Integration, [read more](https://gorhom.dev/react-native-bottom-sheet/react-navigation-integration).
- Compatible with `Reanimated` v1-3.
- Compatible with `Expo`.
- Accessibility support.
- Written in `TypeScript`.
- [Read more](https://gorhom.dev/react-native-bottom-sheet).
## Getting Started
Check out [the documentation website](https://gorhom.dev/react-native-bottom-sheet).
## Versioning
This library been written in 3 versions of `Reanimated`, and kept all implementation in separate branches:
- **`v5`** | [branch](https://github.com/gorhom/react-native-bottom-sheet/tree/master) | [changelog](https://github.com/gorhom/react-native-bottom-sheet/blob/master/CHANGELOG.md) : written with `Reanimated v3` & `Gesture Handler v2`.
- `v4` (not maintained) | [branch](https://github.com/gorhom/react-native-bottom-sheet/tree/v4) | [changelog](https://github.com/gorhom/react-native-bottom-sheet/blob/v4/CHANGELOG.md) : written with `Reanimated v2`.
- `v2` (not maintained) | [branch](https://github.com/gorhom/react-native-bottom-sheet/tree/v2) | [changelog](https://github.com/gorhom/react-native-bottom-sheet/blob/v2/CHANGELOG.md) : written with `Reanimated v1` & compatible with `Reanimated v2`.
> I highly recommend to use `v5` which provides more stability with all latest features.
## Author
- [Mo Gorhom](https://gorhom.dev/)
## Sponsor & Support
To keep this library maintained and up-to-date please consider [sponsoring it on GitHub](https://github.com/sponsors/gorhom). Or if you are looking for a private support or help in customizing the experience, then reach out to me on Twitter [@gorhom](https://twitter.com/gorhom).
## License
[MIT](./LICENSE)
---
<p align="center">
<a href="https://gorhom.dev/#gh-light-mode-only" target="_blank">
<img height="18" alt="Mo Gorhom" src="./mogorhom-light.png">
</a>
<a href="https://gorhom.dev/#gh-dark-mode-only" target="_blank">
<img height="18" alt="Mo Gorhom" src="./mogorhom-dark.png">
</a>
</p>
================================================
FILE: babel.config.js
================================================
module.exports = {
presets: ['module:metro-react-native-babel-preset'],
plugins: ['react-native-reanimated/plugin'],
};
================================================
FILE: biome.json
================================================
{
"$schema": "https://biomejs.dev/schemas/2.2.2/schema.json",
"vcs": { "enabled": true, "clientKind": "git", "useIgnoreFile": false },
"formatter": {
"enabled": true,
"useEditorconfig": true,
"formatWithErrors": false,
"indentStyle": "space",
"lineEnding": "lf",
"lineWidth": 80,
"includes": ["**", "!**/.github", "!**/lib", "!**/.expo", "!**/website"]
},
"assist": { "actions": { "source": { "organizeImports": "on" } } },
"linter": {
"enabled": true,
"rules": {
"recommended": true,
"complexity": {
"noUselessLoneBlockStatements": "warn",
"noUselessUndefinedInitialization": "warn",
"noVoid": "warn",
"useLiteralKeys": "warn",
"noAdjacentSpacesInRegex": "warn",
"noCommaOperator": "warn"
},
"correctness": {
"noConstAssign": "error",
"noConstantCondition": "off",
"noEmptyCharacterClassInRegex": "warn",
"noGlobalObjectCalls": "warn",
"noInnerDeclarations": "off",
"noInvalidUseBeforeDeclaration": "off",
"noUndeclaredVariables": "error",
"noUnreachable": "error",
"noUnusedVariables": "warn",
"useExhaustiveDependencies": "error",
"useHookAtTopLevel": "error",
"useIsNan": "warn",
"useValidTypeof": "warn"
},
"security": { "noGlobalEval": "error" },
"style": {
"noYodaExpression": "warn",
"useBlockStatements": "warn",
"useCollapsedElseIf": "off",
"useConsistentBuiltinInstantiation": "warn",
"useDefaultSwitchClause": "off",
"useSingleVarDeclarator": "off",
"useExponentiationOperator": "off",
"useArrayLiterals": "warn"
},
"suspicious": {
"noCatchAssign": "warn",
"noCommentText": "error",
"noConsole": {
"level": "error",
"options": { "allow": ["warn", "error"] }
},
"noControlCharactersInRegex": "warn",
"noDebugger": "warn",
"noDoubleEquals": "warn",
"noDuplicateClassMembers": "error",
"noDuplicateJsxProps": "error",
"noDuplicateObjectKeys": "error",
"noEmptyBlockStatements": "off",
"noFallthroughSwitchClause": "warn",
"noFunctionAssign": "warn",
"noLabelVar": "warn",
"noRedeclare": "off",
"noSelfCompare": "warn",
"noShadowRestrictedNames": "warn",
"noSparseArray": "warn",
"noWith": "warn"
}
},
"includes": [
"**",
"!**/node_modules/",
"!**/lib",
"!**/.expo",
"!**/website"
]
},
"javascript": {
"jsxRuntime": "reactClassic",
"formatter": {
"trailingCommas": "es5",
"semicolons": "always",
"arrowParentheses": "asNeeded",
"quoteStyle": "single",
"bracketSpacing": true
},
"globals": [
"clearImmediate",
"queueMicrotask",
"Blob",
"Set",
"Promise",
"requestIdleCallback",
"setImmediate",
"requestAnimationFrame",
"File",
"Map",
"__DEV__",
"WebSocket"
]
},
"files": {
"includes": [
"**",
"!**/node_modules/",
"!**/lib",
"!**/.expo",
"!**/example",
"!**/website"
]
}
}
================================================
FILE: commitlint.config.js
================================================
module.exports = {
extends: ['@commitlint/config-conventional'],
};
================================================
FILE: example/.gitignore
================================================
# Learn more https://docs.github.com/en/get-started/getting-started-with-git/ignoring-files
# dependencies
node_modules/
# Expo
.expo/
dist/
web-build/
# Native
*.orig.*
*.jks
*.p8
*.p12
*.key
*.mobileprovision
# Metro
.metro-health-check*
# debug
npm-debug.*
yarn-debug.*
yarn-error.*
# macOS
.DS_Store
*.pem
# local env files
.env*.local
# typescript
*.tsbuildinfo
================================================
FILE: example/App.tsx
================================================
import React from 'react';
import { StyleSheet } from 'react-native';
import { GestureHandlerRootView } from 'react-native-gesture-handler';
import Main from './src/Main';
import { enableScreens } from 'react-native-screens';
enableScreens(true);
// @ts-ignore
import { enableLogging } from '@gorhom/bottom-sheet';
enableLogging();
export default function App() {
return (
<GestureHandlerRootView style={styles.container}>
<Main />
</GestureHandlerRootView>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
},
});
================================================
FILE: example/app.json
================================================
{
"expo": {
"name": "BottomSheet",
"slug": "BottomSheet",
"githubUrl": "https://github.com/gorhom/react-native-bottom-sheet",
"version": "5.0.0",
"orientation": "portrait",
"icon": "./assets/icon.png",
"userInterfaceStyle": "automatic",
"backgroundColor": "#000000",
"newArchEnabled": true,
"splash": {
"image": "./assets/splash.png",
"resizeMode": "contain",
"backgroundColor": "#000000"
},
"assetBundlePatterns": ["**/*"],
"ios": {
"supportsTablet": true,
"bundleIdentifier": "dev.gorhom.bottomsheet"
},
"android": {
"adaptiveIcon": {
"foregroundImage": "./assets/adaptive-icon.png",
"backgroundColor": "#000000"
},
"package": "dev.gorhom.bottomsheet",
"softwareKeyboardLayoutMode": "pan"
},
"web": {
"favicon": "./assets/favicon.png"
},
"plugins": [
[
"expo-asset",
{
"assets": ["./assets"]
}
]
]
}
}
================================================
FILE: example/babel.config.js
================================================
const path = require('node:path');
const pak = require('../package.json');
module.exports = api => {
api.cache(true);
return {
presets: ['babel-preset-expo'],
plugins: [
[
'module-resolver',
{
extensions: ['.tsx', '.ts', '.js', '.json'],
alias: {
[pak.name]: path.join(__dirname, '..', pak.source),
},
},
],
'@babel/plugin-proposal-export-namespace-from',
'react-native-worklets/plugin',
],
};
};
================================================
FILE: example/metro.config.js
================================================
// Learn more https://docs.expo.io/guides/customizing-metro
const { getDefaultConfig } = require('expo/metro-config');
const path = require('node:path');
const {
wrapWithReanimatedMetroConfig,
} = require('react-native-reanimated/metro-config');
// Find the project and workspace directories
const projectRoot = __dirname;
// This can be replaced with `find-yarn-workspace-root`
const workspaceRoot = path.resolve(projectRoot, '..');
/** @type {import('expo/metro-config').MetroConfig} */
const config = getDefaultConfig(__dirname);
config.watchFolders = [workspaceRoot];
config.resolver.nodeModulesPaths = [path.resolve(projectRoot, 'node_modules')];
config.resolver.disableHierarchicalLookup = true;
module.exports = wrapWithReanimatedMetroConfig(config);
================================================
FILE: example/package.json
================================================
{
"name": "@gorhom/bottomsheet-example",
"version": "5.0.0",
"main": "node_modules/expo/AppEntry.js",
"scripts": {
"start": "expo start",
"android": "expo start --android",
"ios": "expo start --ios",
"web": "expo start --web"
},
"dependencies": {
"@expo/webpack-config": "~19.0.1",
"@gorhom/portal": "^1.0.14",
"@gorhom/showcase-template": "^4.0.1",
"@legendapp/list": "^2.0.0",
"@react-navigation/material-top-tabs": "^7.2.13",
"@react-navigation/native": "^7.1.9",
"@react-navigation/native-stack": "^7.3.13",
"@react-navigation/stack": "^7.3.2",
"@shopify/flash-list": "2.0.2",
"expo": "~54.0.26",
"expo-asset": "~12.0.7",
"expo-blur": "~15.0.6",
"expo-image": "~3.0.7",
"expo-status-bar": "~3.0.7",
"react": "19.1.0",
"react-dom": "19.1.0",
"react-native": "0.81.5",
"react-native-gesture-handler": "~2.28.0",
"react-native-maps": "1.20.1",
"react-native-pager-view": "6.9.1",
"react-native-reanimated": "~4.1.0",
"react-native-redash": "^18.1.0",
"react-native-safe-area-context": "~5.6.0",
"react-native-screens": "~4.16.0",
"react-native-tab-view": "^3.5.2",
"react-native-web": "^0.21.0",
"react-native-webview": "13.15.0",
"react-native-worklets": "0.5.1"
},
"devDependencies": {
"@babel/core": "^7.25.2",
"@babel/plugin-proposal-export-namespace-from": "^7.18.9",
"@types/faker": "^4.1.12",
"@types/react": "~19.1.10",
"@types/react-native": "^0.73.0",
"babel-loader": "^10.0.0",
"babel-plugin-module-resolver": "^5.0.0",
"faker": "^4.1.0",
"typescript": "~5.9.2"
},
"overrides": {
"use-latest-callback": "^0.2.3"
},
"resolutions": {
"use-latest-callback": "^0.2.3"
},
"private": true
}
================================================
FILE: example/src/Dev.tsx
================================================
import BottomSheet, {
BottomSheetFlatList,
BottomSheetView,
} from '@gorhom/bottom-sheet';
import React, { useCallback, useMemo, useRef } from 'react';
import {
Button,
type FlatList,
type LayoutChangeEvent,
StyleSheet,
Text,
View,
} from 'react-native';
import {
SafeAreaProvider,
useSafeAreaFrame,
useSafeAreaInsets,
} from 'react-native-safe-area-context';
const DATA = new Array(50).fill(0).map((_, index) => ({
id: `item-${index}`,
}));
const SNAP_POINTS = [300, 600];
const renderItem = ({ item }) => (
<View style={styles.itemContainer}>
<Text>{item.id}</Text>
</View>
);
const App = () => {
//#region ref
const bottomSheetRef = useRef<BottomSheet>(null);
const [mount, setMount] = React.useState(false);
//#endregion
//#region hooks
const { bottom: bottomSafeArea, top: topSafeArea } = useSafeAreaInsets();
const { height } = useSafeAreaFrame();
//#endregion
//#region callbacks
const handleOnLayout = useCallback(
({ nativeEvent: layout }: LayoutChangeEvent) => {
// eslint-disable-next-line no-console
console.log('BottomSheetFlatList::handleOnLayout', layout);
},
[]
);
//#endregion
//#region styles
const contentContainerStyle = useMemo(
() => ({
paddingBottom: bottomSafeArea,
}),
[bottomSafeArea]
);
//#endregion
// renders
const ref = useRef<FlatList>(null);
// ref.current?.getNativeScrollRef()
return (
<View style={styles.container}>
<Button
title="Mount"
onPress={() => {
setMount(prev => !prev);
}}
/>
{/* {<BottomSheetFlatList
data={DATA}
style={styles.itemList}
contentContainerStyle={contentContainerStyle}
renderItem={renderItem}
onLayout={handleOnLayout}
/>} */}
{mount ? (
<BottomSheet
ref={bottomSheetRef}
topInset={topSafeArea}
snapPoints={SNAP_POINTS}
enableDynamicSizing={false}
>
<BottomSheetView>
<Text>Hello World!</Text>
</BottomSheetView>
</BottomSheet>
) : null}
</View>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
padding: 24,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: 'grey',
},
contentContainer: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
minHeight: 200,
},
itemList: {
flex: 1,
},
itemContainer: {
padding: 6,
},
});
export default () => (
<SafeAreaProvider>
<App />
</SafeAreaProvider>
);
================================================
FILE: example/src/Main.tsx
================================================
import { ShowcaseApp } from '@gorhom/showcase-template';
import React from 'react';
import { description, version } from '../../package.json';
import { screens } from './screens';
const author = {
username: 'Mo Gorhom',
url: 'https://gorhom.dev',
};
export default () => (
<ShowcaseApp
name="Bottom Sheet"
description={description}
version={version}
author={author}
data={screens}
/>
);
================================================
FILE: example/src/components/button/Button.tsx
================================================
import React, { memo } from 'react';
import { ViewStyle, TextStyle } from 'react-native';
import { ShowcaseButton, ShowcaseLabel } from '@gorhom/showcase-template';
interface ButtonProps {
label: string;
labelStyle?: TextStyle;
style?: ViewStyle;
onPress: () => void;
}
const ButtonComponent = ({
label,
labelStyle,
style,
onPress,
}: ButtonProps) => (
<ShowcaseButton containerStyle={style} onPress={onPress}>
<ShowcaseLabel style={labelStyle}>{label}</ShowcaseLabel>
</ShowcaseButton>
);
export const Button = memo(ButtonComponent);
================================================
FILE: example/src/components/button/index.ts
================================================
export { Button } from './Button';
================================================
FILE: example/src/components/contactItem/ContactItem.tsx
================================================
import React, { memo, useMemo } from 'react';
import { Text, StyleSheet, View, TextStyle, ViewStyle } from 'react-native';
import { TouchableOpacity } from '@gorhom/bottom-sheet';
interface ContactItemProps {
title: string;
subTitle?: string;
titleStyle?: TextStyle;
subTitleStyle?: TextStyle;
thumbnailStyle?: ViewStyle;
iconStyle?: ViewStyle;
onPress?: () => void;
}
const ContactItemComponent = ({
title,
subTitle,
titleStyle,
subTitleStyle,
thumbnailStyle,
iconStyle,
onPress,
}: ContactItemProps) => {
const ContentWrapper = useMemo<any>(
() => (onPress ? TouchableOpacity : View),
[onPress]
);
// render
return (
<ContentWrapper onPress={onPress} style={styles.container}>
<View style={[styles.thumbnail, thumbnailStyle]} />
<View style={styles.contentContainer}>
<Text style={[styles.title, titleStyle]}>{title}</Text>
{subTitle && (
<Text style={[styles.subtitle, subTitleStyle]}>{subTitle}</Text>
)}
</View>
<View style={[styles.icon, iconStyle]} />
</ContentWrapper>
);
};
const styles = StyleSheet.create({
container: {
flexDirection: 'row',
alignContent: 'center',
marginVertical: 12,
},
contentContainer: {
flex: 1,
alignSelf: 'center',
marginLeft: 12,
},
thumbnail: {
width: 46,
height: 46,
borderRadius: 46,
backgroundColor: 'rgba(0, 0, 0, 0.25)',
},
icon: {
alignSelf: 'center',
width: 24,
height: 24,
borderRadius: 24,
backgroundColor: 'rgba(0, 0, 0, 0.125)',
},
title: {
color: '#111',
fontSize: 16,
marginBottom: 4,
textTransform: 'capitalize',
},
subtitle: {
color: '#666',
fontSize: 14,
textTransform: 'capitalize',
},
});
export const ContactItem = memo(ContactItemComponent);
================================================
FILE: example/src/components/contactItem/index.ts
================================================
export { ContactItem } from './ContactItem';
================================================
FILE: example/src/components/contactList/ContactList.tsx
================================================
import {
BottomSheetFlatList,
BottomSheetScrollView,
BottomSheetSectionList,
BottomSheetView,
BottomSheetVirtualizedList,
} from '@gorhom/bottom-sheet';
import { useFocusEffect } from '@react-navigation/native';
import React, { useMemo, useCallback, type ComponentProps, memo } from 'react';
import { Platform, Text, View, type ViewStyle } from 'react-native';
import {
useSafeAreaFrame,
useSafeAreaInsets,
} from 'react-native-safe-area-context';
import {
createContactListMockData,
createContactSectionsMockData,
} from '../../utilities/createMockData';
import { ContactItem } from '../contactItem';
import { styles } from './styles';
export interface ContactListProps
extends Pick<
ComponentProps<typeof BottomSheetFlatList>,
'enableFooterMarginAdjustment'
> {
type: 'FlatList' | 'SectionList' | 'ScrollView' | 'View' | 'VirtualizedList';
count?: number;
style?: ViewStyle;
onItemPress?: () => void;
onRefresh?: () => void;
}
const keyExtractor = (item: any, index: number) => `${item.name}.${index}`;
const handleGetItem = (data: any[], index: number) => data[index];
const handleGetCount = (data: any[]) => data.length;
const ContactListComponent = ({
type,
count = 25,
style,
onRefresh,
onItemPress,
...rest
}: ContactListProps) => {
// hooks
const { bottom: bottomSafeArea } = useSafeAreaInsets();
//#region variables
const sections = useMemo(() => createContactSectionsMockData(count), [count]);
const data = useMemo(() => createContactListMockData(count), [count]);
//#endregion
// styles
const contentContainerStyle = useMemo(
() => ({
...styles.contentContainer,
...style,
paddingBottom: bottomSafeArea,
}),
[style, bottomSafeArea]
);
// renders
const renderFlatListItem = useCallback(
({ item, index }) => (
<ContactItem
key={`${type}.${item.name}.${index}`}
title={`${index}: ${item.name}`}
subTitle={item.jobTitle}
onPress={onItemPress}
/>
),
[type, onItemPress]
);
const renderSectionItem = useCallback(
({ item, index }) => (
<ContactItem
key={`${type}.${item.name}.${index}`}
title={`${index}: ${item.name}`}
subTitle={item.jobTitle}
onPress={onItemPress}
/>
),
[type, onItemPress]
);
const renderScrollViewItem = useCallback(
(item, index) => (
<ContactItem
key={`${type}.${item.name}.${index}`}
title={`${index}: ${item.name}`}
subTitle={item.jobTitle}
onPress={onItemPress}
/>
),
[type, onItemPress]
);
const renderSectionHeader = useCallback(
({ section }: any) => (
<View style={styles.sectionHeaderContainer}>
<Text style={styles.sectionHeaderTitle}>{section.title}</Text>
</View>
),
[]
);
if (type === 'FlatList') {
return (
<BottomSheetFlatList
{...rest}
data={data}
refreshing={false}
onRefresh={onRefresh}
keyExtractor={keyExtractor}
initialNumToRender={5}
bounces={true}
windowSize={10}
maxToRenderPerBatch={5}
renderItem={renderFlatListItem}
style={styles.container}
keyboardDismissMode="interactive"
indicatorStyle="black"
contentContainerStyle={contentContainerStyle}
focusHook={useFocusEffect}
/>
);
} else if (type === 'VirtualizedList') {
return (
<BottomSheetVirtualizedList
{...rest}
data={data}
keyExtractor={keyExtractor}
initialNumToRender={5}
getItem={handleGetItem}
getItemCount={handleGetCount}
bounces={true}
windowSize={10}
maxToRenderPerBatch={5}
renderItem={renderFlatListItem}
style={styles.container}
keyboardDismissMode="interactive"
indicatorStyle="black"
contentContainerStyle={contentContainerStyle}
focusHook={useFocusEffect}
/>
);
} else if (type === 'ScrollView') {
return (
<BottomSheetScrollView
{...rest}
style={styles.container}
contentContainerStyle={contentContainerStyle}
bounces={true}
focusHook={useFocusEffect}
indicatorStyle="black"
>
{data.map(renderScrollViewItem)}
</BottomSheetScrollView>
);
} else if (type === 'SectionList') {
return (
<BottomSheetSectionList
{...rest}
style={styles.container}
contentContainerStyle={contentContainerStyle}
stickySectionHeadersEnabled
initialNumToRender={5}
windowSize={10}
maxToRenderPerBatch={5}
bounces={true}
sections={sections}
keyExtractor={keyExtractor}
renderSectionHeader={renderSectionHeader}
renderItem={renderSectionItem}
focusHook={useFocusEffect}
indicatorStyle="black"
removeClippedSubviews={Platform.OS === 'android' && sections.length > 0}
/>
);
} else if (type === 'View') {
return (
<BottomSheetView style={styles.contentContainer} {...rest}>
{data.map(renderScrollViewItem)}
</BottomSheetView>
);
}
return null;
};
export const ContactList = memo(ContactListComponent);
================================================
FILE: example/src/components/contactList/index.ts
================================================
export { ContactList } from './ContactList';
export type { ContactListProps } from './ContactList';
================================================
FILE: example/src/components/contactList/styles.ts
================================================
import { StyleSheet } from 'react-native';
export const styles = StyleSheet.create({
sectionHeaderContainer: {
paddingTop: 24,
paddingBottom: 6,
backgroundColor: 'white',
},
sectionHeaderTitle: {
fontSize: 16,
textTransform: 'uppercase',
color: 'black',
},
container: {
overflow: 'visible',
flex: 1,
},
contentContainer: {
paddingHorizontal: 16,
overflow: 'visible',
},
});
================================================
FILE: example/src/components/contactList/styles.web.ts
================================================
import { StyleSheet } from 'react-native';
export const styles = StyleSheet.create({
sectionHeaderContainer: {
paddingTop: 24,
paddingBottom: 6,
backgroundColor: 'white',
},
sectionHeaderTitle: {
fontSize: 16,
textTransform: 'uppercase',
color: 'black',
},
container: {
flex: 1,
},
contentContainer: {
paddingHorizontal: 16,
},
});
================================================
FILE: example/src/components/customBackground/CustomBackground.tsx
================================================
import React, { memo, useMemo } from 'react';
import { StyleSheet } from 'react-native';
import { BottomSheetBackgroundProps } from '@gorhom/bottom-sheet';
import Animated, {
useAnimatedStyle,
interpolateColor,
} from 'react-native-reanimated';
interface CustomBackgroundProps extends BottomSheetBackgroundProps {}
const CustomBackgroundComponent: React.FC<CustomBackgroundProps> = ({
style,
animatedIndex,
}) => {
//#region styles
const containerAnimatedStyle = useAnimatedStyle(
() => ({
// @ts-ignore
backgroundColor: interpolateColor(
animatedIndex.value,
[0, 1],
['#ffffff', '#a8b5eb']
),
}),
[animatedIndex.value]
);
const containerStyle = useMemo(
() => [styles.container, style, containerAnimatedStyle],
[style, containerAnimatedStyle]
);
//#endregion
// render
return <Animated.View pointerEvents="none" style={containerStyle} />;
};
export const CustomBackground = memo(CustomBackgroundComponent);
const styles = StyleSheet.create({
container: {
borderTopLeftRadius: 20,
borderTopRightRadius: 20,
backgroundColor: '#fff',
},
});
================================================
FILE: example/src/components/customBackground/index.ts
================================================
export { CustomBackground } from './CustomBackground';
================================================
FILE: example/src/components/customFooter/CustomFooter.tsx
================================================
import React, { memo, useCallback, useMemo } from 'react';
import { Pressable, StyleSheet } from 'react-native';
import {
BottomSheetFooter,
BottomSheetFooterProps,
useBottomSheet,
} from '@gorhom/bottom-sheet';
import { useSafeAreaInsets } from 'react-native-safe-area-context';
import Animated, {
Extrapolation,
interpolate,
useAnimatedStyle,
} from 'react-native-reanimated';
import { toRad } from 'react-native-redash';
const AnimatedRectButton = Animated.createAnimatedComponent(Pressable);
interface CustomFooterProps extends BottomSheetFooterProps {}
const CustomFooterComponent = ({
animatedFooterPosition,
}: CustomFooterProps) => {
//#region hooks
const { bottom: bottomSafeArea } = useSafeAreaInsets();
const { expand, collapse, animatedIndex } = useBottomSheet();
//#endregion
//#region styles
const arrowAnimatedStyle = useAnimatedStyle(() => {
const arrowRotate = interpolate(
animatedIndex.value,
[0, 1],
[toRad(0), toRad(-180)],
Extrapolation.CLAMP
);
return {
transform: [{ rotate: `${arrowRotate}rad` }],
};
}, [animatedIndex.value]);
const arrowStyle = useMemo(
() => [arrowAnimatedStyle, styles.arrow],
[arrowAnimatedStyle]
);
const containerAnimatedStyle = useAnimatedStyle(
() => ({
opacity: interpolate(
animatedIndex.value,
[-0.85, 0],
[0, 1],
Extrapolation.CLAMP
),
}),
[animatedIndex]
);
const containerStyle = useMemo(
() => [containerAnimatedStyle, styles.container],
[containerAnimatedStyle]
);
//#endregion
const handleArrowPress = useCallback(() => {
if (animatedIndex.value === 0) {
expand();
} else {
collapse();
}
}, [expand, collapse, animatedIndex]);
return (
<BottomSheetFooter
bottomInset={bottomSafeArea}
animatedFooterPosition={animatedFooterPosition}
>
<AnimatedRectButton style={containerStyle} onPress={handleArrowPress}>
<Animated.Text style={arrowStyle}>⌃</Animated.Text>
</AnimatedRectButton>
</BottomSheetFooter>
);
};
const styles = StyleSheet.create({
container: {
alignSelf: 'flex-end',
justifyContent: 'center',
alignItems: 'center',
marginHorizontal: 24,
marginBottom: 12,
width: 50,
height: 50,
borderRadius: 25,
backgroundColor: '#80f',
shadowOffset: {
width: 0,
height: 12,
},
shadowOpacity: 0.25,
shadowRadius: 8.0,
elevation: 8,
},
arrow: {
fontSize: 20,
height: 20,
textAlignVertical: 'center',
fontWeight: '900',
color: '#fff',
},
});
export const CustomFooter = memo(CustomFooterComponent);
================================================
FILE: example/src/components/customFooter/index.ts
================================================
export { CustomFooter } from './CustomFooter';
================================================
FILE: example/src/components/customHandle/CustomHandle.tsx
================================================
import type { BottomSheetHandleProps } from '@gorhom/bottom-sheet';
import React, { memo, useMemo } from 'react';
import { type StyleProp, StyleSheet, Text, type ViewStyle } from 'react-native';
import Animated, {
Extrapolation,
interpolate,
useAnimatedStyle,
useDerivedValue,
} from 'react-native-reanimated';
import { toRad } from 'react-native-redash';
import { transformOrigin } from '../../utilities/transformOrigin';
interface CustomHandleProps extends BottomSheetHandleProps {
title: string;
}
const CustomHandleComponent: React.FC<CustomHandleProps> = ({
ref,
title,
style,
onLayout,
animatedIndex,
}) => {
//#region animations
const indicatorTransformOriginY = useDerivedValue(
() =>
interpolate(
animatedIndex.value,
[0, 1, 2],
[-1, 0, 1],
Extrapolation.CLAMP
),
[animatedIndex.value]
);
//#endregion
//#region styles
const containerStyle = useMemo(() => [styles.container, style], [style]);
const containerAnimatedStyle = useAnimatedStyle(() => {
const borderTopRadius = interpolate(
animatedIndex.value,
[1, 2],
[20, 0],
Extrapolation.CLAMP
);
return {
borderTopLeftRadius: borderTopRadius,
borderTopRightRadius: borderTopRadius,
};
}, [animatedIndex.value]);
const leftIndicatorStyle = useMemo(
() => ({
...styles.indicator,
...styles.leftIndicator,
}),
[]
);
const leftIndicatorAnimatedStyle = useAnimatedStyle(() => {
const leftIndicatorRotate = interpolate(
animatedIndex.value,
[0, 1, 2],
[toRad(-30), 0, toRad(30)],
Extrapolation.CLAMP
);
return {
transform: transformOrigin(
{ x: 0, y: indicatorTransformOriginY.value },
{
rotate: `${leftIndicatorRotate}rad`,
},
{
translateX: -5,
}
),
};
}, [animatedIndex.value, indicatorTransformOriginY.value]);
const rightIndicatorStyle = useMemo(
() => ({
...styles.indicator,
...styles.rightIndicator,
}),
[]
);
const rightIndicatorAnimatedStyle = useAnimatedStyle(() => {
const rightIndicatorRotate = interpolate(
animatedIndex.value,
[0, 1, 2],
[toRad(30), 0, toRad(-30)],
Extrapolation.CLAMP
);
return {
transform: transformOrigin(
{ x: 0, y: indicatorTransformOriginY.value },
{
rotate: `${rightIndicatorRotate}rad`,
},
{
translateX: 5,
}
),
};
}, [animatedIndex.value, indicatorTransformOriginY.value]);
//#endregion
// render
return (
<Animated.View
ref={ref}
style={[containerStyle, containerAnimatedStyle]}
onLayout={onLayout}
renderToHardwareTextureAndroid={true}
>
<Animated.View style={[leftIndicatorStyle, leftIndicatorAnimatedStyle]} />
<Animated.View
style={[rightIndicatorStyle, rightIndicatorAnimatedStyle]}
/>
<Text style={styles.title}>{title}</Text>
</Animated.View>
);
};
export const CustomHandle = memo(CustomHandleComponent);
const styles = StyleSheet.create({
container: {
alignContent: 'center',
alignItems: 'center',
paddingBottom: 12,
paddingHorizontal: 16,
borderBottomWidth: 1,
borderBottomColor: 'rgba(0,0,0,0.125)',
zIndex: 99999,
},
indicator: {
marginTop: 10,
position: 'absolute',
width: 10,
height: 4,
backgroundColor: '#999',
},
leftIndicator: {
borderTopStartRadius: 2,
borderBottomStartRadius: 2,
},
rightIndicator: {
borderTopEndRadius: 2,
borderBottomEndRadius: 2,
},
title: {
marginTop: 26,
fontSize: 20,
lineHeight: 20,
textAlign: 'center',
fontWeight: 'bold',
},
});
================================================
FILE: example/src/components/customHandle/index.ts
================================================
export { CustomHandle } from './CustomHandle';
================================================
FILE: example/src/components/headerHandle/HeaderHandle.tsx
================================================
import {
BottomSheetHandle,
type BottomSheetHandleProps,
} from '@gorhom/bottom-sheet';
import React, { memo } from 'react';
import { StyleSheet, Text } from 'react-native';
interface HeaderHandleProps extends BottomSheetHandleProps {}
const HeaderHandleComponent = ({ children, ...rest }: HeaderHandleProps) => {
return (
<BottomSheetHandle
style={styles.container}
indicatorStyle={styles.indicator}
{...rest}
>
{typeof children === 'string' ? (
<Text style={styles.title}>{children}</Text>
) : (
children
)}
</BottomSheetHandle>
);
};
const styles = StyleSheet.create({
container: {
paddingBottom: 12,
paddingHorizontal: 16,
borderBottomWidth: 1,
borderBottomColor: 'rgba(0,0,0,0.075)',
zIndex: 99999,
},
title: {
marginTop: 16,
fontSize: 20,
lineHeight: 20,
textAlign: 'center',
fontWeight: 'bold',
color: 'black',
},
indicator: {
height: 4,
opacity: 0.5,
},
});
export const HeaderHandle = memo(HeaderHandleComponent);
================================================
FILE: example/src/components/headerHandle/index.ts
================================================
export { HeaderHandle } from './HeaderHandle';
================================================
FILE: example/src/components/searchHandle/SearchHandle.tsx
================================================
import {
type BottomSheetHandleProps,
BottomSheetTextInput,
} from '@gorhom/bottom-sheet';
import { useShowcaseTheme } from '@gorhom/showcase-template';
import React, { memo, useState, useCallback } from 'react';
import {
Dimensions,
type NativeSyntheticEvent,
StyleSheet,
type TextInputChangeEventData,
View,
} from 'react-native';
const { width: SCREEN_WIDTH } = Dimensions.get('screen');
export const SEARCH_HANDLE_HEIGHT = 69;
interface SearchHandleProps extends BottomSheetHandleProps {
initialValue?: string;
onChange?: (text: string) => void;
}
const SearchHandleComponent = ({
initialValue = '',
onChange,
}: SearchHandleProps) => {
// state
const [value, setValue] = useState(initialValue);
// hooks
const { colors } = useShowcaseTheme();
// callbacks
const handleInputChange = useCallback(
({
nativeEvent: { text },
}: NativeSyntheticEvent<TextInputChangeEventData>) => {
setValue(text);
if (onChange) {
onChange(text);
}
},
[onChange]
);
// render
return (
<View style={styles.container}>
<View style={styles.indicator} />
<BottomSheetTextInput
style={styles.input}
value={value}
textContentType="location"
placeholderTextColor={colors.secondaryText}
placeholder="Search for a place or address"
onChange={handleInputChange}
/>
</View>
);
};
export const styles = StyleSheet.create({
container: {
paddingHorizontal: 16,
paddingVertical: 5,
},
indicator: {
alignSelf: 'center',
width: (8 * SCREEN_WIDTH) / 100,
height: 5,
borderRadius: 4,
backgroundColor: 'rgba(0, 0, 0, 0.5)',
},
input: {
marginTop: 8,
marginBottom: 10,
borderRadius: 10,
fontSize: 16,
lineHeight: 20,
padding: 8,
backgroundColor: 'rgba(151, 151, 151, 0.25)',
},
});
export const SearchHandle = memo(SearchHandleComponent);
================================================
FILE: example/src/components/searchHandle/index.ts
================================================
export { SearchHandle, SEARCH_HANDLE_HEIGHT } from './SearchHandle';
================================================
FILE: example/src/screens/advanced/BackdropExample.tsx
================================================
import BottomSheet, { BottomSheetBackdrop } from '@gorhom/bottom-sheet';
import React, { useCallback, useMemo, useRef, useState } from 'react';
import { StyleSheet, View } from 'react-native';
import { Button } from '../../components/button';
import { ContactList } from '../../components/contactList';
import { HeaderHandle } from '../../components/headerHandle';
const BackdropExample = () => {
// state
const [backdropPressBehavior, setBackdropPressBehavior] = useState<
'none' | 'close' | 'collapse'
>('collapse');
// hooks
const bottomSheetRef = useRef<BottomSheet>(null);
// variables
const snapPoints = useMemo(() => ['25%', '50%'], []);
// callbacks
const handleTogglePressBehavior = useCallback(() => {
setBackdropPressBehavior(state => {
switch (state) {
case 'none':
return 'close';
case 'close':
return 'collapse';
case 'collapse':
return 'none';
}
});
}, []);
const handleExpandPress = useCallback(() => {
bottomSheetRef.current?.expand();
}, []);
const handleCollapsePress = useCallback(() => {
bottomSheetRef.current?.collapse();
}, []);
const handleClosePress = useCallback(() => {
bottomSheetRef.current?.close();
}, []);
// renders
const renderBackdrop = useCallback(
props => (
<BottomSheetBackdrop {...props} pressBehavior={backdropPressBehavior} />
),
[backdropPressBehavior]
);
const renderHeaderHandle = useCallback(
props => <HeaderHandle {...props} children="Backdrop Example" />,
[]
);
return (
<View style={styles.container}>
<Button
label={`Toggle Press Behavior: ${backdropPressBehavior}`}
onPress={handleTogglePressBehavior}
/>
<Button label="Expand" onPress={handleExpandPress} />
<Button label="Collapse" onPress={handleCollapsePress} />
<Button label="Close" onPress={handleClosePress} />
<BottomSheet
ref={bottomSheetRef}
snapPoints={snapPoints}
backdropComponent={renderBackdrop}
handleComponent={renderHeaderHandle}
enableDynamicSizing={false}
>
<ContactList type="FlatList" count={10} />
</BottomSheet>
</View>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
padding: 24,
},
});
export default BackdropExample;
================================================
FILE: example/src/screens/advanced/CustomBackgroundExample.tsx
================================================
import React, { useCallback, useMemo, useRef } from 'react';
import { View, StyleSheet } from 'react-native';
import BottomSheet from '@gorhom/bottom-sheet';
import { CustomBackground } from '../../components/customBackground';
import { Button } from '../../components/button';
import { ContactList } from '../../components/contactList';
import { HeaderHandle } from '../../components/headerHandle';
const CustomBackgroundExample = () => {
// hooks
const bottomSheetRef = useRef<BottomSheet>(null);
// variables
const snapPoints = useMemo(() => [150, 450], []);
// callbacks
const handleSnapPress = useCallback(index => {
bottomSheetRef.current?.snapToIndex(index);
}, []);
const handleExpandPress = useCallback(() => {
bottomSheetRef.current?.expand();
}, []);
const handleCollapsePress = useCallback(() => {
bottomSheetRef.current?.collapse();
}, []);
const handleClosePress = useCallback(() => {
bottomSheetRef.current?.close();
}, []);
// render
const renderHeaderHandle = useCallback(
props => <HeaderHandle {...props} children="Custom Background Example" />,
[]
);
return (
<View style={styles.container}>
<Button label="Snap To 450" onPress={() => handleSnapPress(1)} />
<Button label="Snap To 150" onPress={() => handleSnapPress(0)} />
<Button label="Expand" onPress={handleExpandPress} />
<Button label="Collapse" onPress={handleCollapsePress} />
<Button label="Close" onPress={handleClosePress} />
<BottomSheet
ref={bottomSheetRef}
snapPoints={snapPoints}
animateOnMount={true}
handleComponent={renderHeaderHandle}
backgroundComponent={CustomBackground}
>
<ContactList type="View" count={5} />
</BottomSheet>
</View>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
padding: 24,
},
contentContainerStyle: {
paddingTop: 12,
paddingHorizontal: 24,
backgroundColor: 'white',
},
headerContainer: {
backgroundColor: 'transparent',
},
});
export default CustomBackgroundExample;
================================================
FILE: example/src/screens/advanced/CustomHandleExample.tsx
================================================
import BottomSheet from '@gorhom/bottom-sheet';
import React, { useCallback, useMemo, useRef } from 'react';
import { StyleSheet, View } from 'react-native';
import { Button } from '../../components/button';
import { ContactList } from '../../components/contactList';
import { CustomHandle } from '../../components/customHandle';
const CustomHandleExample = () => {
// hooks
const bottomSheetRef = useRef<BottomSheet>(null);
// variables
const snapPoints = useMemo(() => [150, 300, 450], []);
// callbacks
const handleSnapPress = useCallback(index => {
bottomSheetRef.current?.snapToIndex(index);
}, []);
const handleExpandPress = useCallback(() => {
bottomSheetRef.current?.expand();
}, []);
const handleCollapsePress = useCallback(() => {
bottomSheetRef.current?.collapse();
}, []);
const handleClosePress = useCallback(() => {
bottomSheetRef.current?.close();
}, []);
// renders
const renderCustomHandle = useCallback(
props => <CustomHandle title="Custom Handle Example" {...props} />,
[]
);
return (
<View style={styles.container}>
<Button label="Snap To 450" onPress={() => handleSnapPress(2)} />
<Button label="Snap To 300" onPress={() => handleSnapPress(1)} />
<Button label="Snap To 150" onPress={() => handleSnapPress(0)} />
<Button label="Expand" onPress={handleExpandPress} />
<Button label="Collapse" onPress={handleCollapsePress} />
<Button label="Close" onPress={handleClosePress} />
<BottomSheet
ref={bottomSheetRef}
snapPoints={snapPoints}
enableDynamicSizing={false}
handleComponent={renderCustomHandle}
>
<ContactList count={10} type="FlatList" />
</BottomSheet>
</View>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
padding: 24,
},
});
export default CustomHandleExample;
================================================
FILE: example/src/screens/advanced/CustomThemeExample.tsx
================================================
import React, { useCallback, useMemo, useRef } from 'react';
import { View, StyleSheet } from 'react-native';
import BottomSheet, { BottomSheetView } from '@gorhom/bottom-sheet';
import { Button } from '../../components/button';
import { ContactItem } from '../../components/contactItem';
import { createContactListMockData } from '../../utilities/createMockData';
const CustomThemeExample = () => {
// hooks
const bottomSheetRef = useRef<BottomSheet>(null);
// variables
const snapPoints = useMemo(() => ['25%', '50%'], []);
const data = useMemo(() => createContactListMockData(5), []);
// callbacks
const handleExpandPress = useCallback(() => {
bottomSheetRef.current?.expand();
}, []);
const handleCollapsePress = useCallback(() => {
bottomSheetRef.current?.collapse();
}, []);
const handleClosePress = useCallback(() => {
bottomSheetRef.current?.close();
}, []);
// renders
const renderItem = useCallback(
(item, index) => (
<ContactItem
key={`${item.name}.${index}`}
title={item.name}
subTitle={item.jobTitle}
titleStyle={styles.titleStyle}
subTitleStyle={styles.subTitleStyle}
thumbnailStyle={styles.thumbnailStyle}
iconStyle={styles.iconStyle}
/>
),
[]
);
return (
<View style={styles.container}>
<Button label="Expand" onPress={handleExpandPress} />
<Button label="Collapse" onPress={handleCollapsePress} />
<Button label="Close" onPress={handleClosePress} />
<BottomSheet
ref={bottomSheetRef}
snapPoints={snapPoints}
animateOnMount={true}
backgroundStyle={styles.backgroundContainer}
handleIndicatorStyle={styles.handleIndicator}
>
<BottomSheetView style={styles.contentContainer}>
{data.map(renderItem)}
</BottomSheetView>
</BottomSheet>
</View>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
padding: 24,
},
contentContainer: {
paddingHorizontal: 16,
overflow: 'visible',
},
backgroundContainer: {
backgroundColor: '#222',
},
handleIndicator: {
backgroundColor: '#eee',
},
titleStyle: {
color: '#dfdfdf',
},
subTitleStyle: {},
thumbnailStyle: {
backgroundColor: '#444',
},
iconStyle: {
backgroundColor: '#292929',
},
});
export default CustomThemeExample;
================================================
FILE: example/src/screens/advanced/DynamicSizingExample.tsx
================================================
import BottomSheet, {
BottomSheetFooter,
type BottomSheetFooterProps,
BottomSheetScrollView,
BottomSheetView,
type SNAP_POINT_TYPE,
} from '@gorhom/bottom-sheet';
import React, { useCallback, useMemo, useRef, useState } from 'react';
import { StyleSheet, View } from 'react-native';
import { useSafeAreaInsets } from 'react-native-safe-area-context';
import { Button } from '../../components/button';
import { ContactItem } from '../../components/contactItem';
import { createContactListMockData } from '../../utilities/createMockData';
const DATA = createContactListMockData(20);
const DynamicSizingExample = () => {
//#region state
const [count, setCount] = useState(1);
const [maxHeight, setMaxHeight] = useState<undefined | number>();
//#endregion
//#region variable
const data = useMemo(() => DATA.slice(0, count), [count]);
//#endregion
//#region hooks
const { bottom: safeBottomArea } = useSafeAreaInsets();
const bottomSheetRef = useRef<BottomSheet>(null);
//#endregion
//#region callbacks
const handleIncreaseContentPress = useCallback(() => {
setCount(state => state + 1);
}, []);
const handleDecreaseContentPress = useCallback(() => {
setCount(state => Math.max(state - 1, 1));
}, []);
const handleSetMaxHeight = useCallback(() => {
setMaxHeight(state => (state ? undefined : 500));
}, []);
const handleExpandPress = useCallback(() => {
bottomSheetRef.current?.expand();
}, []);
const handleClosePress = useCallback(() => {
bottomSheetRef.current?.close();
}, []);
const handleSheetChange = useCallback(
(index: number, position: number, type: SNAP_POINT_TYPE) => {
// biome-ignore lint/suspicious/noConsole: <explanation>
console.log('handleSheetChange', { index, position, type });
},
[]
);
//#endregion
//#region styles
const footerContainerStyle = useMemo(
() => ({
...styles.footerContainer,
paddingBottom: safeBottomArea || 6,
}),
[safeBottomArea]
);
//#endregion
//#region renders
const footerComponent = useMemo(
() => (props: BottomSheetFooterProps) => (
<BottomSheetFooter style={footerContainerStyle} {...props}>
<View style={{ flex: 1 }}>
<Button
label="Add Item"
style={styles.footerButton}
onPress={handleIncreaseContentPress}
/>
</View>
<View style={{ flex: 1 }}>
<Button
label="Remove Item"
style={styles.footerButton}
onPress={handleDecreaseContentPress}
/>
</View>
</BottomSheetFooter>
),
[
footerContainerStyle,
handleIncreaseContentPress,
handleDecreaseContentPress,
]
);
return (
<View style={styles.container}>
<Button label="Expand" onPress={handleExpandPress} />
<Button label="Close" onPress={handleClosePress} />
<Button
label={`Max Dynamic Size: ${maxHeight}`}
onPress={handleSetMaxHeight}
/>
<BottomSheet
ref={bottomSheetRef}
enablePanDownToClose={true}
maxDynamicContentSize={maxHeight}
footerComponent={footerComponent}
onChange={handleSheetChange}
>
<BottomSheetScrollView
contentContainerStyle={styles.contentContainerStyle}
enableFooterMarginAdjustment={true}
>
{data.map(item => (
<ContactItem
key={item.name}
title={item.name}
subTitle={item.jobTitle}
/>
))}
</BottomSheetScrollView>
</BottomSheet>
</View>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
padding: 24,
},
contentContainerStyle: {
paddingTop: 12,
paddingHorizontal: 24,
backgroundColor: 'white',
},
message: {
fontSize: 24,
fontWeight: '600',
marginBottom: 12,
color: 'black',
},
footerContainer: {
flexDirection: 'row',
justifyContent: 'space-between',
gap: 12,
paddingHorizontal: 24,
},
footerButton: {
flex: 1,
},
});
export default DynamicSizingExample;
================================================
FILE: example/src/screens/advanced/FooterExample.tsx
================================================
import BottomSheet from '@gorhom/bottom-sheet';
import React, { useCallback, useMemo, useRef } from 'react';
import { StyleSheet, View } from 'react-native';
import { Button } from '../../components/button';
import { ContactList } from '../../components/contactList';
import { CustomFooter } from '../../components/customFooter';
import { SearchHandle } from '../../components/searchHandle';
const FooterExample = () => {
// hooks
const bottomSheetRef = useRef<BottomSheet>(null);
// variables
const snapPoints = useMemo(() => ['25%', '50%'], []);
// callbacks
const handleExpandPress = useCallback(() => {
bottomSheetRef.current?.expand();
}, []);
const handleCollapsePress = useCallback(() => {
bottomSheetRef.current?.collapse();
}, []);
const handleClosePress = useCallback(() => {
bottomSheetRef.current?.close();
}, []);
// renders
return (
<View style={styles.container}>
<Button label="Expand" onPress={handleExpandPress} />
<Button label="Collapse" onPress={handleCollapsePress} />
<Button label="Close" onPress={handleClosePress} />
<BottomSheet
ref={bottomSheetRef}
snapPoints={snapPoints}
keyboardBehavior="interactive"
keyboardBlurBehavior="restore"
enablePanDownToClose={true}
enableDynamicSizing={false}
handleComponent={SearchHandle}
footerComponent={CustomFooter}
>
<ContactList
count={10}
type="FlatList"
enableFooterMarginAdjustment={false}
/>
</BottomSheet>
</View>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
padding: 24,
},
footer: {
alignSelf: 'flex-end',
justifyContent: 'center',
alignItems: 'center',
marginHorizontal: 24,
width: 50,
height: 50,
borderRadius: 25,
backgroundColor: '#80f',
shadowOffset: {
width: 0,
height: 12,
},
shadowOpacity: 0.25,
shadowRadius: 8.0,
elevation: 24,
},
footerText: {
fontSize: 16,
fontWeight: '600',
color: '#fff',
},
});
export default FooterExample;
================================================
FILE: example/src/screens/advanced/KeyboardHandlingExample.tsx
================================================
import BottomSheet from '@gorhom/bottom-sheet';
import React, { useCallback, useMemo, useRef, useState } from 'react';
import { StyleSheet, View } from 'react-native';
import { Button } from '../../components/button';
import { ContactList } from '../../components/contactList';
import {
SEARCH_HANDLE_HEIGHT,
SearchHandle,
} from '../../components/searchHandle';
const KeyboardHandlingExample = () => {
// state
const [keyboardBehavior, setKeyboardBehavior] = useState<
'extend' | 'fillParent' | 'interactive'
>('interactive');
const [keyboardBlurBehavior, setKeyboardBlurBehavior] = useState<
'none' | 'restore'
>('none');
const [blurKeyboardOnGesture, setBlurKeyboardOnGesture] = useState(false);
// hooks
const bottomSheetRef = useRef<BottomSheet>(null);
// variables
const snapPoints = useMemo(() => [SEARCH_HANDLE_HEIGHT + 34, 480], []);
// callbacks
const handleToggleKeyboardBehavior = useCallback(() => {
setKeyboardBehavior(state => {
switch (state) {
case 'interactive':
return 'extend';
case 'extend':
return 'fillParent';
case 'fillParent':
return 'interactive';
}
});
}, []);
const handleToggleKeyboardBlurBehavior = useCallback(() => {
setKeyboardBlurBehavior(state => {
switch (state) {
case 'none':
return 'restore';
case 'restore':
return 'none';
}
});
}, []);
const handleToggleBlurKeyboardOnGesture = useCallback(() => {
setBlurKeyboardOnGesture(state => !state);
}, []);
const handleExpandPress = useCallback(() => {
bottomSheetRef.current?.expand();
}, []);
const handleCollapsePress = useCallback(() => {
bottomSheetRef.current?.collapse();
}, []);
const handleClosePress = useCallback(() => {
bottomSheetRef.current?.close();
}, []);
// renders
return (
<View style={styles.container}>
<Button
label={`Toggle Keyboard Behavior: ${keyboardBehavior}`}
onPress={handleToggleKeyboardBehavior}
/>
<Button
label={`Toggle Keyboard Blur Behavior: ${keyboardBlurBehavior}`}
onPress={handleToggleKeyboardBlurBehavior}
/>
<Button
label={`Toggle Blur Keyboard On Gesture: ${blurKeyboardOnGesture}`}
onPress={handleToggleBlurKeyboardOnGesture}
/>
<Button label="Expand" onPress={handleExpandPress} />
<Button label="Collapse" onPress={handleCollapsePress} />
<Button label="Close" onPress={handleClosePress} />
<BottomSheet
ref={bottomSheetRef}
snapPoints={snapPoints}
enableDynamicSizing={false}
keyboardBehavior={keyboardBehavior}
keyboardBlurBehavior={keyboardBlurBehavior}
enableBlurKeyboardOnGesture={blurKeyboardOnGesture}
handleComponent={SearchHandle}
>
<ContactList count={15} type="FlatList" />
</BottomSheet>
</View>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
padding: 24,
},
});
export default KeyboardHandlingExample;
================================================
FILE: example/src/screens/advanced/PullToRefreshExample.tsx
================================================
import BottomSheet from '@gorhom/bottom-sheet';
import React, { useCallback, useMemo, useRef } from 'react';
import { StyleSheet, View } from 'react-native';
import { Button } from '../../components/button';
import { ContactList } from '../../components/contactList';
import { HeaderHandle } from '../../components/headerHandle/HeaderHandle';
const PullToRefreshExample = () => {
// hooks
const bottomSheetRef = useRef<BottomSheet>(null);
// variables
const snapPoints = useMemo(() => ['25%', '50%'], []);
// callbacks
const handleRefresh = useCallback(() => {
// biome-ignore lint/suspicious/noConsole: it is need for the example
console.log('handleRefresh');
}, []);
const handleExpandPress = useCallback(() => {
bottomSheetRef.current?.expand();
}, []);
const handleCollapsePress = useCallback(() => {
bottomSheetRef.current?.collapse();
}, []);
const handleClosePress = useCallback(() => {
bottomSheetRef.current?.close();
}, []);
// renders
const renderHeaderHandle = useCallback(
props => <HeaderHandle {...props} children="Pull To Refresh Example" />,
[]
);
return (
<View style={styles.container}>
<Button label="Expand" onPress={handleExpandPress} />
<Button label="Collapse" onPress={handleCollapsePress} />
<Button label="Close" onPress={handleClosePress} />
<BottomSheet
ref={bottomSheetRef}
snapPoints={snapPoints}
enableDynamicSizing={false}
handleComponent={renderHeaderHandle}
>
<ContactList type="FlatList" count={15} onRefresh={handleRefresh} />
</BottomSheet>
</View>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
padding: 24,
},
});
export default PullToRefreshExample;
================================================
FILE: example/src/screens/advanced/ShadowExample.tsx
================================================
import React, { useCallback, useMemo, useRef } from 'react';
import { View, StyleSheet, Platform } from 'react-native';
import BottomSheet from '@gorhom/bottom-sheet';
import { useShowcaseTheme } from '@gorhom/showcase-template';
import { Button } from '../../components/button';
import { ContactList } from '../../components/contactList';
import { HeaderHandle } from '../../components/headerHandle';
const ShadowExample = () => {
// hooks
const bottomSheetRef = useRef<BottomSheet>(null);
const { colors } = useShowcaseTheme();
// variables
const snapPoints = useMemo(() => ['25%', '50%'], []);
// styles
const sheetStyle = useMemo(
() => ({
...styles.sheetContainer,
...styles.sheetContainerShadow,
shadowColor: colors.secondaryText,
}),
[colors.secondaryText]
);
// callbacks
const handleExpandPress = useCallback(() => {
bottomSheetRef.current?.expand();
}, []);
const handleCollapsePress = useCallback(() => {
bottomSheetRef.current?.collapse();
}, []);
const handleClosePress = useCallback(() => {
bottomSheetRef.current?.close();
}, []);
// renders
const renderHeaderHandle = useCallback(
props => <HeaderHandle {...props} children="Shadow Example" />,
[]
);
return (
<View style={styles.container}>
<Button label="Expand" onPress={handleExpandPress} />
<Button label="Collapse" onPress={handleCollapsePress} />
<Button label="Close" onPress={handleClosePress} />
<BottomSheet
ref={bottomSheetRef}
snapPoints={snapPoints}
animateOnMount={true}
handleComponent={renderHeaderHandle}
style={sheetStyle}
>
<ContactList type="View" count={3} />
</BottomSheet>
</View>
);
};
const styles = StyleSheet.create({
container: {
backgroundColor: 'white',
flex: 1,
padding: 24,
},
sheetContainer: {
backgroundColor: 'white',
borderTopStartRadius: 24,
borderTopEndRadius: 24,
},
sheetContainerShadow: Platform.select({
ios: {
shadowOffset: {
width: 0,
height: 12,
},
shadowOpacity: 0.75,
shadowRadius: 16.0,
shadowColor: '#000',
},
android: {
elevation: 24,
},
web: {
boxShadow: '0px -4px 16px rgba(0,0,0, 0.25)',
},
}) as any,
});
export default ShadowExample;
================================================
FILE: example/src/screens/basic/BasicExamples.tsx
================================================
import React, { useCallback, memo, useRef, useMemo, useState } from 'react';
import { StyleSheet, View } from 'react-native';
import BottomSheet, { useBottomSheetSpringConfigs } from '@gorhom/bottom-sheet';
import { ContactList } from '../../components/contactList';
import { Button } from '../../components/button';
interface ExampleScreenProps {
title: string;
type: 'FlatList' | 'SectionList' | 'ScrollView' | 'View' | 'VirtualizedList';
count?: number;
}
const createExampleScreen = ({ type, count = 25 }: ExampleScreenProps) =>
memo(() => {
//#region state
const [enableContentPanningGesture, setEnableContentPanningGesture] =
useState(true);
const [enableHandlePanningGesture, setEnableHandlePanningGesture] =
useState(true);
//#endregion
//#region refs
const bottomSheetRef = useRef<BottomSheet>(null);
//#endregion
//#region variables
const snapPoints = useMemo(() => ['25%', '50%', '90%'], []);
const enableContentPanningGestureButtonText = useMemo(
() =>
enableContentPanningGesture
? 'Disable Content Panning Gesture'
: 'Enable Content Panning Gesture',
[enableContentPanningGesture]
);
const enableHandlePanningGestureButtonText = useMemo(
() =>
enableHandlePanningGesture
? 'Disable Handle Panning Gesture'
: 'Enable Handle Panning Gesture',
[enableHandlePanningGesture]
);
const animationConfigs = useBottomSheetSpringConfigs({
damping: 80,
overshootClamping: true,
restDisplacementThreshold: 0.1,
restSpeedThreshold: 0.1,
stiffness: 500,
});
//#endregion
//#region callbacks
const handleSheetChange = useCallback((index: number) => {
// eslint-disable-next-line no-console
console.log('handleSheetChange', index);
}, []);
const handleSheetAnimate = useCallback(
(fromIndex: number, toIndex: number) => {
// eslint-disable-next-line no-console
console.log('handleSheetAnimate', `from ${fromIndex} to ${toIndex}`);
},
[]
);
const handleSnapPress = useCallback((index: number) => {
bottomSheetRef.current?.snapToIndex(index);
}, []);
const handleExpandPress = useCallback(() => {
bottomSheetRef.current?.expand();
}, []);
const handleCollapsePress = useCallback(() => {
bottomSheetRef.current?.collapse();
}, []);
const handleClosePress = useCallback(() => {
bottomSheetRef.current?.close();
}, []);
const handleEnableContentPanningGesturePress = useCallback(() => {
setEnableContentPanningGesture(state => !state);
}, []);
const handleEnableHandlePanningGesturePress = useCallback(() => {
setEnableHandlePanningGesture(state => !state);
}, []);
//#endregion
return (
<View style={styles.container}>
<Button label="Snap To 90%" onPress={() => handleSnapPress(2)} />
<Button label="Snap To 50%" onPress={() => handleSnapPress(1)} />
<Button label="Snap To 25%" onPress={() => handleSnapPress(0)} />
<Button label="Expand" onPress={handleExpandPress} />
<Button label="Collapse" onPress={handleCollapsePress} />
<Button label="Close" onPress={handleClosePress} />
<Button
label={enableContentPanningGestureButtonText}
onPress={handleEnableContentPanningGesturePress}
/>
<Button
label={enableHandlePanningGestureButtonText}
onPress={handleEnableHandlePanningGesturePress}
/>
<BottomSheet
ref={bottomSheetRef}
index={1}
snapPoints={snapPoints}
animationConfigs={animationConfigs}
animateOnMount={true}
enableContentPanningGesture={enableContentPanningGesture}
enableHandlePanningGesture={enableHandlePanningGesture}
enableDynamicSizing={false}
onChange={handleSheetChange}
onAnimate={handleSheetAnimate}
>
<ContactList key={`${type}.list`} type={type} count={count} />
</BottomSheet>
</View>
);
});
const styles = StyleSheet.create({
container: {
flex: 1,
padding: 24,
},
});
export const FlatListExampleScreen = createExampleScreen({
title: 'FlatList Example',
type: 'FlatList',
});
export const VirtualizedListExampleScreen = createExampleScreen({
title: 'VirtualizedList Example',
type: 'VirtualizedList',
});
export const ScrollViewExampleScreen = createExampleScreen({
title: 'Title',
type: 'ScrollView',
});
export const SectionListExampleScreen = createExampleScreen({
title: 'Title',
type: 'SectionList',
});
export const ViewExampleScreen = createExampleScreen({
title: 'Title',
type: 'View',
count: 8,
});
================================================
FILE: example/src/screens/index.ts
================================================
import type { ShowcaseExampleScreenSectionType } from '@gorhom/showcase-template';
import { Platform } from 'react-native';
const screens: Array<object> = [
{
name: '🔥 LegendList',
slug: 'Integrations/LegendList-featured',
title: '🔥 LegendList',
getScreen: () => require('./integrations/legendlist').default,
},
];
//#region Basic Section
const basicSection = {
title: 'Basic',
collapsible: false,
data: [
{
name: 'View',
slug: 'Basic/ViewExample',
getScreen: () => require('./basic/BasicExamples').ViewExampleScreen,
},
{
name: 'ScrollView',
slug: 'Basic/ScrollViewExample',
getScreen: () => require('./basic/BasicExamples').ScrollViewExampleScreen,
},
{
name: 'FlatList',
slug: 'Basic/FlatListExample',
getScreen: () => require('./basic/BasicExamples').FlatListExampleScreen,
},
{
name: 'SectionList',
slug: 'Basic/SectionListExample',
getScreen: () =>
require('./basic/BasicExamples').SectionListExampleScreen,
},
{
name: 'VirtualizedList',
slug: 'Basic/VirtualizedListExample',
getScreen: () =>
require('./basic/BasicExamples').VirtualizedListExampleScreen,
},
],
};
screens.push(basicSection);
//#endregion
//#region Modal Section
const modalSection = {
title: 'Modal',
data: [
{
name: 'Simple',
slug: 'Modal/SimpleExample',
getScreen: () => require('./modal/SimpleExample').default,
},
{
name: 'Backdrop',
slug: 'Modal/BackdropExample',
getScreen: () => require('./modal/BackdropExample').default,
},
{
name: 'Stack Modals',
slug: 'Modal/StackExample',
getScreen: () => require('./modal/StackExample').default,
},
{
name: 'Dynamic Sizing',
slug: 'Modal/DynamicSizingExample',
getScreen: () => require('./modal/DynamicSizingExample').default,
},
{
name: 'Detached',
slug: 'Modal/DetachedExample',
getScreen: () => require('./modal/DetachedExample').default,
},
],
};
screens.push(modalSection);
//#endregion
//#region Advanced Section
const advancedSection = {
title: 'Advanced',
collapsed: true,
data: [
{
name: 'Custom Handle',
slug: 'Advanced/CustomHandleExample',
getScreen: () => require('./advanced/CustomHandleExample').default,
},
{
name: 'Custom Background',
slug: 'Advanced/CustomBackgroundExample',
getScreen: () => require('./advanced/CustomBackgroundExample').default,
},
{
name: 'Custom Theme',
slug: 'Advanced/CustomThemeExample',
getScreen: () => require('./advanced/CustomThemeExample').default,
},
{
name: 'Backdrop',
slug: 'Advanced/BackdropExample',
getScreen: () => require('./advanced/BackdropExample').default,
},
{
name: 'Dynamic Sizing',
slug: 'Advanced/DynamicSizingExample',
getScreen: () => require('./advanced/DynamicSizingExample').default,
},
{
name: 'Shadow',
slug: 'Advanced/ShadowExample',
getScreen: () => require('./advanced/ShadowExample').default,
},
{
name: 'Footer',
slug: 'Advanced/FooterExample',
getScreen: () => require('./advanced/FooterExample').default,
},
],
};
if (Platform.OS !== 'web') {
advancedSection.data.push(
{
name: 'Keyboard Handling',
slug: 'Advanced/KeyboardHandlingExample',
getScreen: () => require('./advanced/KeyboardHandlingExample').default,
},
{
name: 'Pull To Refresh',
slug: 'Advanced/PullToRefreshExample',
getScreen: () => require('./advanced/PullToRefreshExample').default,
}
);
}
screens.push(advancedSection);
//#endregion
//#region Third Party Integration Section
if (Platform.OS !== 'web') {
const integrationSection = {
title: 'Third Party Integration',
data: [
{
name: 'React Navigation',
slug: 'Integrations/NavigatorExample',
getScreen: () =>
require('./integrations/navigation/NavigatorExample').default,
},
{
name: 'React Native Screens',
slug: 'Integrations/NativeScreensExample',
getScreen: () => require('./integrations/NativeScreensExample').default,
},
{
name: 'View Pager',
slug: 'Integrations/ViewPagerExample',
getScreen: () => require('./integrations/ViewPagerExample').default,
},
{
name: 'Map',
slug: 'Integrations/MapExample',
getScreen: () => require('./integrations/map/MapExample').default,
screenOptions: {
headerTintColor: 'black',
headerTransparent: true,
},
},
{
name: 'FlashList',
slug: 'Integrations/FlashList',
getScreen: () => require('./integrations/flashlist').default,
},
{
name: 'LegendList',
slug: 'Integrations/LegendList',
getScreen: () => require('./integrations/legendlist').default,
},
],
collapsed: true,
};
screens.push(integrationSection);
}
//#endregion
export { screens };
================================================
FILE: example/src/screens/integrations/NativeScreensExample.tsx
================================================
import React from 'react';
import { View, StyleSheet, Platform } from 'react-native';
import { useNavigation } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import { Button } from '../../components/button';
import ModalBackdropExample from '../modal/BackdropExample';
import { withModalProvider } from '../modal/withModalProvider';
const RootScreen = () => {
const { navigate } = useNavigation();
return (
<View style={styles.container}>
<Button
label="Navigate to Native Modal"
// @ts-ignore
onPress={() => navigate('NativeModal')}
/>
</View>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
padding: 24,
},
});
const NativeStack = createNativeStackNavigator();
export default withModalProvider(() => (
<NativeStack.Navigator>
<NativeStack.Screen
name="Root"
component={RootScreen}
options={{ headerShown: false }}
/>
<NativeStack.Screen
name="NativeModal"
component={ModalBackdropExample}
options={{
presentation: 'modal',
headerShown: Platform.OS === 'ios',
}}
/>
</NativeStack.Navigator>
));
================================================
FILE: example/src/screens/integrations/ViewPagerExample.tsx
================================================
import React, { useMemo } from 'react';
import { View, Text, StyleSheet } from 'react-native';
import { createMaterialTopTabNavigator } from '@react-navigation/material-top-tabs';
import BottomSheet from '@gorhom/bottom-sheet';
import { ContactList } from '../../components/contactList';
const FirstRoute = () => {
const snapPoints = useMemo(() => ['25%', '50%', '90%'], []);
return (
<View style={[styles.scene, styles.firstScene]}>
<BottomSheet
snapPoints={snapPoints}
enableDynamicSizing={false}
activeOffsetY={[-1, 1]}
failOffsetX={[-5, 5]}
animateOnMount={true}
>
<ContactList type="FlatList" count={15} />
</BottomSheet>
</View>
);
};
const SecondRoute = () => (
<View style={[styles.scene, styles.secondScene]}>
<Text style={styles.emoji}>🙈</Text>
</View>
);
const Tab = createMaterialTopTabNavigator();
const ViewPagerScreen = () => {
return (
<Tab.Navigator>
<Tab.Screen name="Home" component={FirstRoute} />
<Tab.Screen name="Settings" component={SecondRoute} />
</Tab.Navigator>
);
};
const styles = StyleSheet.create({
scene: {
flex: 1,
},
firstScene: {
backgroundColor: '#ff4081',
},
secondScene: {
alignContent: 'center',
alignItems: 'center',
justifyContent: 'center',
backgroundColor: '#673ab7',
},
emoji: {
fontSize: 46,
},
});
export default ViewPagerScreen;
================================================
FILE: example/src/screens/integrations/flashlist/FlashListExample.tsx
================================================
import BottomSheet, {
useBottomSheetScrollableCreator,
} from '@gorhom/bottom-sheet';
import { FlashList, type ListRenderItemInfo } from '@shopify/flash-list';
import React, { useCallback, useMemo, useRef, useState } from 'react';
import {
ActivityIndicator,
StyleSheet,
Text,
View,
type ViewabilityConfig,
} from 'react-native';
import { Button } from '../../../components/button';
import TweetContent from './TweetContent';
import { tweets as tweetsData } from './data/tweets';
import type Tweet from './models/Tweet';
const keyExtractor = (item: Tweet) => {
return item.id;
};
const snapPoints = ['25%', '50%', '90%'];
const FlashListExample = () => {
//#region state
const [tweets, setTweets] = useState(tweetsData);
//#endregion
//#region refs
const bottomSheetRef = useRef<BottomSheet>(null);
const remainingTweets = useRef([...tweetsData].splice(10, tweetsData.length));
const viewabilityConfig = useRef<ViewabilityConfig>({
waitForInteraction: true,
itemVisiblePercentThreshold: 50,
minimumViewTime: 1000,
}).current;
//#endregion
const handleOnEndReached = useCallback(() => {
setTimeout(() => {
setTweets([...tweets, ...remainingTweets.current.splice(0, 10)]);
}, 1000);
}, [tweets]);
const handleSnapPress = useCallback((index: number) => {
bottomSheetRef.current?.snapToIndex(index);
}, []);
const handleExpandPress = useCallback(() => {
bottomSheetRef.current?.expand();
}, []);
const handleCollapsePress = useCallback(() => {
bottomSheetRef.current?.collapse();
}, []);
const handleClosePress = useCallback(() => {
bottomSheetRef.current?.close();
}, []);
//#region render
const renderItem = useCallback(
({ item }: ListRenderItemInfo<Tweet>) => <TweetContent tweet={item} />,
[]
);
const renderFooter = useMemo(
() => <Footer isLoading={tweets.length !== tweetsData.length} />,
[tweets]
);
const BottomSheetFlashListScrollable = useBottomSheetScrollableCreator();
return (
<View style={styles.container}>
<Button label="Snap To 90%" onPress={() => handleSnapPress(2)} />
<Button label="Snap To 50%" onPress={() => handleSnapPress(1)} />
<Button label="Snap To 25%" onPress={() => handleSnapPress(0)} />
<Button label="Expand" onPress={handleExpandPress} />
<Button label="Collapse" onPress={handleCollapsePress} />
<Button label="Close" onPress={handleClosePress} />
<BottomSheet
ref={bottomSheetRef}
snapPoints={snapPoints}
enableDynamicSizing={false}
>
<FlashList
keyExtractor={keyExtractor}
renderItem={renderItem}
onEndReached={handleOnEndReached}
ListFooterComponent={renderFooter}
ListEmptyComponent={Empty}
estimatedItemSize={150}
ItemSeparatorComponent={Divider}
data={tweets}
viewabilityConfig={viewabilityConfig}
renderScrollComponent={BottomSheetFlashListScrollable}
/>
</BottomSheet>
</View>
);
//#endregion
};
const Divider = () => {
return <View style={styles.divider} />;
};
const Footer = ({ isLoading }: { isLoading: boolean }) => {
return (
<View style={styles.footer}>
{isLoading ? (
<ActivityIndicator />
) : (
<Text style={styles.footerTitle}>No more tweets</Text>
)}
</View>
);
};
const Empty = () => {
const title = 'Welcome to your timeline';
const subTitle =
"It's empty now but it won't be for long. Start following peopled you'll see Tweets show up here";
return (
<View style={styles.emptyComponent} testID="EmptyComponent">
<Text style={styles.emptyComponentTitle}>{title}</Text>
<Text style={styles.emptyComponentSubtitle}>{subTitle}</Text>
</View>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
padding: 24,
},
divider: {
width: '100%',
height: StyleSheet.hairlineWidth,
backgroundColor: '#DDD',
},
header: {
height: 40,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#1DA1F2',
},
footer: {
height: 40,
justifyContent: 'center',
alignItems: 'center',
},
headerTitle: {
color: '#FFFFFF',
padding: 8,
borderRadius: 12,
fontSize: 12,
},
footerTitle: {
padding: 8,
borderRadius: 12,
fontSize: 12,
},
emptyComponentTitle: {
color: 'black',
fontSize: 20,
fontWeight: 'bold',
},
emptyComponentSubtitle: {
color: '#808080',
padding: 8,
fontSize: 14,
textAlign: 'center',
},
emptyComponent: {
justifyContent: 'center',
alignItems: 'center',
flex: 1,
},
});
export default FlashListExample;
================================================
FILE: example/src/screens/integrations/flashlist/TweetContent.tsx
================================================
import { Image } from 'expo-image';
import React from 'react';
import { StyleSheet, Text, View, type ViewStyle } from 'react-native';
import type Author from './models/Author';
import type Tweet from './models/Tweet';
export interface TweetContentProps {
tweet: Tweet;
}
const tweetActions = (
retweets: React.ReactNode,
comments: React.ReactNode,
likes: React.ReactNode
) => {
return (
<View style={[styles.rowActions, styles.actionBar]}>
<View style={styles.elemAction}>
<Image
style={styles.actionButton}
source={require('../../../../assets/comment.png')}
/>
<Text style={styles.actionText}>{comments}</Text>
</View>
<View style={styles.elemAction}>
<Image
style={styles.actionButton}
source={require('../../../../assets/retweet.png')}
/>
<Text style={styles.actionText}>{retweets}</Text>
</View>
<View style={styles.elemAction}>
<Image
style={styles.actionButton}
source={require('../../../../assets/like.png')}
/>
<Text style={styles.actionText}>{likes}</Text>
</View>
<Image
style={styles.actionButton}
source={require('../../../../assets/share.png')}
/>
</View>
);
};
const avatar = (author: Author) => {
return (
<View style={styles.avatar}>
<Text style={styles.avatarTextStyle}>
{author.name.toUpperCase().charAt(0)}
</Text>
</View>
);
};
interface GrayTextProps {
children: React.ReactNode;
numberOfLines?: number;
style?: ViewStyle;
}
const GrayText = ({ children, numberOfLines, style }: GrayTextProps) => {
return (
<Text style={[style, styles.gray]} numberOfLines={numberOfLines}>
{children}
</Text>
);
};
const TweetContent = ({ tweet }: TweetContentProps) => {
return (
<View style={styles.singleItem}>
<View style={styles.row}>
{avatar(tweet.author)}
<View style={styles.tweetContentContainer}>
<View style={styles.rowTop}>
<Text numberOfLines={1} style={styles.header}>
{tweet.author.name}
</Text>
<GrayText style={styles.author} numberOfLines={1}>
@{tweet.author.screenName}
</GrayText>
<GrayText>·</GrayText>
<GrayText>2h</GrayText>
</View>
<Text style={styles.description}>{tweet.fullText}</Text>
<View style={styles.rowActions}>
{tweetActions(
tweet.retweetCount,
tweet.replyCount,
tweet.favoriteCount
)}
</View>
</View>
</View>
</View>
);
};
const styles = StyleSheet.create({
author: {
flexShrink: 1,
},
actionBar: {
marginTop: 8,
justifyContent: 'space-between',
marginRight: 16,
},
actionButton: {
width: 18,
height: 18,
marginRight: 8,
},
gray: {
color: '#777',
fontSize: 13,
paddingRight: 2,
},
avatar: {
height: 44,
width: 44,
backgroundColor: '#00A4EF',
marginRight: 16,
flexShrink: 0,
marginTop: 4,
justifyContent: 'center',
alignItems: 'center',
},
avatarTextStyle: {
color: '#FFF',
fontSize: 18,
fontWeight: 'bold',
},
header: {
fontSize: 14,
fontWeight: 'bold',
paddingBottom: 4,
paddingRight: 4,
color: '#000',
},
description: {
fontSize: 14,
color: '#000',
},
singleItem: {
paddingHorizontal: 16,
minHeight: 44,
flex: 1,
padding: 16,
backgroundColor: '#FFF',
},
rowTop: {
flexDirection: 'row',
},
rowActions: {
flexGrow: 1,
justifyContent: 'space-between',
flexDirection: 'row',
},
row: {
flexDirection: 'row',
},
elemAction: {
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'flex-start',
},
actionText: {
fontSize: 12,
color: '#444',
},
tweetContentContainer: {
flexShrink: 1,
flexGrow: 1,
},
});
export default TweetContent;
================================================
FILE: example/src/screens/integrations/flashlist/data/tweets.ts
================================================
/* eslint-disable max-len */
import type Tweet from '../models/Tweet';
export const tweets: Tweet[] = [
{
author: {
name: 'Aram Miquel',
screenName: 'aram_miquel',
avatar:
'https://images.unsplash.com/photo-1649011463206-cb765493f8bf?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=48&ixid=MnwxfDB8MXxyYW5kb218MHx8fHx8fHx8MTY1MTY1Njk3NA&ixlib=rb-1.2.1&q=80&w=48',
},
id: '1480837336535646209',
fullText:
'Apple should pay more attention. It’s unfair to users, but even more to the small developers that play by the rules!',
retweetCount: 2,
replyCount: 1,
favoriteCount: 5,
},
{
author: {
name: 'Gergely Orosz',
screenName: 'GergelyOrosz',
avatar:
'https://images.unsplash.com/photo-1649827159600-237a092f95b5?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=48&ixid=MnwxfDB8MXxyYW5kb218MHx8fHx8fHx8MTY1MTY1Njk5OQ&ixlib=rb-1.2.1&q=80&w=48',
},
id: '1480833114096214018',
fullText:
'I write about real-world hiring insights for paid subscribers of https://t.co/SLe64y6YsX - many of whom are hiring managers themselves.\n\nIt might be a hard pill to swallow, but retaining existing folks, not overloading them with too many in-person interviews comes before hiring.',
retweetCount: 0,
replyCount: 0,
favoriteCount: 3,
},
{
author: {
name: 'ryancarson.eth',
screenName: 'ryancarson',
avatar:
'https://images.unsplash.com/photo-1650355255329-66a873ebab57?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=48&ixid=MnwxfDB8MXxyYW5kb218MHx8fHx8fHx8MTY1MTY1Njk3NQ&ixlib=rb-1.2.1&q=80&w=48',
},
id: '1480806838140649472',
fullText:
'Not bullish on @LooksRareNFT and $LOOKS yet? (Disclosure: I staked my airdropped tokens. DYOR as always.)',
retweetCount: 2,
replyCount: 2,
favoriteCount: 13,
},
{
author: {
name: 'Cris Miquel',
screenName: 'crismiquelg',
avatar:
'https://images.unsplash.com/photo-1650192905858-e0bc957bf390?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=48&ixid=MnwxfDB8MXxyYW5kb218MHx8fHx8fHx8MTY1MTY1NzEwNw&ixlib=rb-1.2.1&q=80&w=48',
},
id: '1480543522465976324',
fullText:
'mi único propósito para 2022 es dejar de despedirme con la mano en las videollamadas como si fuera idiota',
retweetCount: 2,
replyCount: 14,
favoriteCount: 64,
},
{
author: {
name: 'Lorenzo',
screenName: 'Kelset',
avatar:
'https://images.unsplash.com/photo-1650346910129-e73df7b26eb0?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=48&ixid=MnwxfDB8MXxyYW5kb218MHx8fHx8fHx8MTY1MTY1Njk3Nw&ixlib=rb-1.2.1&q=80&w=48',
},
id: '1480879826781286413',
fullText: '🔥this is fine🔥',
retweetCount: 0,
replyCount: 0,
favoriteCount: 0,
},
{
author: {
name: 'Vitto Rivabella 🥑',
screenName: 'VittoStack',
avatar:
'https://images.unsplash.com/photo-1649623053337-03a9aca84fc1?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=48&ixid=MnwxfDB8MXxyYW5kb218MHx8fHx8fHx8MTY1MTY1NzEwNg&ixlib=rb-1.2.1&q=80&w=48',
},
id: '1480576201878028289',
fullText:
'DAOs are the best place to become a Web3 developer.\n\nUnfortunately, only a bunch are really valuable.\n\n4 best DAOs to learn Web3 ↓',
retweetCount: 158,
replyCount: 20,
favoriteCount: 551,
},
{
author: {
name: 'Justin Moore | Sponsorship Coach',
screenName: 'justinmooretfam',
avatar:
'https://images.unsplash.com/photo-1650213986462-1804543441c2?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=48&ixid=MnwxfDB8MXxyYW5kb218MHx8fHx8fHx8MTY1MTY1Njk3OA&ixlib=rb-1.2.1&q=80&w=48',
},
id: '1480875135355666432',
fullText: 'Stop waiting for brands to contact you.',
retweetCount: 2,
replyCount: 0,
favoriteCount: 11,
},
{
author: {
name: 'March',
screenName: 'fdesbml',
avatar:
'https://images.unsplash.com/photo-1650975109944-2772703c72f7?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=48&ixid=MnwxfDB8MXxyYW5kb218MHx8fHx8fHx8MTY1MTY1NzEwNA&ixlib=rb-1.2.1&q=80&w=48',
},
id: '1480362830805311495',
fullText:
'Hand-knit jewelry by Nora Folk | She uses a mixed technique of weaving, knitting, braiding and knotting fine nylon microfilaments to create organic shapes. https://t.co/BZFBQwuHeO',
retweetCount: 901,
replyCount: 10,
favoriteCount: 5889,
},
{
author: {
name: 'Samuel Molina',
screenName: 'FuKuy',
avatar:
'https://images.unsplash.com/photo-1651264042772-23891c614270?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=48&ixid=MnwxfDB8MXxyYW5kb218MHx8fHx8fHx8MTY1MTY1Njk4MA&ixlib=rb-1.2.1&q=80&w=48',
},
id: '1480818112614260739',
fullText:
'RT @Sadface_RL: A beginners guide to health bars.\n\n#pixelart #art #animation #gamedev #indiedev #indiegamedev #indiegame https://t.co/Fhb4m…',
retweetCount: 177,
replyCount: 0,
favoriteCount: 0,
},
{
author: {
name: 'Fumio 💡',
screenName: 'IK1T',
avatar:
'https://images.unsplash.com/photo-1650548211932-f6ebd1c73867?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=48&ixid=MnwxfDB8MXxyYW5kb218MHx8fHx8fHx8MTY1MTY1NzEwMw&ixlib=rb-1.2.1&q=80&w=48',
},
id: '1480811969242357760',
fullText:
"Happy #PortfolioDay !\nDear friends ❤️ I'm Fumio, a Lighting Artist 💡 currently working on Star Citizen.\nLooking forward to meeting awesome artists on twitter 😊🎨✨\n\n🖼️ https://t.co/HOEB3v9c6E\n\n#PortfolioDay #LightingArtist #gamedev #Lighting https://t.co/ROIZ4iqRkE",
retweetCount: 19,
replyCount: 1,
favoriteCount: 70,
},
{
author: {
name: 'ryancarson.eth',
screenName: 'ryancarson',
avatar:
'https://images.unsplash.com/photo-1650355255329-66a873ebab57?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=48&ixid=MnwxfDB8MXxyYW5kb218MHx8fHx8fHx8MTY1MTY1Njk3NQ&ixlib=rb-1.2.1&q=80&w=48',
},
id: '1480809821754511361',
fullText: 'gm y’all!',
retweetCount: 0,
replyCount: 11,
favoriteCount: 19,
},
{
author: {
name: 'SonyAlphaRumors',
screenName: 'SonyAlphaRumors',
avatar:
'https://images.unsplash.com/photo-1650170495855-add188d60239?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=48&ixid=MnwxfDB8MXxyYW5kb218MHx8fHx8fHx8MTY1MTY1Njk4MQ&ixlib=rb-1.2.1&q=80&w=48',
},
id: '1480859756940218370',
fullText:
'ZY Productions: This $429 Viltrox FE 24mm F1.8 Lens Is Surprisingly Good https://t.co/pAPvDYI5t4',
retweetCount: 0,
replyCount: 0,
favoriteCount: 2,
},
{
author: {
name: 'Sommer Panage',
screenName: 'Sommer',
avatar:
'https://images.unsplash.com/photo-1651236243448-ff4ea397cdf5?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=48&ixid=MnwxfDB8MXxyYW5kb218MHx8fHx8fHx8MTY1MTY1NzEwMQ&ixlib=rb-1.2.1&q=80&w=48',
},
id: '1480713374350651394',
fullText:
'I love working with people who are friendly. Who say “thank you” or cheer you on or say “good job.” These things may seem small, but they add up in the same way (but opposite direction) that all the negs and “paper cuts” do. They create a culture. They matter. Kindness matters.',
retweetCount: 94,
replyCount: 11,
favoriteCount: 744,
},
{
author: {
name: '@levelsio',
screenName: 'levelsio',
avatar:
'https://images.unsplash.com/photo-1650964858223-f4e7f5279f48?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=48&ixid=MnwxfDB8MXxyYW5kb218MHx8fHx8fHx8MTY1MTY1Njk4Mg&ixlib=rb-1.2.1&q=80&w=48',
},
id: '1480883313787084801',
fullText:
'✨ Added a mailto: link so people can invite their friends too https://t.co/fR3ufZJeuP',
retweetCount: 0,
replyCount: 3,
favoriteCount: 18,
},
{
author: {
name: 'The muy ameisin Bonilista',
screenName: 'bonilista',
avatar:
'https://images.unsplash.com/photo-1650296231490-2deba34258bf?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=48&ixid=MnwxfDB8MXxyYW5kb218MHx8fHx8fHx8MTY1MTY1NzEwMA&ixlib=rb-1.2.1&q=80&w=48',
},
id: '1480843314349981698',
fullText:
'El patrocinio de la #Bonilista cuesta 0,036 centimos por cada persona que lee el correo. Eso, sin contar la republicación en @lavozdegalicia.\nSi te interesa reservar un patrocinio, tienes fechas disponibles a partir del 1 de mayo y más info en \nhttps://t.co/umLWuCrVnY',
retweetCount: 0,
replyCount: 0,
favoriteCount: 0,
},
{
author: {
name: 'John Arthorne',
screenName: 'jarthorne',
avatar:
'https://images.unsplash.com/photo-1651417060303-716ae896ef88?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=48&ixid=MnwxfDB8MXxyYW5kb218MHx8fHx8fHx8MTY1MTY1Njk4NA&ixlib=rb-1.2.1&q=80&w=48',
},
id: '1480546473590857729',
fullText:
'The number of people joining Shopify RnD *today* alone is greater than the size of the RnD team when I joined 6 years ago 🤯. To my ~300 new colleagues: Welcome! 🚀',
retweetCount: 14,
replyCount: 6,
favoriteCount: 234,
},
{
author: {
name: 'Paul Graham',
screenName: 'paulg',
avatar:
'https://images.unsplash.com/photo-1649089475942-b523f9d00219?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=48&ixid=MnwxfDB8MXxyYW5kb218MHx8fHx8fHx8MTY1MTY1NzA5OQ&ixlib=rb-1.2.1&q=80&w=48',
},
id: '1480875433013002243',
fullText:
'"In truth, Theodoric was something of a parvenu, as every other Goth must have been aware."\n\n— J. M. Wallace-Hadrill',
retweetCount: 1,
replyCount: 2,
favoriteCount: 22,
},
{
author: {
name: 'Gergely Orosz',
screenName: 'GergelyOrosz',
avatar:
'https://images.unsplash.com/photo-1650122597661-ceccf6d50692?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=48&ixid=MnwxfDB8MXxyYW5kb218MHx8fHx8fHx8MTY1MTY1Njk4NQ&ixlib=rb-1.2.1&q=80&w=48',
},
id: '1480813715880615936',
fullText:
'Ok I got hooked on Wordle as well.\n\nWordle 206 3/6\n\n⬜🟨🟩⬜⬜\n🟩⬜🟩🟩⬜\n🟩🟩🟩🟩🟩',
retweetCount: 0,
replyCount: 6,
favoriteCount: 31,
},
{
author: {
name: 'Toni Colom',
screenName: 'tonicolom',
avatar:
'https://images.unsplash.com/photo-1649861972512-faadc16a4571?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=48&ixid=MnwxfDB8MXxyYW5kb218MHx8fHx8fHx8MTY1MTY1NzA5Nw&ixlib=rb-1.2.1&q=80&w=48',
},
id: '1480824991486824448',
fullText:
'Para cumplir todas las tradiciones de estas fechas sólo me faltaba una cosa: la revisión de 2021 y los objetivos de 2022.\n\nEn este episodio con @chusnarrolo, que viene de un año movidito, hablamos del presente y del futuro de nuestras #marcas.\n\n#Podcast\nhttps://t.co/7YA6KrPrwX',
retweetCount: 0,
replyCount: 0,
favoriteCount: 1,
},
{
author: {
name: 'Amanda Emmanuel',
screenName: 'amandaemmanuel',
avatar:
'https://images.unsplash.com/photo-1649894158708-bd47ad9ef4e3?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=48&ixid=MnwxfDB8MXxyYW5kb218MHx8fHx8fHx8MTY1MTY1NzA5Ng&ixlib=rb-1.2.1&q=80&w=48',
},
id: '1480611397503492100',
fullText:
"Last year I had an idea but I couldn't find a technical co-founder to build it, so I became one\n\nIn 12-weeks:\n\nI taught myself Rails \nbuilt the MVP\non-boarded 10 customers\nadded customer requested features\nhit 165K MAUs\n\nNever underestimate yourself 🚀",
retweetCount: 240,
replyCount: 175,
favoriteCount: 4385,
},
{
author: {
name: 'Majid Jabrayilov',
screenName: 'mecid',
avatar:
'https://images.unsplash.com/photo-1649080480680-221b69e21ce1?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=48&ixid=MnwxfDB8MXxyYW5kb218MHx8fHx8fHx8MTY1MTY1Njk4Nw&ixlib=rb-1.2.1&q=80&w=48',
},
id: '1480876283382935552',
fullText:
'Pull-to-refresh is a widespread User Interface pattern that we use to request a data update in our apps. The SwiftUI Release 3 provides a brand new way to set up a pull-to-refresh action using the new refreshable view modifier.\nhttps://t.co/bqU9Qaak1K https://t.co/wwNHOAhYtY',
retweetCount: 2,
replyCount: 0,
favoriteCount: 19,
},
{
author: {
name: 'Icon Galleries',
screenName: 'icongalleries',
avatar:
'https://images.unsplash.com/photo-1649733484875-2e837f5b640b?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=48&ixid=MnwxfDB8MXxyYW5kb218MHx8fHx8fHx8MTY1MTY1NzA5NA&ixlib=rb-1.2.1&q=80&w=48',
},
id: '1480669856647233543',
fullText:
'Lots of new #macOS icons today, including work from @raphaellopesph \n\nCheck out the icons at https://t.co/puMlrIlC6N',
retweetCount: 2,
replyCount: 0,
favoriteCount: 4,
},
{
author: {
name: 'Capture One Pro',
screenName: 'captureonepro',
avatar:
'https://images.unsplash.com/photo-1649393153970-fd7ec111a577?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=48&ixid=MnwxfDB8MXxyYW5kb218MHx8fHx8fHx8MTY1MTY1Njk4OA&ixlib=rb-1.2.1&q=80&w=48',
},
id: '1480841955613581313',
fullText:
'Want to know what @dunnadidit thinks about Capture One 22?\n\nWatch the video in the link below, where he tries out our new HDR and Panorama features.\n\n#hdr #panorama #captureone #editingsoftware\n\nhttps://t.co/7FxEC2LBwo https://t.co/sxvi6UQC8o',
retweetCount: 3,
replyCount: 0,
favoriteCount: 7,
},
{
author: {
name: 'Colin Cornaby',
screenName: 'colincornaby',
avatar:
'https://images.unsplash.com/photo-1651170022383-6eaa642ee2fa?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=48&ixid=MnwxfDB8MXxyYW5kb218MHx8fHx8fHx8MTY1MTY1NzA0NQ&ixlib=rb-1.2.1&q=80&w=48',
},
id: '1480321521126019073',
fullText:
'Anyone seen inconsistent Metal performance numbers on Apple Silicon Macs? Xcode FPS counter shows a GPU time of about 9 ms. But the built in shader profiler shows a time less than 3 ms. My best guess is maybe there is a significant of time being spent not in shaders?',
retweetCount: 0,
replyCount: 2,
favoriteCount: 0,
},
{
author: {
name: 'Smashing Magazine',
screenName: 'smashingmag',
avatar:
'https://images.unsplash.com/photo-1649562231804-f1bfadc450d2?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=48&ixid=MnwxfDB8MXxyYW5kb218MHx8fHx8fHx8MTY1MTY1NzA5Mw&ixlib=rb-1.2.1&q=80&w=48',
},
id: '1480816866360766465',
fullText:
'RT @smashingmag: 📣 New Smashing Workshops in 2022:\n \n😎 Accessible Front-End Patterns — @cariefisher\n👾 Front-End Testing — @bahmutov\n👻 HTML…',
retweetCount: 15,
replyCount: 0,
favoriteCount: 0,
},
{
author: {
name: 'Young IT Girls',
screenName: 'youngitgirls',
avatar:
'https://images.unsplash.com/photo-1649562231804-f1bfadc450d2?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=48&ixid=MnwxfDB8MXxyYW5kb218MHx8fHx8fHx8MTY1MTY1NzA5Mw&ixlib=rb-1.2.1&q=80&w=48',
},
id: '1480856688060256258',
fullText:
"🚀 Arranquem l'any amb noves aventures i moltes ganes de continuar treballant \n\n@CanodromBCN",
retweetCount: 3,
replyCount: 0,
favoriteCount: 5,
},
{
author: {
name: 'Gergely Orosz',
screenName: 'GergelyOrosz',
avatar:
'https://images.unsplash.com/photo-1650122597661-ceccf6d50692?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=48&ixid=MnwxfDB8MXxyYW5kb218MHx8fHx8fHx8MTY1MTY1Njk4NQ&ixlib=rb-1.2.1&q=80&w=48',
},
id: '1480832043093221379',
fullText:
'I refrain from talking much about the "real world" of hiring on Twitter, because the majority of people have not been on the other side.\n\nIt\'s easy to gather likes by tweeting "hire more juniors" when it\'s not you who will be responsible for the success - or failure - of them.',
retweetCount: 0,
replyCount: 3,
favoriteCount: 37,
},
{
author: {
name: 'I Am Devloper',
screenName: 'iamdevloper',
avatar:
'https://images.unsplash.com/photo-1651354239553-0998040fa5ca?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=48&ixid=MnwxfDB8MXxyYW5kb218MHx8fHx8fHx8MTY1MTY1Njk5MQ&ixlib=rb-1.2.1&q=80&w=48',
},
id: '1480861741185650691',
fullText:
"you don't need to spend 3hrs automating a solution to save you 10 minutes of manual input",
retweetCount: 20,
replyCount: 40,
favoriteCount: 339,
},
{
author: {
name: 'Connor Shorten',
screenName: 'CShorten30',
avatar:
'https://images.unsplash.com/photo-1649711992982-092a8e53e39c?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=48&ixid=MnwxfDB8MXxyYW5kb218MHx8fHx8fHx8MTY1MTY1NzA1OQ&ixlib=rb-1.2.1&q=80&w=48',
},
id: '1466746804704354309',
fullText:
"This video explains Weaviate's Wikidata Vector Search Web Demo! 🔥💻🔥\n\nThis covers a range of topics from:\n• Wikidata versus Wikipedia\n• PyTorch-BigGraph\n• The Weaviate Demo and Vector Search Visualization\n• My thoughts on Graph Data in Deep Learning\n\nhttps://t.co/SaTC0Ltvpi",
retweetCount: 21,
replyCount: 1,
favoriteCount: 79,
},
{
author: {
name: 'Digital Photography School (dPS)',
screenName: 'digitalps',
avatar:
'https://images.unsplash.com/photo-1649920762277-3dcd6db40334?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=48&ixid=MnwxfDB8MXxyYW5kb218MHx8fHx8fHx8MTY1MTY1Njk5Mg&ixlib=rb-1.2.1&q=80&w=48',
},
id: '1480863337219080196',
fullText:
'The Essential Guide to Depth of Field for Beginners https://t.co/GySMCoXRWr',
retweetCount: 0,
replyCount: 0,
favoriteCount: 6,
},
{
author: {
name: 'Manuel Maly',
screenName: 'manuelmaly',
avatar:
'https://images.unsplash.com/photo-1650821314547-ea4e6f5c31ab?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=48&ixid=MnwxfDB8MXxyYW5kb218MHx8fHx8fHx8MTY1MTY1NzA5Mg&ixlib=rb-1.2.1&q=80&w=48',
},
id: '1480815825133129736',
fullText:
'You know you’re coding SwiftUI when the tabbar hide/show animation is the hardest part in your AR app',
retweetCount: 0,
replyCount: 0,
favoriteCount: 12,
},
{
author: {
name: 'Dickie Bush 🚢',
screenName: 'dickiebush',
avatar:
'https://images.unsplash.com/photo-1649470241643-e601950cc489?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=48&ixid=MnwxfDB8MXxyYW5kb218MHx8fHx8fHx8MTY1MTY1Njk5NA&ixlib=rb-1.2.1&q=80&w=48',
},
id: '1480886826638487560',
fullText:
'RT @Nicolascole77: Digital Writing 101: \n\nStart small. Test ideas. Double-down and invest in the winners. Repeat.',
retweetCount: 2,
replyCount: 0,
favoriteCount: 0,
},
{
author: {
name: 'Kuba Jaroszewski',
screenName: 'pierd86',
avatar:
'https://images.unsplash.com/photo-1650315985351-d56d1a00f227?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=48&ixid=MnwxfDB8MXxyYW5kb218MHx8fHx8fHx8MTY1MTY1NzA5MA&ixlib=rb-1.2.1&q=80&w=48',
},
id: '1480884617838141443',
fullText:
'RT @Kjell_Kod: The worst thing about Rust is that it raises the bar for every other programming language.',
retweetCount: 3,
replyCount: 0,
favoriteCount: 0,
},
{
author: {
name: 'Applesfera',
screenName: 'applesfera',
avatar:
'https://images.unsplash.com/photo-1593114970899-95c26e8d8841?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=48&ixid=MnwxfDB8MXxyYW5kb218MHx8fHx8fHx8MTY1MTY1Njk5NQ&ixlib=rb-1.2.1&q=80&w=48',
},
id: '1480802469361950720',
fullText:
'Así de potentes serán las Apple Glass: usarán el cargador de 96W de los nuevos MacBook Pro, según Kuo https://t.co/j2dVay33il https://t.co/5ooOIuks9n',
retweetCount: 3,
replyCount: 1,
favoriteCount: 23,
},
{
author: {
name: 'mossegalapoma',
screenName: 'mossegalapoma',
avatar:
'https://images.unsplash.com/photo-1649898914298-244e49d9a8ac?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=48&ixid=MnwxfDB8MXxyYW5kb218MHx8fHx8fHx8MTY1MTY1NzA4OQ&ixlib=rb-1.2.1&q=80&w=48',
},
id: '1480885162665721862',
fullText:
'En breu enregistrem el programa 503 amb convidats parlant de Catalan DAO @catalandaoETH - seguiment en directe al nostre canal de Twitch i en format podcast https://t.co/eHj6alp2yp}',
retweetCount: 0,
replyCount: 0,
favoriteCount: 1,
},
{
author: {
name: 'Javier Rosano',
screenName: 'Javi_Rosano',
avatar:
'https://images.unsplash.com/photo-1650971831044-ccf2ac979a92?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=48&ixid=MnwxfDB8MXxyYW5kb218MHx8fHx8fHx8MTY1MTY1Njk5Ng&ixlib=rb-1.2.1&q=80&w=48',
},
id: '1480884199288721408',
fullText:
'@Imanolzuaznabar Había olvidado por qué quería bloquearte... 😂😂😂',
retweetCount: 0,
replyCount: 0,
favoriteCount: 0,
},
{
author: {
name: 'Antoni Bassas',
screenName: 'antonibassas',
avatar:
'https://images.unsplash.com/photo-1650139504331-9bc867a86b3b?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=48&ixid=MnwxfDB8MXxyYW5kb218MHx8fHx8fHx8MTY1MTY1NzA4Nw&ixlib=rb-1.2.1&q=80&w=48',
},
id: '1480844486158786560',
fullText:
"RT @AraBassas: 📹 L'anàlisi d'@antonibassas: \"La independència no és el projecte d'un home sol'' 👇\nhttps://t.co/QYBdrLOOLQ https://t.co/Ggmv…",
retweetCount: 5,
replyCount: 0,
favoriteCount: 0,
},
{
author: {
name: 'Rapha 🎄',
screenName: 'raphaellopesph',
avatar:
'https://images.unsplash.com/photo-1649051048669-1e86a8170ab9?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=48&ixid=MnwxfDB8MXxyYW5kb218MHx8fHx8fHx8MTY1MTY1Njk5OA&ixlib=rb-1.2.1&q=80&w=48',
},
id: '1480877054484692993',
fullText:
'RT @icongalleries: Lots of new #macOS icons today, including work from @raphaellopesph \n\nCheck out the icons at https://t.co/puMlrIlC6N',
retweetCount: 2,
replyCount: 0,
favoriteCount: 0,
},
{
author: {
name: 'Sidney Diongzon',
screenName: 'SidneyDiongzon',
avatar:
'https://images.unsplash.com/photo-1649731284194-d2ba81f16ba3?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=48&ixid=MnwxfDB8MXxyYW5kb218MHx8fHx8fHx8MTY1MTY1NzA4Ng&ixlib=rb-1.2.1&q=80&w=48',
},
id: '1480886466725167105',
fullText: 'Video coming out tomorrow instead. In the mean, gimme a 🖐',
retweetCount: 0,
replyCount: 1,
favoriteCount: 3,
},
{
author: {
name: 'Cris Busquets 🦊',
screenName: 'cbusquets',
avatar:
'https://images.unsplash.com/photo-1649827159600-237a092f95b5?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=48&ixid=MnwxfDB8MXxyYW5kb218MHx8fHx8fHx8MTY1MTY1Njk5OQ&ixlib=rb-1.2.1&q=80&w=48',
},
id: '1480827445775323138',
fullText:
'Hace unos 10 años que diseño profesionalmente.\n\nEn ocasiones me sigo encallando al definir el sistema tipográfico de un proyecto.\n\nY esto no me hace peor diseñadora 💁🏻♀️\n\n¿Qué se te atraganta a ti?',
retweetCount: 0,
replyCount: 2,
favoriteCount: 10,
},
{
author: {
name: 'Colin Cornaby',
screenName: 'colincornaby',
avatar:
'https://images.unsplash.com/photo-1651170022383-6eaa642ee2fa?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=48&ixid=MnwxfDB8MXxyYW5kb218MHx8fHx8fHx8MTY1MTY1NzA0NQ&ixlib=rb-1.2.1&q=80&w=48',
},
id: '1480795430405349377',
fullText:
'Update: I think this is due to "legacy" sort of game engine issues like main thread rendering and no double or triple buffering. Mostly the double or triple buffering. When aiming for 120 fps any little delay seems to cause a cascade of frame misses, which can happen often.',
retweetCount: 0,
replyCount: 1,
favoriteCount: 1,
},
{
author: {
name: 'Easlo',
screenName: 'heyeaslo',
avatar:
'https://images.unsplash.com/photo-1650035417643-250fa6ee5895?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=48&ixid=MnwxfDB8MXxyYW5kb218MHx8fHx8fHx8MTY1MTY1NzAwMQ&ixlib=rb-1.2.1&q=80&w=48',
},
id: '1480856110261157894',
fullText:
'Get access to 140+ Notion resources below!\nhttps://t.co/r3wkfOdu4S',
retweetCount: 2,
replyCount: 0,
favoriteCount: 35,
},
{
author: {
name: 'Cris Busquets 🦊',
screenName: 'cbusquets',
avatar:
'https://images.unsplash.com/photo-1649827159600-237a092f95b5?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=48&ixid=MnwxfDB8MXxyYW5kb218MHx8fHx8fHx8MTY1MTY1Njk5OQ&ixlib=rb-1.2.1&q=80&w=48',
},
id: '1480856144960761858',
fullText:
'RT @cbusquets: Sinceramente, cada vez me preocupa más la brecha tecnológica que estamos creando.\n\nUsar aplicaciones y webs es fácil para mí…',
retweetCount: 6,
replyCount: 0,
favoriteCount: 0,
},
{
author: {
name: 'Colin Cornaby',
screenName: 'colincornaby',
avatar:
'https://images.unsplash.com/photo-1651170022383-6eaa642ee2fa?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=48&ixid=MnwxfDB8MXxyYW5kb218MHx8fHx8fHx8MTY1MTY1NzA0NQ&ixlib=rb-1.2.1&q=80&w=48',
},
id: '1480800801794658304',
fullText:
'It puts a bit of a shadow over middleware like MoltenVk too. Tuning for M1 really has to be done through Metal. A lot of companies are sustaining their Mac development through tooling like MoltenVk. But results on Apple hardware may just be ok.',
retweetCount: 0,
replyCount: 1,
favoriteCount: 0,
},
{
author: {
name: 'Tyler Hedrick',
screenName: 'tyler_hedrick',
avatar:
'https://images.unsplash.com/photo-1650871604168-2e8b22829db8?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=48&ixid=MnwxfDB8MXxyYW5kb218MHx8fHx8fHx8MTY1MTY1NzAwMg&ixlib=rb-1.2.1&q=80&w=48',
},
id: '1480581024241258500',
fullText:
'Wordle 205 5/6\n\n🟨🟨⬛⬛🟩\n⬛🟨⬛🟩🟩\n⬛⬛🟩🟩🟩\n⬛⬛⬛⬛⬛\n🟩🟩🟩🟩🟩',
retweetCount: 0,
replyCount: 1,
favoriteCount: 2,
},
{
author: {
name: '@levelsio',
screenName: 'levelsio',
avatar:
'https://images.unsplash.com/photo-1650964858223-f4e7f5279f48?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=48&ixid=MnwxfDB8MXxyYW5kb218MHx8fHx8fHx8MTY1MTY1Njk4Mg&ixlib=rb-1.2.1&q=80&w=48',
},
id: '1480807787336650752',
fullText:
'🏎 Less than 3 hours from feature request to implemented by @derrickreimer, indie founder of @savvycal\n\n📆 I needed single-use calendar links but based on already existing links I made b4, because ppl were sharing the link to others w/out paying for https://t.co/PL9rryfQ7X https://t.co/29JqkB9nDQ',
retweetCount: 1,
replyCount: 3,
favoriteCount: 84,
},
{
author: {
name: 'Itnig',
screenName: 'itnig',
avatar:
'https://images.unsplash.com/photo-1650035418821-77ee35531a6b?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=48&ixid=MnwxfDB8MXxyYW5kb218MHx8fHx8fHx8MTY1MTY1NzA4NQ&ixlib=rb-1.2.1&q=80&w=48',
},
id: '1480834735383273474',
fullText:
'Internxt, competing against Google Drive and Dropbox\n\nCheck our weekly newsletter:\nhttps://t.co/Jd9yYf2d8L https://t.co/QZzXnOwgWu',
retweetCount: 0,
replyCount: 1,
favoriteCount: 7,
},
{
author: {
name: 'Gergely Orosz',
screenName: 'GergelyOrosz',
avatar:
'https://images.unsplash.com/photo-1650122597661-ceccf6d50692?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=48&ixid=MnwxfDB8MXxyYW5kb218MHx8fHx8fHx8MTY1MTY1Njk4NQ&ixlib=rb-1.2.1&q=80&w=48',
},
id: '1480818823448207363',
fullText:
"When you're looking at companies with great engineering cultures, look for those that have parallel career tracks between eng management and engineering. And examples of actual moves.\n\nLike at @Shopify. Two moves to opposite tracks at the same time. 👏 @MikkoH & @stephanleroux https://t.co/nJgpiZvCwu",
retweetCount: 8,
replyCount: 4,
favoriteCount: 101,
},
{
author: {
name: 'Jordi Sellas Ferrés',
screenName: 'jordisellas',
avatar:
'https://images.unsplash.com/photo-1649320099555-9e436f69db29?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=48&ixid=MnwxfDB8MXxyYW5kb218MHx8fHx8fHx8MTY1MTY1NzAwNA&ixlib=rb-1.2.1&q=80&w=48',
},
id: '1480804792230453255',
fullText:
'RT @artsinhealthfdn: #ArtsAgainstCovid TALKS 🎥\n\n"Després de 200 anys parlant d\'objectes, potser toca parlar de subjectes, i això obliga als…',
retweetCount: 3,
replyCount: 0,
favoriteCount: 0,
},
{
author: {
name: 'Nicolas Cole',
screenName: 'Nicolascole77',
avatar:
'https://images.unsplash.com/photo-1649452814987-ece76376762a?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=48&ixid=MnwxfDB8MXxyYW5kb218MHx8fHx8fHx8MTY1MTY1NzA4Mw&ixlib=rb-1.2.1&q=80&w=48',
},
id: '1480714108253048834',
fullText:
'Digital Writing 101: \n\nStart small. Test ideas. Double-down and invest in the winners. Repeat.',
retweetCount: 2,
replyCount: 2,
favoriteCount: 34,
},
{
author: {
name: 'Jordi Sellas Ferrés',
screenName: 'jordisellas',
avatar:
'https://images.unsplash.com/photo-1649320099555-9e436f69db29?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=48&ixid=MnwxfDB8MXxyYW5kb218MHx8fHx8fHx8MTY1MTY1NzAwNA&ixlib=rb-1.2.1&q=80&w=48',
},
id: '1480879213729222663',
fullText:
"RT @elmondahir: 👶🏻 Ja és aquí el número 21!\n\nDedicat a la INFÀNCIA, hi trobareu articles d'@emparmoliner @MiquiOtero @AlexGutierrezM @atril…",
retweetCount: 8,
replyCount: 0,
favoriteCount: 0,
},
{
author: {
name: 'puntCAT',
screenName: 'puntCAT',
avatar:
'https://images.unsplash.com/photo-1649510998230-fda6188271fe?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=48&ixid=MnwxfDB8MXxyYW5kb218MHx8fHx8fHx8MTY1MTY1NzAwNQ&ixlib=rb-1.2.1&q=80&w=48',
},
id: '1480854330374868993',
fullText:
"Les @youngitgirls formaran part de l'ecosistema creatiu del #Canòdrom de Barcelona.\nA més d'aquesta associació, que impulsa el talent digital jove entre les noies, hi ha 12 projectes més que l'Ateneu d'Innovació Digital incorpora pel curs vinent.\n\n👇\nhttps://t.co/1qFbk4oR1m",
retweetCount: 0,
replyCount: 0,
favoriteCount: 5,
},
{
author: {
name: 'Un Sr de Barcelona',
screenName: 'UnSrdeBarcelona',
avatar:
'https://images.unsplash.com/photo-1650357519740-c888919621f8?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=48&ixid=MnwxfDB8MXxyYW5kb218MHx8fHx8fHx8MTY1MTY1NzA4Mg&ixlib=rb-1.2.1&q=80&w=48',
},
id: '1478406590730547203',
fullText:
'Hola.\n\nMe llamo Elizabeth Holmes.\n\nProbablemente me quedan pocos días antes de entrar en la cárcel. Por mucho tiempo.\n\n¿Mi crimen?\nHaber demostrado que Silicon Valley, Wall Street y toda la prensa económica no se enteran. Vamos, que no tienen ni puta idea.\n\n¿Te lo explico? https://t.co/Dk0ZUnL5pP',
retweetCount: 3800,
replyCount: 138,
favoriteCount: 9052,
},
{
author: {
name: 'Samuel Molina',
screenName: 'FuKuy',
avatar:
'https://images.unsplash.com/photo-1651264042772-23891c614270?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=48&ixid=MnwxfDB8MXxyYW5kb218MHx8fHx8fHx8MTY1MTY1Njk4MA&ixlib=rb-1.2.1&q=80&w=48',
},
id: '1480840983914946560',
fullText:
"RT @IK1T: Happy #PortfolioDay !\nDear friends ❤️ I'm Fumio, a Lighting Artist 💡 currently working on Star Citizen.\nLooking forward to meetin…",
retweetCount: 19,
replyCount: 0,
favoriteCount: 0,
},
{
author: {
name: 'I Am Devloper',
screenName: 'iamdevloper',
avatar:
'https://images.unsplash.com/photo-1651354239553-0998040fa5ca?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=48&ixid=MnwxfDB8MXxyYW5kb218MHx8fHx8fHx8MTY1MTY1Njk5MQ&ixlib=rb-1.2.1&q=80&w=48',
},
id: '1480861250678575104',
fullText:
"that thing you've been putting off will take around 15 minutes to complete",
retweetCount: 46,
replyCount: 14,
favoriteCount: 358,
},
{
author: {
name: 'Gergely Orosz',
screenName: 'GergelyOrosz',
avatar:
'https://images.unsplash.com/photo-1650122597661-ceccf6d50692?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=48&ixid=MnwxfDB8MXxyYW5kb218MHx8fHx8fHx8MTY1MTY1Njk4NQ&ixlib=rb-1.2.1&q=80&w=48',
},
id: '1480855281655586817',
fullText:
"Want to get better at writing? Here's what I do:\n\nI start writing those drafts when the ideas come.\n\nTweak them as I go.\n\nI looked back at all the posts I never ended publishing on my blog. Here's some from the last 12 months, many of these a few thousand words in: https://t.co/CFxLlZWxjp",
retweetCount: 1,
replyCount: 7,
favoriteCount: 49,
},
{
author: {
name: 'Aeon+Psyche',
screenName: 'aeonmag',
avatar:
'https://images.unsplash.com/photo-1650099667209-d0e0cc6bd27f?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=48&ixid=MnwxfDB8MXxyYW5kb218MHx8fHx8fHx8MTY1MTY1NzAwNg&ixlib=rb-1.2.1&q=80&w=48',
},
id: '1480872218360004610',
fullText:
'Paraconsistent logics find structure in our inconsistent world https://t.co/aAmusRlUzt',
retweetCount: 1,
replyCount: 0,
favoriteCount: 1,
},
{
author: {
name: 'Ara Bassas',
screenName: 'AraBassas',
avatar:
'https://images.unsplash.com/photo-1650448211778-da533fd39266?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=48&ixid=MnwxfDB8MXxyYW5kb218MHx8fHx8fHx8MTY1MTY1NzA4MA&ixlib=rb-1.2.1&q=80&w=48',
},
id: '1480841869001113600',
fullText:
"📹 L'anàlisi d'@antonibassas: \"La independència no és el projecte d'un home sol'' 👇\nhttps://t.co/QYBdrLOOLQ https://t.co/GgmvzQ3zhy",
retweetCount: 5,
replyCount: 4,
favoriteCount: 12,
},
{
author: {
name: 'Aeon+Psyche',
screenName: 'aeonmag',
avatar:
'https://images.unsplash.com/photo-1650099667209-d0e0cc6bd27f?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=48&ixid=MnwxfDB8MXxyYW5kb218MHx8fHx8fHx8MTY1MTY1NzAwNg&ixlib=rb-1.2.1&q=80&w=48',
},
id: '1480887302893322242',
fullText:
'Paraconsistent logics help us find structure in the noise of a world messy with inconsistencies https://t.co/aAmusRlUzt',
retweetCount: 1,
replyCount: 0,
favoriteCount: 3,
},
{
author: {
name: 'Pedro',
screenName: 'pepicrft',
avatar:
'https://images.unsplash.com/photo-1649542053026-6b59f8723c1a?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=48&ixid=MnwxfDB8MXxyYW5kb218MHx8fHx8fHx8MTY1MTY1NzAwOA&ixlib=rb-1.2.1&q=80&w=48',
},
id: '1480857038804586497',
fullText:
'I find very annoying the power Spanish media has to discredit topics some politicians bring up for debate like “why the reduction of meat consumption is good for the environment”. If we can’t talk about fighting climate change, do we prefer to move on and ignore the issue?',
retweetCount: 0,
replyCount: 1,
favoriteCount: 4,
},
{
author: {
name: 'ganyet.eth',
screenName: 'ganyet',
avatar:
'https://images.unsplash.com/photo-1650476217339-6b7e08b844a7?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=48&ixid=MnwxfDB8MXxyYW5kb218MHx8fHx8fHx8MTY1MTY1NzA3OQ&ixlib=rb-1.2.1&q=80&w=48',
},
id: '1480816503138177024',
fullText:
'Ens hem trobat amb el @jordisellas al #CatVers fa una estona. https://t.co/pMo97qa2xm https://t.co/1bHfEdoeDQ',
retweetCount: 0,
replyCount: 2,
favoriteCount: 7,
},
{
author: {
name: 'Imanol Zuaznabar',
screenName: 'Imanolzuaznabar',
avatar:
'https://images.unsplash.com/photo-1650502446427-0307c61635be?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=48&ixid=MnwxfDB8MXxyYW5kb218MHx8fHx8fHx8MTY1MTY1NzAwOQ&ixlib=rb-1.2.1&q=80&w=48',
},
id: '1480574196396744708',
fullText:
'El antes y el después de una fotografía de la Vía Láctea en media hora de edición. https://t.co/RWDRdPVfNg',
retweetCount: 182,
replyCount: 29,
favoriteCount: 1478,
},
{
author: {
name: 'Victor Blackwell CNN',
screenName: 'VictorBlackwell',
avatar:
'https://images.unsplash.com/photo-1649019612111-2f919bb7fd61?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=48&ixid=MnwxfDB8MXxyYW5kb218MHx8fHx8fHx8MTY1MTY1NzA3OA&ixlib=rb-1.2.1&q=80&w=48',
},
id: '1480653173224321030',
fullText:
'Poet Maya Angelou becomes the first Black woman to appear on a US quarter https://t.co/6MI768E6kV',
retweetCount: 10321,
replyCount: 732,
favoriteCount: 73010,
},
{
author: {
name: 'Paul Orlando',
screenName: 'porlando',
avatar:
'https://images.unsplash.com/photo-1649741622889-f46774607f66?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=48&ixid=MnwxfDB8MXxyYW5kb218MHx8fHx8fHx8MTY1MTY1NzAxMQ&ixlib=rb-1.2.1&q=80&w=48',
},
id: '1480698332510969860',
fullText:
"I was on the @changelog podcast talking about complex systems, Goodhart's Law, autonomous vehicles, A Pattern Language, and more. Have a listen: https://t.co/y5uORofMWt",
retweetCount: 0,
replyCount: 1,
favoriteCount: 0,
},
{
author: {
name: 'Directo al paladar',
screenName: 'directopaladar',
avatar:
'https://images.unsplash.com/photo-1651006450895-2b8509422212?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=48&ixid=MnwxfDB8MXxyYW5kb218MHx8fHx8fHx8MTY1MTY1NzAyMg&ixlib=rb-1.2.1&q=80&w=48',
},
id: '1480859549330554884',
fullText:
'Lubina con calabacín, ají dulce y tomates cherry al horno, receta ligera para disfrutar https://t.co/0wcU8jmaXM https://t.co/W14VI5C3h7',
retweetCount: 1,
replyCount: 0,
favoriteCount: 1,
},
{
author: {
name: 'Niall McCormack',
screenName: 'ndmccormack',
avatar:
'https://images.unsplash.com/photo-1649624964799-609681c92d1b?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=48&ixid=MnwxfDB8MXxyYW5kb218MHx8fHx8fHx8MTY1MTY1NzAxMw&ixlib=rb-1.2.1&q=80&w=48',
},
id: '1480825783086206981',
fullText:
'RT @fdesbml: Hand-knit jewelry by Nora Folk | She uses a mixed technique of weaving, knitting, braiding and knotting fine nylon microfilame…',
retweetCount: 901,
replyCount: 0,
favoriteCount: 0,
},
{
author: {
name: 'James Meickle',
screenName: 'jmeickle',
avatar:
'https://images.unsplash.com/photo-1649960234288-7049f6020779?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=48&ixid=MnwxfDB8MXxyYW5kb218MHx8fHx8fHx8MTY1MTY1NzA3Ng&ixlib=rb-1.2.1&q=80&w=48',
},
id: '1480540773036793862',
fullText:
"Me in 2005: computers aren't magic, they're just machines that do exactly what you tell them\n\nMe in 2022 exhaling an enormous vape hit: SO, the first thing to know about computers is, you never give one your true name",
retweetCount: 2431,
replyCount: 43,
favoriteCount: 17504,
},
{
author: {
name: 'Makers.cat',
screenName: 'makers_cat',
avatar:
'https://images.unsplash.com/photo-1649682716735-b1ba94eda742?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=48&ixid=MnwxfDB8MXxyYW5kb218MHx8fHx8fHx8MTY1MTY1NzAxNQ&ixlib=rb-1.2.1&q=80&w=48',
},
id: '1480826431362019328',
fullText:
'RT @palmerabollo: Las impresoras térmicas básicas solo pintan puntos negros. Pensé que tendría que hacer el "dithering" de la imagen, pero…',
retweetCount: 7,
replyCount: 0,
favoriteCount: 0,
},
{
author: {
name: 'Guido',
screenName: 'palmerabollo',
avatar:
'https://images.unsplash.com/photo-1649877845039-2f1f5e524b91?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=48&ixid=MnwxfDB8MXxyYW5kb218MHx8fHx8fHx8MTY1MTY1NzA3NQ&ixlib=rb-1.2.1&q=80&w=48',
},
id: '1480599758641287169',
fullText:
'Las impresoras térmicas básicas solo pintan puntos negros. Pensé que tendría que hacer el "dithering" de la imagen, pero lo hace la librería python "thermalprinter" https://t.co/TI5OzzF787. Floyd y Steinberg eran unos genios. Cabalgamos a hombros de gigantes. https://t.co/rPubwSzrYs',
retweetCount: 7,
replyCount: 1,
favoriteCount: 165,
},
{
author: {
name: 'Chus Naharro',
screenName: 'chusnarrolo',
avatar:
'https://images.unsplash.com/photo-1649217707439-eb9ca4e9c62f?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=48&ixid=MnwxfDB8MXxyYW5kb218MHx8fHx8fHx8MTY1MTY1NzAxNg&ixlib=rb-1.2.1&q=80&w=48',
},
id: '1480872099141103616',
fullText:
'RT @sunne: Necesito una lista de podcast grabados por mujeres , de la zona de Barcelona. Me da igual el idioma.\n\nMe ayudáis? Yo conozco alg…',
retweetCount: 8,
replyCount: 0,
favoriteCount: 0,
},
{
author: {
name: 'Justin Moore | Sponsorship Coach',
screenName: 'justinmooretfam',
avatar:
'https://images.unsplash.com/photo-1650213986462-1804543441c2?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=48&ixid=MnwxfDB8MXxyYW5kb218MHx8fHx8fHx8MTY1MTY1Njk3OA&ixlib=rb-1.2.1&q=80&w=48',
},
id: '1480800006412009472',
fullText: 'Opp!',
retweetCount: 0,
replyCount: 0,
favoriteCount: 1,
},
{
author: {
name: 'Directo al paladar',
screenName: 'directopaladar',
avatar:
'https://images.unsplash.com/photo-1651006450895-2b8509422212?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=48&ixid=MnwxfDB8MXxyYW5kb218MHx8fHx8fHx8MTY1MTY1NzAyMg&ixlib=rb-1.2.1&q=80&w=48',
},
id: '1480829354150092801',
fullText:
'Rebajas en El Corte Inglés: robots de cocina, batidoras, cafeteras y más ofertas en pequeño electrodoméstico de cocina https://t.co/ZT4gBTcnzs https://t.co/oH0oiIt5kz',
retweetCount: 0,
replyCount: 0,
favoriteCount: 2,
},
{
author: {
name: 'Farhan is hiring engineers',
screenName: 'fnthawar',
avatar:
'https://images.unsplash.com/photo-1651522003733-647782d87365?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=48&ixid=MnwxfDB8MXxyYW5kb218MHx8fHx8fHx8MTY1MTY1NzAxNw&ixlib=rb-1.2.1&q=80&w=48',
},
id: '1480867384751763457',
fullText: '🔥',
retweetCount: 0,
replyCount: 0,
favoriteCount: 4,
},
{
author: {
name: 'Pranshu Bahadur',
screenName: 'PranshuBahadur',
avatar:
'https://images.unsplash.com/photo-1649896867298-3f991eeb6ca2?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=48&ixid=MnwxfDB8MXxyYW5kb218MHx8fHx8fHx8MTY1MTY1NzA3Mw&ixlib=rb-1.2.1&q=80&w=48',
},
id: '1480807117325889536',
fullText:
'Hey everyone! Ever wanted to "find the needle in the haystack"?\n\nCheck out @CShorten30\'s new video about the haystack vector search engine by @SeMI_tech!\n\nFor real though, this is really cool stuff 🤓',
retweetCount: 2,
replyCount: 2,
favoriteCount: 2,
},
{
author: {
name: 'Antonio Ortiz',
screenName: 'antonello',
avatar:
'https://images.unsplash.com/photo-1649437637540-2b9f980399db?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=48&ixid=MnwxfDB8MXxyYW5kb218MHx8fHx8fHx8MTY1MTY1NzAxOQ&ixlib=rb-1.2.1&q=80&w=48',
},
id: '1480849157287989249',
fullText:
'Me reafirmo en cómo creo que podemos afrontar esta variante: asumir que casi todos la vamos a pillar, protegiendo sólo a los muy vulnerables; asumir que atención primeria no puede asumir esto ni con refuerzos, descargar procesos a la población. Y confiar en vacunas y anticuerpos',
retweetCount: 15,
replyCount: 3,
favoriteCount: 26,
},
{
author: {
name: 'EL PAÍS',
screenName: 'el_pais',
avatar:
'https://images.unsplash.com/photo-1649600748105-871cb9b4631e?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=48&ixid=MnwxfDB8MXxyYW5kb218MHx8fHx8fHx8MTY1MTY1NzA3Mg&ixlib=rb-1.2.1&q=80&w=48',
},
id: '1480846818481221632',
fullText:
'🔴ÚLTIMA HORA | La OMS calcula que más del 50% de la población europea se contagiará de ómicron en las próximas 6 a 8 semanas https://t.co/x9xC3IWPMy https://t.co/WAn95IhYx3',
retweetCount: 636,
replyCount: 117,
favoriteCount: 949,
},
{
author: {
name: 'Glenn McComb',
screenName: 'lenymo',
avatar:
'https://images.unsplash.com/photo-1649482409426-f0813f293610?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=48&ixid=MnwxfDB8MXxyYW5kb218MHx8fHx8fHx8MTY1MTY1NzAyMA&ixlib=rb-1.2.1&q=80&w=48',
},
id: '1480812010774294529',
fullText:
'Retrogram is now accepting “yeet”. Great game, thanks @twolivesleft and @alittlecj.',
retweetCount: 1,
replyCount: 2,
favoriteCount: 3,
},
{
author: {
name: 'Cris Busquets 🦊',
screenName: 'cbusquets',
avatar:
'https://images.unsplash.com/photo-1649827159600-237a092f95b5?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=48&ixid=MnwxfDB8MXxyYW5kb218MHx8fHx8fHx8MTY1MTY1Njk5OQ&ixlib=rb-1.2.1&q=80&w=48',
},
id: '1480857415721660419',
fullText:
'RT @cbusquets: Creo que cada día se genera más contenido sobre diseño en español y esto me hace feliz.\n\nConfío en que algo habrá contribuid…',
retweetCount: 1,
replyCount: 0,
favoriteCount: 0,
},
{
author: {
name: 'Oriol Capdevila',
screenName: 'urikpd',
avatar:
'https://images.unsplash.com/photo-1649001241772-a0dfc60aa1d4?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=48&ixid=MnwxfDB8MXxyYW5kb218MHx8fHx8fHx8MTY1MTY1NzA3MQ&ixlib=rb-1.2.1&q=80&w=48',
},
id: '1480843919659257857',
fullText:
'RT @crismiquelg: mi único propósito para 2022 es dejar de despedirme con la mano en las videollamadas como si fuera idiota',
retweetCount: 2,
replyCount: 0,
favoriteCount: 0,
},
{
author: {
name: 'Tyler Hedrick',
screenName: 'tyler_hedrick',
avatar:
'https://images.unsplash.com/photo-1650871604168-2e8b22829db8?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=48&ixid=MnwxfDB8MXxyYW5kb218MHx8fHx8fHx8MTY1MTY1NzAwMg&ixlib=rb-1.2.1&q=80&w=48',
},
id: '1479133518189924352',
fullText:
'Alright I’m gonna be one of those people now that shares his Wordle each day \n\nWordle 201 4/6\n\n⬛⬛⬛🟨⬛\n⬛🟨⬛🟩⬛\n🟩🟨⬛🟨⬛\n🟩🟩🟩🟩🟩',
retweetCount: 0,
replyCount: 3,
favoriteCount: 9,
},
{
author: {
name: 'Jordi Sellas Ferrés',
screenName: 'jordisellas',
avatar:
'https://images.unsplash.com/photo-1649320099555-9e436f69db29?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=48&ixid=MnwxfDB8MXxyYW5kb218MHx8fHx8fHx8MTY1MTY1NzAwNA&ixlib=rb-1.2.1&q=80&w=48',
},
id: '1480820257937936390',
fullText:
'Passejada digital matinal amb en Ganyet. Coses que fem i que explicarem demà a la ràdio.',
retweetCount: 0,
replyCount: 2,
favoriteCount: 5,
},
{
author: {
name: 'Aeon+Psyche',
screenName: 'aeonmag',
avatar:
'https://images.unsplash.com/photo-1650099667209-d0e0cc6bd27f?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=48&ixid=MnwxfDB8MXxyYW5kb218MHx8fHx8fHx8MTY1MTY1NzAwNg&ixlib=rb-1.2.1&q=80&w=48',
},
id: '1480879690801987585',
fullText:
'Tension, bureaucracy and deep humanity define life aboard a refugee rescue ship. @guardian on Aeon Video: https://t.co/qrtEf27Omh',
retweetCount: 0,
replyCount: 0,
favoriteCount: 0,
},
{
author: {
name: 'puntCAT',
screenName: 'puntCAT',
avatar:
'https://images.unsplash.com/photo-1649510998230-fda6188271fe?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=48&ixid=MnwxfDB8MXxyYW5kb218MHx8fHx8fHx8MTY1MTY1NzAwNQ&ixlib=rb-1.2.1&q=80&w=48',
},
id: '1480857176117809159',
fullText:
"RT @youngitgirls: 🚀 Arranquem l'any amb noves aventures i moltes ganes de continuar treballant \n\n@CanodromBCN",
retweetCount: 3,
replyCount: 0,
favoriteCount: 0,
},
{
author: {
name: 'Smashing Magazine',
screenName: 'smashingmag',
avatar:
'https://images.unsplash.com/photo-1649562231804-f1bfadc450d2?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=48&ixid=MnwxfDB8MXxyYW5kb218MHx8fHx8fHx8MTY1MTY1NzA5Mw&ixlib=rb-1.2.1&q=80&w=48',
},
id: '1480824523247296514',
fullText:
"RT @jmeickle: Me in 2005: computers aren't magic, they're just machines that do exactly what you tell them\n\nMe in 2022 exhaling an enormous…",
retweetCount: 2431,
replyCount: 0,
favoriteCount: 0,
},
{
author: {
name: 'Applesfera',
screenName: 'applesfera',
avatar:
'https://images.unsplash.com/photo-1593114970899-95c26e8d8841?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=48&ixid=MnwxfDB8MXxyYW5kb218MHx8fHx8fHx8MTY1MTY1Njk5NQ&ixlib=rb-1.2.1&q=80&w=48',
},
id: '1480810888932306948',
fullText:
'Private Relay qué es y cómo podemos utilizarlo para navegar de forma más segura y privada https://t.co/NEpltAYwyA https://t.co/r193iBDOar',
retweetCount: 5,
replyCount: 0,
favoriteCount: 5,
},
{
author: {
name: 'Directo al paladar',
screenName: 'directopaladar',
avatar:
'https://images.unsplash.com/photo-1651006450895-2b8509422212?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=48&ixid=MnwxfDB8MXxyYW5kb218MHx8fHx8fHx8MTY1MTY1NzAyMg&ixlib=rb-1.2.1&q=80&w=48',
},
id: '1480799151659044866',
fullText:
'Así es el banco italiano donde el queso parmesano sirve como aval bancario desde la II Guerra Mundial https://t.co/6niGp8CfiM https://t.co/lqWyYN0ugb',
retweetCount: 2,
replyCount: 0,
favoriteCount: 14,
},
{
author: {
name: 'Aitor Goyenechea 💭',
screenName: 'AitorGoy',
avatar:
'https://images.unsplash.com/photo-1650269717251-d3e5249a8bc8?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=48&ixid=MnwxfDB8MXxyYW5kb218MHx8fHx8fHx8MTY1MTY1NzA2OQ&ixlib=rb-1.2.1&q=80&w=48',
},
id: '1480834634091008007',
fullText: 'Esto',
retweetCount: 1,
replyCount: 1,
favoriteCount: 2,
},
{
author: {
name: 'Dean Jackson 🦕',
screenName: 'grorg',
avatar:
'https://images.unsplash.com/photo-1589049216803-a40738dfef85?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=48&ixid=MnwxfDB8MXxyYW5kb218MHx8fHx8fHx8MTY1MTY1NzA2OA&ixlib=rb-1.2.1&q=80&w=48',
},
id: '1478178339747602432',
fullText:
'@twolivesleft retrogram is telling me that “yeet” is not a word! the youth will be disappointed.',
retweetCount: 0,
replyCount: 3,
favoriteCount: 1,
},
{
author: {
name: 'Simon Nickel',
screenName: 'simonnickel',
avatar:
'https://images.unsplash.com/photo-1649869140207-53a4722ce7d8?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=48&ixid=MnwxfDB8MXxyYW5kb218MHx8fHx8fHx8MTY1MTY1NzA2Ng&ixlib=rb-1.2.1&q=80&w=48',
},
id: '1480823771200110592',
fullText:
'Anyone ever had the App Store Connect app actually open the review when you get a notification? Never worked for me.\n\nAlso: Layout is hard 🙄 https://t.co/m1PBl71iOH',
retweetCount: 0,
replyCount: 5,
favoriteCount: 5,
},
{
author: {
name: 'Santiago Alonso 💬',
screenName: 'salonsoweb',
avatar:
'https://images.unsplash.com/photo-1649423515812-5d7f4adb170c?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=48&ixid=MnwxfDB8MXxyYW5kb218MHx8fHx8fHx8MTY1MTY1NzAyMw&ixlib=rb-1.2.1&q=80&w=48',
},
id: '1480793786225676289',
fullText: 'Primera charleta del año! 🥳🤸♂️🥳🤸♂️🥳🤸♂️🥳🤸♂️ 👇🏻👇🏻',
retweetCount: 3,
replyCount: 0,
favoriteCount: 6,
},
{
author: {
name: 'Arts in Health International Foundation',
screenName: 'artsinhealthfdn',
avatar:
'https://images.unsplash.com/photo-1650633904515-af9f8caa8582?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=48&ixid=MnwxfDB8MXxyYW5kb218MHx8fHx8fHx8MTY1MTY1NzA2NQ&ixlib=rb-1.2.1&q=80&w=48',
},
id: '1480497586595414019',
fullText:
'#ArtsAgainstCovid TALKS 🎥\n\n"Després de 200 anys parlant d\'objectes, potser toca parlar de subjectes, i això obliga als museus a fer un canvi copernicà"\n\nPepe Serra, director de @MuseuNac_Cat, reflexiona sobre el paper actual dels museus. \nMira-ho aquí 👉 https://t.co/3prlEnWExp',
retweetCount: 3,
replyCount: 0,
favoriteCount: 8,
},
{
author: {
name: 'Cris Busquets 🦊',
screenName: 'cbusquets',
avatar:
'https://images.unsplash.com/photo-1649827159600-237a092f95b5?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=48&ixid=MnwxfDB8MXxyYW5kb218MHx8fHx8fHx8MTY1MTY1Njk5OQ&ixlib=rb-1.2.1&q=80&w=48',
},
id: '1480493695560568834',
fullText:
'Sinceramente, cada vez me preocupa más la brecha tecnológica que estamos creando.\n\nUsar aplicaciones y webs es fácil para mí, pero constantemente veo personas a quienes les cuesta entender el flujo / iconos / botones.\n\nMe da la impresión de que es porque hacemos user tests...',
retweetCount: 6,
replyCount: 8,
favoriteCount: 57,
},
{
author: {
name: '📸 𝙼𝚊𝚞𝚛𝚘 𝙵𝚞𝚎𝚗𝚝𝚎𝚜 🤳 fotomaf ⭐️',
screenName: 'Fotomaf',
avatar:
'https://images.unsplash.com/photo-1649003175381-2df7e82ef6f6?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=48&ixid=MnwxfDB8MXxyYW5kb218MHx8fHx8fHx8MTY1MTY1NzAyNA&ixlib=rb-1.2.1&q=80&w=48',
},
id: '1480850406892838917',
fullText:
'RT @antonello: Me reafirmo en cómo creo que podemos afrontar esta variante: asumir que casi todos la vamos a pillar, protegiendo sólo a los…',
retweetCount: 15,
replyCount: 0,
favoriteCount: 0,
},
{
author: {
name: 'Ben Scheirman',
screenName: 'subdigital',
avatar:
'https://images.unsplash.com/photo-1651419935061-c7f954d37446?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=48&ixid=MnwxfDB8MXxyYW5kb218MHx8fHx8fHx8MTY1MTY1NzA2NA&ixlib=rb-1.2.1&q=80&w=48',
},
id: '1480882339005747204',
fullText:
'RT @VictorBlackwell: Poet Maya Angelou becomes the first Black woman to appear on a US quarter https://t.co/6MI768E6kV',
retweetCount: 10321,
replyCount: 0,
favoriteCount: 0,
},
{
author: {
name: "El Món d'Ahir",
screenName: 'elmondahir',
avatar:
'https://images.unsplash.com/photo-1649005200470-3ac8cc79a7bc?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=48&ixid=MnwxfDB8MXxyYW5kb218MHx8fHx8fHx8MTY1MTY1NzAyNg&ixlib=rb-1.2.1&q=80&w=48',
},
id: '1480869573796798464',
fullText:
"👶🏻 Ja és aquí el número 21!\n\nDedicat a la INFÀNCIA, hi trobareu articles d'@emparmoliner @MiquiOtero @AlexGutierrezM @atrillas @Guillemmartnez @_mrspremise @RaquelRicart1 i @XavierAntich, entre d'altres. \n\nJA A LA VENDA a https://t.co/uRF4jx4mpa i molt aviat a llibreries! https://t.co/vxdylJJGaq",
retweetCount: 8,
replyCount: 1,
favoriteCount: 7,
},
{
author: {
name: 'Elvira',
screenName: 'ElviraBurchik',
avatar:
'https://images.unsplash.com/photo-1649171170932-c2dfd27321b4?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=48&ixid=MnwxfDB8MXxyYW5kb218MHx8fHx8fHx8MTY1MTY1NzA2Mg&ixlib=rb-1.2.1&q=80&w=48',
},
id: '1480822722838077441',
fullText:
'RT @Sommer: I love working with people who are friendly. Who say “thank you” or cheer you on or say “good job.” These things may seem small…',
retweetCount: 94,
replyCount: 0,
favoriteCount: 0,
},
{
author: {
name: 'Webificando Podcast',
screenName: 'Webificandop',
avatar:
'https://images.unsplash.com/photo-1650790362837-a450407ceb1c?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=48&ixid=MnwxfDB8MXxyYW5kb218MHx8fHx8fHx8MTY1MTY1NzAyNw&ixlib=rb-1.2.1&q=80&w=48',
},
id: '1480792377065365511',
fullText:
'Holis! 👋\n\nHoy tendremos al gran @salonsoweb para hablar de sus proyectos, automatizaciones y más cosas 🍿🍿\n\n¿Integromat o Zapier? ¿Hay alguna alternativa a la altura? 🤔\n\n🕕 18:00 CET\n\nEn Twitch 👇\nhttps://t.co/tVO9irSqpj',
retweetCount: 1,
replyCount: 0,
favoriteCount: 3,
},
{
author: {
name: 'Applesfera',
screenName: 'applesfera',
avatar:
'https://images.unsplash.com/photo-1593114970899-95c26e8d8841?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=48&ixid=MnwxfDB8MXxyYW5kb218MHx8fHx8fHx8MTY1MTY1Njk5NQ&ixlib=rb-1.2.1&q=80&w=48',
},
id: '1480804355263631360',
fullText:
'Por qué Apple no adopta RCS en iMessage a pesar de las polémicas declaraciones de un responsable de Android https://t.co/OWVa6gle5k https://t.co/Wrvmi0S3wh',
retweetCount: 5,
replyCount: 1,
favoriteCount: 8,
},
{
author: {
name: 'DAZN España',
screenName: 'DAZN_ES',
avatar:
'https://images.unsplash.com/photo-1650400759211-2d8ae616b006?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=48&ixid=MnwxfDB8MXxyYW5kb218MHx8fHx8fHx8MTY1MTY1NzA2MQ&ixlib=rb-1.2.1&q=80&w=48',
},
id: '1480872115276496904',
fullText:
'El recital de adelantamientos que Hamilton nos regaló en Brasil 🔥\n\n📽️: @F1\nhttps://t.co/d2lSNmz1Qq',
retweetCount: 17,
replyCount: 3,
favoriteCount: 151,
},
{
author: {
name: 'Envato Tuts+',
screenName: 'tutsplus',
avatar:
'https://images.unsplash.com/photo-1650542914594-033761afbd86?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=48&ixid=MnwxfDB8MXxyYW5kb218MHx8fHx8fHx8MTY1MTY1NzAyOQ&ixlib=rb-1.2.1&q=80&w=48',
},
id: '1480885466668974083',
fullText:
'Losing data from an external hard drive can send you into a panic. But before losing hope, READ THIS: ➡️ \n\nThose lost files can be recovered. Head to @tutsplus to learn four ways to restore data from an external hard drive for #Mac. Let’s begin: https://t.co/xIeOtrGwXL https://t.co/F3R1fA2u85',
retweetCount: 0,
replyCount: 0,
favoriteCount: 2,
},
{
author: {
name: 'Connor Shorten',
screenName: 'CShorten30',
avatar:
'https://images.unsplash.com/photo-1649711992982-092a8e53e39c?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=48&ixid=MnwxfDB8MXxyYW5kb218MHx8fHx8fHx8MTY1MTY1NzA1OQ&ixlib=rb-1.2.1&q=80&w=48',
},
id: '1480880267816546307',
fullText:
'RT @PranshuBahadur: Hey everyone! Ever wanted to "find the needle in the haystack"?\n\nCheck out @CShorten30\'s new video about the haystack v…',
retweetCount: 2,
replyCount: 0,
favoriteCount: 0,
},
{
author: {
name: 'Changelog',
screenName: 'changelog',
avatar:
'https://images.unsplash.com/photo-1649219026888-aca032914261?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=48&ixid=MnwxfDB8MXxyYW5kb218MHx8fHx8fHx8MTY1MTY1NzAzMA&ixlib=rb-1.2.1&q=80&w=48',
},
id: '1480858641959956483',
fullText:
"RT @porlando: I was on the @changelog podcast talking about complex systems, Goodhart's Law, autonomous vehicles, A Pattern Language, and m…",
retweetCount: 0,
replyCount: 0,
favoriteCount: 0,
},
{
author: {
name: 'Applesfera',
screenName: 'applesfera',
avatar:
'https://images.unsplash.com/photo-1593114970899-95c26e8d8841?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=48&ixid=MnwxfDB8MXxyYW5kb218MHx8fHx8fHx8MTY1MTY1Njk5NQ&ixlib=rb-1.2.1&q=80&w=48',
},
id: '1480881128617791488',
fullText:
'El adiós a Lightning y la teoría del Smart Connector en el iPhone del futuro https://t.co/1sQWRVR9z6 https://t.co/3qEcGvi5ha',
retweetCount: 1,
replyCount: 0,
favoriteCount: 11,
},
{
author: {
name: 'Aeon+Psyche',
screenName: 'aeonmag',
avatar:
'https://images.unsplash.com/photo-1650099667209-d0e0cc6bd27f?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=48&ixid=MnwxfDB8MXxyYW5kb218MHx8fHx8fHx8MTY1MTY1NzAwNg&ixlib=rb-1.2.1&q=80&w=48',
},
id: '1480857084883345408',
fullText:
'When logic fails to make sense of a world noisy with inconsistency, paraconsistent logics hold out (im)possible solutions https://t.co/aAmusRlUzt',
retweetCount: 2,
replyCount: 0,
favoriteCount: 5,
},
{
author: {
name: '˗ˏˋrogieˎˊ',
screenName: 'rogie',
avatar:
'https://images.unsplash.com/photo-1648198835787-9f1b46dd261b?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=48&ixid=MnwxfDB8MXxyYW5kb218MHx8fHx8fHx8MTY1MTY1NzA1OA&ixlib=rb-1.2.1&q=80&w=48',
},
id: '1480802209474351105',
fullText:
'I just applied for a FREE Citizenship NFT for Satoshi Island 🏝️ @satoshiisland \n\nA real private island being turned into the crypto capital of the world!\n\nTo apply for yours, go to https://t.co/IASuZO959O and click on the Citizenship tab in the menu.\n#satoshiisland #NFT #Airdrop',
retweetCount: 0,
replyCount: 3,
favoriteCount: 2,
},
{
author: {
name: 'Álvaro Bernal 🥑',
screenName: 'abn',
avatar:
'https://images.unsplash.com/photo-1650754294117-f648f300545f?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=48&ixid=MnwxfDB8MXxyYW5kb218MHx8fHx8fHx8MTY1MTY1NzAzMQ&ixlib=rb-1.2.1&q=80&w=48',
},
id: '1480872313792962568',
fullText:
'RT @DAZN_ES: El recital de adelantamientos que Hamilton nos regaló en Brasil 🔥\n\n📽️: @F1\nhttps://t.co/d2lSNmz1Qq',
retweetCount: 17,
replyCount: 0,
favoriteCount: 0,
},
{
author: {
name: 'Michael Andersson',
screenName: 'Kjell_Kod',
avatar:
'https://images.unsplash.com/photo-1650719782577-d16dddc61ca7?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=48&ixid=MnwxfDB8MXxyYW5kb218MHx8fHx8fHx8MTY1MTY1NzA1Nw&ixlib=rb-1.2.1&q=80&w=48',
},
id: '1480631817472466946',
fullText:
'The worst thing about Rust is that it raises the bar for every other programming language.',
retweetCount: 3,
replyCount: 4,
favoriteCount: 18,
},
{
author: {
name: 'I Am Devloper',
screenName: 'iamdevloper',
avatar:
'https://images.unsplash.com/photo-1651354239553-0998040fa5ca?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=48&ixid=MnwxfDB8MXxyYW5kb218MHx8fHx8fHx8MTY1MTY1Njk5MQ&ixlib=rb-1.2.1&q=80&w=48',
},
id: '1480861999953289216',
fullText:
"although arguably, the 19th time you ran the automated solution, you'll have recouped your initial investment\n\nso, by all means, shave that yak",
retweetCount: 7,
replyCount: 5,
favoriteCount: 164,
},
{
author: {
name: 'Tyler Hedrick',
screenName: 'tyler_hedrick',
avatar:
'https://images.unsplash.com/photo-1650871604168-2e8b22829db8?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=48&ixid=MnwxfDB8MXxyYW5kb218MHx8fHx8fHx8MTY1MTY1NzAwMg&ixlib=rb-1.2.1&q=80&w=48',
},
id: '1480887659379654657',
fullText:
'My first time in 3!\n\nWordle 206 3/6*\n\n🟨⬛⬛🟨⬛\n🟩🟩🟩⬛⬛\n🟩🟩🟩🟩🟩',
retweetCount: 0,
replyCount: 0,
favoriteCount: 1,
},
{
author: {
name: 'The Spectator Index',
screenName: 'spectatorindex',
avatar:
'https://images.unsplash.com/photo-1651245571998-b3a505f2fa96?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=48&ixid=MnwxfDB8MXxyYW5kb218MHx8fHx8fHx8MTY1MTY1NzAzMw&ixlib=rb-1.2.1&q=80&w=48',
},
id: '1480876650514448385',
fullText:
"JUST IN: World Health Organization regional director says over half Europe's population could be infected with omicron variant within a few weeks",
retweetCount: 416,
replyCount: 57,
favoriteCount: 1147,
},
{
author: {
name: 'sadface',
screenName: 'Sadface_RL',
avatar:
'https://images.unsplash.com/photo-1650304003871-2bdb8aa62dfc?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=48&ixid=MnwxfDB8MXxyYW5kb218MHx8fHx8fHx8MTY1MTY1NzA1NQ&ixlib=rb-1.2.1&q=80&w=48',
},
id: '1480602754435407876',
fullText:
'A beginners guide to health bars.\n\n#pixelart #art #animation #gamedev #indiedev #indiegamedev #indiegame https://t.co/Fhb4mQITRc',
retweetCount: 177,
replyCount: 2,
favoriteCount: 1056,
},
{
author: {
name: 'SunnePod 🎙️',
screenName: 'sunne',
avatar:
'https://images.unsplash.com/photo-1650743768349-94043ebae1e3?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=48&ixid=MnwxfDB8MXxyYW5kb218MHx8fHx8fHx8MTY1MTY1NzAzNA&ixlib=rb-1.2.1&q=80&w=48',
},
id: '1480676869720657920',
fullText:
"Necesito una lista de podcast grabados por mujeres , de la zona de Barcelona. Me da igual el idioma.\n\nMe ayudáis? Yo conozco algunos pero necesito conocer más ' pa una cosa'",
retweetCount: 8,
replyCount: 8,
favoriteCount: 9,
},
{
author: {
name: 'MoonCat2878',
screenName: 'mooncat2878',
avatar:
'https://images.unsplash.com/photo-1650797073595-0a415bb3764a?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=48&ixid=MnwxfDB8MXxyYW5kb218MHx8fHx8fHx8MTY1MTY1NzA1NA&ixlib=rb-1.2.1&q=80&w=48',
},
id: '1480601483141959688',
fullText:
"1/20\n\nI invested 55 $ETH into @LooksRareNFT for 85,636 $LOOKS tokens + I got 12,000 tokens from Airdrops.\n\nI paid an average of $ 1,90 per $LOOKS.\n\nI own a total of 97,935 $LOOKS and am staking all of them.\n\nSo why did I invest in @LooksRareNFT let's dig in! https://t.co/MFTMJc0gpp",
retweetCount: 583,
replyCount: 131,
favoriteCount: 1896,
},
{
author: {
name: 'Pedro',
screenName: 'pepicrft',
avatar:
'https://images.unsplash.com/photo-1649542053026-6b59f8723c1a?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=48&ixid=MnwxfDB8MXxyYW5kb218MHx8fHx8fHx8MTY1MTY1NzAwOA&ixlib=rb-1.2.1&q=80&w=48',
},
id: '1480879632840859648',
fullText: 'https://t.co/J0KnQjvwfA',
retweetCount: 0,
replyCount: 0,
favoriteCount: 0,
},
{
author: {
name: 'Chus Naharro',
screenName: 'chusnarrolo',
avatar:
'https://images.unsplash.com/photo-1649217707439-eb9ca4e9c62f?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=48&ixid=MnwxfDB8MXxyYW5kb218MHx8fHx8fHx8MTY1MTY1NzAxNg&ixlib=rb-1.2.1&q=80&w=48',
},
id: '1480859223038865408',
fullText:
'Revisar y proyectar. @tonicolom me invitó a su podcast para hablar de cómo nos fue en 2021 y qué esperamos del 2022 (y damos detalles de lo que nos hemos marcado 🤓)',
retweetCount: 1,
replyCount: 0,
favoriteCount: 1,
},
{
author: {
name: 'Directo al paladar',
screenName: 'directopaladar',
avatar:
'https://images.unsplash.com/p
gitextract_h8ekz4ej/
├── .gitattributes
├── .github/
│ ├── FUNDING.yml
│ ├── ISSUE_TEMPLATE/
│ │ ├── bug_template.yaml
│ │ └── feature_request.md
│ ├── PULL_REQUEST_TEMPLATE.md
│ └── workflows/
│ ├── auto-close.yml
│ ├── label-sponsors.yml
│ ├── stale.yml
│ └── website.yml
├── .gitignore
├── .huskyrc.json
├── .release-it.json
├── .vscode/
│ └── settings.json
├── CHANGELOG.md
├── CODE_OF_CONDUCT.md
├── CONTRIBUTING.md
├── LICENSE
├── README.md
├── babel.config.js
├── biome.json
├── commitlint.config.js
├── example/
│ ├── .gitignore
│ ├── App.tsx
│ ├── app.json
│ ├── babel.config.js
│ ├── metro.config.js
│ ├── package.json
│ ├── src/
│ │ ├── Dev.tsx
│ │ ├── Main.tsx
│ │ ├── components/
│ │ │ ├── button/
│ │ │ │ ├── Button.tsx
│ │ │ │ └── index.ts
│ │ │ ├── contactItem/
│ │ │ │ ├── ContactItem.tsx
│ │ │ │ └── index.ts
│ │ │ ├── contactList/
│ │ │ │ ├── ContactList.tsx
│ │ │ │ ├── index.ts
│ │ │ │ ├── styles.ts
│ │ │ │ └── styles.web.ts
│ │ │ ├── customBackground/
│ │ │ │ ├── CustomBackground.tsx
│ │ │ │ └── index.ts
│ │ │ ├── customFooter/
│ │ │ │ ├── CustomFooter.tsx
│ │ │ │ └── index.ts
│ │ │ ├── customHandle/
│ │ │ │ ├── CustomHandle.tsx
│ │ │ │ └── index.ts
│ │ │ ├── headerHandle/
│ │ │ │ ├── HeaderHandle.tsx
│ │ │ │ └── index.ts
│ │ │ └── searchHandle/
│ │ │ ├── SearchHandle.tsx
│ │ │ └── index.ts
│ │ ├── screens/
│ │ │ ├── advanced/
│ │ │ │ ├── BackdropExample.tsx
│ │ │ │ ├── CustomBackgroundExample.tsx
│ │ │ │ ├── CustomHandleExample.tsx
│ │ │ │ ├── CustomThemeExample.tsx
│ │ │ │ ├── DynamicSizingExample.tsx
│ │ │ │ ├── FooterExample.tsx
│ │ │ │ ├── KeyboardHandlingExample.tsx
│ │ │ │ ├── PullToRefreshExample.tsx
│ │ │ │ └── ShadowExample.tsx
│ │ │ ├── basic/
│ │ │ │ └── BasicExamples.tsx
│ │ │ ├── index.ts
│ │ │ ├── integrations/
│ │ │ │ ├── NativeScreensExample.tsx
│ │ │ │ ├── ViewPagerExample.tsx
│ │ │ │ ├── flashlist/
│ │ │ │ │ ├── FlashListExample.tsx
│ │ │ │ │ ├── TweetContent.tsx
│ │ │ │ │ ├── data/
│ │ │ │ │ │ └── tweets.ts
│ │ │ │ │ ├── index.ts
│ │ │ │ │ └── models/
│ │ │ │ │ ├── Author.ts
│ │ │ │ │ └── Tweet.ts
│ │ │ │ ├── legendlist/
│ │ │ │ │ ├── LegendListExample.tsx
│ │ │ │ │ ├── index.ts
│ │ │ │ │ └── renderItem.tsx
│ │ │ │ ├── map/
│ │ │ │ │ ├── BlurredBackground.tsx
│ │ │ │ │ ├── BlurredHandle.tsx
│ │ │ │ │ ├── LocationDetails.tsx
│ │ │ │ │ ├── LocationDetailsBottomSheet.tsx
│ │ │ │ │ ├── LocationItem.tsx
│ │ │ │ │ ├── LocationListBottomSheet.tsx
│ │ │ │ │ ├── MapExample.tsx
│ │ │ │ │ └── Weather.tsx
│ │ │ │ └── navigation/
│ │ │ │ ├── DummyScreen.tsx
│ │ │ │ └── NavigatorExample.tsx
│ │ │ ├── modal/
│ │ │ │ ├── BackdropExample.tsx
│ │ │ │ ├── DetachedExample.tsx
│ │ │ │ ├── DynamicSizingExample.tsx
│ │ │ │ ├── SimpleExample.tsx
│ │ │ │ ├── StackExample.tsx
│ │ │ │ └── withModalProvider.tsx
│ │ │ └── withGestureHandlerRoot.tsx
│ │ ├── types.d.ts
│ │ └── utilities/
│ │ ├── createMockData.ts
│ │ └── transformOrigin.ts
│ ├── tsconfig.json
│ ├── web/
│ │ └── index.html
│ └── webpack.config.js
├── lint-staged.config.js
├── mock.js
├── package.json
├── src/
│ ├── components/
│ │ ├── bottomSheet/
│ │ │ ├── BottomSheet.tsx
│ │ │ ├── BottomSheetBody.tsx
│ │ │ ├── BottomSheetContent.tsx
│ │ │ ├── constants.ts
│ │ │ ├── index.ts
│ │ │ ├── styles.ts
│ │ │ └── types.d.ts
│ │ ├── bottomSheetBackdrop/
│ │ │ ├── BottomSheetBackdrop.tsx
│ │ │ ├── constants.ts
│ │ │ ├── index.ts
│ │ │ ├── styles.ts
│ │ │ └── types.d.ts
│ │ ├── bottomSheetBackground/
│ │ │ ├── BottomSheetBackground.tsx
│ │ │ ├── BottomSheetBackgroundContainer.tsx
│ │ │ ├── index.ts
│ │ │ ├── styles.ts
│ │ │ └── types.d.ts
│ │ ├── bottomSheetDebugView/
│ │ │ ├── BottomSheetDebugView.tsx
│ │ │ ├── ReText.tsx
│ │ │ ├── ReText.webx.tsx
│ │ │ ├── index.ts
│ │ │ ├── styles.ts
│ │ │ └── styles.web.ts
│ │ ├── bottomSheetDraggableView/
│ │ │ ├── BottomSheetDraggableView.tsx
│ │ │ ├── index.ts
│ │ │ └── types.d.ts
│ │ ├── bottomSheetFooter/
│ │ │ ├── BottomSheetFooter.tsx
│ │ │ ├── BottomSheetFooterContainer.tsx
│ │ │ ├── index.ts
│ │ │ ├── styles.ts
│ │ │ └── types.d.ts
│ │ ├── bottomSheetGestureHandlersProvider/
│ │ │ ├── BottomSheetGestureHandlersProvider.tsx
│ │ │ ├── index.ts
│ │ │ └── types.d.ts
│ │ ├── bottomSheetHandle/
│ │ │ ├── BottomSheetHandle.tsx
│ │ │ ├── BottomSheetHandleContainer.tsx
│ │ │ ├── constants.ts
│ │ │ ├── index.ts
│ │ │ ├── styles.ts
│ │ │ └── types.d.ts
│ │ ├── bottomSheetHostingContainer/
│ │ │ ├── BottomSheetHostingContainer.tsx
│ │ │ ├── index.ts
│ │ │ ├── styles.ts
│ │ │ ├── styles.web.ts
│ │ │ └── types.d.ts
│ │ ├── bottomSheetModal/
│ │ │ ├── BottomSheetModal.tsx
│ │ │ ├── constants.ts
│ │ │ ├── index.ts
│ │ │ └── types.d.ts
│ │ ├── bottomSheetModalProvider/
│ │ │ ├── BottomSheetModalProvider.tsx
│ │ │ ├── index.ts
│ │ │ └── types.d.ts
│ │ ├── bottomSheetRefreshControl/
│ │ │ ├── BottomSheetRefreshControl.android.tsx
│ │ │ ├── BottomSheetRefreshControl.tsx
│ │ │ └── index.ts
│ │ ├── bottomSheetScrollable/
│ │ │ ├── BottomSheetDraggableScrollable.tsx
│ │ │ ├── BottomSheetFlashList.tsx
│ │ │ ├── BottomSheetFlashList.web.tsx
│ │ │ ├── BottomSheetFlatList.tsx
│ │ │ ├── BottomSheetScrollView.tsx
│ │ │ ├── BottomSheetSectionList.tsx
│ │ │ ├── BottomSheetVirtualizedList.tsx
│ │ │ ├── ScrollableContainer.android.tsx
│ │ │ ├── ScrollableContainer.tsx
│ │ │ ├── ScrollableContainer.web.tsx
│ │ │ ├── createBottomSheetScrollableComponent.tsx
│ │ │ ├── index.ts
│ │ │ ├── styles.ts
│ │ │ ├── types.d.ts
│ │ │ └── useBottomSheetContentSizeSetter.ts
│ │ ├── bottomSheetTextInput/
│ │ │ ├── BottomSheetTextInput.tsx
│ │ │ ├── index.ts
│ │ │ └── types.ts
│ │ ├── bottomSheetView/
│ │ │ ├── BottomSheetView.tsx
│ │ │ ├── index.ts
│ │ │ ├── styles.ts
│ │ │ └── types.d.ts
│ │ └── touchables/
│ │ ├── Touchables.ios.tsx
│ │ ├── Touchables.tsx
│ │ └── index.ts
│ ├── constants.ts
│ ├── contexts/
│ │ ├── external.ts
│ │ ├── gesture.ts
│ │ ├── index.ts
│ │ ├── internal.ts
│ │ └── modal/
│ │ ├── external.ts
│ │ └── internal.ts
│ ├── hooks/
│ │ ├── index.ts
│ │ ├── useAnimatedDetents.ts
│ │ ├── useAnimatedKeyboard.ts
│ │ ├── useAnimatedLayout.ts
│ │ ├── useBottomSheet.ts
│ │ ├── useBottomSheetContentContainerStyle.ts
│ │ ├── useBottomSheetGestureHandlers.ts
│ │ ├── useBottomSheetInternal.ts
│ │ ├── useBottomSheetModal.ts
│ │ ├── useBottomSheetModalInternal.ts
│ │ ├── useBottomSheetScrollableCreator.tsx
│ │ ├── useBottomSheetSpringConfigs.ts
│ │ ├── useBottomSheetTimingConfigs.ts
│ │ ├── useBoundingClientRect.ts
│ │ ├── useGestureEventsHandlersDefault.tsx
│ │ ├── useGestureEventsHandlersDefault.web.tsx
│ │ ├── useGestureHandler.ts
│ │ ├── usePropsValidator.ts
│ │ ├── useReactiveSharedValue.ts
│ │ ├── useScrollEventsHandlersDefault.ts
│ │ ├── useScrollHandler.ts
│ │ ├── useScrollHandler.web.ts
│ │ ├── useScrollable.ts
│ │ ├── useScrollableSetter.ts
│ │ └── useStableCallback.ts
│ ├── index.ts
│ ├── types.d.ts
│ └── utilities/
│ ├── animate.ts
│ ├── clamp.ts
│ ├── easingExp.ts
│ ├── findNodeHandle.ts
│ ├── findNodeHandle.web.ts
│ ├── getKeyboardAnimationConfigs.ts
│ ├── getRefNativeTag.web.ts
│ ├── id.ts
│ ├── index.ts
│ ├── isFabricInstalled.ts
│ ├── logger.ts
│ ├── noop.ts
│ ├── normalizeSnapPoint.ts
│ ├── snapPoint.ts
│ └── validateSnapPoint.ts
├── tsconfig.json
└── website/
├── .gitignore
├── README.md
├── babel.config.js
├── blog/
│ ├── 2021-08-30-bottom-sheet-v4.mdx
│ ├── 2024-10-05-bottom-sheet-v5.mdx
│ ├── authors.yml
│ └── tags.yml
├── docs/
│ ├── components/
│ │ ├── bottomsheetbackdrop.md
│ │ ├── bottomsheetflashlist.md
│ │ ├── bottomsheetflatlist.md
│ │ ├── bottomsheetfooter.md
│ │ ├── bottomsheetscrollview.md
│ │ ├── bottomsheetsectionlist.md
│ │ ├── bottomsheettextinput.md
│ │ ├── bottomsheetview.md
│ │ └── bottomsheetvirtualizedlist.md
│ ├── faq.md
│ ├── guides/
│ │ ├── adding-shadow.mdx
│ │ ├── custom-backdrop.mdx
│ │ ├── custom-background.mdx
│ │ ├── custom-footer.mdx
│ │ ├── custom-handle.mdx
│ │ ├── detach-modal.mdx
│ │ ├── dynamic-sizing.mdx
│ │ ├── keyboard-handling.mdx
│ │ ├── pull-to-refresh.mdx
│ │ ├── react-navigation.md
│ │ └── web-support.mdx
│ ├── hooks.md
│ ├── index.md
│ ├── methods.md
│ ├── modal/
│ │ ├── hooks.md
│ │ ├── index.mdx
│ │ ├── methods.md
│ │ ├── props.md
│ │ └── usage.md
│ ├── props.md
│ ├── scrollables.md
│ ├── troubleshooting.md
│ └── usage.md
├── docusaurus.config.ts
├── package.json
├── sidebars.ts
├── src/
│ ├── css/
│ │ └── custom.css
│ └── pages/
│ └── sponsors.mdx
├── static/
│ ├── .nojekyll
│ ├── CNAME
│ └── googled4a9e66f4b4d23d7.html
├── tsconfig.json
├── versioned_docs/
│ ├── version-2/
│ │ ├── faq.md
│ │ ├── guides/
│ │ │ ├── adding-shadow.mdx
│ │ │ ├── custom-backdrop.mdx
│ │ │ ├── custom-background.mdx
│ │ │ ├── custom-handle.mdx
│ │ │ └── react-naigation.md
│ │ ├── hooks.md
│ │ ├── index.mdx
│ │ ├── methods.md
│ │ ├── modal/
│ │ │ ├── hooks.md
│ │ │ ├── index.mdx
│ │ │ ├── methods.md
│ │ │ ├── props.md
│ │ │ └── usage.md
│ │ ├── props.md
│ │ ├── scrollables.md
│ │ ├── sidebars.ts
│ │ ├── troubleshooting.md
│ │ └── usage.md
│ └── version-4/
│ ├── components/
│ │ ├── bottomsheetbackdrop.md
│ │ ├── bottomsheetflatlist.md
│ │ ├── bottomsheetfooter.md
│ │ ├── bottomsheetscrollview.md
│ │ ├── bottomsheetsectionlist.md
│ │ ├── bottomsheettextinput.md
│ │ ├── bottomsheetview.md
│ │ └── bottomsheetvirtualizedlist.md
│ ├── faq.md
│ ├── guides/
│ │ ├── adding-shadow.mdx
│ │ ├── custom-backdrop.mdx
│ │ ├── custom-background.mdx
│ │ ├── custom-footer.mdx
│ │ ├── custom-handle.mdx
│ │ ├── detach-modal.mdx
│ │ ├── keyboard-handling.mdx
│ │ ├── pull-to-refresh.mdx
│ │ └── react-navigation.md
│ ├── hooks.md
│ ├── index.md
│ ├── methods.md
│ ├── modal/
│ │ ├── hooks.md
│ │ ├── index.mdx
│ │ ├── methods.md
│ │ ├── props.md
│ │ └── usage.md
│ ├── props.md
│ ├── scrollables.md
│ ├── sidebars.ts
│ ├── troubleshooting.md
│ └── usage.md
├── versioned_sidebars/
│ ├── version-2-sidebars.json
│ └── version-4-sidebars.json
└── versions.json
SYMBOL INDEX (242 symbols across 88 files)
FILE: example/App.tsx
function App (line 13) | function App() {
FILE: example/src/Dev.tsx
constant DATA (line 20) | const DATA = new Array(50).fill(0).map((_, index) => ({
constant SNAP_POINTS (line 24) | const SNAP_POINTS = [300, 600];
FILE: example/src/components/button/Button.tsx
type ButtonProps (line 5) | interface ButtonProps {
FILE: example/src/components/contactItem/ContactItem.tsx
type ContactItemProps (line 5) | interface ContactItemProps {
FILE: example/src/components/contactList/ContactList.tsx
type ContactListProps (line 22) | interface ContactListProps
FILE: example/src/components/customBackground/CustomBackground.tsx
type CustomBackgroundProps (line 9) | interface CustomBackgroundProps extends BottomSheetBackgroundProps {}
FILE: example/src/components/customFooter/CustomFooter.tsx
type CustomFooterProps (line 18) | interface CustomFooterProps extends BottomSheetFooterProps {}
FILE: example/src/components/customHandle/CustomHandle.tsx
type CustomHandleProps (line 13) | interface CustomHandleProps extends BottomSheetHandleProps {
FILE: example/src/components/headerHandle/HeaderHandle.tsx
type HeaderHandleProps (line 8) | interface HeaderHandleProps extends BottomSheetHandleProps {}
FILE: example/src/components/searchHandle/SearchHandle.tsx
constant SEARCH_HANDLE_HEIGHT (line 16) | const SEARCH_HANDLE_HEIGHT = 69;
type SearchHandleProps (line 18) | interface SearchHandleProps extends BottomSheetHandleProps {
FILE: example/src/screens/advanced/DynamicSizingExample.tsx
constant DATA (line 15) | const DATA = createContactListMockData(20);
FILE: example/src/screens/basic/BasicExamples.tsx
type ExampleScreenProps (line 7) | interface ExampleScreenProps {
FILE: example/src/screens/integrations/flashlist/TweetContent.tsx
type TweetContentProps (line 9) | interface TweetContentProps {
type GrayTextProps (line 58) | interface GrayTextProps {
FILE: example/src/screens/integrations/flashlist/models/Author.ts
type Author (line 1) | interface Author {
FILE: example/src/screens/integrations/flashlist/models/Tweet.ts
type Tweet (line 3) | interface Tweet {
FILE: example/src/screens/integrations/legendlist/LegendListExample.tsx
constant DRAW_DISTANCE (line 10) | const DRAW_DISTANCE = 200;
constant ESTIMATED_ITEM_LENGTH (line 11) | const ESTIMATED_ITEM_LENGTH = 200;
FILE: example/src/screens/integrations/legendlist/renderItem.tsx
type Item (line 16) | interface Item {
FILE: example/src/screens/integrations/map/LocationDetails.tsx
constant LOCATION_DETAILS_HEIGHT (line 13) | const LOCATION_DETAILS_HEIGHT = 298;
type LocationDetailsProps (line 15) | interface LocationDetailsProps extends Location, Pick<ViewProps, 'onLayo...
FILE: example/src/screens/integrations/map/LocationDetailsBottomSheet.tsx
type LocationDetailsBottomSheetProps (line 17) | interface LocationDetailsBottomSheetProps {
type LocationDetailsBottomSheetMethods (line 22) | interface LocationDetailsBottomSheetMethods {
constant SNAP_POINTS (line 26) | const SNAP_POINTS = ['100%'];
FILE: example/src/screens/integrations/map/LocationItem.tsx
type LocationItemProps (line 5) | interface LocationItemProps {
FILE: example/src/screens/integrations/map/LocationListBottomSheet.tsx
type LocationListBottomSheetProps (line 19) | interface LocationListBottomSheetProps {
constant MIDDLE_SNAP_POINT (line 25) | const MIDDLE_SNAP_POINT = 300;
constant SNAP_POINTS (line 27) | const SNAP_POINTS = [64, MIDDLE_SNAP_POINT, '100%'];
constant DATA (line 28) | const DATA = createLocationListMockData(15);
FILE: example/src/screens/integrations/map/Weather.tsx
type WeatherProps (line 12) | interface WeatherProps {
constant SPACE (line 17) | const SPACE = 8;
FILE: example/src/screens/integrations/navigation/DummyScreen.tsx
type DummyScreenProps (line 5) | interface DummyScreenProps {
FILE: example/src/screens/modal/DetachedExample.tsx
constant DATA (line 18) | const DATA = createContactListMockData(4);
FILE: example/src/screens/modal/DynamicSizingExample.tsx
constant DATA (line 16) | const DATA = createContactListMockData(20);
FILE: example/src/types.d.ts
type Contact (line 1) | type Contact = {
type Location (line 7) | type Location = {
FILE: mock.js
constant NOOP_VALUE (line 15) | const NOOP_VALUE = { value: 0, set: NOOP, get: () => 0 };
class BottomSheetModal (line 27) | class BottomSheetModal extends React.Component {
method snapToIndex (line 31) | snapToIndex() {}
method snapToPosition (line 32) | snapToPosition() {}
method expand (line 33) | expand() {}
method collapse (line 34) | collapse() {}
method close (line 35) | close() {
method forceClose (line 38) | forceClose() {
method present (line 41) | present(data) {
method dismiss (line 47) | dismiss() {
method render (line 51) | render() {
class BottomSheet (line 59) | class BottomSheet extends React.Component {
method snapToIndex (line 60) | snapToIndex() {}
method snapToPosition (line 61) | snapToPosition() {}
method expand (line 62) | expand() {}
method collapse (line 63) | collapse() {}
method close (line 64) | close() {}
method forceClose (line 65) | forceClose() {}
method render (line 67) | render() {
method get (line 105) | get(target, prop) {
constant GESTURE_SOURCE (line 123) | const GESTURE_SOURCE = {
constant SHEET_STATE (line 130) | const SHEET_STATE = {
constant SCROLLABLE_STATE (line 138) | const SCROLLABLE_STATE = {
constant SCROLLABLE_TYPE (line 144) | const SCROLLABLE_TYPE = {
constant ANIMATION_STATE (line 153) | const ANIMATION_STATE = {
constant ANIMATION_SOURCE (line 160) | const ANIMATION_SOURCE = {
constant ANIMATION_METHOD (line 170) | const ANIMATION_METHOD = {
constant KEYBOARD_STATE (line 175) | const KEYBOARD_STATE = {
constant SNAP_POINT_TYPE (line 181) | const SNAP_POINT_TYPE = {
constant ENUMS (line 186) | const ENUMS = {
FILE: src/components/bottomSheet/BottomSheet.tsx
type BottomSheet (line 92) | type BottomSheet = BottomSheetMethods;
FILE: src/components/bottomSheet/BottomSheetBody.tsx
type BottomSheetBodyProps (line 8) | type BottomSheetBodyProps = {
function BottomSheetBodyComponent (line 13) | function BottomSheetBodyComponent({ style, children }: BottomSheetBodyPr...
FILE: src/components/bottomSheet/BottomSheetContent.tsx
type BottomSheetContent (line 20) | type BottomSheetContent = {
function BottomSheetContentComponent (line 33) | function BottomSheetContentComponent({
FILE: src/components/bottomSheet/constants.ts
constant DEFAULT_HANDLE_HEIGHT (line 9) | const DEFAULT_HANDLE_HEIGHT = 24;
constant DEFAULT_OVER_DRAG_RESISTANCE_FACTOR (line 10) | const DEFAULT_OVER_DRAG_RESISTANCE_FACTOR = 2.5;
constant DEFAULT_ENABLE_CONTENT_PANNING_GESTURE (line 11) | const DEFAULT_ENABLE_CONTENT_PANNING_GESTURE = true;
constant DEFAULT_ENABLE_HANDLE_PANNING_GESTURE (line 12) | const DEFAULT_ENABLE_HANDLE_PANNING_GESTURE = true;
constant DEFAULT_ENABLE_OVER_DRAG (line 13) | const DEFAULT_ENABLE_OVER_DRAG = true;
constant DEFAULT_ENABLE_PAN_DOWN_TO_CLOSE (line 14) | const DEFAULT_ENABLE_PAN_DOWN_TO_CLOSE = false;
constant DEFAULT_ANIMATE_ON_MOUNT (line 15) | const DEFAULT_ANIMATE_ON_MOUNT = true;
constant DEFAULT_DYNAMIC_SIZING (line 16) | const DEFAULT_DYNAMIC_SIZING = true;
constant DEFAULT_KEYBOARD_BEHAVIOR (line 19) | const DEFAULT_KEYBOARD_BEHAVIOR = KEYBOARD_BEHAVIOR.interactive;
constant DEFAULT_KEYBOARD_BLUR_BEHAVIOR (line 20) | const DEFAULT_KEYBOARD_BLUR_BEHAVIOR = KEYBOARD_BLUR_BEHAVIOR.none;
constant DEFAULT_KEYBOARD_INPUT_MODE (line 21) | const DEFAULT_KEYBOARD_INPUT_MODE = KEYBOARD_INPUT_MODE.adjustPan;
constant DEFAULT_ENABLE_BLUR_KEYBOARD_ON_GESTURE (line 22) | const DEFAULT_ENABLE_BLUR_KEYBOARD_ON_GESTURE = false;
constant DEFAULT_KEYBOARD_INDEX (line 23) | const DEFAULT_KEYBOARD_INDEX = -998;
constant INITIAL_VALUE (line 26) | const INITIAL_VALUE = Number.NEGATIVE_INFINITY;
constant INITIAL_SNAP_POINT (line 27) | const INITIAL_SNAP_POINT = -999;
constant INITIAL_POSITION (line 28) | const INITIAL_POSITION = SCREEN_HEIGHT;
constant DEFAULT_ACCESSIBLE (line 31) | const DEFAULT_ACCESSIBLE = true;
constant DEFAULT_ACCESSIBILITY_LABEL (line 32) | const DEFAULT_ACCESSIBILITY_LABEL = 'Bottom Sheet';
constant DEFAULT_ACCESSIBILITY_ROLE (line 33) | const DEFAULT_ACCESSIBILITY_ROLE = 'adjustable';
FILE: src/components/bottomSheet/types.d.ts
type BottomSheetProps (line 28) | interface BottomSheetProps
type BottomSheetAnimationConfigs (line 330) | interface BottomSheetAnimationConfigs {
type AnimateToPositionType (line 340) | type AnimateToPositionType = (
type BottomSheetGestureProps (line 347) | type BottomSheetGestureProps = {
FILE: src/components/bottomSheetBackdrop/constants.ts
constant DEFAULT_OPACITY (line 1) | const DEFAULT_OPACITY = 0.5;
constant DEFAULT_APPEARS_ON_INDEX (line 2) | const DEFAULT_APPEARS_ON_INDEX = 1;
constant DEFAULT_DISAPPEARS_ON_INDEX (line 3) | const DEFAULT_DISAPPEARS_ON_INDEX = 0;
constant DEFAULT_ENABLE_TOUCH_THROUGH (line 4) | const DEFAULT_ENABLE_TOUCH_THROUGH = false;
constant DEFAULT_PRESS_BEHAVIOR (line 5) | const DEFAULT_PRESS_BEHAVIOR = 'close' as const;
constant DEFAULT_ACCESSIBLE (line 7) | const DEFAULT_ACCESSIBLE = true;
constant DEFAULT_ACCESSIBILITY_ROLE (line 8) | const DEFAULT_ACCESSIBILITY_ROLE = 'button';
constant DEFAULT_ACCESSIBILITY_LABEL (line 9) | const DEFAULT_ACCESSIBILITY_LABEL = 'Bottom sheet backdrop';
constant DEFAULT_ACCESSIBILITY_HINT (line 10) | const DEFAULT_ACCESSIBILITY_HINT = 'Tap to close the bottom sheet';
FILE: src/components/bottomSheetBackdrop/types.d.ts
type BottomSheetBackdropProps (line 9) | interface BottomSheetBackdropProps
type BackdropPressBehavior (line 13) | type BackdropPressBehavior = 'none' | 'close' | 'collapse' | number;
type BottomSheetDefaultBackdropProps (line 15) | interface BottomSheetDefaultBackdropProps
FILE: src/components/bottomSheetBackground/types.d.ts
type BottomSheetBackgroundProps (line 4) | interface BottomSheetBackgroundProps
type BottomSheetBackgroundContainerProps (line 8) | type BottomSheetBackgroundContainerProps = Pick<
FILE: src/components/bottomSheetDebugView/BottomSheetDebugView.tsx
type BottomSheetDebugViewProps (line 7) | interface BottomSheetDebugViewProps {
FILE: src/components/bottomSheetDebugView/ReText.tsx
type TextProps (line 10) | interface TextProps {
FILE: src/components/bottomSheetDebugView/ReText.webx.tsx
type TextProps (line 9) | interface TextProps {
FILE: src/components/bottomSheetDraggableView/types.d.ts
type BottomSheetDraggableViewProps (line 5) | type BottomSheetDraggableViewProps = RNViewProps & {
FILE: src/components/bottomSheetFooter/BottomSheetFooter.tsx
function BottomSheetFooterComponent (line 14) | function BottomSheetFooterComponent({
FILE: src/components/bottomSheetFooter/types.d.ts
type BottomSheetFooterProps (line 6) | interface BottomSheetFooterProps {
type BottomSheetDefaultFooterProps (line 15) | interface BottomSheetDefaultFooterProps extends BottomSheetFooterProps {
type BottomSheetFooterContainerProps (line 40) | interface BottomSheetFooterContainerProps
FILE: src/components/bottomSheetGestureHandlersProvider/types.d.ts
type BottomSheetGestureHandlersProviderProps (line 5) | interface BottomSheetGestureHandlersProviderProps
FILE: src/components/bottomSheetHandle/BottomSheetHandle.tsx
function BottomSheetHandleComponent (line 12) | function BottomSheetHandleComponent({
FILE: src/components/bottomSheetHandle/BottomSheetHandleContainer.tsx
function BottomSheetHandleContainerComponent (line 15) | function BottomSheetHandleContainerComponent({
FILE: src/components/bottomSheetHandle/constants.ts
constant DEFAULT_ACCESSIBLE (line 1) | const DEFAULT_ACCESSIBLE = true;
constant DEFAULT_ACCESSIBILITY_ROLE (line 2) | const DEFAULT_ACCESSIBILITY_ROLE = 'adjustable';
constant DEFAULT_ACCESSIBILITY_LABEL (line 3) | const DEFAULT_ACCESSIBILITY_LABEL = 'Bottom sheet handle';
constant DEFAULT_ACCESSIBILITY_HINT (line 4) | const DEFAULT_ACCESSIBILITY_HINT =
FILE: src/components/bottomSheetHandle/types.d.ts
type BottomSheetHandleProps (line 12) | type BottomSheetHandleProps = BottomSheetVariables;
type BottomSheetDefaultHandleProps (line 13) | interface BottomSheetDefaultHandleProps
type BottomSheetHandleContainerProps (line 36) | type BottomSheetHandleContainerProps = Pick<
FILE: src/components/bottomSheetHostingContainer/BottomSheetHostingContainer.tsx
function BottomSheetHostingContainerComponent (line 14) | function BottomSheetHostingContainerComponent({
FILE: src/components/bottomSheetHostingContainer/types.d.ts
type BottomSheetHostingContainerProps (line 7) | interface BottomSheetHostingContainerProps
FILE: src/components/bottomSheetModal/BottomSheetModal.tsx
constant INITIAL_STATE (line 28) | const INITIAL_STATE: BottomSheetModalState = {
type BottomSheetModal (line 34) | type BottomSheetModal<T = any> = BottomSheetModalMethods<T>;
function BottomSheetModalComponent (line 37) | function BottomSheetModalComponent<T = any>(
FILE: src/components/bottomSheetModal/constants.ts
constant DEFAULT_STACK_BEHAVIOR (line 1) | const DEFAULT_STACK_BEHAVIOR = 'switch';
constant DEFAULT_ENABLE_DISMISS_ON_CLOSE (line 2) | const DEFAULT_ENABLE_DISMISS_ON_CLOSE = true;
FILE: src/components/bottomSheetModal/types.d.ts
type BottomSheetModalPrivateMethods (line 6) | interface BottomSheetModalPrivateMethods {
type BottomSheetModalStackBehavior (line 12) | type BottomSheetModalStackBehavior = keyof typeof MODAL_STACK_BEHAVIOR;
type BottomSheetModalProps (line 15) | interface BottomSheetModalProps<T = any>
type BottomSheetModalState (line 64) | interface BottomSheetModalState<T = any> {
FILE: src/components/bottomSheetModalProvider/types.d.ts
type BottomSheetModalRef (line 4) | interface BottomSheetModalRef {
type BottomSheetModalProviderProps (line 10) | interface BottomSheetModalProviderProps {
FILE: src/components/bottomSheetRefreshControl/BottomSheetRefreshControl.android.tsx
type BottomSheetRefreshControlProps (line 15) | interface BottomSheetRefreshControlProps extends RefreshControlProps {
function BottomSheetRefreshControlComponent (line 19) | function BottomSheetRefreshControlComponent({
FILE: src/components/bottomSheetScrollable/BottomSheetDraggableScrollable.tsx
type BottomSheetDraggableScrollableProps (line 7) | interface BottomSheetDraggableScrollableProps {
function BottomSheetDraggableScrollable (line 12) | function BottomSheetDraggableScrollable({
FILE: src/components/bottomSheetScrollable/BottomSheetFlashList.tsx
type BottomSheetFlashListProps (line 21) | type BottomSheetFlashListProps<T> = Omit<
FILE: src/components/bottomSheetScrollable/ScrollableContainer.android.tsx
type ScrollableContainerProps (line 7) | interface ScrollableContainerProps {
FILE: src/components/bottomSheetScrollable/ScrollableContainer.tsx
type ScrollableContainerProps (line 5) | interface ScrollableContainerProps {
FILE: src/components/bottomSheetScrollable/ScrollableContainer.web.tsx
type ScrollableContainerProps (line 14) | interface ScrollableContainerProps {
FILE: src/components/bottomSheetScrollable/createBottomSheetScrollableComponent.tsx
function createBottomSheetScrollableComponent (line 25) | function createBottomSheetScrollableComponent<T, P>(
FILE: src/components/bottomSheetScrollable/types.d.ts
type BottomSheetScrollableProps (line 22) | interface BottomSheetScrollableProps {
type ScrollableProps (line 52) | type ScrollableProps<T> =
type BottomSheetFlatListProps (line 58) | type BottomSheetFlatListProps<T> = Omit<
type BottomSheetFlatListMethods (line 66) | interface BottomSheetFlatListMethods {
type BottomSheetScrollViewProps (line 138) | type BottomSheetScrollViewProps = Omit<
type BottomSheetScrollViewMethods (line 147) | interface BottomSheetScrollViewMethods {
type BottomSheetSectionListProps (line 204) | type BottomSheetSectionListProps<ItemT, SectionT> = Omit<
type BottomSheetSectionListMethods (line 212) | interface BottomSheetSectionListMethods {
type BottomSheetVirtualizedListProps (line 247) | type BottomSheetVirtualizedListProps<T> = Omit<
type BottomSheetVirtualizedListMethods (line 255) | interface BottomSheetVirtualizedListMethods {
FILE: src/components/bottomSheetScrollable/useBottomSheetContentSizeSetter.ts
function useBottomSheetContentSizeSetter (line 8) | function useBottomSheetContentSizeSetter() {
FILE: src/components/bottomSheetTextInput/types.ts
type BottomSheetTextInputProps (line 3) | interface BottomSheetTextInputProps extends TextInputProps {}
FILE: src/components/bottomSheetView/BottomSheetView.tsx
function BottomSheetViewComponent (line 12) | function BottomSheetViewComponent({
FILE: src/components/bottomSheetView/types.d.ts
type BottomSheetViewProps (line 4) | interface BottomSheetViewProps extends RNViewProps {
FILE: src/constants.ts
type GESTURE_SOURCE (line 8) | enum GESTURE_SOURCE {
type SHEET_STATE (line 15) | enum SHEET_STATE {
type SCROLLABLE_STATUS (line 23) | enum SCROLLABLE_STATUS {
type SCROLLABLE_TYPE (line 29) | enum SCROLLABLE_TYPE {
type ANIMATION_STATUS (line 38) | enum ANIMATION_STATUS {
type ANIMATION_SOURCE (line 45) | enum ANIMATION_SOURCE {
type ANIMATION_METHOD (line 55) | enum ANIMATION_METHOD {
type KEYBOARD_STATUS (line 60) | enum KEYBOARD_STATUS {
type SNAP_POINT_TYPE (line 66) | enum SNAP_POINT_TYPE {
constant ANIMATION_EASING (line 71) | const ANIMATION_EASING = Easing.out(Easing.exp);
constant ANIMATION_DURATION (line 72) | const ANIMATION_DURATION = 250;
constant ANIMATION_CONFIGS (line 74) | const ANIMATION_CONFIGS = Platform.select<TimingConfig | SpringConfig>({
constant SCROLLABLE_DECELERATION_RATE_MAPPER (line 89) | const SCROLLABLE_DECELERATION_RATE_MAPPER = {
constant MODAL_STACK_BEHAVIOR (line 99) | const MODAL_STACK_BEHAVIOR = {
constant KEYBOARD_BEHAVIOR (line 105) | const KEYBOARD_BEHAVIOR = {
constant KEYBOARD_BLUR_BEHAVIOR (line 111) | const KEYBOARD_BLUR_BEHAVIOR = {
constant KEYBOARD_INPUT_MODE (line 116) | const KEYBOARD_INPUT_MODE = {
constant KEYBOARD_DISMISS_THRESHOLD (line 121) | const KEYBOARD_DISMISS_THRESHOLD = 12.5;
constant INITIAL_LAYOUT_VALUE (line 123) | const INITIAL_LAYOUT_VALUE = -999;
constant INITIAL_CONTAINER_LAYOUT (line 124) | const INITIAL_CONTAINER_LAYOUT = {
FILE: src/contexts/gesture.ts
type BottomSheetGestureHandlersContextType (line 5) | interface BottomSheetGestureHandlersContextType {
FILE: src/contexts/internal.ts
type BottomSheetInternalContextType (line 20) | interface BottomSheetInternalContextType
FILE: src/contexts/modal/external.ts
type BottomSheetModalContextType (line 3) | interface BottomSheetModalContextType {
FILE: src/contexts/modal/internal.ts
type BottomSheetModalInternalContextType (line 9) | interface BottomSheetModalInternalContextType {
FILE: src/hooks/useAnimatedKeyboard.ts
constant KEYBOARD_EVENT_MAPPER (line 17) | const KEYBOARD_EVENT_MAPPER = {
constant INITIAL_STATE (line 30) | const INITIAL_STATE: KeyboardState = {
FILE: src/hooks/useAnimatedLayout.ts
constant INITIAL_STATE (line 10) | const INITIAL_STATE: LayoutState = {
function useAnimatedLayout (line 34) | function useAnimatedLayout(
FILE: src/hooks/useBottomSheetContentContainerStyle.ts
function useBottomSheetContentContainerStyle (line 11) | function useBottomSheetContentContainerStyle(
FILE: src/hooks/useBottomSheetInternal.ts
function useBottomSheetInternal (line 15) | function useBottomSheetInternal(
FILE: src/hooks/useBottomSheetModalInternal.ts
function useBottomSheetModalInternal (line 15) | function useBottomSheetModalInternal(
FILE: src/hooks/useBottomSheetScrollableCreator.tsx
type BottomSheetScrollableCreatorConfigs (line 7) | type BottomSheetScrollableCreatorConfigs = {} & BottomSheetScrollableProps;
function useBottomSheetScrollableCreator (line 33) | function useBottomSheetScrollableCreator<T = any>({
FILE: src/hooks/useBottomSheetTimingConfigs.ts
type TimingConfig (line 13) | interface TimingConfig {
FILE: src/hooks/useBoundingClientRect.ts
type BoundingClientRect (line 5) | type BoundingClientRect = {
function useBoundingClientRect (line 44) | function useBoundingClientRect(
FILE: src/hooks/useGestureEventsHandlersDefault.tsx
type GestureEventContextType (line 19) | type GestureEventContextType = {
constant INITIAL_CONTEXT (line 25) | const INITIAL_CONTEXT: GestureEventContextType = {
FILE: src/hooks/useGestureEventsHandlersDefault.web.tsx
type GestureEventContextType (line 16) | type GestureEventContextType = {
constant INITIAL_CONTEXT (line 23) | const INITIAL_CONTEXT: GestureEventContextType = {
FILE: src/hooks/useScrollEventsHandlersDefault.ts
type ScrollEventContextType (line 11) | type ScrollEventContextType = {
FILE: src/hooks/useScrollHandler.web.ts
type ScrollEventContextType (line 8) | type ScrollEventContextType = {
function handleOnTouchStart (line 42) | function handleOnTouchStart(event: TouchEvent) {
function handleOnTouchMove (line 52) | function handleOnTouchMove(event: TouchEvent) {
function handleOnTouchEnd (line 74) | function handleOnTouchEnd() {
function handleOnScroll (line 89) | function handleOnScroll(event: TouchEvent) {
method passive (line 114) | get passive() {
FILE: src/hooks/useStableCallback.ts
type Callback (line 3) | type Callback<T extends unknown[], R> = (...args: T) => R;
function useStableCallback (line 8) | function useStableCallback<T extends unknown[], R>(
FILE: src/types.d.ts
type BottomSheetMethods (line 38) | interface BottomSheetMethods {
type BottomSheetModalMethods (line 98) | interface BottomSheetModalMethods<T = any> extends BottomSheetMethods {
type BottomSheetVariables (line 115) | interface BottomSheetVariables {
type ScrollableState (line 129) | type ScrollableState = {
type Scrollable (line 134) | type Scrollable = FlatList | ScrollView | SectionList;
type ScrollableRef (line 135) | type ScrollableRef = {
type ScrollableEvent (line 139) | type ScrollableEvent = (
type TimingConfig (line 145) | interface TimingConfig {
type SpringConfig (line 151) | type SpringConfig = {
type Primitive (line 175) | type Primitive = string | number | boolean;
type GestureEventPayloadType (line 179) | type GestureEventPayloadType = GestureEventPayload &
type GestureEventContextType (line 182) | type GestureEventContextType = {
type GestureEventHandlerCallbackType (line 186) | type GestureEventHandlerCallbackType = (
type GestureEventsHandlersHookType (line 191) | type GestureEventsHandlersHookType = () => {
type GestureHandlersHookType (line 198) | type GestureHandlersHookType = (
type ScrollEventHandlerCallbackType (line 223) | type ScrollEventHandlerCallbackType<C = never> = (
type ScrollEventsHandlersHookType (line 228) | type ScrollEventsHandlersHookType = (
type NullableAccessibilityProps (line 241) | interface NullableAccessibilityProps extends AccessibilityProps {
type KeyboardState (line 250) | type KeyboardState = {
type AnimationState (line 262) | type AnimationState = {
type ContainerLayoutState (line 289) | type ContainerLayoutState = {
type LayoutState (line 303) | type LayoutState = {
type DetentsState (line 330) | type DetentsState = {
FILE: src/utilities/animate.ts
type AnimateParams (line 11) | interface AnimateParams {
FILE: src/utilities/findNodeHandle.web.ts
function findNodeHandle (line 6) | function findNodeHandle(
FILE: src/utilities/getRefNativeTag.web.ts
function getRefNativeTag (line 4) | function getRefNativeTag(ref: RefObject<never>) {
FILE: src/utilities/isFabricInstalled.ts
function isFabricInstalled (line 6) | function isFabricInstalled() {
FILE: src/utilities/logger.ts
type PrintOptions (line 1) | interface PrintOptions {
type Print (line 8) | type Print = (options: PrintOptions) => void;
Condensed preview — 327 files, each showing path, character count, and a content snippet. Download the .json file or copy for the full structured content (827K chars).
[
{
"path": ".gitattributes",
"chars": 16,
"preview": "*.pbxproj -text\n"
},
{
"path": ".github/FUNDING.yml",
"chars": 62,
"preview": "# These are supported funding model platforms\n\ngithub: gorhom\n"
},
{
"path": ".github/ISSUE_TEMPLATE/bug_template.yaml",
"chars": 2638,
"preview": "name: Bug Report\ndescription: File a bug report.\ntitle: \"[Bug]: \"\nlabels: [\"bug\", \"triage\"]\nbody:\n - type: markdown\n "
},
{
"path": ".github/ISSUE_TEMPLATE/feature_request.md",
"chars": 659,
"preview": "---\nname: Feature request\nabout: Suggest an idea for this project\ntitle: ''\nlabels: enhancement\nassignees: ''\n\n---\n\n# Fe"
},
{
"path": ".github/PULL_REQUEST_TEMPLATE.md",
"chars": 198,
"preview": "Please provide enough information so that others can review your pull request:\n\n## Motivation\n\nExplain the **motivation*"
},
{
"path": ".github/workflows/auto-close.yml",
"chars": 894,
"preview": "name: Auto Close Issue Workflow\n\non:\n issues:\n types: \n - opened\n - reopened\n - edited\n\nenv:\n GH_TOK"
},
{
"path": ".github/workflows/label-sponsors.yml",
"chars": 331,
"preview": "name: Label sponsors\non:\n pull_request:\n types: [opened]\n issues:\n types: [opened]\njobs:\n build:\n name: is-s"
},
{
"path": ".github/workflows/stale.yml",
"chars": 1055,
"preview": "name: Mark stale issues and pull requests\n\non:\n schedule:\n - cron: '39 9 * * *'\n\njobs:\n stale:\n\n runs-on: ubuntu-l"
},
{
"path": ".github/workflows/website.yml",
"chars": 1245,
"preview": "name: Deploy to GitHub Pages\n\non:\n push:\n branches:\n - master\n paths:\n - 'website/**'\n\njobs:\n build:\n "
},
{
"path": ".gitignore",
"chars": 864,
"preview": "# OSX\n#\n.DS_Store\n\n# XDE\n.expo/\n\n# VSCode\njsconfig.json\n\n# Xcode\n#\nbuild/\n*.pbxuser\n!default.pbxuser\n*.mode1v3\n!default."
},
{
"path": ".huskyrc.json",
"chars": 105,
"preview": "{\n \"hooks\": {\n \"commit-msg\": \"commitlint -E HUSKY_GIT_PARAMS\",\n \"pre-commit\": \"lint-staged\"\n }\n}\n"
},
{
"path": ".release-it.json",
"chars": 769,
"preview": "{\n \"git\": {\n \"push\": true,\n \"tagName\": \"v${version}\",\n \"commitMessage\": \"chore: release v${version}\"\n },\n \"g"
},
{
"path": ".vscode/settings.json",
"chars": 557,
"preview": "{\n \"editor.defaultFormatter\": \"biomejs.biome\",\n \"editor.formatOnSave\": true,\n \"editor.codeActionsOnSave\": {\n \"sour"
},
{
"path": "CHANGELOG.md",
"chars": 27166,
"preview": "# Changelog\n\n## [5.2.8](https://github.com/gorhom/react-native-bottom-sheet/compare/v5.2.7...v5.2.8) (2025-12-04)\n\n### 🐛"
},
{
"path": "CODE_OF_CONDUCT.md",
"chars": 5250,
"preview": "# Contributor Covenant Code of Conduct\n\n## Our Pledge\n\nWe as members, contributors, and leaders pledge to make participa"
},
{
"path": "CONTRIBUTING.md",
"chars": 3037,
"preview": "# Contributing\n\nWe want this community to be friendly and respectful to each other. Please follow it in all your interac"
},
{
"path": "LICENSE",
"chars": 1066,
"preview": "MIT License\n\nCopyright (c) 2020 Mo Gorhom\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\n"
},
{
"path": "README.md",
"chars": 4152,
"preview": "# React Native Bottom Sheet\n\n[![Reanimated v3 version](https://img.shields.io/github/package-json/v/gorhom/react-native-"
},
{
"path": "babel.config.js",
"chars": 124,
"preview": "module.exports = {\n presets: ['module:metro-react-native-babel-preset'],\n plugins: ['react-native-reanimated/plugin'],"
},
{
"path": "biome.json",
"chars": 3293,
"preview": "{\n \"$schema\": \"https://biomejs.dev/schemas/2.2.2/schema.json\",\n \"vcs\": { \"enabled\": true, \"clientKind\": \"git\", \"useIgn"
},
{
"path": "commitlint.config.js",
"chars": 70,
"preview": "module.exports = {\n extends: ['@commitlint/config-conventional'],\n};\n"
},
{
"path": "example/.gitignore",
"chars": 375,
"preview": "# Learn more https://docs.github.com/en/get-started/getting-started-with-git/ignoring-files\n\n# dependencies\nnode_modules"
},
{
"path": "example/App.tsx",
"chars": 557,
"preview": "import React from 'react';\nimport { StyleSheet } from 'react-native';\nimport { GestureHandlerRootView } from 'react-nati"
},
{
"path": "example/app.json",
"chars": 1010,
"preview": "{\n \"expo\": {\n \"name\": \"BottomSheet\",\n \"slug\": \"BottomSheet\",\n \"githubUrl\": \"https://github.com/gorhom/react-na"
},
{
"path": "example/babel.config.js",
"chars": 506,
"preview": "const path = require('node:path');\nconst pak = require('../package.json');\n\nmodule.exports = api => {\n api.cache(true);"
},
{
"path": "example/metro.config.js",
"chars": 765,
"preview": "// Learn more https://docs.expo.io/guides/customizing-metro\nconst { getDefaultConfig } = require('expo/metro-config');\nc"
},
{
"path": "example/package.json",
"chars": 1797,
"preview": "{\n \"name\": \"@gorhom/bottomsheet-example\",\n \"version\": \"5.0.0\",\n \"main\": \"node_modules/expo/AppEntry.js\",\n \"scripts\":"
},
{
"path": "example/src/Dev.tsx",
"chars": 2620,
"preview": "import BottomSheet, {\n BottomSheetFlatList,\n BottomSheetView,\n} from '@gorhom/bottom-sheet';\nimport React, { useCallba"
},
{
"path": "example/src/Main.tsx",
"chars": 417,
"preview": "import { ShowcaseApp } from '@gorhom/showcase-template';\nimport React from 'react';\nimport { description, version } from"
},
{
"path": "example/src/components/button/Button.tsx",
"chars": 562,
"preview": "import React, { memo } from 'react';\nimport { ViewStyle, TextStyle } from 'react-native';\nimport { ShowcaseButton, Showc"
},
{
"path": "example/src/components/button/index.ts",
"chars": 35,
"preview": "export { Button } from './Button';\n"
},
{
"path": "example/src/components/contactItem/ContactItem.tsx",
"chars": 1828,
"preview": "import React, { memo, useMemo } from 'react';\nimport { Text, StyleSheet, View, TextStyle, ViewStyle } from 'react-native"
},
{
"path": "example/src/components/contactItem/index.ts",
"chars": 45,
"preview": "export { ContactItem } from './ContactItem';\n"
},
{
"path": "example/src/components/contactList/ContactList.tsx",
"chars": 5267,
"preview": "import {\n BottomSheetFlatList,\n BottomSheetScrollView,\n BottomSheetSectionList,\n BottomSheetView,\n BottomSheetVirtu"
},
{
"path": "example/src/components/contactList/index.ts",
"chars": 100,
"preview": "export { ContactList } from './ContactList';\nexport type { ContactListProps } from './ContactList';\n"
},
{
"path": "example/src/components/contactList/styles.ts",
"chars": 431,
"preview": "import { StyleSheet } from 'react-native';\n\nexport const styles = StyleSheet.create({\n sectionHeaderContainer: {\n pa"
},
{
"path": "example/src/components/contactList/styles.web.ts",
"chars": 381,
"preview": "import { StyleSheet } from 'react-native';\n\nexport const styles = StyleSheet.create({\n sectionHeaderContainer: {\n pa"
},
{
"path": "example/src/components/customBackground/CustomBackground.tsx",
"chars": 1146,
"preview": "import React, { memo, useMemo } from 'react';\nimport { StyleSheet } from 'react-native';\nimport { BottomSheetBackgroundP"
},
{
"path": "example/src/components/customBackground/index.ts",
"chars": 55,
"preview": "export { CustomBackground } from './CustomBackground';\n"
},
{
"path": "example/src/components/customFooter/CustomFooter.tsx",
"chars": 2692,
"preview": "import React, { memo, useCallback, useMemo } from 'react';\nimport { Pressable, StyleSheet } from 'react-native';\nimport "
},
{
"path": "example/src/components/customFooter/index.ts",
"chars": 47,
"preview": "export { CustomFooter } from './CustomFooter';\n"
},
{
"path": "example/src/components/customHandle/CustomHandle.tsx",
"chars": 3784,
"preview": "import type { BottomSheetHandleProps } from '@gorhom/bottom-sheet';\nimport React, { memo, useMemo } from 'react';\nimport"
},
{
"path": "example/src/components/customHandle/index.ts",
"chars": 47,
"preview": "export { CustomHandle } from './CustomHandle';\n"
},
{
"path": "example/src/components/headerHandle/HeaderHandle.tsx",
"chars": 1063,
"preview": "import {\n BottomSheetHandle,\n type BottomSheetHandleProps,\n} from '@gorhom/bottom-sheet';\nimport React, { memo } from "
},
{
"path": "example/src/components/headerHandle/index.ts",
"chars": 47,
"preview": "export { HeaderHandle } from './HeaderHandle';\n"
},
{
"path": "example/src/components/searchHandle/SearchHandle.tsx",
"chars": 1942,
"preview": "import {\n type BottomSheetHandleProps,\n BottomSheetTextInput,\n} from '@gorhom/bottom-sheet';\nimport { useShowcaseTheme"
},
{
"path": "example/src/components/searchHandle/index.ts",
"chars": 69,
"preview": "export { SearchHandle, SEARCH_HANDLE_HEIGHT } from './SearchHandle';\n"
},
{
"path": "example/src/screens/advanced/BackdropExample.tsx",
"chars": 2364,
"preview": "import BottomSheet, { BottomSheetBackdrop } from '@gorhom/bottom-sheet';\nimport React, { useCallback, useMemo, useRef, u"
},
{
"path": "example/src/screens/advanced/CustomBackgroundExample.tsx",
"chars": 2103,
"preview": "import React, { useCallback, useMemo, useRef } from 'react';\nimport { View, StyleSheet } from 'react-native';\nimport Bot"
},
{
"path": "example/src/screens/advanced/CustomHandleExample.tsx",
"chars": 1889,
"preview": "import BottomSheet from '@gorhom/bottom-sheet';\nimport React, { useCallback, useMemo, useRef } from 'react';\nimport { St"
},
{
"path": "example/src/screens/advanced/CustomThemeExample.tsx",
"chars": 2392,
"preview": "import React, { useCallback, useMemo, useRef } from 'react';\nimport { View, StyleSheet } from 'react-native';\nimport Bot"
},
{
"path": "example/src/screens/advanced/DynamicSizingExample.tsx",
"chars": 4141,
"preview": "import BottomSheet, {\n BottomSheetFooter,\n type BottomSheetFooterProps,\n BottomSheetScrollView,\n BottomSheetView,\n "
},
{
"path": "example/src/screens/advanced/FooterExample.tsx",
"chars": 2129,
"preview": "import BottomSheet from '@gorhom/bottom-sheet';\nimport React, { useCallback, useMemo, useRef } from 'react';\nimport { St"
},
{
"path": "example/src/screens/advanced/KeyboardHandlingExample.tsx",
"chars": 3082,
"preview": "import BottomSheet from '@gorhom/bottom-sheet';\nimport React, { useCallback, useMemo, useRef, useState } from 'react';\ni"
},
{
"path": "example/src/screens/advanced/PullToRefreshExample.tsx",
"chars": 1773,
"preview": "import BottomSheet from '@gorhom/bottom-sheet';\nimport React, { useCallback, useMemo, useRef } from 'react';\nimport { St"
},
{
"path": "example/src/screens/advanced/ShadowExample.tsx",
"chars": 2364,
"preview": "import React, { useCallback, useMemo, useRef } from 'react';\nimport { View, StyleSheet, Platform } from 'react-native';\n"
},
{
"path": "example/src/screens/basic/BasicExamples.tsx",
"chars": 4794,
"preview": "import React, { useCallback, memo, useRef, useMemo, useState } from 'react';\nimport { StyleSheet, View } from 'react-nat"
},
{
"path": "example/src/screens/index.ts",
"chars": 5146,
"preview": "import type { ShowcaseExampleScreenSectionType } from '@gorhom/showcase-template';\nimport { Platform } from 'react-nativ"
},
{
"path": "example/src/screens/integrations/NativeScreensExample.tsx",
"chars": 1218,
"preview": "import React from 'react';\nimport { View, StyleSheet, Platform } from 'react-native';\nimport { useNavigation } from '@re"
},
{
"path": "example/src/screens/integrations/ViewPagerExample.tsx",
"chars": 1440,
"preview": "import React, { useMemo } from 'react';\nimport { View, Text, StyleSheet } from 'react-native';\nimport { createMaterialTo"
},
{
"path": "example/src/screens/integrations/flashlist/FlashListExample.tsx",
"chars": 4736,
"preview": "import BottomSheet, {\n useBottomSheetScrollableCreator,\n} from '@gorhom/bottom-sheet';\nimport { FlashList, type ListRen"
},
{
"path": "example/src/screens/integrations/flashlist/TweetContent.tsx",
"chars": 4061,
"preview": "import { Image } from 'expo-image';\nimport React from 'react';\n\nimport { StyleSheet, Text, View, type ViewStyle } from '"
},
{
"path": "example/src/screens/integrations/flashlist/data/tweets.ts",
"chars": 83018,
"preview": "/* eslint-disable max-len */\n\nimport type Tweet from '../models/Tweet';\n\nexport const tweets: Tweet[] = [\n {\n author"
},
{
"path": "example/src/screens/integrations/flashlist/index.ts",
"chars": 46,
"preview": "export { default } from './FlashListExample';\n"
},
{
"path": "example/src/screens/integrations/flashlist/models/Author.ts",
"chars": 92,
"preview": "export default interface Author {\n name: string;\n avatar: string;\n screenName: string;\n}\n"
},
{
"path": "example/src/screens/integrations/flashlist/models/Tweet.ts",
"chars": 195,
"preview": "import type Author from './Author';\n\nexport default interface Tweet {\n id: string;\n author: Author;\n fullText: string"
},
{
"path": "example/src/screens/integrations/legendlist/LegendListExample.tsx",
"chars": 2252,
"preview": "import BottomSheet, {\n useBottomSheetScrollableCreator,\n} from '@gorhom/bottom-sheet';\nimport { LegendList, type Legend"
},
{
"path": "example/src/screens/integrations/legendlist/index.ts",
"chars": 47,
"preview": "export { default } from './LegendListExample';\n"
},
{
"path": "example/src/screens/integrations/legendlist/renderItem.tsx",
"chars": 3192,
"preview": "import type { LegendListRenderItemProps } from '@legendapp/list';\nimport Faker from 'faker';\nimport { memo, useRef, useS"
},
{
"path": "example/src/screens/integrations/map/BlurredBackground.tsx",
"chars": 690,
"preview": "import React from 'react';\nimport { StyleSheet, View } from 'react-native';\nimport { BlurView } from 'expo-blur';\n\nconst"
},
{
"path": "example/src/screens/integrations/map/BlurredHandle.tsx",
"chars": 919,
"preview": "import React, { useMemo } from 'react';\nimport { View, StyleSheet, Dimensions } from 'react-native';\nimport { useShowcas"
},
{
"path": "example/src/screens/integrations/map/LocationDetails.tsx",
"chars": 4663,
"preview": "import React, { memo, useCallback, useMemo } from 'react';\nimport { View, StyleSheet, Image, ViewProps } from 'react-nat"
},
{
"path": "example/src/screens/integrations/map/LocationDetailsBottomSheet.tsx",
"chars": 2205,
"preview": "import React, { useEffect } from 'react';\nimport { BottomSheetModal } from '@gorhom/bottom-sheet';\nimport {\n forwardRef"
},
{
"path": "example/src/screens/integrations/map/LocationItem.tsx",
"chars": 1425,
"preview": "import React, { memo } from 'react';\nimport { StyleSheet, View } from 'react-native';\nimport { ShowcaseLabel } from '@go"
},
{
"path": "example/src/screens/integrations/map/LocationListBottomSheet.tsx",
"chars": 3288,
"preview": "import React, { forwardRef, useCallback, useMemo } from 'react';\nimport {\n BottomSheetBackdrop,\n BottomSheetBackdropPr"
},
{
"path": "example/src/screens/integrations/map/MapExample.tsx",
"chars": 3364,
"preview": "import React, { useCallback, useLayoutEffect, useMemo, useRef } from 'react';\nimport { View, StyleSheet, Dimensions } fr"
},
{
"path": "example/src/screens/integrations/map/Weather.tsx",
"chars": 2327,
"preview": "import React, { useCallback, useMemo, useState } from 'react';\nimport { LayoutChangeEvent, StyleSheet } from 'react-nati"
},
{
"path": "example/src/screens/integrations/navigation/DummyScreen.tsx",
"chars": 861,
"preview": "import React, { useCallback, memo } from 'react';\nimport { useNavigation } from '@react-navigation/native';\nimport { Con"
},
{
"path": "example/src/screens/integrations/navigation/NavigatorExample.tsx",
"chars": 3805,
"preview": "import BottomSheet from '@gorhom/bottom-sheet';\nimport {\n NavigationContainer,\n NavigationIndependentTree,\n} from '@re"
},
{
"path": "example/src/screens/modal/BackdropExample.tsx",
"chars": 2923,
"preview": "import React, { useCallback, useMemo, useRef, useState } from 'react';\nimport { View, StyleSheet, Alert } from 'react-na"
},
{
"path": "example/src/screens/modal/DetachedExample.tsx",
"chars": 3753,
"preview": "import {\n BottomSheetFooter,\n type BottomSheetFooterProps,\n type BottomSheetHandleProps,\n BottomSheetModal,\n Bottom"
},
{
"path": "example/src/screens/modal/DynamicSizingExample.tsx",
"chars": 4238,
"preview": "import {\n BottomSheetFooter,\n type BottomSheetFooterProps,\n BottomSheetModal,\n BottomSheetScrollView,\n type SNAP_PO"
},
{
"path": "example/src/screens/modal/SimpleExample.tsx",
"chars": 3404,
"preview": "import {\n type BottomSheetHandleProps,\n BottomSheetModal,\n} from '@gorhom/bottom-sheet';\nimport React, { useCallback, "
},
{
"path": "example/src/screens/modal/StackExample.tsx",
"chars": 4562,
"preview": "import {\n type BottomSheetHandleProps,\n BottomSheetModal,\n useBottomSheetModal,\n} from '@gorhom/bottom-sheet';\nimport"
},
{
"path": "example/src/screens/modal/withModalProvider.tsx",
"chars": 246,
"preview": "import { BottomSheetModalProvider } from '@gorhom/bottom-sheet';\nimport React, { type FC } from 'react';\n\nexport const w"
},
{
"path": "example/src/screens/withGestureHandlerRoot.tsx",
"chars": 399,
"preview": "import React, { FC } from 'react';\nimport { StyleSheet } from 'react-native';\nimport { GestureHandlerRootView } from 're"
},
{
"path": "example/src/types.d.ts",
"chars": 180,
"preview": "export type Contact = {\n name: string;\n jobTitle: string;\n address: string;\n};\n\nexport type Location = {\n id: string"
},
{
"path": "example/src/utilities/createMockData.ts",
"chars": 1940,
"preview": "import Faker from 'faker';\nimport { Dimensions } from 'react-native';\nimport type { Contact, Location } from '../types';"
},
{
"path": "example/src/utilities/transformOrigin.ts",
"chars": 239,
"preview": "// @ts-ignore\nexport const transformOrigin = ({ x, y }, ...transformations) => {\n 'worklet';\n return [\n { translate"
},
{
"path": "example/tsconfig.json",
"chars": 155,
"preview": "{\n \"extends\": \"expo/tsconfig.base\",\n \"compilerOptions\": {\n \"strict\": true,\n \"paths\": {\n \"@gorhom/bottom-she"
},
{
"path": "example/web/index.html",
"chars": 3487,
"preview": "<!DOCTYPE html>\n<html lang=\"%LANG_ISO_CODE%\">\n <head>\n <meta charset=\"utf-8\" />\n <meta httpEquiv=\"X-UA-Compatible"
},
{
"path": "example/webpack.config.js",
"chars": 1079,
"preview": "const createExpoWebpackConfigAsync = require('@expo/webpack-config');\nconst path = require('path');\n\nconst root = path.r"
},
{
"path": "lint-staged.config.js",
"chars": 638,
"preview": "module.exports = {\n '*.{js,ts,cjs,mjs,d.cts,d.mts,jsx,tsx,json,jsonc}': [\n 'biome check --files-ignore-unknown=true'"
},
{
"path": "mock.js",
"chars": 4557,
"preview": "/**\n * Mock implementation for test runners.\n *\n * Example:\n *\n * ```js\n * jest.mock('@gorhom/bottom-sheet', () => requi"
},
{
"path": "package.json",
"chars": 2980,
"preview": "{\n \"name\": \"@gorhom/bottom-sheet\",\n \"version\": \"5.2.8\",\n \"description\": \"A performant interactive bottom sheet with f"
},
{
"path": "src/components/bottomSheet/BottomSheet.tsx",
"chars": 54438,
"preview": "import invariant from 'invariant';\nimport React, {\n forwardRef,\n memo,\n useCallback,\n useEffect,\n useImperativeHand"
},
{
"path": "src/components/bottomSheet/BottomSheetBody.tsx",
"chars": 1287,
"preview": "import React, { memo, useMemo } from 'react';\nimport { Platform } from 'react-native';\nimport Animated, { useAnimatedSty"
},
{
"path": "src/components/bottomSheet/BottomSheetContent.tsx",
"chars": 7144,
"preview": "import React, { memo, useMemo } from 'react';\nimport type { ViewProps, ViewStyle } from 'react-native';\nimport Animated,"
},
{
"path": "src/components/bottomSheet/constants.ts",
"chars": 1717,
"preview": "import {\n KEYBOARD_BEHAVIOR,\n KEYBOARD_BLUR_BEHAVIOR,\n KEYBOARD_INPUT_MODE,\n SCREEN_HEIGHT,\n} from '../../constants'"
},
{
"path": "src/components/bottomSheet/index.ts",
"chars": 90,
"preview": "export { default } from './BottomSheet';\nexport type { BottomSheetProps } from './types';\n"
},
{
"path": "src/components/bottomSheet/styles.ts",
"chars": 212,
"preview": "import { StyleSheet } from 'react-native';\n\nexport const styles = StyleSheet.create({\n container: {\n flexDirection: "
},
{
"path": "src/components/bottomSheet/types.d.ts",
"chars": 10646,
"preview": "import type React from 'react';\nimport type { Insets, StyleProp, View, ViewStyle } from 'react-native';\nimport type { Pa"
},
{
"path": "src/components/bottomSheetBackdrop/BottomSheetBackdrop.tsx",
"chars": 4822,
"preview": "import React, {\n memo,\n useCallback,\n useEffect,\n useMemo,\n useRef,\n useState,\n} from 'react';\nimport type { ViewP"
},
{
"path": "src/components/bottomSheetBackdrop/constants.ts",
"chars": 667,
"preview": "const DEFAULT_OPACITY = 0.5;\nconst DEFAULT_APPEARS_ON_INDEX = 1;\nconst DEFAULT_DISAPPEARS_ON_INDEX = 0;\nconst DEFAULT_EN"
},
{
"path": "src/components/bottomSheetBackdrop/index.ts",
"chars": 118,
"preview": "export { BottomSheetBackdrop } from './BottomSheetBackdrop';\nexport type { BottomSheetBackdropProps } from './types';\n"
},
{
"path": "src/components/bottomSheetBackdrop/styles.ts",
"chars": 177,
"preview": "import { StyleSheet } from 'react-native';\n\nexport const styles = StyleSheet.create({\n backdrop: {\n ...StyleSheet.ab"
},
{
"path": "src/components/bottomSheetBackdrop/types.d.ts",
"chars": 1413,
"preview": "import type { ReactNode } from 'react';\nimport type { ViewProps } from 'react-native';\nimport type {\n BottomSheetVariab"
},
{
"path": "src/components/bottomSheetBackground/BottomSheetBackground.tsx",
"chars": 594,
"preview": "import React, { memo } from 'react';\nimport { View } from 'react-native';\nimport { styles } from './styles';\nimport type"
},
{
"path": "src/components/bottomSheetBackground/BottomSheetBackgroundContainer.tsx",
"chars": 1122,
"preview": "import React, { memo, useMemo } from 'react';\nimport { StyleSheet } from 'react-native';\nimport { BottomSheetBackground "
},
{
"path": "src/components/bottomSheetBackground/index.ts",
"chars": 142,
"preview": "export { BottomSheetBackgroundContainer } from './BottomSheetBackgroundContainer';\nexport type { BottomSheetBackgroundPr"
},
{
"path": "src/components/bottomSheetBackground/styles.ts",
"chars": 207,
"preview": "import { StyleSheet } from 'react-native';\n\nexport const styles = StyleSheet.create({\n container: StyleSheet.absoluteFi"
},
{
"path": "src/components/bottomSheetBackground/types.d.ts",
"chars": 441,
"preview": "import type { ViewProps } from 'react-native';\nimport type { BottomSheetVariables } from '../../types';\nimport type { Bo"
},
{
"path": "src/components/bottomSheetDebugView/BottomSheetDebugView.tsx",
"chars": 695,
"preview": "import React from 'react';\nimport { View } from 'react-native';\nimport type { SharedValue } from 'react-native-reanimate"
},
{
"path": "src/components/bottomSheetDebugView/ReText.tsx",
"chars": 1885,
"preview": "import React from 'react';\nimport { type TextProps as RNTextProps, TextInput } from 'react-native';\nimport Animated, {\n "
},
{
"path": "src/components/bottomSheetDebugView/ReText.webx.tsx",
"chars": 1334,
"preview": "import React, { useRef } from 'react';\nimport { type TextProps as RNTextProps, TextInput } from 'react-native';\nimport A"
},
{
"path": "src/components/bottomSheetDebugView/index.ts",
"chars": 50,
"preview": "export { default } from './BottomSheetDebugView';\n"
},
{
"path": "src/components/bottomSheetDebugView/styles.ts",
"chars": 374,
"preview": "import { StyleSheet } from 'react-native';\n\nexport const styles = StyleSheet.create({\n container: {\n position: 'abso"
},
{
"path": "src/components/bottomSheetDebugView/styles.web.ts",
"chars": 373,
"preview": "import { StyleSheet } from 'react-native';\n\nexport const styles = StyleSheet.create({\n container: {\n position: 'abso"
},
{
"path": "src/components/bottomSheetDraggableView/BottomSheetDraggableView.tsx",
"chars": 3297,
"preview": "import React, { useMemo, memo } from 'react';\nimport { Gesture, GestureDetector } from 'react-native-gesture-handler';\ni"
},
{
"path": "src/components/bottomSheetDraggableView/index.ts",
"chars": 54,
"preview": "export { default } from './BottomSheetDraggableView';\n"
},
{
"path": "src/components/bottomSheetDraggableView/types.d.ts",
"chars": 416,
"preview": "import type { ReactNode } from 'react';\nimport type { ViewProps as RNViewProps } from 'react-native';\nimport type { Gest"
},
{
"path": "src/components/bottomSheetFooter/BottomSheetFooter.tsx",
"chars": 2989,
"preview": "import React, { memo, useCallback, useMemo, useRef } from 'react';\nimport type { LayoutChangeEvent } from 'react-native'"
},
{
"path": "src/components/bottomSheetFooter/BottomSheetFooterContainer.tsx",
"chars": 1569,
"preview": "import React, { memo } from 'react';\nimport { useDerivedValue } from 'react-native-reanimated';\nimport { INITIAL_LAYOUT_"
},
{
"path": "src/components/bottomSheetFooter/index.ts",
"chars": 187,
"preview": "export { BottomSheetFooter } from './BottomSheetFooter';\nexport { BottomSheetFooterContainer } from './BottomSheetFooter"
},
{
"path": "src/components/bottomSheetFooter/styles.ts",
"chars": 224,
"preview": "import { StyleSheet } from 'react-native';\n\nexport const styles = StyleSheet.create({\n container: {\n position: 'abso"
},
{
"path": "src/components/bottomSheetFooter/types.d.ts",
"chars": 1005,
"preview": "import type { ReactNode } from 'react';\nimport type { ViewStyle } from 'react-native';\nimport type { SharedValue } from "
},
{
"path": "src/components/bottomSheetGestureHandlersProvider/BottomSheetGestureHandlersProvider.tsx",
"chars": 1937,
"preview": "import React, { useMemo } from 'react';\nimport { useSharedValue } from 'react-native-reanimated';\nimport { GESTURE_SOURC"
},
{
"path": "src/components/bottomSheetGestureHandlersProvider/index.ts",
"chars": 64,
"preview": "export { default } from './BottomSheetGestureHandlersProvider';\n"
},
{
"path": "src/components/bottomSheetGestureHandlersProvider/types.d.ts",
"chars": 284,
"preview": "import type { ReactChild } from 'react';\nimport React from 'react';\nimport type { BottomSheetProps } from '../bottomShee"
},
{
"path": "src/components/bottomSheetHandle/BottomSheetHandle.tsx",
"chars": 1457,
"preview": "import React, { memo, useMemo } from 'react';\nimport { StyleSheet, View } from 'react-native';\nimport {\n DEFAULT_ACCESS"
},
{
"path": "src/components/bottomSheetHandle/BottomSheetHandleContainer.tsx",
"chars": 5048,
"preview": "import React, { memo, useCallback, useMemo, useRef } from 'react';\nimport type { LayoutChangeEvent, View } from 'react-n"
},
{
"path": "src/components/bottomSheetHandle/constants.ts",
"chars": 362,
"preview": "const DEFAULT_ACCESSIBLE = true;\nconst DEFAULT_ACCESSIBILITY_ROLE = 'adjustable';\nconst DEFAULT_ACCESSIBILITY_LABEL = 'B"
},
{
"path": "src/components/bottomSheetHandle/index.ts",
"chars": 247,
"preview": "export { default as BottomSheetHandle } from './BottomSheetHandle';\nexport { default as BottomSheetHandleContainer } fro"
},
{
"path": "src/components/bottomSheetHandle/styles.ts",
"chars": 459,
"preview": "import { Platform, StyleSheet } from 'react-native';\nimport { WINDOW_WIDTH } from '../../constants';\n\n\nexport const styl"
},
{
"path": "src/components/bottomSheetHandle/types.d.ts",
"chars": 1609,
"preview": "import type React from 'react';\nimport type { View, ViewProps } from 'react-native';\nimport type { PanGestureHandlerProp"
},
{
"path": "src/components/bottomSheetHostingContainer/BottomSheetHostingContainer.tsx",
"chars": 3065,
"preview": "import React, { memo, useCallback, useMemo, useRef } from 'react';\nimport {\n type LayoutChangeEvent,\n StatusBar,\n typ"
},
{
"path": "src/components/bottomSheetHostingContainer/index.ts",
"chars": 142,
"preview": "export { BottomSheetHostingContainer } from './BottomSheetHostingContainer';\nexport type { BottomSheetHostingContainerPr"
},
{
"path": "src/components/bottomSheetHostingContainer/styles.ts",
"chars": 168,
"preview": "import { StyleSheet } from 'react-native';\n\nexport const styles = StyleSheet.create({\n container: { ...StyleSheet.absol"
},
{
"path": "src/components/bottomSheetHostingContainer/styles.web.ts",
"chars": 190,
"preview": "import { StyleSheet } from 'react-native';\n\nexport const styles = StyleSheet.create({\n container: {\n position: 'abso"
},
{
"path": "src/components/bottomSheetHostingContainer/types.d.ts",
"chars": 638,
"preview": "import type { ReactNode } from 'react';\nimport type { Insets, StyleProp, ViewStyle } from 'react-native';\nimport type { "
},
{
"path": "src/components/bottomSheetModal/BottomSheetModal.tsx",
"chars": 13196,
"preview": "import { Portal, usePortal } from '@gorhom/portal';\nimport React, {\n forwardRef,\n memo,\n type RefObject,\n useCallbac"
},
{
"path": "src/components/bottomSheetModal/constants.ts",
"chars": 156,
"preview": "const DEFAULT_STACK_BEHAVIOR = 'switch';\nconst DEFAULT_ENABLE_DISMISS_ON_CLOSE = true;\n\nexport { DEFAULT_STACK_BEHAVIOR,"
},
{
"path": "src/components/bottomSheetModal/index.ts",
"chars": 170,
"preview": "export { default } from './BottomSheetModal';\nexport type {\n BottomSheetModalProps,\n BottomSheetModalPrivateMethods,\n "
},
{
"path": "src/components/bottomSheetModal/types.d.ts",
"chars": 2148,
"preview": "import type React from 'react';\nimport type { View } from 'react-native';\nimport type { MODAL_STACK_BEHAVIOR } from '../"
},
{
"path": "src/components/bottomSheetModalProvider/BottomSheetModalProvider.tsx",
"chars": 6333,
"preview": "import { PortalProvider } from '@gorhom/portal';\nimport React, { useCallback, useMemo, useRef } from 'react';\nimport { u"
},
{
"path": "src/components/bottomSheetModalProvider/index.ts",
"chars": 54,
"preview": "export { default } from './BottomSheetModalProvider';\n"
},
{
"path": "src/components/bottomSheetModalProvider/types.d.ts",
"chars": 333,
"preview": "import type { ReactNode, RefObject } from 'react';\nimport type { BottomSheetModalPrivateMethods } from '../bottomSheetMo"
},
{
"path": "src/components/bottomSheetRefreshControl/BottomSheetRefreshControl.android.tsx",
"chars": 2371,
"preview": "import React, { memo, useContext, useMemo } from 'react';\nimport { RefreshControl, type RefreshControlProps } from 'reac"
},
{
"path": "src/components/bottomSheetRefreshControl/BottomSheetRefreshControl.tsx",
"chars": 27,
"preview": "export default () => null;\n"
},
{
"path": "src/components/bottomSheetRefreshControl/index.ts",
"chars": 662,
"preview": "import type React from 'react';\nimport type { RefreshControlProps } from 'react-native';\nimport type {\n NativeViewGestu"
},
{
"path": "src/components/bottomSheetScrollable/BottomSheetDraggableScrollable.tsx",
"chars": 523,
"preview": "import React from 'react';\nimport {\n GestureDetector,\n type SimultaneousGesture,\n} from 'react-native-gesture-handler'"
},
{
"path": "src/components/bottomSheetScrollable/BottomSheetFlashList.tsx",
"chars": 2469,
"preview": "// @ts-ignore\nimport type { FlashListProps } from '@shopify/flash-list';\nimport React, { forwardRef, memo, type Ref, use"
},
{
"path": "src/components/bottomSheetScrollable/BottomSheetFlashList.web.tsx",
"chars": 27,
"preview": "export default () => null;\n"
},
{
"path": "src/components/bottomSheetScrollable/BottomSheetFlatList.tsx",
"chars": 942,
"preview": "import { type ComponentProps, memo } from 'react';\nimport { FlatList as RNFlatList } from 'react-native';\nimport Animate"
},
{
"path": "src/components/bottomSheetScrollable/BottomSheetScrollView.tsx",
"chars": 968,
"preview": "import { memo } from 'react';\nimport {\n ScrollView as RNScrollView,\n type ScrollViewProps as RNScrollViewProps,\n} from"
},
{
"path": "src/components/bottomSheetScrollable/BottomSheetSectionList.tsx",
"chars": 1089,
"preview": "import { type ComponentProps, memo } from 'react';\nimport {\n type DefaultSectionT,\n SectionList as RNSectionList,\n} fr"
},
{
"path": "src/components/bottomSheetScrollable/BottomSheetVirtualizedList.tsx",
"chars": 1083,
"preview": "import { type ComponentProps, memo } from 'react';\nimport { VirtualizedList as RNVirtualizedList } from 'react-native';\n"
},
{
"path": "src/components/bottomSheetScrollable/ScrollableContainer.android.tsx",
"chars": 1581,
"preview": "import React, { forwardRef } from 'react';\nimport type { SimultaneousGesture } from 'react-native-gesture-handler';\nimpo"
},
{
"path": "src/components/bottomSheetScrollable/ScrollableContainer.tsx",
"chars": 745,
"preview": "import React, { type FC, forwardRef } from 'react';\nimport type { SimultaneousGesture } from 'react-native-gesture-handl"
},
{
"path": "src/components/bottomSheetScrollable/ScrollableContainer.web.tsx",
"chars": 2786,
"preview": "import React, {\n type ComponentProps,\n forwardRef,\n useCallback,\n useRef,\n} from 'react';\nimport type { LayoutChange"
},
{
"path": "src/components/bottomSheetScrollable/createBottomSheetScrollableComponent.tsx",
"chars": 4463,
"preview": "import React, {\n forwardRef,\n useContext,\n useImperativeHandle,\n useMemo,\n} from 'react';\nimport { Gesture } from 'r"
},
{
"path": "src/components/bottomSheetScrollable/index.ts",
"chars": 677,
"preview": "export { createBottomSheetScrollableComponent } from './createBottomSheetScrollableComponent';\nexport { default as Botto"
},
{
"path": "src/components/bottomSheetScrollable/styles.ts",
"chars": 148,
"preview": "import { StyleSheet } from 'react-native';\n\nexport const styles = StyleSheet.create({\n container: {\n flex: 1,\n ov"
},
{
"path": "src/components/bottomSheetScrollable/types.d.ts",
"chars": 8582,
"preview": "import type {\n DependencyList,\n EffectCallback,\n ReactNode,\n Ref,\n RefObject,\n} from 'react';\nimport type {\n FlatL"
},
{
"path": "src/components/bottomSheetScrollable/useBottomSheetContentSizeSetter.ts",
"chars": 749,
"preview": "import { useCallback } from 'react';\nimport { useBottomSheetInternal } from '../../hooks';\n\n/**\n * A hook to set the con"
},
{
"path": "src/components/bottomSheetTextInput/BottomSheetTextInput.tsx",
"chars": 3460,
"preview": "import React, {\n forwardRef,\n memo,\n useCallback,\n useEffect,\n useImperativeHandle,\n useRef,\n} from 'react';\nimpor"
},
{
"path": "src/components/bottomSheetTextInput/index.ts",
"chars": 108,
"preview": "export { default } from './BottomSheetTextInput';\nexport type { BottomSheetTextInputProps } from './types';\n"
},
{
"path": "src/components/bottomSheetTextInput/types.ts",
"chars": 122,
"preview": "import type { TextInputProps } from 'react-native';\n\nexport interface BottomSheetTextInputProps extends TextInputProps {"
},
{
"path": "src/components/bottomSheetView/BottomSheetView.tsx",
"chars": 2325,
"preview": "import React, { memo, useEffect, useCallback, useMemo } from 'react';\nimport { type LayoutChangeEvent, View } from 'reac"
},
{
"path": "src/components/bottomSheetView/index.ts",
"chars": 45,
"preview": "export { default } from './BottomSheetView';\n"
},
{
"path": "src/components/bottomSheetView/styles.ts",
"chars": 175,
"preview": "import { StyleSheet } from 'react-native';\n\nexport const styles = StyleSheet.create({\n container: {\n position: 'abso"
},
{
"path": "src/components/bottomSheetView/types.d.ts",
"chars": 838,
"preview": "import type { DependencyList, EffectCallback, ReactNode } from 'react';\nimport type { ViewProps as RNViewProps } from 'r"
},
{
"path": "src/components/touchables/Touchables.ios.tsx",
"chars": 102,
"preview": "export {\n TouchableOpacity,\n TouchableHighlight,\n TouchableWithoutFeedback,\n} from 'react-native';\n"
},
{
"path": "src/components/touchables/Touchables.tsx",
"chars": 118,
"preview": "export {\n TouchableOpacity,\n TouchableHighlight,\n TouchableWithoutFeedback,\n} from 'react-native-gesture-handler';\n"
},
{
"path": "src/components/touchables/index.ts",
"chars": 589,
"preview": "import type {\n TouchableHighlight as RNTouchableHighlight,\n TouchableOpacity as RNTouchableOpacity,\n TouchableWithout"
},
{
"path": "src/constants.ts",
"chars": 2938,
"preview": "import { Dimensions, Platform } from 'react-native';\nimport { Easing } from 'react-native-reanimated';\nimport type { Spr"
},
{
"path": "src/contexts/external.ts",
"chars": 290,
"preview": "import { createContext } from 'react';\nimport type { BottomSheetMethods, BottomSheetVariables } from '../types';\n\nexport"
},
{
"path": "src/contexts/gesture.ts",
"chars": 587,
"preview": "import { createContext } from 'react';\nimport type { Gesture } from 'react-native-gesture-handler/lib/typescript/handler"
},
{
"path": "src/contexts/index.ts",
"chars": 499,
"preview": "export { BottomSheetContext, BottomSheetProvider } from './external';\nexport {\n BottomSheetInternalContext,\n BottomShe"
},
{
"path": "src/contexts/internal.ts",
"chars": 2048,
"preview": "import { createContext, type RefObject } from 'react';\nimport type { State } from 'react-native-gesture-handler';\nimport"
},
{
"path": "src/contexts/modal/external.ts",
"chars": 327,
"preview": "import { createContext } from 'react';\n\nexport interface BottomSheetModalContextType {\n dismiss: (key?: string) => bool"
},
{
"path": "src/contexts/modal/internal.ts",
"chars": 871,
"preview": "import { type RefObject, createContext } from 'react';\nimport type { SharedValue } from 'react-native-reanimated';\nimpor"
},
{
"path": "src/hooks/index.ts",
"chars": 1242,
"preview": "export { useBottomSheet } from './useBottomSheet';\nexport { useBottomSheetInternal } from './useBottomSheetInternal';\n\n/"
},
{
"path": "src/hooks/useAnimatedDetents.ts",
"chars": 4251,
"preview": "import { type SharedValue, useDerivedValue } from 'react-native-reanimated';\nimport type { BottomSheetProps } from '../c"
},
{
"path": "src/hooks/useAnimatedKeyboard.ts",
"chars": 4358,
"preview": "import { useCallback, useEffect, useRef } from 'react';\nimport {\n Keyboard,\n type KeyboardEvent,\n type KeyboardEventE"
},
{
"path": "src/hooks/useAnimatedLayout.ts",
"chars": 3460,
"preview": "import { useMemo, useState } from 'react';\nimport {\n type SharedValue,\n makeMutable,\n useAnimatedReaction,\n} from 're"
},
{
"path": "src/hooks/useBottomSheet.ts",
"chars": 306,
"preview": "import { useContext } from 'react';\nimport { BottomSheetContext } from '../contexts/external';\n\nexport const useBottomSh"
},
{
"path": "src/hooks/useBottomSheetContentContainerStyle.ts",
"chars": 2595,
"preview": "import { useMemo, useState } from 'react';\nimport {\n Platform,\n StyleSheet,\n type ViewProps,\n type ViewStyle,\n} from"
},
{
"path": "src/hooks/useBottomSheetGestureHandlers.ts",
"chars": 365,
"preview": "import { useContext } from 'react';\nimport { BottomSheetGestureHandlersContext } from '../contexts/gesture';\n\nexport con"
},
{
"path": "src/hooks/useBottomSheetInternal.ts",
"chars": 645,
"preview": "import { useContext } from 'react';\nimport {\n BottomSheetInternalContext,\n type BottomSheetInternalContextType,\n} from"
},
{
"path": "src/hooks/useBottomSheetModal.ts",
"chars": 298,
"preview": "import { useContext } from 'react';\nimport { BottomSheetModalContext } from '../contexts';\n\nexport const useBottomSheetM"
},
{
"path": "src/hooks/useBottomSheetModalInternal.ts",
"chars": 667,
"preview": "import { useContext } from 'react';\nimport {\n BottomSheetModalInternalContext,\n type BottomSheetModalInternalContextTy"
},
{
"path": "src/hooks/useBottomSheetScrollableCreator.tsx",
"chars": 2142,
"preview": "import { type ReactElement, useCallback } from 'react';\nimport {\n type BottomSheetScrollableProps,\n BottomSheetScrollV"
},
{
"path": "src/hooks/useBottomSheetSpringConfigs.ts",
"chars": 270,
"preview": "import type { WithSpringConfig } from 'react-native-reanimated';\n\n/**\n * Generate spring animation configs.\n * @param co"
},
{
"path": "src/hooks/useBottomSheetTimingConfigs.ts",
"chars": 1002,
"preview": "import { useMemo } from 'react';\nimport type { EasingFunction } from 'react-native';\nimport type {\n EasingFunctionFacto"
},
{
"path": "src/hooks/useBoundingClientRect.ts",
"chars": 2671,
"preview": "import { type RefObject, useLayoutEffect } from 'react';\nimport type { View } from 'react-native';\nimport { isFabricInst"
},
{
"path": "src/hooks/useGestureEventsHandlersDefault.tsx",
"chars": 13426,
"preview": "import { useCallback } from 'react';\nimport { Keyboard, Platform } from 'react-native';\nimport { runOnJS, useSharedValue"
},
{
"path": "src/hooks/useGestureEventsHandlersDefault.web.tsx",
"chars": 12353,
"preview": "import { useCallback } from 'react';\nimport { Keyboard, Platform } from 'react-native';\nimport { runOnJS, useSharedValue"
},
{
"path": "src/hooks/useGestureHandler.ts",
"chars": 2295,
"preview": "import { useCallback } from 'react';\nimport {\n type GestureStateChangeEvent,\n type GestureUpdateEvent,\n type PanGestu"
},
{
"path": "src/hooks/usePropsValidator.ts",
"chars": 2895,
"preview": "import invariant from 'invariant';\nimport { useMemo } from 'react';\nimport type { BottomSheetProps } from '../components"
}
]
// ... and 127 more files (download for full content)
About this extraction
This page contains the full source code of the gorhom/react-native-bottom-sheet GitHub repository, extracted and formatted as plain text for AI agents and large language models (LLMs). The extraction includes 327 files (755.9 KB), approximately 205.4k tokens, and a symbol index with 242 extracted functions, classes, methods, constants, and types. Use this with OpenClaw, Claude, ChatGPT, Cursor, Windsurf, or any other AI tool that accepts text input. You can copy the full output to your clipboard or download it as a .txt file.
Extracted by GitExtract — free GitHub repo to text converter for AI. Built by Nikandr Surkov.