Skip to content

Fix Pressable requiring dimensionsAfterResize #3606

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

Merged
merged 12 commits into from
Jul 11, 2025

Conversation

latekvo
Copy link
Member

@latekvo latekvo commented Jul 9, 2025

Description

The Pressable was developed with an incorrect assumption that the onLayout prop is not available on the NativeButton.

This PR defines the onLayout on RawButtonProps, and makes use of said prop in Pressable to remove the need for the dimensionsAfterResize property.

This PR also marks dimensionsAfterResize as deprecated.

Fixes #3600

Test plan

  1. Use the provided test code.
  2. Notice how the Pressable, despite starting out with 0, 0 dimensions, responds correctly to all press events.
  3. Use the Pressable examples in our example app to confirm there are no new issues with the component.

Test code

import React, { useEffect } from 'react';
import { StyleSheet } from 'react-native';
import {
  Pressable,
  GestureHandlerRootView,
} from 'react-native-gesture-handler';
import Animated, {
  useSharedValue,
  useAnimatedStyle,
  withTiming,
} from 'react-native-reanimated';

export default function EmptyExample() {
  const opacity = useSharedValue(0);

  const containerAnimatedStyle = useAnimatedStyle(() => {
    'worklet';
    return {
      opacity: opacity.value,
      transform: [{ scale: opacity.value }],
    };
  });

  useEffect(() => {
    opacity.value = withTiming(1, { duration: 200 });
  }, [opacity]);

  return (
    <GestureHandlerRootView style={styles.container}>
      <Animated.View style={containerAnimatedStyle}>
        <Pressable style={styles.box} onPress={() => console.log('press')} />
      </Animated.View>
    </GestureHandlerRootView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    gap: 10,
  },
  box: {
    width: 150,
    height: 150,
    backgroundColor: 'red',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

@latekvo latekvo requested a review from m-bert July 10, 2025 12:33
@@ -171,6 +171,8 @@ export interface PressableProps
* Defines the dimensions of the Pressable after it's been resized.
* This property does not affect Pressable's physical appearance.
* Required when the Pressable is resized **and** uses pressRetentionOffset.
*
* @deprecated This property is no longer used. It can be safely removed.
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Do we plan to remove it? If so, let's state it right away as this is fairly new prop and I guess most of users have not adapted it yet. Otherwise we could add entry in docs.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We do. I think This property is no longer used. paints a clear enough picture, but i think it would make sense to remove rest of the prop's description, as the prop is not used for anything anymore.
What do you think?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

In that case I'd explicitly state that it will be removed - if we don't there's a chance that people will continue to use it.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Updated the comment as discussed in-person in 8bd8607.

Co-authored-by: Michał Bert <63123542+m-bert@users.noreply.github.com>
@latekvo latekvo merged commit e2f8223 into main Jul 11, 2025
1 check passed
@latekvo latekvo deleted the @latekvo/fix-pressable-on-layout branch July 11, 2025 10:37
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

[Pressable] dimensionsAfterResize as a prop is not optimal API for setting dimensions
3 participants