fix Animation examples, allow web preview (#4712)

Author: Simek

docs/animated.md

@@ -13,21 +13,20 @@ The core workflow for creating an animation is to create an `Animated.Value`, ho
 
 The following example contains a `View` which will fade in and fade out based on the animated value `fadeAnim`
 
-```SnackPlayer name=Animated%20Example&supportedPlatforms=ios,android
-import React from 'react';
+```SnackPlayer name=Animated%20Example
+import React, {useRef} from 'react';
 import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
 import {
   Animated,
   Text,
   View,
   StyleSheet,
   Button,
-  useAnimatedValue,
 } from 'react-native';
 
 const App = () => {
   // fadeAnim will be used as the value for opacity. Initial Value: 0
-  const fadeAnim = useAnimatedValue(0);
+  const fadeAnim = useRef(new Animated.Value(0)).current;
 
   const fadeIn = () => {
     // Will change fadeAnim value to 1 in 5 seconds

docs/animations.md

@@ -20,12 +20,12 @@ For example, a container view that fades in when it is mounted may look like thi
 <Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
 <TabItem value="javascript">
 
-```SnackPlayer ext=js&supportedPlatforms=ios,android
-import React, {useEffect} from 'react';
-import {Animated, Text, View, useAnimatedValue} from 'react-native';
+```SnackPlayer ext=js
+import React, {useEffect, useRef} from 'react';
+import {Animated, Text, View} from 'react-native';
 
 const FadeInView = props => {
-  const fadeAnim = useAnimatedValue(0); // Initial value for opacity: 0
+  const fadeAnim = useRef(new Animated.Value(0)).current; // Initial value for opacity: 0
 
   useEffect(() => {
     Animated.timing(fadeAnim, {
@@ -74,15 +74,13 @@ export default () => {
 <TabItem value="typescript">
 
 ```SnackPlayer ext=tsx
-import React, {useEffect} from 'react';
-import {Animated, Text, View, useAnimatedValue} from 'react-native';
-import type {PropsWithChildren} from 'react';
-import type {ViewStyle} from 'react-native';
+import React, {useEffect, useRef, type PropsWithChildren} from 'react';
+import {Animated, Text, View, type ViewStyle} from 'react-native';
 
 type FadeInViewProps = PropsWithChildren<{style: ViewStyle}>;
 
 const FadeInView: React.FC<FadeInViewProps> = props => {
-  const fadeAnim = useAnimatedValue(0); // Initial value for opacity: 0
+  const fadeAnim = useRef(new Animated.Value(0)).current; // Initial value for opacity: 0
 
   useEffect(() => {
     Animated.timing(fadeAnim, {
@@ -594,8 +592,8 @@ Note that in order to get this to work on **Android** you need to set the follow
 UIManager.setLayoutAnimationEnabledExperimental(true);
 ```
 
-```SnackPlayer name=LayoutAnimations&supportedPlatforms=ios,android
-import React from 'react';
+```SnackPlayer name=LayoutAnimations
+import React, {useState} from 'react';
 import {
   NativeModules,
   LayoutAnimation,
@@ -610,32 +608,30 @@ const {UIManager} = NativeModules;
 UIManager.setLayoutAnimationEnabledExperimental &&
   UIManager.setLayoutAnimationEnabledExperimental(true);
 
-export default class App extends React.Component {
-  state = {
+export default function App() {
+  const [state, setState] = useState({
     w: 100,
     h: 100,
-  };
+  });
 
-  _onPress = () => {
+  const onPress = () => {
     // Animate the update
     LayoutAnimation.spring();
-    this.setState({w: this.state.w + 15, h: this.state.h + 15});
+    setState({w: state.w + 15, h: state.h + 15});
   };
 
-  render() {
-    return (
-      <View style={styles.container}>
-        <View
-          style={[styles.box, {width: this.state.w, height: this.state.h}]}
-        />
-        <TouchableOpacity onPress={this._onPress}>
-          <View style={styles.button}>
-            <Text style={styles.buttonText}>Press me!</Text>
-          </View>
-        </TouchableOpacity>
-      </View>
-    );
-  }
+  return (
+    <View style={styles.container}>
+      <View
+        style={[styles.box, {width: state.w, height: state.h}]}
+      />
+      <TouchableOpacity onPress={onPress}>
+        <View style={styles.button}>
+          <Text style={styles.buttonText}>Press me!</Text>
+        </View>
+      </TouchableOpacity>
+    </View>
+  );
 }
 
 const styles = StyleSheet.create({

docs/easing.md

@@ -48,8 +48,8 @@ The following helpers are used to modify other easing functions.
 <Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
 <TabItem value="javascript">
 
-```SnackPlayer name=Easing%20Demo&ext=js&supportedPlatforms=ios,android
-import React from 'react';
+```SnackPlayer name=Easing%20Demo&ext=js
+import React, {useRef} from 'react';
 import {
   Animated,
   Easing,
@@ -59,12 +59,11 @@ import {
   Text,
   TouchableOpacity,
   View,
-  useAnimatedValue,
 } from 'react-native';
 import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
 
 const App = () => {
-  const opacity = useAnimatedValue(0);
+  const opacity = useRef(new Animated.Value(0)).current;
 
   const animate = easing => {
     opacity.setValue(0);
@@ -210,7 +209,7 @@ export default App;
 <TabItem value="typescript">
 
 ```SnackPlayer name=Easing%20Demo&ext=tsx
-import React from 'react';
+import React, {useRef} from 'react';
 import {
   Animated,
   Easing,
@@ -220,13 +219,12 @@ import {
   Text,
   TouchableOpacity,
   View,
-  useAnimatedValue,
   type EasingFunction,
 } from 'react-native';
 import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
 
 const App = () => {
-  const opacity = useAnimatedValue(0);
+  const opacity = useRef(new Animated.Value(0)).current;
 
   const animate = (easing: EasingFunction) => {
     opacity.setValue(0);

docs/transforms.md

@@ -211,19 +211,18 @@ The `transformOrigin` property sets the origin for a view's transformations. The
 
 # Example
 
-```SnackPlayer name=TransformOrigin%20Example&supportedPlatforms=ios,android
-import React, {useEffect} from 'react';
+```SnackPlayer name=TransformOrigin%20Example
+import React, {useEffect, useRef} from 'react';
 import {
   Animated,
   View,
   StyleSheet,
   Easing,
-  useAnimatedValue,
 } from 'react-native';
 import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
 
 const App = () => {
-  const rotateAnim = useAnimatedValue(0);
+  const rotateAnim = useRef(new Animated.Value(0)).current;
 
   useEffect(() => {
     Animated.loop(