Skip to content

Commit 7cdccc6

Browse files
HayesGordonHayesGordon
committed
style: databinding example formatting
1 parent a084448 commit 7cdccc6

1 file changed

Lines changed: 70 additions & 36 deletions

File tree

‎example/app/(examples)/DataBinding.tsx‎

Lines changed: 70 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -32,26 +32,36 @@ export default function DataBinding() {
3232
let [lives, setLives] = useRiveNumber(riveRef, 'Energy_Bar/Lives');
3333
let [barColor, setBarColor] = useRiveColor(riveRef, 'Energy_Bar/Bar_Color');
3434
let [price, setPrice] = useRiveNumber(riveRef, 'Price_Value');
35-
let [coinValue, setCoinValue] = useRiveNumber(riveRef, 'Coin/Item_Value');
35+
let [coinValue] = useRiveNumber(riveRef, 'Coin/Item_Value');
36+
37+
useEffect(() => {
38+
if (coinValue !== undefined) {
39+
console.log('coinValue changed:', coinValue);
40+
}
41+
}, [coinValue]);
3642

3743
// MODAL CONTROLS
3844
const navigation = useNavigation();
3945
const [isOpen, setIsOpen] = useState(false);
4046
const [livesInput, setLivesInput] = useState('');
4147
const [priceInput, setPriceInput] = useState('');
42-
const [previewColor, setPreviewColor] = useState({ r: 0, g: 255, b: 0, a: 255 });
43-
const [sliderValues, setSliderValues] = useState({ r: 0, g: 255, b: 0, a: 255 });
48+
const [previewColor, setPreviewColor] = useState({
49+
r: 0,
50+
g: 255,
51+
b: 0,
52+
a: 255,
53+
});
54+
const [sliderValues, setSliderValues] = useState({
55+
r: 0,
56+
g: 255,
57+
b: 0,
58+
a: 255,
59+
});
4460
const [textInput, setTextInput] = useState('');
45-
61+
4662
// INITIAL VALUES SET
4763
const initialValuesSet = useRef(false);
4864

49-
useEffect(() => {
50-
if (coinValue !== undefined) {
51-
console.log('coinValue changed:', coinValue);
52-
}
53-
}, [coinValue]);
54-
5565
useEffect(() => {
5666
if (!initialValuesSet.current && buttonText && lives && barColor && price) {
5767
setTextInput(buttonText);
@@ -65,6 +75,7 @@ export default function DataBinding() {
6575

6676
useEffect(() => {
6777
navigation.setOptions({
78+
// eslint-disable-next-line react/no-unstable-nested-components
6879
headerRight: () => (
6980
<Button
7081
mode="text"
@@ -121,26 +132,32 @@ export default function DataBinding() {
121132
}
122133
};
123134

124-
const handleSliderChange = useCallback((component: 'r' | 'g' | 'b' | 'a', value: number) => {
125-
const newColor = {
126-
...previewColor,
127-
[component]: value,
128-
};
129-
setPreviewColor(newColor);
130-
riveRef?.setColor('Energy_Bar/Bar_Color', newColor);
131-
}, [previewColor, riveRef]);
135+
const handleSliderChange = useCallback(
136+
(component: 'r' | 'g' | 'b' | 'a', value: number) => {
137+
const newColor = {
138+
...previewColor,
139+
[component]: value,
140+
};
141+
setPreviewColor(newColor);
142+
setBarColor(newColor);
143+
},
144+
[previewColor, setBarColor]
145+
);
132146

133-
const handleSliderComplete = useCallback((component: 'r' | 'g' | 'b' | 'a', value: number) => {
134-
const newColor = {
135-
...previewColor,
136-
[component]: value,
137-
};
138-
setPreviewColor(newColor);
139-
setSliderValues(prev => ({
140-
...prev,
141-
[component]: value
142-
}));
143-
}, [previewColor]);
147+
const handleSliderComplete = useCallback(
148+
(component: 'r' | 'g' | 'b' | 'a', value: number) => {
149+
const newColor = {
150+
...previewColor,
151+
[component]: value,
152+
};
153+
setPreviewColor(newColor);
154+
setSliderValues((prev) => ({
155+
...prev,
156+
[component]: value,
157+
}));
158+
},
159+
[previewColor]
160+
);
144161

145162
return (
146163
<SafeAreaView style={styles.safeAreaViewContainer}>
@@ -223,11 +240,20 @@ export default function DataBinding() {
223240

224241
<Text style={styles.label}>Bar Color</Text>
225242
<View style={styles.colorPickerContainer}>
226-
<View style={[styles.colorPreview, { backgroundColor: `rgba(${previewColor.r}, ${previewColor.g}, ${previewColor.b}, ${previewColor.a / 255})` }]} />
243+
<View
244+
style={[
245+
styles.colorPreview,
246+
{
247+
backgroundColor: `rgba(${previewColor.r}, ${previewColor.g}, ${previewColor.b}, ${previewColor.a / 255})`,
248+
},
249+
]}
250+
/>
227251
<Text style={styles.colorValue}>
228-
RGBA: {Math.round(previewColor.r)}, {Math.round(previewColor.g)}, {Math.round(previewColor.b)}, {Math.round(previewColor.a / 255 * 100)}%
252+
RGBA: {Math.round(previewColor.r)},{' '}
253+
{Math.round(previewColor.g)}, {Math.round(previewColor.b)},{' '}
254+
{Math.round((previewColor.a / 255) * 100)}%
229255
</Text>
230-
256+
231257
<View style={styles.sliderContainer}>
232258
<Text style={styles.sliderLabel}>Red</Text>
233259
<Slider
@@ -236,7 +262,9 @@ export default function DataBinding() {
236262
maximumValue={255}
237263
value={sliderValues.r}
238264
onValueChange={(value) => handleSliderChange('r', value)}
239-
onSlidingComplete={(value) => handleSliderComplete('r', value)}
265+
onSlidingComplete={(value) =>
266+
handleSliderComplete('r', value)
267+
}
240268
minimumTrackTintColor="#FF0000"
241269
maximumTrackTintColor="#FF0000"
242270
/>
@@ -250,7 +278,9 @@ export default function DataBinding() {
250278
maximumValue={255}
251279
value={sliderValues.g}
252280
onValueChange={(value) => handleSliderChange('g', value)}
253-
onSlidingComplete={(value) => handleSliderComplete('g', value)}
281+
onSlidingComplete={(value) =>
282+
handleSliderComplete('g', value)
283+
}
254284
minimumTrackTintColor="#00FF00"
255285
maximumTrackTintColor="#00FF00"
256286
/>
@@ -264,7 +294,9 @@ export default function DataBinding() {
264294
maximumValue={255}
265295
value={sliderValues.b}
266296
onValueChange={(value) => handleSliderChange('b', value)}
267-
onSlidingComplete={(value) => handleSliderComplete('b', value)}
297+
onSlidingComplete={(value) =>
298+
handleSliderComplete('b', value)
299+
}
268300
minimumTrackTintColor="#0000FF"
269301
maximumTrackTintColor="#0000FF"
270302
/>
@@ -278,7 +310,9 @@ export default function DataBinding() {
278310
maximumValue={255}
279311
value={sliderValues.a}
280312
onValueChange={(value) => handleSliderChange('a', value)}
281-
onSlidingComplete={(value) => handleSliderComplete('a', value)}
313+
onSlidingComplete={(value) =>
314+
handleSliderComplete('a', value)
315+
}
282316
minimumTrackTintColor="#808080"
283317
maximumTrackTintColor="#808080"
284318
/>

0 commit comments

Comments
 (0)