- added combining animted values example to the animated api example list (#43435)

Summary:
Added an example to add ```combining``` values with the animated API

## Changelog:

[General] [Added] - Add examples for Combining Animated Values with the Animated API

Pull Request resolved: #43435

Test Plan:
https://github.com/facebook/react-native/assets/72331432/c4a0c1e2-df9d-4e73-8602-e4550a22b8dc

https://github.com/facebook/react-native/assets/72331432/d2f1196e-68b0-49d4-8d3d-2c53ee30652b

Reviewed By: cortinico

Differential Revision: D55917557

Pulled By: hoxyq

fbshipit-source-id: d4214323f2a8823b1b3fe0c8d90a7518d0953b48

Author: Biki-das

packages/rn-tester/js/examples/Animated/AnimatedIndex.js

@@ -11,6 +11,7 @@
 import type {RNTesterModule} from '../../types/RNTesterTypes';
 
 import ColorStylesExample from './ColorStylesExample';
+import CombineExample from './CombineExample';
 import ComposeAnimationsWithEasingExample from './ComposeAnimationsWithEasingExample';
 import ComposingExample from './ComposingExample';
 import ContinuousInteractionsExample from './ContinuousInteractionsExample';
@@ -43,5 +44,6 @@ export default ({
     TransformBounceExample,
     LoopingExample,
     ContinuousInteractionsExample,
+    CombineExample,
   ],
 }: RNTesterModule);

packages/rn-tester/js/examples/Animated/CombineExample.js

@@ -0,0 +1,90 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow strict-local
+ * @format
+ */
+
+import type {RNTesterModuleExample} from '../../types/RNTesterTypes';
+import type {Numeric} from 'react-native/Libraries/Animated/AnimatedImplementation';
+
+import RNTesterButton from '../../components/RNTesterButton';
+import * as React from 'react';
+import {Animated, StyleSheet, Text, TextInput, View} from 'react-native';
+export default ({
+  title: 'Combine Example',
+  name: 'Combine View',
+  description:
+    'Change the opacity of the view by combining different Animated.Values.',
+  render: () => <CombineExample />,
+}: RNTesterModuleExample);
+
+const CombineExample = () => {
+  const [aValue, setAValue] = React.useState('0.4');
+  const [bValue, setBValue] = React.useState('0.5');
+  const a = new Animated.Value(parseFloat(aValue));
+  const b = new Animated.Value(parseFloat(bValue));
+  const add = Animated.add(a, b);
+  const subtract = Animated.subtract(b, a);
+  const mult = Animated.multiply(a, b);
+  const divide =
+    parseFloat(aValue) !== 0 ? Animated.divide(b, a) : new Animated.Value(1);
+  const mod = Animated.modulo(a, parseFloat(bValue));
+  const [animation, setAnimation] = React.useState<Numeric>(add);
+
+  return (
+    <View>
+      <TextInput
+        style={styles.input}
+        value={aValue}
+        onChangeText={text => setAValue(text)}
+        placeholder="Enter value for a"
+        keyboardType="numeric"
+      />
+      <TextInput
+        style={styles.input}
+        value={bValue}
+        onChangeText={text => setBValue(text)}
+        placeholder="Enter value for b"
+        keyboardType="numeric"
+      />
+      <Animated.View style={[styles.content, {opacity: animation}]}>
+        <Text>Change Opacity</Text>
+      </Animated.View>
+      <RNTesterButton onPress={() => setAnimation(add)}>Add</RNTesterButton>
+      <RNTesterButton onPress={() => setAnimation(subtract)}>
+        Subtract
+      </RNTesterButton>
+      <RNTesterButton onPress={() => setAnimation(mult)}>
+        Multiply
+      </RNTesterButton>
+      <RNTesterButton onPress={() => setAnimation(divide)}>
+        Divide
+      </RNTesterButton>
+      <RNTesterButton onPress={() => setAnimation(mod)}>Modulo</RNTesterButton>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  content: {
+    backgroundColor: 'deepskyblue',
+    borderWidth: 1,
+    borderColor: 'dodgerblue',
+    padding: 20,
+    margin: 20,
+    borderRadius: 10,
+    alignItems: 'center',
+  },
+  input: {
+    height: 40,
+    borderColor: 'gray',
+    borderWidth: 1,
+    paddingLeft: 10,
+    margin: 10,
+    borderRadius: 5,
+  },
+});