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

Add Text component #3202

Merged
merged 36 commits into from
Dec 12, 2024
Merged

Add Text component #3202

merged 36 commits into from
Dec 12, 2024

Conversation

m-bert
Copy link
Contributor

@m-bert m-bert commented Nov 8, 2024

Description

This PR adds Text component to Gesture Handler.

Upon investigating #3159 we decided that it will be better to add our own Text component, instead of forcing users to create their own version of Text with NativeViewGestureHandler.

Test plan

New example:
import { useState } from 'react';
import { StyleSheet } from 'react-native';
import {
  Text,
  GestureHandlerRootView,
  TouchableOpacity,
} from 'react-native-gesture-handler';

export default function NestedText() {
  const [counter, setCounter] = useState(0);

  return (
    <GestureHandlerRootView style={styles.container}>
      <Text style={{ fontSize: 30 }}>{`Counter: ${counter}`}</Text>

      <TouchableOpacity
        onPress={() => {
          console.log('Touchable');
          setCounter((prev) => prev + 1);
        }}>
        <Text
          style={[styles.textCommon, styles.outerText]}
          onPress={() => {
            console.log('Outer text');
            setCounter((prev) => prev + 1);
          }}>
          {'Outer Text '}
          <Text
            style={[styles.textCommon, styles.innerText]}
            onPress={() => {
              console.log('Nested text');
              setCounter((prev) => prev + 1);
            }}>
            {'Nested Text'}
          </Text>
        </Text>
      </TouchableOpacity>
    </GestureHandlerRootView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',

    gap: 20,
  },

  textCommon: {
    padding: 10,
    color: 'white',
  },

  outerText: {
    fontSize: 30,
    borderWidth: 2,
    backgroundColor: '#131313',
  },

  innerText: {
    fontSize: 25,
    backgroundColor: '#F06312',
  },
});

@m-bert m-bert requested a review from j-piasecki November 8, 2024 15:57
@m-bert m-bert marked this pull request as draft November 15, 2024 15:31
@m-bert m-bert marked this pull request as ready for review November 21, 2024 15:09
@m-bert m-bert requested a review from j-piasecki November 21, 2024 15:10
src/components/Text.tsx Outdated Show resolved Hide resolved
src/web/handlers/NativeViewGestureHandler.ts Show resolved Hide resolved
@@ -40,6 +42,14 @@ - (void)touchesBegan:(NSSet<RNGHUITouch *> *)touches withEvent:(UIEvent *)event
{
[_gestureHandler setCurrentPointerType:event];
[_gestureHandler.pointerTracker touchesBegan:touches withEvent:event];

#ifdef RCT_NEW_ARCH_ENABLED
if ([self.view.superview isKindOfClass:[RCTParagraphComponentView class]]) {
Copy link
Member

Choose a reason for hiding this comment

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

What's the structure on the new arch? Wouldn't the gesture be attached to the paragraph component view?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

The gesture itself is attached to RCTParagraphView. Unfortunately this class is not exported - that's why I've decided to check for superview (i.e. RCTParagraphComponentView)

apple/Handlers/RNNativeViewHandler.mm Outdated Show resolved Hide resolved
apple/Handlers/RNNativeViewHandler.mm Outdated Show resolved Hide resolved
src/components/Text.tsx Outdated Show resolved Hide resolved
src/components/Text.tsx Outdated Show resolved Hide resolved
@m-bert m-bert merged commit 6a7a128 into main Dec 12, 2024
6 checks passed
@m-bert m-bert deleted the @mbert/add-GH-Text branch December 12, 2024 10:48
@latekvo latekvo mentioned this pull request Jan 10, 2025
latekvo added a commit that referenced this pull request Jan 10, 2025
## Description

Fixes circular dependency introduced in #3202


![image](https://github.com/user-attachments/assets/4900041c-47b1-410f-a4bb-6f3dc6bfe603)

## Test plan

- `npx madge --image ./madge-graph-fixed.svg --extensions js,jsx,ts,tsx
--circular .`
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.

2 participants