A Performant Interactive Bottom Sheet with Fully Configurable Options

Bottom Sheet

A performant interactive bottom sheet with fully configurable options 🚀

Initially, this project was a cloned of react-native-scroll-bottom-sheet by @rgommezz ❤️. However, it is been fully re-written to add extra functionalities and simplify the approach.

Features

🌟 Modal presentation view, Bottom Sheet Modal.
Smooth interactions & snapping animations.
Support FlatList, SectionList, ScrollView & View scrolling interactions.
Support React Navigation Integration.
Compatible with Reanimated v1 & v2.
Compatible with Expo.
Written in TypeScript.

Installation

Version v1

Link to version 1 branch

This version is written with Reanimated v1

yarn add @gorhom/bottom-sheet
# or
npm install @gorhom/bottom-sheet

⚠️ You need to install react-native-reanimated & react-native-gesture-handler and follow their installation instructions.

Version v2 ( Alpha )

Link to version 2 branch

this version is written with Reanimated v2, although this version is still in alpha phase, yet it provides all version 1 functionalities with the huge performance boost, thanks to Reanimated v2 ❤️

yarn add @gorhom/bottom-sheet@2.0.0-alpha.0
# or
npm install @gorhom/bottom-sheet@2.0.0-alpha.0

⚠️ You need to install react-native-reanimated v2 & react-native-gesture-handler and follow their installation instructions.

Usage

import React, { useCallback, useMemo, useRef } from 'react';
import { View, StyleSheet } from 'react-native';
import BottomSheet from '@gorhom/bottom-sheet';

const App = () => {
  // hooks
  const bottomSheetRef = useRef<BottomSheet>(null);

  // variables
  const snapPoints = useMemo(() => ['25%', '50%', '90%'], []);

  // callbacks
  const handleSheetChanges = useCallback((index: number) => {
    console.log('handleSheetChanges', index);
  }, []);

  // renders
  return (
    <View style={styles.container}>
      <BottomSheet
        ref={bottomSheetRef}
        initialSnapIndex={1}
        snapPoints={snapPoints}
        onChange={handleSheetChanges}
      >
        {/* INSERT A SCROLLABLE HERE */}
      </BottomSheet>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 24,
  },
});

export default App;

Props

`initialSnapIndex`

Initial snap index. You also could provide {-1} to initiate bottom sheet in closed state.

required: NO | type: number | default: 0

`snapPoints`

Points for the bottom sheet to snap to, points should be sorted from bottom to top. It accepts array of number, string or mix. String values should be a percentage.

required: YES | type: Array<string | number>
example: [100, ‘50%’, ‘90%’]

`topInset`

Top inset value helps to calculate percentage snap points values. usually comes from @react-navigation/stack hook useHeaderHeight or from react-native-safe-area-context hook useSafeArea.

required: NO | type: number | default: 0

`enabled`

To enable or disable user interaction with the sheet.

required: NO | type: boolean | default: true

`animationDuration`

Snapping animation duration.

required: NO | type: number | default: 500

`animationEasing`

Snapping animation easing function.

required: NO | type: Animated.EasingFunction | default: Easing.out(Easing.back(0.75))

`animatedPosition`

Animated value to be used as a callback for the position node internally.

required: NO | type: Animated.Value

`animatedPositionIndex`

Animated value to be used as a callback for the position index node internally.

required: NO | type: Animated.Value

`handleComponent`

Component to be placed as a sheet handle.

required: NO | type: React.FC<BottomSheetHandleProps>

`backgroundComponent`

Component to be placed as a background.

required: NO | type: React.FC

`onChange`

Callback when sheet position changed to a provided point.

required: NO | type: (index: number) => void

`children`

A scrollable node or normal view.

required: YES | type: () => React.ReactNode | React.ReactNode[] | React.ReactNode

Methods

`snapTo`

Snap to one of the provided points from snapPoints.

type: (index: number) => void

`expand`

Snap to the maximum provided point from snapPoints.

type: () => void

`collapse`

Snap to the minimum provided point from snapPoints.

type: () => void

`close`

Close the bottom sheet.

type: () => void

Hooks

`useBottomSheet`

The library provide useBottomSheet hook to provide the bottom sheet methods, anywhere inside the sheet content.

type: BottomSheetMethods

Scrollables

This library provides a pre-integrated views that utilise an internal functionalities with the bottom sheet to allow smooth interactions. These views i called them Scrollables and they are:

To Do

[x] Add Reanimated v2 support.
[ ] Add tablets support.
[ ] Add Bounce support.

FAQ

How this library differ from `reanimated-bottom-sheet` or `react-native-scroll-bottom-sheet`?

This library was built to provide the most native-like experience and could fit any use-case that developers wants it to be.

While both libraries providing similar experience, but they still missing the following:

reanimated-bottom-sheet

Seamless gesture interaction between the sheet and the content.

react-native-scroll-bottom-sheet

Extracting scrollable content to allow developers customize the sheet content, like integrate React Navigation as the sheet content.

Both libraries are great! and I have used both of them at my work ❤️

How can I integrate `React Navigation`?

here you go React Navigation Integration :)

Will this library support `Reanimated v2`?

Yes 🎉

Built With ❤️

Author

Mo Gorhom

Download Details:

Author: gorhom

Source Code: https://github.com/gorhom/react-native-bottom-sheet

#react #react-native #mobile-apps

What is GEEK

Buddha Community

A Performant Interactive Bottom Sheet with Fully Configurable Options

Alfie Kemp

1604817780

A Performant Interactive Bottom Sheet with Fully Configurable Options

Bottom Sheet

A performant interactive bottom sheet with fully configurable options 🚀

Initially, this project was a cloned of react-native-scroll-bottom-sheet by @rgommezz ❤️. However, it is been fully re-written to add extra functionalities and simplify the approach.

Features

🌟 Modal presentation view, Bottom Sheet Modal.
Smooth interactions & snapping animations.
Support FlatList, SectionList, ScrollView & View scrolling interactions.
Support React Navigation Integration.
Compatible with Reanimated v1 & v2.
Compatible with Expo.
Written in TypeScript.

Installation

Version v1

Link to version 1 branch

This version is written with Reanimated v1

yarn add @gorhom/bottom-sheet
# or
npm install @gorhom/bottom-sheet

⚠️ You need to install react-native-reanimated & react-native-gesture-handler and follow their installation instructions.

Version v2 ( Alpha )

Link to version 2 branch

this version is written with Reanimated v2, although this version is still in alpha phase, yet it provides all version 1 functionalities with the huge performance boost, thanks to Reanimated v2 ❤️

yarn add @gorhom/bottom-sheet@2.0.0-alpha.0
# or
npm install @gorhom/bottom-sheet@2.0.0-alpha.0

⚠️ You need to install react-native-reanimated v2 & react-native-gesture-handler and follow their installation instructions.

Usage

import React, { useCallback, useMemo, useRef } from 'react';
import { View, StyleSheet } from 'react-native';
import BottomSheet from '@gorhom/bottom-sheet';

const App = () => {
  // hooks
  const bottomSheetRef = useRef<BottomSheet>(null);

  // variables
  const snapPoints = useMemo(() => ['25%', '50%', '90%'], []);

  // callbacks
  const handleSheetChanges = useCallback((index: number) => {
    console.log('handleSheetChanges', index);
  }, []);

  // renders
  return (
    <View style={styles.container}>
      <BottomSheet
        ref={bottomSheetRef}
        initialSnapIndex={1}
        snapPoints={snapPoints}
        onChange={handleSheetChanges}
      >
        {/* INSERT A SCROLLABLE HERE */}
      </BottomSheet>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 24,
  },
});

export default App;

Props

`initialSnapIndex`

Initial snap index. You also could provide {-1} to initiate bottom sheet in closed state.

required: NO | type: number | default: 0

`snapPoints`

Points for the bottom sheet to snap to, points should be sorted from bottom to top. It accepts array of number, string or mix. String values should be a percentage.

required: YES | type: Array<string | number>
example: [100, ‘50%’, ‘90%’]

`topInset`

Top inset value helps to calculate percentage snap points values. usually comes from @react-navigation/stack hook useHeaderHeight or from react-native-safe-area-context hook useSafeArea.

required: NO | type: number | default: 0

`enabled`

To enable or disable user interaction with the sheet.

required: NO | type: boolean | default: true

`animationDuration`

Snapping animation duration.

required: NO | type: number | default: 500

`animationEasing`

Snapping animation easing function.

required: NO | type: Animated.EasingFunction | default: Easing.out(Easing.back(0.75))

`animatedPosition`

Animated value to be used as a callback for the position node internally.

required: NO | type: Animated.Value

`animatedPositionIndex`

Animated value to be used as a callback for the position index node internally.

required: NO | type: Animated.Value

`handleComponent`

Component to be placed as a sheet handle.

required: NO | type: React.FC<BottomSheetHandleProps>

`backgroundComponent`

Component to be placed as a background.

required: NO | type: React.FC

`onChange`

Callback when sheet position changed to a provided point.

required: NO | type: (index: number) => void

`children`

A scrollable node or normal view.

required: YES | type: () => React.ReactNode | React.ReactNode[] | React.ReactNode

Methods

`snapTo`

Snap to one of the provided points from snapPoints.

type: (index: number) => void

`expand`

Snap to the maximum provided point from snapPoints.

type: () => void

`collapse`

Snap to the minimum provided point from snapPoints.

type: () => void

`close`

Close the bottom sheet.

type: () => void

Hooks

`useBottomSheet`

The library provide useBottomSheet hook to provide the bottom sheet methods, anywhere inside the sheet content.

type: BottomSheetMethods

Scrollables

This library provides a pre-integrated views that utilise an internal functionalities with the bottom sheet to allow smooth interactions. These views i called them Scrollables and they are:

To Do

[x] Add Reanimated v2 support.
[ ] Add tablets support.
[ ] Add Bounce support.

FAQ

How this library differ from `reanimated-bottom-sheet` or `react-native-scroll-bottom-sheet`?

This library was built to provide the most native-like experience and could fit any use-case that developers wants it to be.

While both libraries providing similar experience, but they still missing the following:

reanimated-bottom-sheet

Seamless gesture interaction between the sheet and the content.

react-native-scroll-bottom-sheet

Extracting scrollable content to allow developers customize the sheet content, like integrate React Navigation as the sheet content.

Both libraries are great! and I have used both of them at my work ❤️

How can I integrate `React Navigation`?

here you go React Navigation Integration :)

Will this library support `Reanimated v2`?

Yes 🎉

Built With ❤️

Author

Mo Gorhom

Download Details:

Author: gorhom

Source Code: https://github.com/gorhom/react-native-bottom-sheet

#react #react-native #mobile-apps

Joe Hoppe

1595905879

Best MySQL DigitalOcean Performance – ScaleGrid vs. DigitalOcean Managed Databases

HTML to Markdown

MySQL is the all-time number one open source database in the world, and a staple in RDBMS space. DigitalOcean is quickly building its reputation as the developers cloud by providing an affordable, flexible and easy to use cloud platform for developers to work with. MySQL on DigitalOcean is a natural fit, but what’s the best way to deploy your cloud database? In this post, we are going to compare the top two providers, DigitalOcean Managed Databases for MySQL vs. ScaleGrid MySQL hosting on DigitalOcean.

At a glance – TLDR
ScaleGrid Blog - At a glance overview - 1st pointCompare Throughput
ScaleGrid averages almost 40% higher throughput over DigitalOcean for MySQL, with up to 46% higher throughput in write-intensive workloads. Read now

ScaleGrid Blog - At a glance overview - 2nd pointCompare Latency
On average, ScaleGrid achieves almost 30% lower latency over DigitalOcean for the same deployment configurations. Read now

ScaleGrid Blog - At a glance overview - 3rd pointCompare Pricing
ScaleGrid provides 30% more storage on average vs. DigitalOcean for MySQL at the same affordable price. Read now

MySQL DigitalOcean Performance Benchmark
In this benchmark, we compare equivalent plan sizes between ScaleGrid MySQL on DigitalOcean and DigitalOcean Managed Databases for MySQL. We are going to use a common, popular plan size using the below configurations for this performance benchmark:

Comparison Overview
ScaleGridDigitalOceanInstance TypeMedium: 4 vCPUsMedium: 4 vCPUsMySQL Version8.0.208.0.20RAM8GB8GBSSD140GB115GBDeployment TypeStandaloneStandaloneRegionSF03SF03SupportIncludedBusiness-level support included with account sizes over $500/monthMonthly Price$120$120

As you can see above, ScaleGrid and DigitalOcean offer the same plan configurations across this plan size, apart from SSD where ScaleGrid provides over 20% more storage for the same price.

To ensure the most accurate results in our performance tests, we run the benchmark four times for each comparison to find the average performance across throughput and latency over read-intensive workloads, balanced workloads, and write-intensive workloads.

Throughput
In this benchmark, we measure MySQL throughput in terms of queries per second (QPS) to measure our query efficiency. To quickly summarize the results, we display read-intensive, write-intensive and balanced workload averages below for 150 threads for ScaleGrid vs. DigitalOcean MySQL:

ScaleGrid MySQL vs DigitalOcean Managed Databases - Throughput Performance Graph

For the common 150 thread comparison, ScaleGrid averages almost 40% higher throughput over DigitalOcean for MySQL, with up to 46% higher throughput in write-intensive workloads.

#cloud #database #developer #digital ocean #mysql #performance #scalegrid #95th percentile latency #balanced workloads #developers cloud #digitalocean droplet #digitalocean managed databases #digitalocean performance #digitalocean pricing #higher throughput #latency benchmark #lower latency #mysql benchmark setup #mysql client threads #mysql configuration #mysql digitalocean #mysql latency #mysql on digitalocean #mysql throughput #performance benchmark #queries per second #read-intensive #scalegrid mysql #scalegrid vs. digitalocean #throughput benchmark #write-intensive

Carmen Grimes

1595505720

How to Test Mobile App Performance: 3 Key Components - DZone Performance

You’ve probably interacted with an app on your phone or tablet that’s slow, takes a long time to load, freezes, or even crashes on you altogether.

Frustrating, right?

On the flip side, you can probably think of an app that you love to use because from day one, it’s never given you any trouble.

Or maybe you never paid any mind to an app that works quickly, because isn’t that how it’s supposed to be?

So, what causes one app to be crash-prone and another, fast, and reliable?

Whether an app has good or bad performance depends on three factors: the backend, the network, and the app itself running on the device.

A developer or mobile tester can measure the performance of an application in different scenarios.

For example, they can test for when there’s a concurrency of users on the app at the same time, on different devices (which vary in hardware resources and screen sizes), and multiple networks such as 3G, 4G, Wifi, and more.

The reality is that many variables affect the performance of a mobile application. Moreover, a user may have a very bad experience with your app and the cause might not even have anything to do with the code or its implementation.

But, by running performance tests for each of these three factors, you’ll be able to identify problems and optimize your app for the best user experience possible.

Keep reading as we’ll cover the different types of tests for each factor, what to measure, and what tools are available to help you along the way.

1st Mobile Performance Factor: The Backend

A mobile app’s backend architecture is generally based on an application server, a web server, and a database.

**When it comes to the backend, the things related to performance that are important to know when an app is under load are the server’s response times, database queries times, and the server’s resource usage. **

Using this information, it’s easier to detect issues such as:

High server response times
Bottlenecks or breakpoints in the database and application server resources
Poor implementation of escalation policies

So what kind of tests are normally run to check the app’s backend performance? Load tests.

This is when you simulate load on the backend in different ways, whether it be through stress testing, peak testing, endurance testing, load testing, etc.

In general, the objective of these tests is to understand how the backend systems of an app behave and handle a certain volume of concurrent users.

Several tools allow you to load test your mobile app. The most commonly used ones include:

Apache JMeter – the number one open-source load testing tool

Gatling– a developer-friendly, open-source load testing tool with scripts written in Scala

BlazeMeter – a cloud performance testing platform that scales your JMeter or Gatling tests for a greater amount of concurrent users

2nd Mobile Performance Factor: The Network

With regards to the network that the device is connected to, there are two key things to measure: latency and bandwidth.

Latency is the time that elapses when information is sent on the network (measured in milliseconds).
Bandwidth is the maximum capacity (the amount of data) that can be transmitted through the network (measured in bits per second).

For mobile performance, the lower the latency and the higher the bandwidth, the better.

An app’s performance can vary depending on, for example, whether it’s connected to a 3G network or a 4G network, and unfortunately, this is beyond an app developer or tester’s control.

But, it is possible to incorporate the network during the mobile app performance testing process, simulating the different types of networks and measuring their impact on the response times, both on the server-side and the client-side.

#tutorial #performance #mobile apps #load testing #mobile testing #mobile app performance #client side performance

Eva Murphy

1625915760

Understand Google Sheet API and Create Laravel Service Class to Interact with The API - 4

In this video, we are going to look at how Google Sheets API is documented, how it is structured so that if you want to explore more or even want to dig deep on some aspects of the API, you should know how the documentation is structured and what to look for, where to look for, etc.

Also, then we will create our own service which will be responsible for communicating with the Google Sheet API using the Google SDK, and then we will read data from our Google sheet that we just created.

You can find the code here: https://github.com/amitavdevzone/google-data-studio

And, if you have any questions then feel free to comment on the Github repository so that I can help you and others can also get to know about your questions.

#interact #google sheet api #laravel service #api

Fethawi Nasih

1605595920

A React Native Bottom Sheet with Fully Configurable Options

Bottom Sheet

A performant interactive bottom sheet with fully configurable options 🚀

Initially, this project was a cloned of react-native-scroll-bottom-sheet by @rgommezz ❤️. However, it is been fully re-written to add extra functionalities and simplify the approach.

Features

🌟 Modal presentation view, Bottom Sheet Modal.
Smooth interactions & snapping animations.
Support FlatList, SectionList, ScrollView & View scrolling interactions.
Support React Navigation Integration.
Compatible with Reanimated v1 & v2.
Compatible with Expo.
Written in TypeScript.

Installation

Version v1

Link to version 1 branch

This version is written with Reanimated v1

yarn add @gorhom/bottom-sheet
# or
npm install @gorhom/bottom-sheet

⚠️ You need to install react-native-reanimated & react-native-gesture-handler and follow their installation instructions.

Version v2 ( Alpha )

Link to version 2 branch

this version is written with Reanimated v2, although this version is still in alpha phase, yet it provides all version 1 functionalities with the huge performance boost, thanks to Reanimated v2 ❤️

yarn add @gorhom/bottom-sheet@2.0.0-alpha.0
# or
npm install @gorhom/bottom-sheet@2.0.0-alpha.0

⚠️ You need to install react-native-reanimated v2 & react-native-gesture-handler and follow their installation instructions.

Usage

import React, { useCallback, useMemo, useRef } from 'react';
import { View, StyleSheet } from 'react-native';
import BottomSheet from '@gorhom/bottom-sheet';

const App = () => {
  // hooks
  const bottomSheetRef = useRef<BottomSheet>(null);

  // variables
  const snapPoints = useMemo(() => ['25%', '50%', '90%'], []);

  // callbacks
  const handleSheetChanges = useCallback((index: number) => {
    console.log('handleSheetChanges', index);
  }, []);

  // renders
  return (
    <View style={styles.container}>
      <BottomSheet
        ref={bottomSheetRef}
        initialSnapIndex={1}
        snapPoints={snapPoints}
        onChange={handleSheetChanges}
      >
        {/* INSERT A SCROLLABLE HERE */}
      </BottomSheet>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 24,
  },
});

export default App;

Props

`initialSnapIndex`

Initial snap index. You also could provide {-1} to initiate bottom sheet in closed state.

required: NO | type: number | default: 0

`snapPoints`

Points for the bottom sheet to snap to, points should be sorted from bottom to top. It accepts array of number, string or mix. String values should be a percentage.

required: YES | type: Array<string | number>
example: [100, ‘50%’, ‘90%’]

`topInset`

Top inset value helps to calculate percentage snap points values. usually comes from @react-navigation/stack hook useHeaderHeight or from react-native-safe-area-context hook useSafeArea.

required: NO | type: number | default: 0

`enabled`

To enable or disable user interaction with the sheet.

required: NO | type: boolean | default: true

`animationDuration`

Snapping animation duration.

required: NO | type: number | default: 500

`animationEasing`

Snapping animation easing function.

required: NO | type: Animated.EasingFunction | default: Easing.out(Easing.back(0.75))

`animatedPosition`

Animated value to be used as a callback for the position node internally.

required: NO | type: Animated.Value

`animatedPositionIndex`

Animated value to be used as a callback for the position index node internally.

required: NO | type: Animated.Value

`handleComponent`

Component to be placed as a sheet handle.

required: NO | type: React.FC<BottomSheetHandleProps>

`backgroundComponent`

Component to be placed as a background.

required: NO | type: React.FC

`onChange`

Callback when sheet position changed to a provided point.

required: NO | type: (index: number) => void

`children`

A scrollable node or normal view.

required: YES | type: () => React.ReactNode | React.ReactNode[] | React.ReactNode

Methods

`snapTo`

Snap to one of the provided points from snapPoints.

type: (index: number) => void

`expand`

Snap to the maximum provided point from snapPoints.

type: () => void

`collapse`

Snap to the minimum provided point from snapPoints.

type: () => void

`close`

Close the bottom sheet.

type: () => void

Hooks

`useBottomSheet`

The library provide useBottomSheet hook to provide the bottom sheet methods, anywhere inside the sheet content.

type: BottomSheetMethods

Scrollables

This library provides a pre-integrated views that utilise an internal functionalities with the bottom sheet to allow smooth interactions. These views i called them Scrollables and they are:

To Do

[x] Add Reanimated v2 support.
[ ] Add tablets support.
[ ] Add Bounce support.

FAQ

How this library differ from `reanimated-bottom-sheet` or `react-native-scroll-bottom-sheet`?

This library was built to provide the most native-like experience and could fit any use-case that developers wants it to be.

While both libraries providing similar experience, but they still missing the following:

reanimated-bottom-sheet

Seamless gesture interaction between the sheet and the content.

react-native-scroll-bottom-sheet

Extracting scrollable content to allow developers customize the sheet content, like integrate React Navigation as the sheet content.

Both libraries are great! and I have used both of them at my work ❤️

How can I integrate `React Navigation`?

here you go React Navigation Integration :)

Will this library support `Reanimated v2`?

Yes 🎉

Built With ❤️

Author

Mo Gorhom

Download Details:

Author: gorhom

Source Code: https://github.com/gorhom/react-native-bottom-sheet

#react #react-native #mobile-apps

A Performant Interactive Bottom Sheet with Fully Configurable Options

Bottom Sheet

Features

Installation

Version v1

Version v2 ( Alpha )

Usage

Props

initialSnapIndex

snapPoints

topInset

enabled

animationDuration

animationEasing

animatedPosition

animatedPositionIndex

handleComponent

backgroundComponent

onChange

children

Methods

snapTo

expand

collapse

close

Hooks

useBottomSheet

Scrollables

To Do

FAQ

How this library differ from reanimated-bottom-sheet or react-native-scroll-bottom-sheet?

How can I integrate React Navigation?

Will this library support Reanimated v2?

Built With ❤️

Author

Download Details:

What is GEEK

Buddha Community

A Performant Interactive Bottom Sheet with Fully Configurable Options

Bottom Sheet

Features

Installation

Version v1

Version v2 ( Alpha )

Usage

Props

initialSnapIndex

snapPoints

topInset

enabled

animationDuration

animationEasing

animatedPosition

animatedPositionIndex

handleComponent

backgroundComponent

onChange

children

Methods

snapTo

expand

collapse

close

Hooks

useBottomSheet

Scrollables

To Do

FAQ

How this library differ from reanimated-bottom-sheet or react-native-scroll-bottom-sheet?

How can I integrate React Navigation?

Will this library support Reanimated v2?

Built With ❤️

Author

Download Details:

Best MySQL DigitalOcean Performance – ScaleGrid vs. DigitalOcean Managed Databases

How to Test Mobile App Performance: 3 Key Components - DZone Performance

Whether an app has good or bad performance depends on three factors: the backend, the network, and the app itself running on the device.

1st Mobile Performance Factor: The Backend

So what kind of tests are normally run to check the app’s backend performance? Load tests.

2nd Mobile Performance Factor: The Network

`initialSnapIndex`

`snapPoints`

`topInset`

`enabled`

`animationDuration`

`animationEasing`

`animatedPosition`

`animatedPositionIndex`

`handleComponent`

`backgroundComponent`

`onChange`

`children`

`snapTo`

`expand`

`collapse`

`close`

`useBottomSheet`

How this library differ from `reanimated-bottom-sheet` or `react-native-scroll-bottom-sheet`?

How can I integrate `React Navigation`?

Will this library support `Reanimated v2`?

`initialSnapIndex`

`snapPoints`

`topInset`

`enabled`

`animationDuration`

`animationEasing`

`animatedPosition`

`animatedPositionIndex`

`handleComponent`

`backgroundComponent`

`onChange`

`children`

`snapTo`

`expand`

`collapse`

`close`

`useBottomSheet`

How this library differ from `reanimated-bottom-sheet` or `react-native-scroll-bottom-sheet`?

How can I integrate `React Navigation`?

Will this library support `Reanimated v2`?

`initialSnapIndex`

`snapPoints`

`topInset`

`enabled`

`animationDuration`

`animationEasing`

`animatedPosition`

`animatedPositionIndex`

`handleComponent`

`backgroundComponent`

`onChange`

`children`

`snapTo`

`expand`

`collapse`

`close`

`useBottomSheet`

How this library differ from `reanimated-bottom-sheet` or `react-native-scroll-bottom-sheet`?

How can I integrate `React Navigation`?

Will this library support `Reanimated v2`?