Convert to functional component#150
Convert to functional component#150thomasttvo wants to merge 6 commits intothomas/strip-featuresfrom
Conversation
| this.gestureType = null; | ||
| } | ||
|
|
||
| componentDidUpdate( |
There was a problem hiding this comment.
this function is now split into 3 layout effects, each check for a specific set of changes
| prevState: ReactNativeZoomableViewState | ||
| ) { | ||
| const { zoomEnabled, initialZoom } = this.props; | ||
| if (prevProps.zoomEnabled && !zoomEnabled && initialZoom) { |
There was a problem hiding this comment.
instead of checking prevProps and prevState, we create deps arrays for the layout effects that contain only the changes we're trying to watch. For example the equivalent effect for this block has a deps array that contains only zoomEnabled. initialZoom is assigned to and referenced from a ref because it's not being watched for changes
|
|
||
| useLayoutEffect(() => { | ||
| gestureHandlers.current = PanResponder.create({ | ||
| onStartShouldSetPanResponder: _handleStartShouldSetPanResponder, |
There was a problem hiding this comment.
all functions are wrapped in a useLatestCallback so they don't trigger reevaluation of the effects, keeping the original behavior consistent
| this.state.originalWidth === width && | ||
| this.state.originalHeight === height && | ||
| this.state.originalPageX === pageX && | ||
| this.state.originalPageY === pageY |
There was a problem hiding this comment.
this if block is totally redundant - my bad, react is capable of checking individual state variables for updates
2 participants
This PR aims to perform this conversion while minimizing the diff as much as possible. This means we're sacrificing code styling in some areas to prioritize keeping the diff small.
The end goal of this PR is to set the stage for the ultimate conversion to
reanimated. There's a high chance the changes here are not released, but only served as a transitional stepping stone.Tested and verified pinch/pan/staticPin behaviors to work fine.
Note
Refactors
ReactNativeZoomableViewfrom a class to a hooks-based functional component while keeping behavior and public APIs intact.useState/useRefand lifecycle withuseLayoutEffect/useEffect; wiresPanResponderhandlers via refszoomTo,zoomBy,moveTo,moveBy,moveStaticPinTo,gestureStarted) viauseImperativeHandlelodash.defaults; usesuseLatestCallbackand a debouncedonStaticPinPositionChangecalcGestureCenterPoint/calcGestureTouchDistancenow returnundefinedinstead ofnullfor invalid statesWritten by Cursor Bugbot for commit e1eae6a. Configure here.