1604817780
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.
FlatList
, SectionList
, ScrollView
& View
scrolling interactions.React Navigation
Integration.Reanimated
v1 & v2.Expo
.TypeScript
.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.
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.
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;
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
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
useBottomSheet
The library provide useBottomSheet
hook to provide the bottom sheet methods, anywhere inside the sheet content.
type:
BottomSheetMethods
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:
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 ❤️
React Navigation
?here you go React Navigation Integration :)
Reanimated v2
?Yes 🎉
Author: gorhom
Source Code: https://github.com/gorhom/react-native-bottom-sheet
#react #react-native #mobile-apps
1604817780
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.
FlatList
, SectionList
, ScrollView
& View
scrolling interactions.React Navigation
Integration.Reanimated
v1 & v2.Expo
.TypeScript
.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.
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.
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;
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
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
useBottomSheet
The library provide useBottomSheet
hook to provide the bottom sheet methods, anywhere inside the sheet content.
type:
BottomSheetMethods
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:
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 ❤️
React Navigation
?here you go React Navigation Integration :)
Reanimated v2
?Yes 🎉
Author: gorhom
Source Code: https://github.com/gorhom/react-native-bottom-sheet
#react #react-native #mobile-apps
1595905879
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
1595505720
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?
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.
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:
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
With regards to the network that the device is connected to, there are two key things to measure: latency and bandwidth.
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
1625915760
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
1605595920
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.
FlatList
, SectionList
, ScrollView
& View
scrolling interactions.React Navigation
Integration.Reanimated
v1 & v2.Expo
.TypeScript
.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.
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.
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;
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
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
useBottomSheet
The library provide useBottomSheet
hook to provide the bottom sheet methods, anywhere inside the sheet content.
type:
BottomSheetMethods
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:
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 ❤️
React Navigation
?here you go React Navigation Integration :)
Reanimated v2
?Yes 🎉
Author: gorhom
Source Code: https://github.com/gorhom/react-native-bottom-sheet
#react #react-native #mobile-apps