Skip to content

Commit 283ed23

Browse files
jbromajbroma
committed
chore: add ReanimatedBox test to tester app
1 parent 71abcc3 commit 283ed23

File tree

6 files changed

+370
-9
lines changed

6 files changed

+370
-9
lines changed

‎apps/tester-app/ios/Podfile.lock‎

Lines changed: 93 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
PODS:
22
- boost (1.84.0)
3-
- callstack-repack (5.0.0-rc.0):
3+
- callstack-repack (5.0.0-rc.1):
44
- DoubleConversion
55
- glog
66
- hermes-engine
@@ -1581,6 +1581,93 @@ PODS:
15811581
- ReactCommon/turbomodule/bridging
15821582
- ReactCommon/turbomodule/core
15831583
- Yoga
1584+
- RNReanimated (3.16.3):
1585+
- DoubleConversion
1586+
- glog
1587+
- hermes-engine
1588+
- RCT-Folly (= 2024.01.01.00)
1589+
- RCTRequired
1590+
- RCTTypeSafety
1591+
- React-Core
1592+
- React-debug
1593+
- React-Fabric
1594+
- React-featureflags
1595+
- React-graphics
1596+
- React-ImageManager
1597+
- React-NativeModulesApple
1598+
- React-RCTFabric
1599+
- React-rendererdebug
1600+
- React-utils
1601+
- ReactCodegen
1602+
- ReactCommon/turbomodule/bridging
1603+
- ReactCommon/turbomodule/core
1604+
- RNReanimated/reanimated (= 3.16.3)
1605+
- RNReanimated/worklets (= 3.16.3)
1606+
- Yoga
1607+
- RNReanimated/reanimated (3.16.3):
1608+
- DoubleConversion
1609+
- glog
1610+
- hermes-engine
1611+
- RCT-Folly (= 2024.01.01.00)
1612+
- RCTRequired
1613+
- RCTTypeSafety
1614+
- React-Core
1615+
- React-debug
1616+
- React-Fabric
1617+
- React-featureflags
1618+
- React-graphics
1619+
- React-ImageManager
1620+
- React-NativeModulesApple
1621+
- React-RCTFabric
1622+
- React-rendererdebug
1623+
- React-utils
1624+
- ReactCodegen
1625+
- ReactCommon/turbomodule/bridging
1626+
- ReactCommon/turbomodule/core
1627+
- RNReanimated/reanimated/apple (= 3.16.3)
1628+
- Yoga
1629+
- RNReanimated/reanimated/apple (3.16.3):
1630+
- DoubleConversion
1631+
- glog
1632+
- hermes-engine
1633+
- RCT-Folly (= 2024.01.01.00)
1634+
- RCTRequired
1635+
- RCTTypeSafety
1636+
- React-Core
1637+
- React-debug
1638+
- React-Fabric
1639+
- React-featureflags
1640+
- React-graphics
1641+
- React-ImageManager
1642+
- React-NativeModulesApple
1643+
- React-RCTFabric
1644+
- React-rendererdebug
1645+
- React-utils
1646+
- ReactCodegen
1647+
- ReactCommon/turbomodule/bridging
1648+
- ReactCommon/turbomodule/core
1649+
- Yoga
1650+
- RNReanimated/worklets (3.16.3):
1651+
- DoubleConversion
1652+
- glog
1653+
- hermes-engine
1654+
- RCT-Folly (= 2024.01.01.00)
1655+
- RCTRequired
1656+
- RCTTypeSafety
1657+
- React-Core
1658+
- React-debug
1659+
- React-Fabric
1660+
- React-featureflags
1661+
- React-graphics
1662+
- React-ImageManager
1663+
- React-NativeModulesApple
1664+
- React-RCTFabric
1665+
- React-rendererdebug
1666+
- React-utils
1667+
- ReactCodegen
1668+
- ReactCommon/turbomodule/bridging
1669+
- ReactCommon/turbomodule/core
1670+
- Yoga
15841671
- RNSVG (15.8.0):
15851672
- DoubleConversion
15861673
- glog
@@ -1700,6 +1787,7 @@ DEPENDENCIES:
17001787
- ReactTestApp-DevSupport (from `../node_modules/react-native-test-app`)
17011788
- ReactTestApp-Resources (from `..`)
17021789
- "RNCAsyncStorage (from `../node_modules/@react-native-async-storage/async-storage`)"
1790+
- RNReanimated (from `../node_modules/react-native-reanimated`)
17031791
- RNSVG (from `../node_modules/react-native-svg`)
17041792
- Yoga (from `../node_modules/react-native/ReactCommon/yoga`)
17051793

@@ -1845,14 +1933,16 @@ EXTERNAL SOURCES:
18451933
:path: ".."
18461934
RNCAsyncStorage:
18471935
:path: "../node_modules/@react-native-async-storage/async-storage"
1936+
RNReanimated:
1937+
:path: "../node_modules/react-native-reanimated"
18481938
RNSVG:
18491939
:path: "../node_modules/react-native-svg"
18501940
Yoga:
18511941
:path: "../node_modules/react-native/ReactCommon/yoga"
18521942

18531943
SPEC CHECKSUMS:
18541944
boost: 1dca942403ed9342f98334bf4c3621f011aa7946
1855-
callstack-repack: 75464b0e26467fc4a7236373399bc0fc2281f495
1945+
callstack-repack: 7084adb6b78076b9de1acc82195e13a70c8c8e31
18561946
DoubleConversion: f16ae600a246532c4020132d54af21d0ddb2a385
18571947
FBLazyVector: 7075bb12898bc3998fd60f4b7ca422496cc2cdf7
18581948
fmt: 10c6e61f4be25dc963c36bd73fc7b1705fe975be
@@ -1919,6 +2009,7 @@ SPEC CHECKSUMS:
19192009
ReactTestApp-DevSupport: 74ff23aba1f35caa74d1dd5346c2835e0af31770
19202010
ReactTestApp-Resources: 155b35f70d032289bb4d2abc6caa9502748a166d
19212011
RNCAsyncStorage: 3ad840f7b17b45ca7ebbbb0e80948564a9513315
2012+
RNReanimated: d5ca26e24d73a50ea450e186e38ddbea889acdf5
19222013
RNSVG: 536cd3c866c878faf72beaba166c8b02fe2b762b
19232014
SocketRocket: d4aabe649be1e368d1318fdf28a022d714d65748
19242015
SwiftyRSA: 8c6dd1ea7db1b8dc4fb517a202f88bb1354bc2c6

‎apps/tester-app/package.json‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -20,17 +20,19 @@
2020
"@react-native-async-storage/async-storage": "^1.23.1",
2121
"react": "18.3.1",
2222
"react-native": "0.76.1",
23+
"react-native-reanimated": "^3.16.3",
2324
"react-native-svg": "15.8.0"
2425
},
2526
"devDependencies": {
2627
"@babel/core": "^7.25.2",
2728
"@callstack/repack": "workspace:*",
29+
"@callstack/repack-plugin-reanimated": "workspace:*",
2830
"@react-native-community/cli": "15.0.1",
29-
"@react-native-community/cli-platform-ios": "15.0.1",
3031
"@react-native-community/cli-platform-android": "15.0.1",
32+
"@react-native-community/cli-platform-ios": "15.0.1",
3133
"@react-native/babel-preset": "0.76.1",
3234
"@react-native/typescript-config": "0.76.1",
33-
"@rsdoctor/rspack-plugin": "^0.4.5",
35+
"@rsdoctor/rspack-plugin": "^0.4.11",
3436
"@rspack/core": "1.0.8",
3537
"@rspack/plugin-react-refresh": "1.0.0",
3638
"@svgr/webpack": "^8.1.0",

‎apps/tester-app/rspack.config.mjs‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22
import { createRequire } from 'node:module';
33
import path from 'node:path';
44
import * as Repack from '@callstack/repack';
5+
import { ReanimatedPlugin } from '@callstack/repack-plugin-reanimated';
56
import { RsdoctorRspackPlugin } from '@rsdoctor/rspack-plugin';
67

78
const dirname = Repack.getDirname(import.meta.url);
@@ -195,6 +196,7 @@ export default (env) => {
195196
// exclude: /index.bundle$/,
196197
// }),
197198
process.env.RSDOCTOR && new RsdoctorRspackPlugin(),
199+
new ReanimatedPlugin(),
198200
].filter(Boolean),
199201
};
200202
};

‎apps/tester-app/src/App.tsx‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import { SectionContainer } from './ui/SectionContainer';
77
import { AssetsTestContainer } from './assetsTest/AssetsTestContainer';
88
import { AsyncContainer } from './asyncChunks/AsyncContainer';
99
import { MiniAppsContainer } from './miniapp/MiniAppsContainer';
10+
import { ReanimatedBox } from './reanimated/ReanimatedBox';
1011
import { RemoteContainer } from './remoteChunks/RemoteContainer';
1112

1213
Appearance.setColorScheme('light');
@@ -27,6 +28,9 @@ const App = () => {
2728
<Section title="Assets test">
2829
<AssetsTestContainer />
2930
</Section>
31+
<Section title="Reanimated test">
32+
<ReanimatedBox />
33+
</Section>
3034
</SectionContainer>
3135
</AppContainer>
3236
);

‎apps/tester-app/src/reanimated/ReanimatedBox.tsx‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
import { Button, StyleSheet, View } from 'react-native';
2+
import Animated, { useSharedValue, withSpring } from 'react-native-reanimated';
3+
4+
export function ReanimatedBox() {
5+
const width = useSharedValue<number>(100);
6+
7+
const handlePress = () => {
8+
width.value = withSpring(width.value + 50);
9+
};
10+
11+
const handleReset = () => {
12+
width.value = withSpring(100);
13+
};
14+
15+
return (
16+
<View style={styles.container}>
17+
<Animated.View style={{ ...styles.box, width }} />
18+
<View style={styles.buttons}>
19+
<Button onPress={handlePress} title="Click" />
20+
<Button onPress={handleReset} title="Reset" />
21+
</View>
22+
</View>
23+
);
24+
}
25+
26+
const styles = StyleSheet.create({
27+
container: {
28+
flex: 1,
29+
alignItems: 'center',
30+
marginVertical: 16,
31+
},
32+
box: {
33+
height: 100,
34+
backgroundColor: '#b58df1',
35+
borderRadius: 20,
36+
marginVertical: 0,
37+
},
38+
buttons: {
39+
flexDirection: 'row',
40+
justifyContent: 'space-around',
41+
},
42+
});

0 commit comments

Comments
 (0)