Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Create ReanimatedDrawerLayout component #3146

Merged
merged 98 commits into from
Nov 8, 2024
Merged
Show file tree
Hide file tree
Changes from 80 commits
Commits
Show all changes
98 commits
Select commit Hold shift + click to select a range
339305a
setup new drawer layout package
latekvo Oct 9, 2024
61f132b
create a basic drawer example, add drawer to babel config
latekvo Oct 9, 2024
26037ca
translate animated implementation into reanimated
latekvo Oct 9, 2024
cb76ac4
rewrite drawer to be a functional component
latekvo Oct 9, 2024
12d7cd1
create a separate example out of the drawer layout example
latekvo Oct 9, 2024
f135243
fix malformed request crashes, added default values for every prop
latekvo Oct 10, 2024
ca4bb3e
fix crashes from rules of hooks violations
latekvo Oct 10, 2024
ddee862
fix types, unify enum usage
latekvo Oct 10, 2024
b989601
add new api gestures, flatten internal render function centralize pro…
latekvo Oct 10, 2024
37ef758
gesturize tap gesture, cleanup
latekvo Oct 10, 2024
c0aa3a1
expose drawer functions via ref, attach it to the inner component
latekvo Oct 10, 2024
51f3622
cleanup, eslint
latekvo Oct 14, 2024
b36191f
add proper forwardRef typing
latekvo Oct 14, 2024
4caf4a1
synchronize JS and UI threads
latekvo Oct 14, 2024
117dc80
Merge branch 'main' into @latekvo/reanimate-drawer-component
latekvo Oct 14, 2024
df3f1d1
use animated styles for styles using shared values
latekvo Oct 15, 2024
b78b830
simplify expressions, rename temporary variables
latekvo Oct 15, 2024
93c1fd6
feat: animation is smooth | convert all interpolated dependencies of …
latekvo Oct 15, 2024
579f0f1
clean, remove and resolve legacy comments
latekvo Oct 16, 2024
3d2758b
replace ref based prop system with reanimated one, move multiple func…
latekvo Oct 16, 2024
d17e412
fix spring config to remove bouncing, fix dynamic animated props
latekvo Oct 16, 2024
b8d1819
minor update optimization, more comments
latekvo Oct 16, 2024
19c3ef7
memoize all functions and gestures, cleanup
latekvo Oct 16, 2024
fd96a74
Fix new hitslop state crashing when closing drawer
latekvo Oct 16, 2024
fc6d368
fix ocassional translation overextension and stutters
latekvo Oct 16, 2024
4be9b66
fix ocassional jumping to the open position before animating
latekvo Oct 16, 2024
675c96e
fix opacity jumping, memoize overlay component
latekvo Oct 16, 2024
ae144e6
remove legacy events
latekvo Oct 16, 2024
baff276
fix drawer crashes due to low rea version - bumped to latest
latekvo Oct 16, 2024
23afa87
fix rea crashes when some props are present
latekvo Oct 16, 2024
5715c3f
improve spring config
latekvo Oct 18, 2024
b7cd612
fix anti-rubberband mechanism
latekvo Oct 18, 2024
13193cd
consolidate drawer translation variables into a single variable, fixi…
latekvo Oct 18, 2024
e21972b
memoize, resolve multiple todos
latekvo Oct 18, 2024
7b93d67
add more comments, resolve others
latekvo Oct 21, 2024
4402e50
cleanup unused SV, fixes
latekvo Oct 21, 2024
531b184
workletize handleRelease, simplify hitslop init
latekvo Oct 21, 2024
bf01739
add ability to freely move drawer while it's open
latekvo Oct 21, 2024
c863d8e
resolve todo comments, cleanup large comment blocks, expand example app
latekvo Oct 22, 2024
f7dfd3c
fix drawer dissapearing when closing it left-to-right
latekvo Oct 22, 2024
6cb0c6b
fix flashes / stutters when closing slowly, cleanup
latekvo Oct 22, 2024
f637947
add edge triggered swiping feature for left side drawers
latekvo Oct 22, 2024
e96ac8d
fix closing logic for right-side drawer variant
latekvo Oct 22, 2024
8e2bf13
increase interactivity of the example
latekvo Oct 22, 2024
36983b0
remove undocumented and unsupported property
latekvo Oct 22, 2024
6e17ad0
add sliding mode option to the selector in the example app, add sampl…
latekvo Oct 22, 2024
dcfff45
fix animation interruptions during settling
latekvo Oct 22, 2024
17c8b9d
fix drawer ocassionally getting stuck
latekvo Oct 22, 2024
1ebcfa4
cleanup
latekvo Oct 22, 2024
3486ea8
fix overlayColor prop description
latekvo Oct 24, 2024
2ce4ca2
move default prop values to a single defaultProps object
latekvo Oct 24, 2024
c289958
enumerate types and type literals
latekvo Oct 24, 2024
5830645
remove handleRelease using excessively convoluted typing
latekvo Oct 24, 2024
5144422
fix eslint issues
latekvo Oct 24, 2024
eaba51f
fix redundant pointer events usage
latekvo Oct 24, 2024
a00785c
fix comment syntax
latekvo Oct 24, 2024
c0a79ae
remove unnecessary useNativeDriver param
latekvo Oct 24, 2024
4a806dd
simplify redundant statements
latekvo Oct 25, 2024
d140b45
replace string literal with enum
latekvo Oct 25, 2024
daa47f3
fix onDrawerSlide implementation
latekvo Oct 25, 2024
32f9503
directly import all utilized react hooks
latekvo Oct 25, 2024
edb2e41
remove redundant shared value
latekvo Oct 25, 2024
89ed099
remove unnecessary string literals from enums, adjust example to work…
latekvo Oct 25, 2024
3060229
simplify nested dragX setter
latekvo Oct 25, 2024
be4979c
simplify nested translateX setter
latekvo Oct 25, 2024
7918726
remove resolved todo
latekvo Oct 25, 2024
82e3c00
replace internal speed and velocity names
latekvo Oct 28, 2024
ea31eb3
simplify drawerAnimatedStyle if statement
latekvo Oct 28, 2024
920a869
fix invalid first-touch hitslop being set
latekvo Oct 28, 2024
d2a52dd
fix tap dismissal not working on web
latekvo Oct 28, 2024
b6e7a32
fix example crashing on macos
latekvo Oct 28, 2024
5661792
fix typing of imperative handle in example
latekvo Oct 28, 2024
5b0237e
inprove verbosity of DrawerMovementOptions type
latekvo Oct 28, 2024
19cabf1
add missing docstring
latekvo Oct 28, 2024
da360bb
remove duplicate prop
latekvo Oct 28, 2024
0c2cb46
fix props in the example app
latekvo Oct 28, 2024
82d4ded
make drawer interaction options optional
latekvo Oct 28, 2024
3e36cbe
shorten transform styles
latekvo Oct 29, 2024
d0d620d
add missing useCallback
latekvo Oct 29, 2024
6bf81a6
normalize animation speed to be 1 by default
latekvo Oct 29, 2024
7f36597
flatten drawer views
latekvo Nov 5, 2024
f14eff1
move all props extractions to central props extractor
latekvo Nov 5, 2024
900fa4f
fix regular function running on UI
latekvo Nov 5, 2024
0972256
remove unnecessary ref
latekvo Nov 5, 2024
3ccfbfe
fix prop descriptions
latekvo Nov 5, 2024
6c21e28
fix comment mistake (amend)
latekvo Nov 5, 2024
d73f56e
add locking mode selection to the example
latekvo Nov 6, 2024
e37ee5e
fix drawer lock mode working as an absolute lock and not just a posit…
latekvo Nov 6, 2024
c0d13b1
update drawer lock mode docstring
latekvo Nov 6, 2024
4592f3b
fix right side drawer misalignment
latekvo Nov 7, 2024
fdcf9f8
Merge remote-tracking branch 'origin/main' into @latekvo/reanimate-dr…
latekvo Nov 7, 2024
beb9eac
Merge branch 'main' into @latekvo/reanimate-drawer-component
latekvo Nov 7, 2024
3e6a26f
fix invalid type naming in the example
latekvo Nov 8, 2024
7daf53b
remove redundant shared value
latekvo Nov 8, 2024
8c37d7c
remove redundant shared values, fix deps containing .value
latekvo Nov 8, 2024
c6b0340
fix right side drawer not updating it's edge side right after render
latekvo Nov 8, 2024
d1ddf0f
fix drawer flickering when dragged during animation
latekvo Nov 8, 2024
c4a78b0
slightly increase animation snappiness
latekvo Nov 8, 2024
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions MacOSExample/babel.config.js
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,8 @@ module.exports = {
'react-native-reanimated': './node_modules/react-native-reanimated',
'react-native-gesture-handler/ReanimatedSwipeable':
'../src/components/ReanimatedSwipeable',
'react-native-gesture-handler/ReanimatedDrawerLayout':
'../src/components/ReanimatedDrawerLayout',
'react-native-gesture-handler/Swipeable':
'../src/components/Swipeable',
'react-native-gesture-handler': '../src/index',
Expand Down
6 changes: 6 additions & 0 deletions ReanimatedDrawerLayout/package.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
{
"main": "../lib/commonjs/components/ReanimatedDrawerLayout",
"module": "../lib/module/components/ReanimatedDrawerLayout",
"react-native": "../src/components/ReanimatedDrawerLayout",
"types": "../lib/typescript/components/ReanimatedDrawerLayout.d.ts"
}
2 changes: 2 additions & 0 deletions example/App.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -54,6 +54,7 @@
import Fling from './src/basic/fling';
import WebStylesResetExample from './src/release_tests/webStylesReset';
import StylusData from './src/release_tests/StylusData';
import ReanimatedDrawerLayout from './src/release_tests/reanimatedDrawerLayout';

import Camera from './src/new_api/camera';
import Transformations from './src/new_api/transformations';
Expand Down Expand Up @@ -200,6 +201,7 @@
unsupportedPlatforms: new Set(['android', 'ios', 'macos']),
},
{ name: 'PointerType', component: PointerType },
{ name: 'Reanimated Drawer Layout', component: ReanimatedDrawerLayout },
{ name: 'Swipeable Reanimation', component: SwipeableReanimation },
{ name: 'RectButton (borders)', component: RectButtonBorders },
{ name: 'Gesturized pressable', component: GesturizedPressable },
Expand Down Expand Up @@ -319,7 +321,7 @@
);
}

function OpenLastExampleSetting() {

Check warning on line 324 in example/App.tsx

View workflow job for this annotation

GitHub Actions / check (example)

Do not define components during render. React will see a new component type on every render and destroy the entire subtree’s DOM nodes and state (https://reactjs.org/docs/reconciliation.html#elements-of-different-types). Instead, move this component definition out of the parent component “MainScreen” and pass data as props. If you want to allow component creation in props, set allowAsProps option to true
const [openLastExample, setOpenLastExample] = React.useState(false);

useEffect(() => {
Expand Down
2 changes: 2 additions & 0 deletions example/babel.config.js
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,8 @@ module.exports = function (api) {
alias: {
'react-native-gesture-handler/ReanimatedSwipeable':
'../src/components/ReanimatedSwipeable',
'react-native-gesture-handler/ReanimatedDrawerLayout':
'../src/components/ReanimatedDrawerLayout',
'react-native-gesture-handler': '../src/index',
},
},
Expand Down
2 changes: 1 addition & 1 deletion example/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,7 @@
"react-dom": "18.2.0",
"react-native": "0.74.1",
"react-native-gesture-handler": "link:..",
"react-native-reanimated": "3.10.0",
"react-native-reanimated": "3.15.5",
"react-native-safe-area-context": "4.10.1",
"react-native-screens": "3.31.1",
"react-native-svg": "15.2.0",
Expand Down
112 changes: 112 additions & 0 deletions example/src/release_tests/reanimatedDrawerLayout/index.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,112 @@
import React, { useRef, useState } from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { Gesture, GestureDetector } from 'react-native-gesture-handler';
import { SharedValue } from 'react-native-reanimated';

import ReanimatedDrawerLayout, {
DrawerType,
DrawerPosition,
DrawerLayoutMethods,
} from 'react-native-gesture-handler/ReanimatedDrawerLayout';
import { LoremIpsum } from '../../../src/common';

const DrawerPage = ({ progress }: { progress?: SharedValue }) => {
progress && console.log('Drawer opening progress:', progress);
return (
<View style={styles.drawerContainer}>
<LoremIpsum />
</View>
);
};

export default function ReanimatedDrawerExample() {
const drawerRef = useRef<DrawerLayoutMethods>(null);
const [side, setSide] = useState(DrawerPosition.LEFT);
const [type, setType] = useState(DrawerType.FRONT);

const tapGesture = Gesture.Tap()
.runOnJS(true)
.onStart(() =>
drawerRef.current?.openDrawer({ animationSpeed: 1, initialVelocity: 0 })
);

const toggleSideGesture = Gesture.Tap()
.runOnJS(true)
.onStart(() =>
setSide(
side === DrawerPosition.LEFT
? DrawerPosition.RIGHT
: DrawerPosition.LEFT
)
);

const toggleTypeGesture = Gesture.Tap()
.runOnJS(true)
.onStart(() =>
setType(
type === DrawerType.FRONT
? DrawerType.BACK
: type === DrawerType.BACK
? DrawerType.SLIDE
: DrawerType.FRONT
)
);

return (
<ReanimatedDrawerLayout
ref={drawerRef}
renderNavigationView={() => <DrawerPage />}
drawerPosition={side}
drawerType={type}>
<View style={styles.innerContainer}>
<GestureDetector gesture={tapGesture}>
<View style={styles.box}>
<Text>Open drawer</Text>
</View>
</GestureDetector>
<GestureDetector gesture={toggleSideGesture}>
<View style={styles.box}>
<Text>
Currently opening from:{' '}
{side === DrawerPosition.LEFT ? 'left' : 'right'}
</Text>
</View>
</GestureDetector>
<GestureDetector gesture={toggleTypeGesture}>
<View style={styles.box}>
<Text>
Current background type:{' '}
{type === DrawerType.FRONT
? 'back'
: type === DrawerType.BACK
? 'slide'
: 'front'}
</Text>
</View>
</GestureDetector>
</View>
</ReanimatedDrawerLayout>
);
}

const styles = StyleSheet.create({
drawerContainer: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: 'pink',
},
innerContainer: {
flex: 1,
backgroundColor: 'white',
alignItems: 'center',
justifyContent: 'center',
gap: 20,
},
box: {
width: 150,
padding: 10,
paddingHorizontal: 5,
backgroundColor: 'pink',
},
});
Loading
Loading