['style'];
12 | }
13 |
14 | const AnimatedTextInput = Animated.createAnimatedComponent(TextInput);
15 |
16 | const ReText = (props: TextProps) => {
17 | const { text, value: _providedValue, style } = { style: {}, ...props };
18 | const providedValue = useDerivedValue(() =>
19 | typeof _providedValue === 'number'
20 | ? _providedValue
21 | : typeof _providedValue.value === 'number'
22 | ? _providedValue.value.toFixed(2)
23 | : _providedValue.value
24 | );
25 | const animatedProps = useAnimatedProps(() => {
26 | return {
27 | text: `${text}: ${providedValue.value}`,
28 | };
29 | }, [providedValue]);
30 | return (
31 |
39 | );
40 | };
41 |
42 | export default ReText;
43 |
--------------------------------------------------------------------------------
/example/app/src/components/headerHandle/HeaderHandle.tsx:
--------------------------------------------------------------------------------
1 | import React, { memo } from 'react';
2 | import { StyleSheet, Text } from 'react-native';
3 | import {
4 | BottomSheetHandle,
5 | BottomSheetHandleProps,
6 | } from '@gorhom/bottom-sheet';
7 |
8 | interface HeaderHandleProps extends BottomSheetHandleProps {
9 | children?: string | React.ReactNode | React.ReactNode[];
10 | }
11 |
12 | const HeaderHandleComponent = ({ children, ...rest }: HeaderHandleProps) => {
13 | return (
14 |
19 | {typeof children === 'string' ? (
20 | {children}
21 | ) : (
22 | children
23 | )}
24 |
25 | );
26 | };
27 |
28 | const styles = StyleSheet.create({
29 | container: {
30 | paddingBottom: 12,
31 | paddingHorizontal: 16,
32 | borderBottomWidth: 1,
33 | borderBottomColor: 'rgba(0,0,0,0.075)',
34 | zIndex: 99999,
35 | },
36 | title: {
37 | marginTop: 16,
38 | fontSize: 20,
39 | lineHeight: 20,
40 | textAlign: 'center',
41 | fontWeight: 'bold',
42 | color: 'black',
43 | },
44 | indicator: {
45 | height: 4,
46 | opacity: 0.5,
47 | },
48 | });
49 |
50 | export const HeaderHandle = memo(HeaderHandleComponent);
51 |
--------------------------------------------------------------------------------
/example/bare/android/app/src/main/java/dev/gorhom/bottomsheet/components/MainComponentsRegistry.java:
--------------------------------------------------------------------------------
1 | package dev.gorhom.bottomsheet.components;
2 |
3 | import com.facebook.jni.HybridData;
4 | import com.facebook.proguard.annotations.DoNotStrip;
5 | import com.facebook.react.fabric.ComponentFactory;
6 | import com.facebook.soloader.SoLoader;
7 |
8 | /**
9 | * Class responsible to load the custom Fabric Components. This class has native methods and needs a
10 | * corresponding C++ implementation/header file to work correctly (already placed inside the jni/
11 | * folder for you).
12 | *
13 | * Please note that this class is used ONLY if you opt-in for the New Architecture (see the
14 | * `newArchEnabled` property). Is ignored otherwise.
15 | */
16 | @DoNotStrip
17 | public class MainComponentsRegistry {
18 | static {
19 | SoLoader.loadLibrary("fabricjni");
20 | }
21 |
22 | @DoNotStrip
23 | private final HybridData mHybridData;
24 |
25 | @DoNotStrip
26 | private native HybridData initHybrid(ComponentFactory componentFactory);
27 |
28 | @DoNotStrip
29 | private MainComponentsRegistry(ComponentFactory componentFactory) {
30 | mHybridData = initHybrid(componentFactory);
31 | }
32 |
33 | @DoNotStrip
34 | public static MainComponentsRegistry register(ComponentFactory componentFactory) {
35 | return new MainComponentsRegistry(componentFactory);
36 | }
37 | }
38 |
--------------------------------------------------------------------------------
/src/components/bottomSheetBackgroundContainer/BottomSheetBackgroundContainer.tsx:
--------------------------------------------------------------------------------
1 | import React, { memo, useMemo } from 'react';
2 | import BottomSheetBackground from '../bottomSheetBackground';
3 | import type { BottomSheetBackgroundContainerProps } from './types';
4 | import { styles } from './styles';
5 | import { StyleSheet } from 'react-native';
6 |
7 | const BottomSheetBackgroundContainerComponent = ({
8 | animatedIndex,
9 | animatedPosition,
10 | backgroundComponent: _providedBackgroundComponent,
11 | backgroundStyle: _providedBackgroundStyle,
12 | }: BottomSheetBackgroundContainerProps) => {
13 | const BackgroundComponent =
14 | _providedBackgroundComponent || BottomSheetBackground;
15 |
16 | const backgroundStyle = useMemo(
17 | () => StyleSheet.flatten([styles.container, _providedBackgroundStyle]),
18 | [_providedBackgroundStyle]
19 | );
20 |
21 | return _providedBackgroundComponent === null ? null : (
22 |
28 | );
29 | };
30 |
31 | const BottomSheetBackgroundContainer = memo(
32 | BottomSheetBackgroundContainerComponent
33 | );
34 | BottomSheetBackgroundContainer.displayName = 'BottomSheetBackgroundContainer';
35 |
36 | export default BottomSheetBackgroundContainer;
37 |
--------------------------------------------------------------------------------
/example/bare/src/screens/integrations/NativeScreensExample.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { View, StyleSheet, Platform } from 'react-native';
3 | import { useNavigation } from '@react-navigation/native';
4 | import { createNativeStackNavigator } from '@react-navigation/native-stack';
5 | import {
6 | ModalBackdropExample,
7 | Button,
8 | withModalProvider,
9 | } from '@gorhom/bottom-sheet-example-app';
10 |
11 | const RootScreen = () => {
12 | const { navigate } = useNavigation();
13 | return (
14 |
15 |
21 | );
22 | };
23 |
24 | const styles = StyleSheet.create({
25 | container: {
26 | flex: 1,
27 | padding: 24,
28 | },
29 | });
30 |
31 | const NativeStack = createNativeStackNavigator();
32 |
33 | export default withModalProvider(() => (
34 |
35 |
40 |
48 |
49 | ));
50 |
--------------------------------------------------------------------------------
/src/hooks/useReactiveSharedValue.ts:
--------------------------------------------------------------------------------
1 | import { useEffect, useRef } from 'react';
2 | import Animated, {
3 | cancelAnimation,
4 | makeMutable,
5 | } from 'react-native-reanimated';
6 | import type { Primitive } from '../types';
7 |
8 | export const useReactiveSharedValue = (
9 | value: T
10 | ): T extends Primitive ? Animated.SharedValue : T => {
11 | const initialValueRef = useRef(null);
12 | const valueRef = useRef>(null);
13 |
14 | if (value && typeof value === 'object' && 'value' in value) {
15 | /**
16 | * if provided value is a shared value,
17 | * then we do not initialize another one.
18 | */
19 | } else if (valueRef.current === null) {
20 | // @ts-ignore
21 | initialValueRef.current = value;
22 | /**
23 | * if value is an object, then we need to
24 | * pass a clone.
25 | */
26 | if (typeof value === 'object') {
27 | // @ts-ignore
28 | valueRef.current = makeMutable({ ...value });
29 | } else {
30 | // @ts-ignore
31 | valueRef.current = makeMutable(value);
32 | }
33 | } else if (initialValueRef.current !== value) {
34 | valueRef.current.value = value as T;
35 | }
36 |
37 | useEffect(() => {
38 | return () => {
39 | if (valueRef.current) {
40 | cancelAnimation(valueRef.current);
41 | }
42 | };
43 | }, []);
44 |
45 | // @ts-ignore
46 | return valueRef.current ?? value;
47 | };
48 |
--------------------------------------------------------------------------------
/scripts/auto-changelog.js:
--------------------------------------------------------------------------------
1 | module.exports = function (Handlebars) {
2 | Handlebars.registerHelper(
3 | 'custom',
4 | function (context, merges, fixes, options) {
5 | if (
6 | (!context || context.length === 0) &&
7 | (!merges || merges.length === 0) &&
8 | (!fixes || fixes.length === 0)
9 | ) {
10 | return '';
11 | }
12 |
13 | const list = [...context, ...(merges || []), ...(fixes || [])]
14 | .filter(item => {
15 | const commit = item.commit || item;
16 | if (options.hash.exclude) {
17 | const pattern = new RegExp(options.hash.exclude, 'm');
18 | if (pattern.test(commit.message)) {
19 | return false;
20 | }
21 | }
22 | if (options.hash.message) {
23 | const pattern = new RegExp(options.hash.message, 'm');
24 | return pattern.test(commit.message);
25 | }
26 | if (options.hash.subject) {
27 | const pattern = new RegExp(options.hash.subject);
28 | return pattern.test(commit.subject);
29 | }
30 | return true;
31 | })
32 | .map(item => options.fn(item.commit || item))
33 | .join('');
34 |
35 | if (!list) {
36 | return '';
37 | }
38 |
39 | return options.hash.heading
40 | ? `${options.hash.heading}\n\n${list}`
41 | : `${list}`;
42 | }
43 | );
44 | };
45 |
--------------------------------------------------------------------------------
/example/bare/metro.config.js:
--------------------------------------------------------------------------------
1 | const path = require('path');
2 | const fs = require('fs');
3 | const exclusionList = require('metro-config/src/defaults/exclusionList');
4 | const escape = require('escape-string-regexp');
5 |
6 | const root = path.resolve(__dirname, '../..');
7 | const rootPak = JSON.parse(
8 | fs.readFileSync(path.join(root, 'package.json'), 'utf8')
9 | );
10 |
11 | const app = path.join(__dirname, '../app');
12 | const appPak = JSON.parse(
13 | fs.readFileSync(path.join(app, 'package.json'), 'utf8')
14 | );
15 |
16 | const modules = [
17 | '@babel/runtime',
18 | ...Object.keys({
19 | ...rootPak.dependencies,
20 | ...rootPak.peerDependencies,
21 | ...appPak.devDependencies,
22 | ...appPak.peerDependencies,
23 | }),
24 | ];
25 |
26 | module.exports = {
27 | projectRoot: __dirname,
28 | watchFolders: [root],
29 |
30 | resolver: {
31 | blacklistRE: exclusionList([
32 | new RegExp(`^${escape(path.join(root, 'node_modules'))}\\/.*$`),
33 | new RegExp(`^${escape(path.join(app, 'node_modules'))}\\/.*$`),
34 | ]),
35 |
36 | extraNodeModules: modules.reduce((acc, name) => {
37 | acc[name] = path.join(__dirname, 'node_modules', name);
38 | return acc;
39 | }, {}),
40 | },
41 |
42 | transformer: {
43 | getTransformOptions: async () => ({
44 | transform: {
45 | experimentalImportSupport: false,
46 | inlineRequires: true,
47 | },
48 | }),
49 | },
50 | };
51 |
--------------------------------------------------------------------------------
/src/components/bottomSheetRefreshControl/BottomSheetRefreshControl.android.tsx:
--------------------------------------------------------------------------------
1 | import React, { forwardRef, memo } from 'react';
2 | import { RefreshControl, RefreshControlProps } from 'react-native';
3 | import { NativeViewGestureHandler } from 'react-native-gesture-handler';
4 | import Animated, { useAnimatedProps } from 'react-native-reanimated';
5 | import { SCROLLABLE_STATE } from '../../constants';
6 | import { useBottomSheetInternal } from '../../hooks';
7 |
8 | const AnimatedRefreshControl = Animated.createAnimatedComponent(RefreshControl);
9 |
10 | const BottomSheetRefreshControlComponent = forwardRef<
11 | NativeViewGestureHandler,
12 | RefreshControlProps
13 | >(({ onRefresh, ...rest }, ref) => {
14 | // hooks
15 | const { animatedScrollableState } = useBottomSheetInternal();
16 |
17 | // variables
18 | const animatedProps = useAnimatedProps(() => ({
19 | enabled: animatedScrollableState.value === SCROLLABLE_STATE.UNLOCKED,
20 | }));
21 |
22 | // render
23 | return (
24 |
25 |
30 |
31 | );
32 | });
33 |
34 | const BottomSheetRefreshControl = memo(BottomSheetRefreshControlComponent);
35 | BottomSheetRefreshControl.displayName = 'BottomSheetRefreshControl';
36 |
37 | export default BottomSheetRefreshControl;
38 |
--------------------------------------------------------------------------------
/example/app/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "@gorhom/bottom-sheet-example-app",
3 | "description": "Example app for @gorhom/bottom-sheet",
4 | "version": "0.0.1",
5 | "main": "./src/index",
6 | "react-native": "./src/index",
7 | "private": true,
8 | "peerDependencies": {
9 | "@gorhom/portal": "^1.0.13",
10 | "@gorhom/showcase-template": "^2.1.0",
11 | "@react-native-community/blur": "^3.6.0",
12 | "@react-native-community/masked-view": "0.1.11",
13 | "@react-navigation/bottom-tabs": "^6.0.9",
14 | "@react-navigation/elements": "^1.2.1",
15 | "@react-navigation/material-top-tabs": "^6.0.6",
16 | "@react-navigation/native": "^6.0.6",
17 | "@react-navigation/native-stack": "^6.2.5",
18 | "@react-navigation/stack": "^6.0.11",
19 | "faker": "^4.1.0",
20 | "nanoid": "^3.3.3",
21 | "react": "17.0.2",
22 | "react-native": "0.68.1",
23 | "react-native-gesture-handler": "^2.5.0",
24 | "react-native-maps": "^0.30.1",
25 | "react-native-pager-view": "^5.4.24",
26 | "react-native-reanimated": "^2.9.1",
27 | "react-native-redash": "^16.0.11",
28 | "react-native-safe-area-context": "4.2.4",
29 | "react-native-screens": "^3.15.0",
30 | "react-native-tab-view": "^3.1.1",
31 | "@babel/core": "^7.13.10",
32 | "@babel/runtime": "^7.13.10",
33 | "@types/faker": "^4.1.12",
34 | "@types/react": "^17.0.35",
35 | "@types/react-native": "^0.66.5",
36 | "metro-react-native-babel-preset": "^0.67.0",
37 | "typescript": "^4.2.4"
38 | }
39 | }
40 |
--------------------------------------------------------------------------------
/src/utilities/getRefNativeTag.ts:
--------------------------------------------------------------------------------
1 | const isFunction = (ref: unknown): ref is Function => typeof ref === 'function';
2 |
3 | const hasNativeTag = (
4 | ref: unknown
5 | ): ref is { current: { _nativeTag: number } } =>
6 | !!ref &&
7 | typeof ref === 'object' &&
8 | 'current' in (ref || {}) &&
9 | '_nativeTag' in ((ref as any)?.current || {});
10 |
11 | /*
12 | * getRefNativeTag is an internal utility used by createBottomSheetScrollableComponent
13 | * to grab the native tag from the native host component. It only works when the ref
14 | * is pointing to a native Host component.
15 | *
16 | * Internally in the bottom-sheet library ref can be a function that returns a native tag
17 | * this seems to happen due to the usage of Reanimated's animated scroll components.
18 | *
19 | * This should be Fabric compatible as long as the ref is a native host component.
20 | * */
21 | export function getRefNativeTag(ref: unknown) {
22 | const refType = typeof ref;
23 | let nativeTag: undefined | number;
24 | if (isFunction(ref)) {
25 | nativeTag = ref();
26 | } else if (hasNativeTag(ref)) {
27 | nativeTag = ref.current._nativeTag;
28 | }
29 |
30 | if (!nativeTag || typeof nativeTag !== 'number') {
31 | throw new Error(
32 | `Unexpected nativeTag: ${refType}; nativeTag=${nativeTag}
33 |
34 | createBottomSheetScrollableComponent's ScrollableComponent needs to return
35 | a reference that contains a nativeTag to a Native HostComponent.
36 |
37 | ref=${ref}
38 | `
39 | );
40 | }
41 |
42 | return nativeTag;
43 | }
44 |
--------------------------------------------------------------------------------
/.github/workflows/documentation.yml:
--------------------------------------------------------------------------------
1 | name: documentation
2 |
3 | on:
4 | pull_request:
5 | branches:
6 | - website
7 | push:
8 | branches:
9 | - website
10 |
11 | jobs:
12 | checks:
13 | if: github.event_name != 'push'
14 | runs-on: ubuntu-latest
15 | steps:
16 | - uses: actions/checkout@v2
17 | - uses: actions/setup-node@v2
18 | with:
19 | node-version: '14'
20 | - name: Test Build
21 | run: |
22 | if [ -e yarn.lock ]; then
23 | yarn install --frozen-lockfile
24 | elif [ -e package-lock.json ]; then
25 | npm ci
26 | else
27 | npm i
28 | fi
29 | npm run build
30 | deploy:
31 | if: github.event_name != 'pull_request'
32 | runs-on: ubuntu-latest
33 | steps:
34 | - uses: actions/checkout@v2
35 | - uses: actions/setup-node@v2
36 | with:
37 | node-version: '14'
38 | - uses: webfactory/ssh-agent@v0.5.0
39 | with:
40 | ssh-private-key: ${{ secrets.GH_PAGES_DEPLOY }}
41 | - name: Release to GitHub Pages
42 | env:
43 | USE_SSH: true
44 | GIT_USER: git
45 | CURRENT_BRANCH: website
46 | run: |
47 | git config --global user.email "gorhom@me.com"
48 | git config --global user.name "gorhom"
49 | if [ -e yarn.lock ]; then
50 | yarn install --frozen-lockfile
51 | elif [ -e package-lock.json ]; then
52 | npm ci
53 | else
54 | npm i
55 | fi
56 | npm run deploy
--------------------------------------------------------------------------------
/src/components/bottomSheetBackdrop/types.d.ts:
--------------------------------------------------------------------------------
1 | import { ReactNode } from 'react';
2 | import type { ViewProps } from 'react-native';
3 | import type {
4 | BottomSheetVariables,
5 | NullableAccessibilityProps,
6 | } from '../../types';
7 |
8 | export interface BottomSheetBackdropProps
9 | extends Pick,
10 | BottomSheetVariables {}
11 |
12 | export type BackdropPressBehavior = 'none' | 'close' | 'collapse' | number;
13 |
14 | export interface BottomSheetDefaultBackdropProps
15 | extends BottomSheetBackdropProps,
16 | NullableAccessibilityProps {
17 | /**
18 | * Backdrop opacity.
19 | * @type number
20 | * @default 0.5
21 | */
22 | opacity?: number;
23 | /**
24 | * Snap point index when backdrop will appears on.
25 | * @type number
26 | * @default 1
27 | */
28 | appearsOnIndex?: number;
29 | /**
30 | * Snap point index when backdrop will disappears on.
31 | * @type number
32 | * @default 0
33 | */
34 | disappearsOnIndex?: number;
35 | /**
36 | * Enable touch through backdrop component.
37 | * @type boolean
38 | * @default false
39 | */
40 | enableTouchThrough?: boolean;
41 | /**
42 | * What should happen when user press backdrop?
43 | * @type BackdropPressBehavior
44 | * @default 'close'
45 | */
46 | pressBehavior?: BackdropPressBehavior;
47 |
48 | /**
49 | * Function which will be executed on pressing backdrop component
50 | * @type {Function}
51 | */
52 | onPress?: () => void;
53 | /**
54 | * Child component that will be rendered on backdrop.
55 | */
56 | children?: ReactNode | ReactNode[];
57 | }
58 |
--------------------------------------------------------------------------------
/example/expo/metro.config.js:
--------------------------------------------------------------------------------
1 | const path = require('path');
2 | const fs = require('fs');
3 | const exclusionList = require('metro-config/src/defaults/exclusionList');
4 | const escape = require('escape-string-regexp');
5 |
6 | const root = path.resolve(__dirname, '../..');
7 | const rootPak = JSON.parse(
8 | fs.readFileSync(path.join(root, 'package.json'), 'utf8')
9 | );
10 |
11 | const app = path.join(__dirname, '../app');
12 | const appPak = JSON.parse(
13 | fs.readFileSync(path.join(app, 'package.json'), 'utf8')
14 | );
15 |
16 | const modules = [
17 | '@babel/runtime',
18 | ...Object.keys({
19 | ...rootPak.dependencies,
20 | ...rootPak.peerDependencies,
21 | ...appPak.devDependencies,
22 | ...appPak.peerDependencies,
23 | }),
24 | ];
25 |
26 | module.exports = {
27 | projectRoot: __dirname,
28 | watchFolders: [root],
29 |
30 | // We need to make sure that only one version is loaded for peerDependencies
31 | // So we blacklist them at the root, and alias them to the versions in example's node_modules
32 | resolver: {
33 | blacklistRE: exclusionList([
34 | new RegExp(`^${escape(path.join(root, 'node_modules'))}\\/.*$`),
35 | new RegExp(`^${escape(path.join(app, 'node_modules'))}\\/.*$`),
36 | ]),
37 |
38 | extraNodeModules: modules.reduce((acc, name) => {
39 | acc[name] = path.join(__dirname, 'node_modules', name);
40 | return acc;
41 | }, {}),
42 | },
43 |
44 | transformer: {
45 | getTransformOptions: async () => ({
46 | transform: {
47 | experimentalImportSupport: false,
48 | inlineRequires: true,
49 | },
50 | }),
51 | },
52 | };
53 |
--------------------------------------------------------------------------------
/example/bare/android/app/src/main/jni/MainApplicationTurboModuleManagerDelegate.cpp:
--------------------------------------------------------------------------------
1 | #include "MainApplicationTurboModuleManagerDelegate.h"
2 | #include "MainApplicationModuleProvider.h"
3 |
4 | namespace facebook {
5 | namespace react {
6 |
7 | jni::local_ref
8 | MainApplicationTurboModuleManagerDelegate::initHybrid(
9 | jni::alias_ref) {
10 | return makeCxxInstance();
11 | }
12 |
13 | void MainApplicationTurboModuleManagerDelegate::registerNatives() {
14 | registerHybrid({
15 | makeNativeMethod(
16 | "initHybrid", MainApplicationTurboModuleManagerDelegate::initHybrid),
17 | makeNativeMethod(
18 | "canCreateTurboModule",
19 | MainApplicationTurboModuleManagerDelegate::canCreateTurboModule),
20 | });
21 | }
22 |
23 | std::shared_ptr
24 | MainApplicationTurboModuleManagerDelegate::getTurboModule(
25 | const std::string name,
26 | const std::shared_ptr jsInvoker) {
27 | // Not implemented yet: provide pure-C++ NativeModules here.
28 | return nullptr;
29 | }
30 |
31 | std::shared_ptr
32 | MainApplicationTurboModuleManagerDelegate::getTurboModule(
33 | const std::string name,
34 | const JavaTurboModule::InitParams ¶ms) {
35 | return MainApplicationModuleProvider(name, params);
36 | }
37 |
38 | bool MainApplicationTurboModuleManagerDelegate::canCreateTurboModule(
39 | std::string name) {
40 | return getTurboModule(name, nullptr) != nullptr ||
41 | getTurboModule(name, {.moduleName = name}) != nullptr;
42 | }
43 |
44 | } // namespace react
45 | } // namespace facebook
--------------------------------------------------------------------------------
/src/components/bottomSheetTextInput/BottomSheetTextInput.tsx:
--------------------------------------------------------------------------------
1 | import React, { memo, useCallback, forwardRef, useEffect } from 'react';
2 | import { TextInput } from 'react-native-gesture-handler';
3 | import { useBottomSheetInternal } from '../../hooks';
4 | import type { BottomSheetTextInputProps } from './types';
5 |
6 | const BottomSheetTextInputComponent = forwardRef<
7 | TextInput,
8 | BottomSheetTextInputProps
9 | >(({ onFocus, onBlur, ...rest }, ref) => {
10 | //#region hooks
11 | const { shouldHandleKeyboardEvents } = useBottomSheetInternal();
12 |
13 | useEffect(() => {
14 | return () => {
15 | // Reset the flag on unmount
16 | shouldHandleKeyboardEvents.value = false;
17 | };
18 | }, [shouldHandleKeyboardEvents]);
19 | //#endregion
20 |
21 | //#region callbacks
22 | const handleOnFocus = useCallback(
23 | args => {
24 | shouldHandleKeyboardEvents.value = true;
25 | if (onFocus) {
26 | onFocus(args);
27 | }
28 | },
29 | [onFocus, shouldHandleKeyboardEvents]
30 | );
31 | const handleOnBlur = useCallback(
32 | args => {
33 | shouldHandleKeyboardEvents.value = false;
34 | if (onBlur) {
35 | onBlur(args);
36 | }
37 | },
38 | [onBlur, shouldHandleKeyboardEvents]
39 | );
40 | //#endregion
41 |
42 | return (
43 |
49 | );
50 | });
51 |
52 | const BottomSheetTextInput = memo(BottomSheetTextInputComponent);
53 | BottomSheetTextInput.displayName = 'BottomSheetTextInput';
54 |
55 | export default BottomSheetTextInput;
56 |
--------------------------------------------------------------------------------
/example/bare/android/gradle.properties:
--------------------------------------------------------------------------------
1 | # Project-wide Gradle settings.
2 |
3 | # IDE (e.g. Android Studio) users:
4 | # Gradle settings configured through the IDE *will override*
5 | # any settings specified in this file.
6 |
7 | # For more details on how to configure your build environment visit
8 | # http://www.gradle.org/docs/current/userguide/build_environment.html
9 |
10 | # Specifies the JVM arguments used for the daemon process.
11 | # The setting is particularly useful for tweaking memory settings.
12 | # Default value: -Xmx512m -XX:MaxMetaspaceSize=256m
13 | # org.gradle.jvmargs=-Xmx2048m -XX:MaxPermSize=512m -XX:+HeapDumpOnOutOfMemoryError -Dfile.encoding=UTF-8
14 | org.gradle.jvmargs=-Xmx2048m -XX:MaxMetaspaceSize=512m
15 |
16 | # When configured, Gradle will run in incubating parallel mode.
17 | # This option should only be used with decoupled projects. More details, visit
18 | # http://www.gradle.org/docs/current/userguide/multi_project_builds.html#sec:decoupled_projects
19 | # org.gradle.parallel=true
20 |
21 | android.useAndroidX=true
22 | android.enableJetifier=true
23 |
24 | FLIPPER_VERSION=0.125.0
25 |
26 | # Use this property to specify which architecture you want to build.
27 | # You can also override it from the CLI using
28 | # ./gradlew -PreactNativeArchitectures=x86_64
29 | reactNativeArchitectures=armeabi-v7a,arm64-v8a,x86,x86_64
30 | # Use this property to enable support to the new architecture.
31 | # This will allow you to use TurboModules and the Fabric render in
32 | # your application. You should enable this flag either if you want
33 | # to write custom TurboModules/Fabric components OR use libraries that
34 | # are providing them.
35 | newArchEnabled=false
--------------------------------------------------------------------------------
/example/bare/src/screens/integrations/ViewPagerExample.tsx:
--------------------------------------------------------------------------------
1 | import React, { useMemo } from 'react';
2 | import { View, Text, StyleSheet } from 'react-native';
3 | import { createMaterialTopTabNavigator } from '@react-navigation/material-top-tabs';
4 | import BottomSheet from '@gorhom/bottom-sheet';
5 | import { ContactList } from '@gorhom/bottom-sheet-example-app';
6 |
7 | const FirstRoute = () => {
8 | const snapPoints = useMemo(() => ['25%', '50%', '90%'], []);
9 |
10 | return (
11 |
12 |
18 |
19 |
20 |
21 | );
22 | };
23 |
24 | const SecondRoute = () => (
25 |
26 | 🙈
27 |
28 | );
29 |
30 | const Tab = createMaterialTopTabNavigator();
31 |
32 | const ViewPagerScreen = () => {
33 | return (
34 |
35 |
36 |
37 |
38 | );
39 | };
40 |
41 | const styles = StyleSheet.create({
42 | scene: {
43 | flex: 1,
44 | },
45 | firstScene: {
46 | backgroundColor: '#ff4081',
47 | },
48 | secondScene: {
49 | alignContent: 'center',
50 | alignItems: 'center',
51 | justifyContent: 'center',
52 | backgroundColor: '#673ab7',
53 | },
54 | emoji: {
55 | fontSize: 46,
56 | },
57 | });
58 |
59 | export default ViewPagerScreen;
60 |
--------------------------------------------------------------------------------
/example/bare/android/app/src/main/jni/Android.mk:
--------------------------------------------------------------------------------
1 | THIS_DIR := $(call my-dir)
2 |
3 | include $(REACT_ANDROID_DIR)/Android-prebuilt.mk
4 |
5 | # If you wish to add a custom TurboModule or Fabric component in your app you
6 | # will have to include the following autogenerated makefile.
7 | # include $(GENERATED_SRC_DIR)/codegen/jni/Android.mk
8 | include $(CLEAR_VARS)
9 |
10 | LOCAL_PATH := $(THIS_DIR)
11 |
12 | # You can customize the name of your application .so file here.
13 | LOCAL_MODULE := bottomsheet_appmodules
14 |
15 | LOCAL_C_INCLUDES := $(LOCAL_PATH)
16 | LOCAL_SRC_FILES := $(wildcard $(LOCAL_PATH)/*.cpp)
17 | LOCAL_EXPORT_C_INCLUDES := $(LOCAL_PATH)
18 |
19 | # If you wish to add a custom TurboModule or Fabric component in your app you
20 | # will have to uncomment those lines to include the generated source
21 | # files from the codegen (placed in $(GENERATED_SRC_DIR)/codegen/jni)
22 | #
23 | # LOCAL_C_INCLUDES += $(GENERATED_SRC_DIR)/codegen/jni
24 | # LOCAL_SRC_FILES += $(wildcard $(GENERATED_SRC_DIR)/codegen/jni/*.cpp)
25 | # LOCAL_EXPORT_C_INCLUDES += $(GENERATED_SRC_DIR)/codegen/jni
26 |
27 | # Here you should add any native library you wish to depend on.
28 | LOCAL_SHARED_LIBRARIES := \
29 | libfabricjni \
30 | libfbjni \
31 | libfolly_runtime \
32 | libglog \
33 | libjsi \
34 | libreact_codegen_rncore \
35 | libreact_debug \
36 | libreact_nativemodule_core \
37 | libreact_render_componentregistry \
38 | libreact_render_core \
39 | libreact_render_debug \
40 | libreact_render_graphics \
41 | librrc_view \
42 | libruntimeexecutor \
43 | libturbomodulejsijni \
44 | libyoga
45 |
46 | LOCAL_CFLAGS := -DLOG_TAG=\"ReactNative\" -fexceptions -frtti -std=c++17 -Wall
47 |
48 | include $(BUILD_SHARED_LIBRARY)
--------------------------------------------------------------------------------
/src/components/bottomSheetHandle/BottomSheetHandle.tsx:
--------------------------------------------------------------------------------
1 | import React, { memo, useMemo } from 'react';
2 | import Animated from 'react-native-reanimated';
3 | import { styles } from './styles';
4 | import type { BottomSheetDefaultHandleProps } from './types';
5 | import {
6 | DEFAULT_ACCESSIBLE,
7 | DEFAULT_ACCESSIBILITY_ROLE,
8 | DEFAULT_ACCESSIBILITY_LABEL,
9 | DEFAULT_ACCESSIBILITY_HINT,
10 | } from './constants';
11 |
12 | const BottomSheetHandleComponent = ({
13 | style,
14 | indicatorStyle: _indicatorStyle,
15 | children,
16 | accessible = DEFAULT_ACCESSIBLE,
17 | accessibilityRole = DEFAULT_ACCESSIBILITY_ROLE,
18 | accessibilityLabel = DEFAULT_ACCESSIBILITY_LABEL,
19 | accessibilityHint = DEFAULT_ACCESSIBILITY_HINT,
20 | }: BottomSheetDefaultHandleProps) => {
21 | // styles
22 | const containerStyle = useMemo(
23 | () => [styles.container, ...[Array.isArray(style) ? style : [style]]],
24 | [style]
25 | );
26 | const indicatorStyle = useMemo(
27 | () => [
28 | styles.indicator,
29 | ...[Array.isArray(_indicatorStyle) ? _indicatorStyle : [_indicatorStyle]],
30 | ],
31 | [_indicatorStyle]
32 | );
33 |
34 | // render
35 | return (
36 |
43 |
44 | {children}
45 |
46 | );
47 | };
48 |
49 | const BottomSheetHandle = memo(BottomSheetHandleComponent);
50 | BottomSheetHandle.displayName = 'BottomSheetHandle';
51 |
52 | export default BottomSheetHandle;
53 |
--------------------------------------------------------------------------------
/example/bare/android/app/src/main/java/dev/gorhom/bottomsheet/MainActivity.java:
--------------------------------------------------------------------------------
1 | package dev.gorhom.bottomsheet;
2 |
3 | import android.os.Bundle;
4 |
5 | import com.facebook.react.ReactActivity;
6 | import com.facebook.react.ReactActivityDelegate;
7 | import com.facebook.react.ReactRootView;
8 |
9 | public class MainActivity extends ReactActivity {
10 |
11 | @Override
12 | protected void onCreate(Bundle savedInstanceState) {
13 | super.onCreate(null);
14 | }
15 |
16 | /**
17 | * Returns the name of the main component registered from JavaScript. This is used to schedule
18 | * rendering of the component.
19 | */
20 | @Override
21 | protected String getMainComponentName() {
22 | return "BottomSheetExample";
23 | }
24 |
25 | @Override
26 | protected ReactActivityDelegate createReactActivityDelegate() {
27 | return new MainActivityDelegate(this, getMainComponentName());
28 | }
29 |
30 | public static class MainActivityDelegate extends ReactActivityDelegate {
31 | public MainActivityDelegate(ReactActivity activity, String mainComponentName) {
32 | super(activity, mainComponentName);
33 | }
34 |
35 | @Override
36 | protected ReactRootView createRootView() {
37 | ReactRootView reactRootView = new ReactRootView(getContext());
38 | // If you opted-in for the New Architecture, we enable the Fabric Renderer.
39 | reactRootView.setIsFabric(BuildConfig.IS_NEW_ARCHITECTURE_ENABLED);
40 | return reactRootView;
41 | }
42 |
43 | @Override
44 | protected boolean isConcurrentRootEnabled() {
45 | // If you opted-in for the New Architecture, we enable Concurrent Root (i.e. React 18).
46 | // More on this on https://reactjs.org/blog/2022/03/29/react-v18.html
47 | return BuildConfig.IS_NEW_ARCHITECTURE_ENABLED;
48 | }
49 | }
50 | }
51 |
--------------------------------------------------------------------------------
/example/bare/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "@gorhom/bottom-sheet-example",
3 | "description": "Example app for @gorhom/bottom-sheet",
4 | "version": "0.0.1",
5 | "private": true,
6 | "scripts": {
7 | "android": "react-native run-android",
8 | "ios": "react-native run-ios",
9 | "start": "react-native start",
10 | "postinstall": "npx patch-package"
11 | },
12 | "dependencies": {
13 | "@gorhom/portal": "^1.0.13",
14 | "@gorhom/showcase-template": "^2.1.0",
15 | "@react-native-community/blur": "^3.6.0",
16 | "@react-native-community/masked-view": "0.1.11",
17 | "@react-navigation/bottom-tabs": "^6.0.9",
18 | "@react-navigation/elements": "^1.2.1",
19 | "@react-navigation/material-top-tabs": "^6.0.6",
20 | "@react-navigation/native": "^6.0.6",
21 | "@react-navigation/native-stack": "^6.2.5",
22 | "@react-navigation/stack": "^6.0.11",
23 | "faker": "^4.1.0",
24 | "nanoid": "^3.3.3",
25 | "react": "18.0.0",
26 | "react-native": "0.69.4",
27 | "react-native-gesture-handler": "^2.5.0",
28 | "react-native-maps": "^0.30.1",
29 | "react-native-pager-view": "^5.4.9",
30 | "react-native-reanimated": "^2.9.1",
31 | "react-native-redash": "^16.0.11",
32 | "react-native-safe-area-context": "4.2.4",
33 | "react-native-screens": "^3.15.0",
34 | "react-native-tab-view": "^3.1.1"
35 | },
36 | "devDependencies": {
37 | "@babel/core": "^7.18.0",
38 | "@babel/runtime": "^7.18.0",
39 | "@types/faker": "^4.1.12",
40 | "@types/react": "17.0.2",
41 | "@types/react-native": "^0.67.7",
42 | "metro-react-native-babel-preset": "^0.70.3",
43 | "typescript": "^4.2.4"
44 | },
45 | "resolutions": {
46 | "@babel/core": "^7.18.0",
47 | "@babel/runtime": "^7.18.0",
48 | "@types/react": "17.0.2",
49 | "@types/react-native": "0.67.7"
50 | }
51 | }
52 |
--------------------------------------------------------------------------------
/example/bare/ios/BottomSheetExample/Info.plist:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | CFBundleDevelopmentRegion
6 | en
7 | CFBundleDisplayName
8 | BottomSheet Example
9 | CFBundleExecutable
10 | $(EXECUTABLE_NAME)
11 | CFBundleIdentifier
12 | $(PRODUCT_BUNDLE_IDENTIFIER)
13 | CFBundleInfoDictionaryVersion
14 | 6.0
15 | CFBundleName
16 | $(PRODUCT_NAME)
17 | CFBundlePackageType
18 | APPL
19 | CFBundleShortVersionString
20 | 1.0
21 | CFBundleSignature
22 | ????
23 | CFBundleVersion
24 | 1
25 | LSRequiresIPhoneOS
26 |
27 | NSAppTransportSecurity
28 |
29 | NSExceptionDomains
30 |
31 | localhost
32 |
33 | NSExceptionAllowsInsecureHTTPLoads
34 |
35 |
36 |
37 |
38 | NSLocationWhenInUseUsageDescription
39 |
40 | UILaunchStoryboardName
41 | LaunchScreen
42 | UIRequiredDeviceCapabilities
43 |
44 | armv7
45 |
46 | UISupportedInterfaceOrientations
47 |
48 | UIInterfaceOrientationPortrait
49 | UIInterfaceOrientationLandscapeRight
50 | UIInterfaceOrientationPortraitUpsideDown
51 | UIInterfaceOrientationLandscapeLeft
52 |
53 | UIViewControllerBasedStatusBarAppearance
54 |
55 |
56 |
57 |
--------------------------------------------------------------------------------
/example/expo/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "@gorhom/bottom-sheet-example-expo",
3 | "description": "Example app for @gorhom/bottom-sheet",
4 | "version": "0.0.1",
5 | "private": true,
6 | "main": "./index.ts",
7 | "scripts": {
8 | "start": "expo start",
9 | "android": "expo start --android",
10 | "ios": "expo start --ios",
11 | "web": "expo start --web",
12 | "eject": "expo eject"
13 | },
14 | "dependencies": {
15 | "@gorhom/portal": "^1.0.13",
16 | "@gorhom/showcase-template": "^2.1.0",
17 | "@react-navigation/bottom-tabs": "^6.3.1",
18 | "@react-navigation/elements": "^1.3.3",
19 | "@react-navigation/material-top-tabs": "^6.2.1",
20 | "@react-navigation/native": "^6.0.10",
21 | "@react-navigation/native-stack": "^6.6.2",
22 | "@react-navigation/stack": "^6.2.1",
23 | "expo": "^46.0.0",
24 | "expo-status-bar": "~1.4.0",
25 | "faker": "^4.1.0",
26 | "nanoid": "^3.3.3",
27 | "react": "18.0.0",
28 | "react-dom": "18.0.0",
29 | "react-native": "0.69.4",
30 | "react-native-gesture-handler": "~2.5.0",
31 | "react-native-pager-view": "5.4.24",
32 | "react-native-reanimated": "~2.9.1",
33 | "react-native-redash": "^16.2.4",
34 | "react-native-safe-area-context": "4.3.1",
35 | "react-native-screens": "~3.15.0",
36 | "react-native-tab-view": "^3.1.1",
37 | "react-native-web": "~0.18.7"
38 | },
39 | "devDependencies": {
40 | "@babel/core": "^7.18.6",
41 | "@types/react": "~18.0.0",
42 | "@types/react-native": "~0.69.1",
43 | "babel-plugin-module-resolver": "^4.1.0",
44 | "expo-cli": "^6.0.2",
45 | "typescript": "^4.6.3"
46 | },
47 | "resolutions": {
48 | "@babel/core": "^7.18.0",
49 | "@babel/runtime": "^7.18.0",
50 | "@babel/preset-typescript": "7.17.12",
51 | "@types/react": "17.0.2",
52 | "@types/react-native": "0.67.7"
53 | }
54 | }
55 |
--------------------------------------------------------------------------------
/src/components/bottomSheetFooterContainer/BottomSheetFooterContainer.tsx:
--------------------------------------------------------------------------------
1 | import React, { memo } from 'react';
2 | import { useDerivedValue } from 'react-native-reanimated';
3 | import { useBottomSheetInternal } from '../../hooks';
4 | import { KEYBOARD_STATE } from '../../constants';
5 | import type { BottomSheetFooterContainerProps } from './types';
6 |
7 | const BottomSheetFooterContainerComponent = ({
8 | footerComponent: FooterComponent,
9 | }: BottomSheetFooterContainerProps) => {
10 | //#region hooks
11 | const {
12 | animatedContainerHeight,
13 | animatedHandleHeight,
14 | animatedFooterHeight,
15 | animatedPosition,
16 | animatedKeyboardState,
17 | animatedKeyboardHeightInContainer,
18 | } = useBottomSheetInternal();
19 | //#endregion
20 |
21 | //#region variables
22 | const animatedFooterPosition = useDerivedValue(() => {
23 | const keyboardHeight = animatedKeyboardHeightInContainer.value;
24 | let footerTranslateY = Math.max(
25 | 0,
26 | animatedContainerHeight.value - animatedPosition.value
27 | );
28 |
29 | if (animatedKeyboardState.value === KEYBOARD_STATE.SHOWN) {
30 | footerTranslateY = footerTranslateY - keyboardHeight;
31 | }
32 |
33 | footerTranslateY =
34 | footerTranslateY -
35 | animatedFooterHeight.value -
36 | animatedHandleHeight.value;
37 |
38 | return footerTranslateY;
39 | }, [
40 | animatedKeyboardHeightInContainer,
41 | animatedContainerHeight,
42 | animatedPosition,
43 | animatedKeyboardState,
44 | animatedFooterHeight,
45 | animatedHandleHeight,
46 | ]);
47 | //#endregion
48 |
49 | return ;
50 | };
51 |
52 | const BottomSheetFooterContainer = memo(BottomSheetFooterContainerComponent);
53 | BottomSheetFooterContainer.displayName = 'BottomSheetFooterContainer';
54 |
55 | export default BottomSheetFooterContainer;
56 |
--------------------------------------------------------------------------------
/.github/ISSUE_TEMPLATE/bug_report.md:
--------------------------------------------------------------------------------
1 | ---
2 | name: Bug report
3 | about: Create a report to help us improve
4 | title: '[v4] | [v2] Issue title'
5 | labels: bug
6 | assignees: ''
7 |
8 | ---
9 |
10 | # Bug
11 |
12 |
20 |
21 | ## Environment info
22 |
23 |
26 |
27 | | Library | Version |
28 | | ------------------------------- | ------- |
29 | | @gorhom/bottom-sheet | x.x.x |
30 | | react-native | x.x.x |
31 | | react-native-reanimated | x.x.x |
32 | | react-native-gesture-handler | x.x.x |
33 |
34 | ## Steps To Reproduce
35 |
36 |
42 |
43 | 1.
44 | 2.
45 | 3.
46 |
47 | Describe what you expected to happen:
48 |
49 | 1.
50 | 2.
51 |
52 | ## Reproducible sample code
53 |
54 |
58 |
--------------------------------------------------------------------------------
/example/bare/src/components/locationItem/LocationItem.tsx:
--------------------------------------------------------------------------------
1 | import React, { useMemo, memo } from 'react';
2 | import { StyleSheet, View } from 'react-native';
3 | import { ShowcaseLabel, useShowcaseTheme } from '@gorhom/showcase-template';
4 |
5 | interface LocationItemProps {
6 | title: string;
7 | subTitle?: string;
8 | }
9 |
10 | const LocationItemComponent = ({ title, subTitle }: LocationItemProps) => {
11 | const { colors } = useShowcaseTheme();
12 | const separatorStyle = useMemo(
13 | () => [
14 | styles.separator,
15 | {
16 | backgroundColor: colors.border,
17 | },
18 | ],
19 | [colors.border]
20 | );
21 | // render
22 | return (
23 | <>
24 |
25 |
26 |
27 | {title}
28 | {subTitle && (
29 | {subTitle}
30 | )}
31 |
32 |
33 |
34 |
35 | );
36 | };
37 |
38 | const styles = StyleSheet.create({
39 | container: {
40 | flexDirection: 'row',
41 | alignContent: 'center',
42 | alignItems: 'center',
43 | marginVertical: 12,
44 | },
45 | contentContainer: {
46 | flex: 1,
47 | alignSelf: 'center',
48 | marginLeft: 12,
49 | },
50 | thumbnail: {
51 | width: 32,
52 | height: 32,
53 | borderRadius: 32,
54 | backgroundColor: 'rgba(0, 0, 0, 0.25)',
55 | },
56 | title: {
57 | fontSize: 16,
58 | marginBottom: 4,
59 | textTransform: 'capitalize',
60 | },
61 | subtitle: {
62 | color: '#666',
63 | fontSize: 14,
64 | textTransform: 'capitalize',
65 | },
66 | separator: {
67 | flex: 1,
68 | height: 1,
69 | },
70 | });
71 |
72 | export const LocationItem = memo(LocationItemComponent);
73 |
--------------------------------------------------------------------------------
/src/hooks/useScrollableSetter.ts:
--------------------------------------------------------------------------------
1 | import React, { useCallback, useEffect } from 'react';
2 | import Animated from 'react-native-reanimated';
3 | import { useBottomSheetInternal } from './useBottomSheetInternal';
4 | import { getRefNativeTag } from '../utilities/getRefNativeTag';
5 | import { SCROLLABLE_TYPE } from '../constants';
6 | import type { Scrollable } from '../types';
7 |
8 | export const useScrollableSetter = (
9 | ref: React.RefObject,
10 | type: SCROLLABLE_TYPE,
11 | contentOffsetY: Animated.SharedValue,
12 | refreshable: boolean,
13 | useFocusHook = useEffect
14 | ) => {
15 | // hooks
16 | const {
17 | animatedScrollableType,
18 | animatedScrollableContentOffsetY: rootScrollableContentOffsetY,
19 | isContentHeightFixed,
20 | isScrollableRefreshable,
21 | setScrollableRef,
22 | removeScrollableRef,
23 | } = useBottomSheetInternal();
24 |
25 | // callbacks
26 | const handleSettingScrollable = useCallback(() => {
27 | // set current content offset
28 | rootScrollableContentOffsetY.value = contentOffsetY.value;
29 | animatedScrollableType.value = type;
30 | isScrollableRefreshable.value = refreshable;
31 | isContentHeightFixed.value = false;
32 |
33 | // set current scrollable ref
34 | const id = getRefNativeTag(ref);
35 | if (id) {
36 | setScrollableRef({
37 | id: id,
38 | node: ref,
39 | });
40 | } else {
41 | console.warn(`Couldn't find the scrollable node handle id!`);
42 | }
43 |
44 | return () => {
45 | removeScrollableRef(ref);
46 | };
47 | }, [
48 | ref,
49 | type,
50 | refreshable,
51 | animatedScrollableType,
52 | rootScrollableContentOffsetY,
53 | contentOffsetY,
54 | isScrollableRefreshable,
55 | isContentHeightFixed,
56 | setScrollableRef,
57 | removeScrollableRef,
58 | ]);
59 |
60 | // effects
61 | useFocusHook(handleSettingScrollable);
62 | };
63 |
--------------------------------------------------------------------------------
/example/bare/android/build.gradle:
--------------------------------------------------------------------------------
1 | import org.apache.tools.ant.taskdefs.condition.Os
2 | // Top-level build file where you can add configuration options common to all sub-projects/modules.
3 |
4 | buildscript {
5 | ext {
6 | buildToolsVersion = "31.0.0"
7 | minSdkVersion = 21
8 | compileSdkVersion = 31
9 | targetSdkVersion = 31
10 |
11 | if (System.properties['os.arch'] == "aarch64") {
12 | // For M1 Users we need to use the NDK 24 which added support for aarch64
13 | ndkVersion = "24.0.8215888"
14 | } else {
15 | // Otherwise we default to the side-by-side NDK version from AGP.
16 | ndkVersion = "21.4.7075529"
17 | }
18 | }
19 | repositories {
20 | google()
21 | mavenCentral()
22 | }
23 | dependencies {
24 | classpath("com.android.tools.build:gradle:7.1.1")
25 | classpath("com.facebook.react:react-native-gradle-plugin")
26 | classpath("de.undercouch:gradle-download-task:5.0.1")
27 |
28 | // NOTE: Do not place your application dependencies here; they belong
29 | // in the individual module build.gradle files
30 | }
31 | }
32 |
33 | allprojects {
34 | repositories {
35 | maven {
36 | // All of React Native (JS, Obj-C sources, Android binaries) is installed from npm
37 | url("$rootDir/../node_modules/react-native/android")
38 | }
39 | maven {
40 | // Android JSC is installed from npm
41 | url("$rootDir/../node_modules/jsc-android/dist")
42 | }
43 | mavenCentral {
44 | // We don't want to fetch react-native from Maven Central as there are
45 | // older versions over there.
46 | content {
47 | excludeGroup "com.facebook.react"
48 | }
49 | }
50 | google()
51 | maven { url 'https://www.jitpack.io' }
52 | }
53 | }
54 |
--------------------------------------------------------------------------------
/example/app/src/screens/advanced/PullToRefreshExample.tsx:
--------------------------------------------------------------------------------
1 | import React, { useCallback, useMemo, useRef } from 'react';
2 | import { View, StyleSheet } from 'react-native';
3 | import BottomSheet from '@gorhom/bottom-sheet';
4 | import { Button } from '../../components/button';
5 | import { ContactList } from '../../components/contactList';
6 | import { HeaderHandle } from '../../components/headerHandle/HeaderHandle';
7 |
8 | const PullToRefreshExample = () => {
9 | // hooks
10 | const bottomSheetRef = useRef(null);
11 |
12 | // variables
13 | const snapPoints = useMemo(() => ['25%', '50%'], []);
14 |
15 | // callbacks
16 | const handleRefresh = useCallback(() => {
17 | // eslint-disable-next-line no-console
18 | console.log('handleRefresh');
19 | }, []);
20 | const handleExpandPress = useCallback(() => {
21 | bottomSheetRef.current?.expand();
22 | }, []);
23 | const handleCollapsePress = useCallback(() => {
24 | bottomSheetRef.current?.collapse();
25 | }, []);
26 | const handleClosePress = useCallback(() => {
27 | bottomSheetRef.current?.close();
28 | }, []);
29 |
30 | // renders
31 | const renderHeaderHandle = useCallback(
32 | props => ,
33 | []
34 | );
35 | return (
36 |
37 |
38 |
39 |
40 |
45 |
46 |
47 |
48 | );
49 | };
50 |
51 | const styles = StyleSheet.create({
52 | container: {
53 | flex: 1,
54 | padding: 24,
55 | },
56 | });
57 |
58 | export default PullToRefreshExample;
59 |
--------------------------------------------------------------------------------
/src/components/bottomSheetModal/types.d.ts:
--------------------------------------------------------------------------------
1 | import type React from 'react';
2 | import type { BottomSheetProps } from '../bottomSheet';
3 | import type { MODAL_STACK_BEHAVIOR } from '../../constants';
4 |
5 | export interface BottomSheetModalPrivateMethods {
6 | dismiss: (force?: boolean) => void;
7 | minimize: () => void;
8 | restore: () => void;
9 | }
10 |
11 | export type BottomSheetModalStackBehavior = keyof typeof MODAL_STACK_BEHAVIOR;
12 |
13 | export interface BottomSheetModalProps
14 | extends Omit {
15 | /**
16 | * Modal name to help identify the modal for later on.
17 | * @type string
18 | * @default nanoid generated unique key.
19 | */
20 | name?: string;
21 |
22 | /**
23 | * Defines the stack behavior when modal mount.
24 | * - `push` it will mount the modal on top of current modal.
25 | * - `replace` it will minimize the current modal then mount the modal.
26 | * @type `push` | `replace`
27 | * @default replace
28 | */
29 | stackBehavior?: BottomSheetModalStackBehavior;
30 |
31 | /**
32 | * Enable dismiss the modal when it is closed.
33 | * @type boolean
34 | * @default true
35 | */
36 | enableDismissOnClose?: boolean;
37 |
38 | /**
39 | * Add a custom container like FullWindowOverlay
40 | * allow to fix issue like https://github.com/gorhom/react-native-bottom-sheet/issues/832
41 | * @type React.ComponentType
42 | * @default undefined
43 | */
44 | containerComponent?: React.ComponentType>;
45 |
46 | // callbacks
47 | /**
48 | * Callback when the modal dismissed.
49 | * @type () => void;
50 | */
51 | onDismiss?: () => void;
52 |
53 | /**
54 | * A scrollable node or normal view.
55 | * @type React.ReactNode[] | React.ReactNode | (({ data: any }?) => React.ReactElement)
56 | */
57 | children:
58 | | (({ data: any }?) => React.ReactElement)
59 | | React.ReactNode[]
60 | | React.ReactNode;
61 | }
62 |
--------------------------------------------------------------------------------
/example/bare/android/app/src/main/java/dev/gorhom/bottomsheet/modules/MainApplicationTurboModuleManagerDelegate.java:
--------------------------------------------------------------------------------
1 | package dev.gorhom.bottomsheet.modules;
2 |
3 | import com.facebook.jni.HybridData;
4 | import com.facebook.react.ReactPackage;
5 | import com.facebook.react.ReactPackageTurboModuleManagerDelegate;
6 | import com.facebook.react.bridge.ReactApplicationContext;
7 | import com.facebook.soloader.SoLoader;
8 |
9 | import java.util.List;
10 |
11 | /**
12 | * Class responsible to load the TurboModules. This class has native methods and needs a
13 | * corresponding C++ implementation/header file to work correctly (already placed inside the jni/
14 | * folder for you).
15 | *
16 | * Please note that this class is used ONLY if you opt-in for the New Architecture (see the
17 | * `newArchEnabled` property). Is ignored otherwise.
18 | */
19 | public class MainApplicationTurboModuleManagerDelegate
20 | extends ReactPackageTurboModuleManagerDelegate {
21 |
22 | private static volatile boolean sIsSoLibraryLoaded;
23 |
24 | protected MainApplicationTurboModuleManagerDelegate(
25 | ReactApplicationContext reactApplicationContext, List packages) {
26 | super(reactApplicationContext, packages);
27 | }
28 |
29 | protected native HybridData initHybrid();
30 |
31 | native boolean canCreateTurboModule(String moduleName);
32 |
33 | public static class Builder extends ReactPackageTurboModuleManagerDelegate.Builder {
34 | protected MainApplicationTurboModuleManagerDelegate build(
35 | ReactApplicationContext context, List packages) {
36 | return new MainApplicationTurboModuleManagerDelegate(context, packages);
37 | }
38 | }
39 |
40 | @Override
41 | protected synchronized void maybeLoadOtherSoLibraries() {
42 | if (!sIsSoLibraryLoaded) {
43 | // If you change the name of your application .so file in the Android.mk file,
44 | // make sure you update the name here as well.
45 | SoLoader.loadLibrary("bottomsheet_appmodules");
46 | sIsSoLibraryLoaded = true;
47 | }
48 | }
49 | }
50 |
--------------------------------------------------------------------------------
/example/bare/android/app/src/main/res/drawable/rn_edit_text_material.xml:
--------------------------------------------------------------------------------
1 |
2 |
16 |
21 |
22 |
23 |
32 |