React Native Gesture Handle PinchGestureHandler Text Component

Question

So I'm trying to implement a pinch to zoom on a Text component in React Native and I can't seem to understand the documentation, and most other posts are about making an Image Zoomable, I tried to extrapolate from those but does not want to work.

I'm using the PinchGestureHandler component from react-native-gesture-handler

This is what I got so far and it does not do anything:

import { PinchGestureHandler } from 'react-native-gesture-handler';

const ArticlesScreen = () => {

...


  const scale = useRef(new Animated.Value(0)).current;

  const handlePinch = () => {
    Animated.event(
    [
      {
        nativeEvent: {
          scale,
        },
      },
    ],
    { useNativeDriver: true }
  )}

return (

<View>
   <PinchGestureHandler onGestureEvent={handlePinch}>
            <Animated.Text
              style={{
                backgroundColor: theme === 'light' ? '#FFF' : '#2D65A7',
                transform: [{ scale }],
              }}
            >
              <TouchableOpacity
                onPress={changeTheme}
                style={tw`pt-3 pl-60 flex-row items-center`}
              >
                <MaterialCommunityIcons
                  name="desk-lamp"
                  size={34}
                  color={theme === 'light' ? '#2D65A7' : '#FFF'}
                />
                <Text style={{ color: theme === 'light' ? '#2D65A7' : '#FFF' }}>
                  {theme === 'light' ? 'Dark Mode' : 'Light Mode'}
                </Text>
              </TouchableOpacity>
              <RenderHtml
                enableCSSInlineProcessing={true}
                contentWidth={Dimensions.get('window').width - 32}
                source={html}
                enableExperimentalMarginCollapsing={false}
                renderersProps={renderersProps}
                tagsStyles={
                  theme === 'light' ? tagsStylesLight : tagsStylesDark
                }
                classesStyles={
                  theme === 'light' ? classesStyles : classesStylesDark
                }
                customHTMLElementModels={customHTMLElementModels}
                ignoredDomTags={['colgroup']}
              />
            </Animated.Text>
          </PinchGestureHandler>
    </View>

 );
};

There is more code in the file, I didn't want to cram it a lot to more readable, I think I got what is relevant for this.

Thank you in advance

Answer 1

So after a lot of testing and trying to figure out how to get the gesture-handler to work and failing. I just decided to use this package, easy and simple to set up

https://www.npmjs.com/package/@dudigital/react-native-zoomable-view