From 9a86b0e26501744b1c64ed67c87f01f7e67effa1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mikl=C3=B3s=20Fazekas?= <mfazekas@szemafor.com>
Date: Thu, 18 Dec 2025 17:30:09 +0100
Subject: [PATCH] feat: add DataBinding example with interactive controls

Port DataBinding example from old rive-react-native with modal UI for
string, number, and color property controls. Adds @navigation alias
for cross-platform header button support.
---
 example/package.json                         |   1 +
 example/src/navigation.ts                    |   1 +
 example/src/pages/DataBinding.tsx            | 432 +++++++++++++++++++
 example/src/pages/RiveDataBindingExample.tsx | 132 ------
 example/src/pages/index.ts                   |   2 +-
 example/tsconfig.json                        |  10 +
 expo-example/navigation.ts                   |   1 +
 expo-example/package.json                    |   1 +
 expo-example/tsconfig.json                   |   1 +
 yarn.lock                                    |   9 +
 10 files changed, 457 insertions(+), 133 deletions(-)
 create mode 100644 example/src/navigation.ts
 create mode 100644 example/src/pages/DataBinding.tsx
 delete mode 100644 example/src/pages/RiveDataBindingExample.tsx
 create mode 100644 example/tsconfig.json
 create mode 100644 expo-example/navigation.ts

diff --git a/example/package.json b/example/package.json
index f73d6cc5..9792985c 100644
--- a/example/package.json
+++ b/example/package.json
@@ -10,6 +10,7 @@
     "build:ios": "react-native build-ios --mode Debug"
   },
   "dependencies": {
+    "@react-native-community/slider": "^5.1.1",
     "@react-native-picker/picker": "^2.11.4",
     "@react-navigation/native": "^7.1.9",
     "@react-navigation/stack": "^7.3.2",
diff --git a/example/src/navigation.ts b/example/src/navigation.ts
new file mode 100644
index 00000000..1d0da216
--- /dev/null
+++ b/example/src/navigation.ts
@@ -0,0 +1 @@
+export { useNavigation } from '@react-navigation/native';
diff --git a/example/src/pages/DataBinding.tsx b/example/src/pages/DataBinding.tsx
new file mode 100644
index 00000000..2b8dd61d
--- /dev/null
+++ b/example/src/pages/DataBinding.tsx
@@ -0,0 +1,432 @@
+import { useEffect, useState, useRef } from 'react';
+import {
+  ScrollView,
+  StyleSheet,
+  View,
+  TextInput,
+  Text,
+  Modal,
+  Button,
+} from 'react-native';
+import {
+  Fit,
+  RiveView,
+  RiveColor,
+  useRiveFile,
+  useViewModelInstance,
+  useRiveColor,
+  useRiveNumber,
+  useRiveString,
+  useRiveTrigger,
+} from '@rive-app/react-native';
+import Slider from '@react-native-community/slider';
+import { useNavigation } from '@navigation';
+import type { Metadata } from '../helpers/metadata';
+
+export default function DataBinding() {
+  const navigation = useNavigation();
+  const { riveFile } = useRiveFile(require('../../assets/rive/rewards.riv'));
+  const viewModelInstance = useViewModelInstance(riveFile);
+
+  const { value: buttonText, setValue: setButtonText } = useRiveString(
+    'Button/State_1',
+    viewModelInstance
+  );
+  const { value: lives, setValue: setLives } = useRiveNumber(
+    'Energy_Bar/Lives',
+    viewModelInstance
+  );
+  const { value: barColor, setValue: setBarColor } = useRiveColor(
+    'Energy_Bar/Bar_Color',
+    viewModelInstance
+  );
+  const { value: price, setValue: setPrice } = useRiveNumber(
+    'Price_Value',
+    viewModelInstance
+  );
+  const { value: coinValue } = useRiveNumber(
+    'Coin/Item_Value',
+    viewModelInstance
+  );
+
+  useRiveTrigger('Button/Pressed', viewModelInstance, {
+    onTrigger: () => console.log('Button pressed'),
+  });
+
+  useEffect(() => {
+    if (coinValue !== undefined) {
+      console.log('coinValue changed:', coinValue);
+    }
+  }, [coinValue]);
+
+  const [isOpen, setIsOpen] = useState(false);
+
+  useEffect(() => {
+    navigation.setOptions({
+      // eslint-disable-next-line react/no-unstable-nested-components
+      headerRight: () => (
+        <Button title="Controls" onPress={() => setIsOpen(true)} />
+      ),
+    });
+  }, [navigation]);
+
+  const [livesInput, setLivesInput] = useState('');
+  const [priceInput, setPriceInput] = useState('');
+  const [previewColor, setPreviewColor] = useState<RiveColor>(
+    new RiveColor(0, 255, 0, 255)
+  );
+  const [sliderValues, setSliderValues] = useState({
+    r: 0,
+    g: 255,
+    b: 0,
+    a: 255,
+  });
+  const [textInput, setTextInput] = useState('');
+
+  const initialValuesSet = useRef(false);
+
+  useEffect(() => {
+    if (
+      !initialValuesSet.current &&
+      buttonText !== undefined &&
+      lives !== undefined &&
+      barColor !== undefined &&
+      price !== undefined
+    ) {
+      setTextInput(buttonText);
+      setLivesInput(lives.toString());
+      setPriceInput(price.toString());
+      setPreviewColor(barColor);
+      setSliderValues({
+        r: barColor.r,
+        g: barColor.g,
+        b: barColor.b,
+        a: barColor.a,
+      });
+      initialValuesSet.current = true;
+    }
+  }, [buttonText, lives, barColor, price]);
+
+  const handleTextChange = (text: string) => {
+    setTextInput(text);
+  };
+
+  const handleTextBlur = () => {
+    setButtonText(textInput);
+  };
+
+  const handleLivesChange = (text: string) => {
+    setLivesInput(text);
+    const value = parseInt(text, 10);
+    if (!isNaN(value) && value >= 0 && value <= 9) {
+      setLives(value);
+    }
+  };
+
+  const handleLivesBlur = () => {
+    const value = parseInt(livesInput, 10);
+    if (!isNaN(value) && value >= 0 && value <= 9) {
+      setLives(value);
+    } else {
+      setLives(3);
+      setLivesInput('3');
+    }
+  };
+
+  const handlePriceChange = (text: string) => {
+    setPriceInput(text);
+    const value = parseFloat(text);
+    if (!isNaN(value) && value >= 0) {
+      setPrice(value);
+    }
+  };
+
+  const handlePriceBlur = () => {
+    const value = parseFloat(priceInput);
+    if (!isNaN(value) && value >= 0) {
+      setPrice(value);
+    } else {
+      setPrice(0);
+      setPriceInput('0');
+    }
+  };
+
+  const handleSliderChange = (
+    component: 'r' | 'g' | 'b' | 'a',
+    value: number
+  ) => {
+    const newColor = new RiveColor(
+      component === 'r' ? value : previewColor.r,
+      component === 'g' ? value : previewColor.g,
+      component === 'b' ? value : previewColor.b,
+      component === 'a' ? value : previewColor.a
+    );
+    setPreviewColor(newColor);
+    setBarColor(newColor);
+  };
+
+  const handleSliderComplete = (
+    component: 'r' | 'g' | 'b' | 'a',
+    value: number
+  ) => {
+    setSliderValues((prev) => ({
+      ...prev,
+      [component]: value,
+    }));
+  };
+
+  if (!riveFile || !viewModelInstance) {
+    return (
+      <View style={styles.container}>
+        <Text style={styles.loadingText}>Loading...</Text>
+      </View>
+    );
+  }
+
+  return (
+    <View style={styles.container}>
+      <RiveView
+        fit={Fit.Layout}
+        style={styles.animation}
+        layoutScaleFactor={1}
+        autoPlay={true}
+        dataBind={viewModelInstance}
+        file={riveFile}
+      />
+      <Modal
+        visible={isOpen}
+        animationType="slide"
+        transparent={true}
+        onRequestClose={() => setIsOpen(false)}
+      >
+        <View style={styles.modalOverlay}>
+          <View style={styles.modalContent}>
+            <View style={styles.modalHeader}>
+              <Text style={styles.modalTitle}>Controls</Text>
+              <Button title="Close" onPress={() => setIsOpen(false)} />
+            </View>
+
+            <ScrollView style={styles.modalBody}>
+              <Text style={styles.label}>Button Text</Text>
+              <TextInput
+                style={styles.input}
+                value={textInput}
+                onChangeText={handleTextChange}
+                onBlur={handleTextBlur}
+                placeholder="Enter button text"
+              />
+
+              <View style={styles.rowContainer}>
+                <View style={styles.columnContainer}>
+                  <Text style={styles.label}>Lives (0-9)</Text>
+                  <TextInput
+                    style={styles.input}
+                    value={livesInput}
+                    onChangeText={handleLivesChange}
+                    onBlur={handleLivesBlur}
+                    keyboardType="number-pad"
+                    maxLength={1}
+                    placeholder="Enter number of lives"
+                  />
+                </View>
+
+                <View style={styles.columnContainer}>
+                  <Text style={styles.label}>Price</Text>
+                  <TextInput
+                    style={styles.input}
+                    value={priceInput}
+                    onChangeText={handlePriceChange}
+                    onBlur={handlePriceBlur}
+                    keyboardType="decimal-pad"
+                    placeholder="Enter price"
+                  />
+                </View>
+              </View>
+
+              <Text style={styles.label}>Bar Color</Text>
+              <View style={styles.colorPickerContainer}>
+                <View
+                  style={[
+                    styles.colorPreview,
+                    {
+                      backgroundColor: `rgba(${previewColor.r}, ${previewColor.g}, ${previewColor.b}, ${previewColor.a / 255})`,
+                    },
+                  ]}
+                />
+                <Text style={styles.colorValue}>
+                  RGBA: {Math.round(previewColor.r)},{' '}
+                  {Math.round(previewColor.g)}, {Math.round(previewColor.b)},{' '}
+                  {Math.round((previewColor.a / 255) * 100)}%
+                </Text>
+
+                <View style={styles.sliderContainer}>
+                  <Text style={styles.sliderLabel}>Red</Text>
+                  <Slider
+                    style={styles.slider}
+                    minimumValue={0}
+                    maximumValue={255}
+                    value={sliderValues.r}
+                    onValueChange={(value) => handleSliderChange('r', value)}
+                    onSlidingComplete={(value) =>
+                      handleSliderComplete('r', value)
+                    }
+                    minimumTrackTintColor="#FF0000"
+                    maximumTrackTintColor="#FF0000"
+                  />
+                </View>
+
+                <View style={styles.sliderContainer}>
+                  <Text style={styles.sliderLabel}>Green</Text>
+                  <Slider
+                    style={styles.slider}
+                    minimumValue={0}
+                    maximumValue={255}
+                    value={sliderValues.g}
+                    onValueChange={(value) => handleSliderChange('g', value)}
+                    onSlidingComplete={(value) =>
+                      handleSliderComplete('g', value)
+                    }
+                    minimumTrackTintColor="#00FF00"
+                    maximumTrackTintColor="#00FF00"
+                  />
+                </View>
+
+                <View style={styles.sliderContainer}>
+                  <Text style={styles.sliderLabel}>Blue</Text>
+                  <Slider
+                    style={styles.slider}
+                    minimumValue={0}
+                    maximumValue={255}
+                    value={sliderValues.b}
+                    onValueChange={(value) => handleSliderChange('b', value)}
+                    onSlidingComplete={(value) =>
+                      handleSliderComplete('b', value)
+                    }
+                    minimumTrackTintColor="#0000FF"
+                    maximumTrackTintColor="#0000FF"
+                  />
+                </View>
+
+                <View style={styles.sliderContainer}>
+                  <Text style={styles.sliderLabel}>Alpha</Text>
+                  <Slider
+                    style={styles.slider}
+                    minimumValue={0}
+                    maximumValue={255}
+                    value={sliderValues.a}
+                    onValueChange={(value) => handleSliderChange('a', value)}
+                    onSlidingComplete={(value) =>
+                      handleSliderComplete('a', value)
+                    }
+                    minimumTrackTintColor="#808080"
+                    maximumTrackTintColor="#808080"
+                  />
+                </View>
+              </View>
+            </ScrollView>
+          </View>
+        </View>
+      </Modal>
+    </View>
+  );
+}
+
+DataBinding.metadata = {
+  name: 'Data Binding Demo',
+  description:
+    'Interactive data binding with modal controls for string, number, color properties and triggers',
+} satisfies Metadata;
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  animation: {
+    width: '100%',
+    height: 300,
+  },
+  loadingText: {
+    textAlign: 'center',
+    marginTop: 20,
+    fontSize: 16,
+  },
+  modalOverlay: {
+    flex: 1,
+    backgroundColor: 'rgba(0, 0, 0, 0.5)',
+    justifyContent: 'flex-end',
+  },
+  modalContent: {
+    backgroundColor: 'white',
+    borderTopLeftRadius: 20,
+    borderTopRightRadius: 20,
+    minHeight: '50%',
+    maxHeight: '80%',
+  },
+  modalHeader: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    padding: 16,
+    borderBottomWidth: 1,
+    borderBottomColor: '#ccc',
+  },
+  modalTitle: {
+    fontSize: 18,
+    fontWeight: 'bold',
+  },
+  modalBody: {
+    padding: 16,
+  },
+  label: {
+    fontSize: 16,
+    fontWeight: '500',
+    marginTop: 16,
+    marginBottom: 8,
+  },
+  input: {
+    height: 40,
+    borderWidth: 1,
+    borderColor: '#ccc',
+    borderRadius: 4,
+    paddingHorizontal: 8,
+  },
+  colorPickerContainer: {
+    marginTop: 8,
+    alignItems: 'center',
+  },
+  colorPreview: {
+    width: 50,
+    height: 50,
+    borderRadius: 8,
+    marginBottom: 8,
+    borderWidth: 1,
+    borderColor: '#ccc',
+  },
+  colorValue: {
+    fontSize: 14,
+    color: '#666',
+    marginBottom: 12,
+  },
+  sliderContainer: {
+    width: '100%',
+    marginBottom: 8,
+  },
+  sliderLabel: {
+    fontSize: 14,
+    marginBottom: 2,
+  },
+  slider: {
+    width: '100%',
+    height: 32,
+  },
+  rowContainer: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    gap: 16,
+  },
+  columnContainer: {
+    flex: 1,
+  },
+});
diff --git a/example/src/pages/RiveDataBindingExample.tsx b/example/src/pages/RiveDataBindingExample.tsx
deleted file mode 100644
index 2526ac00..00000000
--- a/example/src/pages/RiveDataBindingExample.tsx
+++ /dev/null
@@ -1,132 +0,0 @@
-import { View, Text, StyleSheet, ActivityIndicator } from 'react-native';
-import { useEffect, useMemo } from 'react';
-import {
-  Fit,
-  RiveView,
-  useRiveNumber,
-  type ViewModelInstance,
-  type RiveFile,
-  useRiveString,
-  useRiveColor,
-  useRiveTrigger,
-  useRiveFile,
-} from '@rive-app/react-native';
-import { type Metadata } from '../helpers/metadata';
-
-export default function WithRiveFile() {
-  const { riveFile, isLoading, error } = useRiveFile(
-    require('../../assets/rive/rewards.riv')
-  );
-
-  return (
-    <View style={styles.container}>
-      <View style={styles.riveContainer}>
-        {isLoading ? (
-          <ActivityIndicator size="large" color="#0000ff" />
-        ) : riveFile ? (
-          <WithViewModelSetup file={riveFile} />
-        ) : (
-          <Text style={styles.errorText}>{error || 'Unexpected error'}</Text>
-        )}
-      </View>
-    </View>
-  );
-}
-
-function WithViewModelSetup({ file }: { file: RiveFile }) {
-  const viewModel = useMemo(() => file.defaultArtboardViewModel(), [file]);
-  const instance = useMemo(
-    () => viewModel?.createDefaultInstance(),
-    [viewModel]
-  );
-
-  if (!instance || !viewModel) {
-    return (
-      <Text style={styles.errorText}>
-        {!viewModel
-          ? 'No view model found'
-          : 'Failed to create view model instance'}
-      </Text>
-    );
-  }
-
-  return <DataBindingExample instance={instance} file={file} />;
-}
-
-function DataBindingExample({
-  instance,
-  file,
-}: {
-  instance: ViewModelInstance;
-  file: RiveFile;
-}) {
-  const { error: coinValueError } = useRiveNumber('Coin/Item_Value', instance);
-
-  if (coinValueError) {
-    console.error('coinValueError', coinValueError);
-  }
-
-  const { setValue: setButtonText } = useRiveString('Button/State_1', instance);
-
-  const { setValue: setBarColor, error: barColorError } = useRiveColor(
-    'Energy_Bar/Bar_Color',
-    instance
-  );
-
-  if (barColorError) {
-    console.error('barColorError', barColorError);
-  }
-
-  const { error: triggerError } = useRiveTrigger('Button/Pressed', instance, {
-    onTrigger: () => {
-      console.log('Button pressed');
-    },
-  });
-
-  if (triggerError) {
-    console.error('triggerError', triggerError);
-  }
-
-  useEffect(() => {
-    setButtonText("Let's go!");
-    setBarColor('#0000FF');
-  }, [setBarColor, setButtonText]);
-
-  return (
-    <RiveView
-      style={styles.rive}
-      autoPlay={true}
-      dataBind={instance}
-      fit={Fit.Layout}
-      layoutScaleFactor={1}
-      file={file}
-    />
-  );
-}
-
-WithRiveFile.metadata = {
-  name: 'Data Binding',
-  description:
-    'Shows data binding with view models, including number, string, color properties and triggers',
-} satisfies Metadata;
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    backgroundColor: '#fff',
-  },
-  riveContainer: {
-    flex: 1,
-    backgroundColor: '#f5f5f5',
-  },
-  rive: {
-    flex: 1,
-    width: '100%',
-    height: '100%',
-  },
-  errorText: {
-    color: 'red',
-    textAlign: 'center',
-    padding: 20,
-  },
-});
diff --git a/example/src/pages/index.ts b/example/src/pages/index.ts
index e5906d76..a38a1bfa 100644
--- a/example/src/pages/index.ts
+++ b/example/src/pages/index.ts
@@ -1,6 +1,6 @@
 export { default as QuickStart } from './QuickStart';
 export { default as RiveFileLoadingExample } from './RiveFileLoadingExample';
-export { default as DataBindingExample } from './RiveDataBindingExample';
+export { default as DataBinding } from './DataBinding';
 export { default as TemplatePage } from './TemplatePage';
 export { default as EventsExample } from './RiveEventsExample';
 export { default as StateMachineInputsExample } from './RiveStateMachineInputsExample';
diff --git a/example/tsconfig.json b/example/tsconfig.json
new file mode 100644
index 00000000..6280bbf0
--- /dev/null
+++ b/example/tsconfig.json
@@ -0,0 +1,10 @@
+{
+  "extends": "../tsconfig",
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "@navigation": ["./src/navigation"],
+      "@rive-app/react-native": ["../src/index"]
+    }
+  }
+}
diff --git a/expo-example/navigation.ts b/expo-example/navigation.ts
new file mode 100644
index 00000000..31e45e57
--- /dev/null
+++ b/expo-example/navigation.ts
@@ -0,0 +1 @@
+export { useNavigation } from 'expo-router';
diff --git a/expo-example/package.json b/expo-example/package.json
index 8595c4f0..56141b81 100644
--- a/expo-example/package.json
+++ b/expo-example/package.json
@@ -13,6 +13,7 @@
   },
   "dependencies": {
     "@expo/vector-icons": "^15.0.3",
+    "@react-native-community/slider": "^5.1.1",
     "@react-native-picker/picker": "^2.11.4",
     "@react-navigation/bottom-tabs": "^7.4.0",
     "@react-navigation/elements": "^2.6.3",
diff --git a/expo-example/tsconfig.json b/expo-example/tsconfig.json
index e0088e9a..5cc72b5b 100644
--- a/expo-example/tsconfig.json
+++ b/expo-example/tsconfig.json
@@ -3,6 +3,7 @@
   "compilerOptions": {
     "baseUrl": ".",
     "paths": {
+      "@navigation": ["./navigation"],
       "@/*": ["./*"],
       "@example/*": ["../example/src/*"],
       "@rive-app/react-native": ["../src/index"]
diff --git a/yarn.lock b/yarn.lock
index a96793a4..16102b53 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3637,6 +3637,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@react-native-community/slider@npm:^5.1.1":
+  version: 5.1.1
+  resolution: "@react-native-community/slider@npm:5.1.1"
+  checksum: 63ab94d8ac22a0e4d7b86f0800283154604e93008dd04103e01a6aa5c56712d74f9b829665cd012ebc4fe29fa31f5a0d7e110bdeaa11bc9b347090f348428021
+  languageName: node
+  linkType: hard
+
 "@react-native-picker/picker@npm:^2.11.4":
   version: 2.11.4
   resolution: "@react-native-picker/picker@npm:2.11.4"
@@ -8218,6 +8225,7 @@ __metadata:
   resolution: "expo-example@workspace:expo-example"
   dependencies:
     "@expo/vector-icons": ^15.0.3
+    "@react-native-community/slider": ^5.1.1
     "@react-native-picker/picker": ^2.11.4
     "@react-navigation/bottom-tabs": ^7.4.0
     "@react-navigation/elements": ^2.6.3
@@ -13921,6 +13929,7 @@ __metadata:
     "@react-native-community/cli": 18.0.0
     "@react-native-community/cli-platform-android": 18.0.0
     "@react-native-community/cli-platform-ios": 18.0.0
+    "@react-native-community/slider": ^5.1.1
     "@react-native-picker/picker": ^2.11.4
     "@react-native/babel-preset": 0.79.2
     "@react-native/metro-config": 0.79.2