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
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