Skip to content

Commit 4c41e37

Browse files
mrousavymrousavy
committed
Add react-navigation to separate tests into screens
1 parent a4a93e7 commit 4c41e37

9 files changed

+379
-92
lines changed

‎example/index.tsx

+19-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,23 @@
1+
import 'react-native-gesture-handler';
2+
import React from 'react';
13
import { AppRegistry } from 'react-native';
2-
import App from './src/App';
4+
import Fibonacci from './src/Fibonacci';
5+
import ThreadBlocking from './src/ThreadBlocking';
36
import { name as appName } from './app.json';
7+
import { NavigationContainer } from '@react-navigation/native';
8+
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
9+
10+
const Tab = createBottomTabNavigator();
11+
12+
function App() {
13+
return (
14+
<NavigationContainer>
15+
<Tab.Navigator>
16+
<Tab.Screen name="Fibonacci" component={Fibonacci} />
17+
<Tab.Screen name="Thread Blocking" component={ThreadBlocking} />
18+
</Tab.Navigator>
19+
</NavigationContainer>
20+
);
21+
}
422

523
AppRegistry.registerComponent(appName, () => App);

‎example/ios/Podfile.lock

+24
Original file line numberDiff line numberDiff line change
@@ -272,6 +272,8 @@ PODS:
272272
- React
273273
- React-callinvoker
274274
- React-Core
275+
- react-native-safe-area-context (3.2.0):
276+
- React-Core
275277
- React-perflogger (0.64.0)
276278
- React-RCTActionSheet (0.64.0):
277279
- React-Core/RCTActionSheetHeaders (= 0.64.0)
@@ -336,6 +338,10 @@ PODS:
336338
- React-cxxreact (= 0.64.0)
337339
- React-jsi (= 0.64.0)
338340
- React-perflogger (= 0.64.0)
341+
- RNCMaskedView (0.1.10):
342+
- React
343+
- RNGestureHandler (1.10.3):
344+
- React-Core
339345
- RNReanimated (2.1.0):
340346
- DoubleConversion
341347
- FBLazyVector
@@ -365,6 +371,8 @@ PODS:
365371
- React-RCTVibration
366372
- ReactCommon/turbomodule/core
367373
- Yoga
374+
- RNScreens (3.0.0):
375+
- React-Core
368376
- Yoga (1.14.0)
369377
- YogaKit (1.18.1):
370378
- Yoga (~> 1.14)
@@ -410,6 +418,7 @@ DEPENDENCIES:
410418
- React-jsiexecutor (from `../node_modules/react-native/ReactCommon/jsiexecutor`)
411419
- React-jsinspector (from `../node_modules/react-native/ReactCommon/jsinspector`)
412420
- react-native-multithreading (from `../..`)
421+
- react-native-safe-area-context (from `../node_modules/react-native-safe-area-context`)
413422
- React-perflogger (from `../node_modules/react-native/ReactCommon/reactperflogger`)
414423
- React-RCTActionSheet (from `../node_modules/react-native/Libraries/ActionSheetIOS`)
415424
- React-RCTAnimation (from `../node_modules/react-native/Libraries/NativeAnimation`)
@@ -422,7 +431,10 @@ DEPENDENCIES:
422431
- React-RCTVibration (from `../node_modules/react-native/Libraries/Vibration`)
423432
- React-runtimeexecutor (from `../node_modules/react-native/ReactCommon/runtimeexecutor`)
424433
- ReactCommon/turbomodule/core (from `../node_modules/react-native/ReactCommon`)
434+
- "RNCMaskedView (from `../node_modules/@react-native-community/masked-view`)"
435+
- RNGestureHandler (from `../node_modules/react-native-gesture-handler`)
425436
- RNReanimated (from `../node_modules/react-native-reanimated`)
437+
- RNScreens (from `../node_modules/react-native-screens`)
426438
- Yoga (from `../node_modules/react-native/ReactCommon/yoga`)
427439

428440
SPEC REPOS:
@@ -474,6 +486,8 @@ EXTERNAL SOURCES:
474486
:path: "../node_modules/react-native/ReactCommon/jsinspector"
475487
react-native-multithreading:
476488
:path: "../.."
489+
react-native-safe-area-context:
490+
:path: "../node_modules/react-native-safe-area-context"
477491
React-perflogger:
478492
:path: "../node_modules/react-native/ReactCommon/reactperflogger"
479493
React-RCTActionSheet:
@@ -498,8 +512,14 @@ EXTERNAL SOURCES:
498512
:path: "../node_modules/react-native/ReactCommon/runtimeexecutor"
499513
ReactCommon:
500514
:path: "../node_modules/react-native/ReactCommon"
515+
RNCMaskedView:
516+
:path: "../node_modules/@react-native-community/masked-view"
517+
RNGestureHandler:
518+
:path: "../node_modules/react-native-gesture-handler"
501519
RNReanimated:
502520
:path: "../node_modules/react-native-reanimated"
521+
RNScreens:
522+
:path: "../node_modules/react-native-screens"
503523
Yoga:
504524
:path: "../node_modules/react-native/ReactCommon/yoga"
505525

@@ -532,6 +552,7 @@ SPEC CHECKSUMS:
532552
React-jsiexecutor: 06a9c77b56902ae7ffcdd7a4905f664adc5d237b
533553
React-jsinspector: 0ae35a37b20d5e031eb020a69cc5afdbd6406301
534554
react-native-multithreading: 3af4560d7ea25de91b45fe5672150f34853371a5
555+
react-native-safe-area-context: f0906bf8bc9835ac9a9d3f97e8bde2a997d8da79
535556
React-perflogger: 9c547d8f06b9bf00cb447f2b75e8d7f19b7e02af
536557
React-RCTActionSheet: 3080b6e12e0e1a5b313c8c0050699b5c794a1b11
537558
React-RCTAnimation: 3f96f21a497ae7dabf4d2f150ee43f906aaf516f
@@ -544,7 +565,10 @@ SPEC CHECKSUMS:
544565
React-RCTVibration: 0fd6b21751a33cb72fce1a4a33ab9678416d307a
545566
React-runtimeexecutor: cad74a1eaa53ee6e7a3620231939d8fe2c6afcf0
546567
ReactCommon: cfe2b7fd20e0dbd2d1185cd7d8f99633fbc5ff05
568+
RNCMaskedView: 5a8ec07677aa885546a0d98da336457e2bea557f
569+
RNGestureHandler: a479ebd5ed4221a810967000735517df0d2db211
547570
RNReanimated: b8c8004b43446e3c2709fe64b2b41072f87428ad
571+
RNScreens: e8e8dd0588b5da0ab57dcca76ab9b2d8987757e0
548572
Yoga: 8c8436d4171c87504c648ae23b1d81242bdf3bbf
549573
YogaKit: f782866e155069a2cca2517aafea43200b01fd5a
550574

‎example/package.json

+7-1
Original file line numberDiff line numberDiff line change
@@ -10,10 +10,16 @@
1010
"postinstall": "npx patch-package"
1111
},
1212
"dependencies": {
13+
"@react-native-community/masked-view": "^0.1.10",
14+
"@react-navigation/bottom-tabs": "^5.11.8",
15+
"@react-navigation/native": "^5.9.3",
1316
"babel-plugin-module-resolver": "^4.1.0",
1417
"react": "17.0.1",
1518
"react-native": "0.64.0",
16-
"react-native-reanimated": "^2.1.0"
19+
"react-native-gesture-handler": "^1.10.3",
20+
"react-native-reanimated": "^2.1.0",
21+
"react-native-safe-area-context": "^3.2.0",
22+
"react-native-screens": "^3.0.0"
1723
},
1824
"devDependencies": {
1925
"@babel/core": "^7.12.9",

‎example/src/Fibonacci.tsx

+96
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,96 @@
1+
import * as React from 'react';
2+
3+
import {
4+
StyleSheet,
5+
View,
6+
Text,
7+
TextInput,
8+
ActivityIndicator,
9+
Alert,
10+
} from 'react-native';
11+
import { spawnThread } from 'react-native-multithreading';
12+
import 'react-native-reanimated';
13+
14+
// calculates the fibonacci number - that can be optimized really good so it's really really fast.
15+
const fibonacci = (num: number): number => {
16+
'worklet';
17+
// Uses array to store every single fibonacci number
18+
var i;
19+
let fib: number[] = [];
20+
21+
fib[0] = 0;
22+
fib[1] = 1;
23+
for (i = 2; i <= num; i++) {
24+
fib[i] = fib[i - 2] + fib[i - 1];
25+
}
26+
return fib[fib.length - 1];
27+
};
28+
29+
export default function App() {
30+
const [isRunning, setIsRunning] = React.useState(false);
31+
const [input, setInput] = React.useState('5');
32+
const [result, setResult] = React.useState<number | undefined>();
33+
34+
const runFibonacci = React.useCallback(async (parsedInput: number) => {
35+
setIsRunning(true);
36+
try {
37+
const fib = await spawnThread(() => {
38+
'worklet';
39+
console.log(
40+
`${global._LABEL}: Calculating fibonacci for input ${parsedInput}...`
41+
);
42+
const value = fibonacci(parsedInput);
43+
console.log(
44+
`${global._LABEL}: Fibonacci number for ${parsedInput} is ${value}!`
45+
);
46+
return value;
47+
});
48+
setResult(fib);
49+
} catch (e) {
50+
const msg = e instanceof Error ? e.message : JSON.stringify(e);
51+
Alert.alert('Error', msg);
52+
} finally {
53+
setIsRunning(false);
54+
}
55+
}, []);
56+
57+
React.useEffect(() => {
58+
const parsedInput = Number.parseInt(input, 10);
59+
runFibonacci(parsedInput);
60+
}, [runFibonacci, input]);
61+
62+
return (
63+
<View style={styles.container}>
64+
<Text>Input:</Text>
65+
<TextInput
66+
style={styles.input}
67+
value={input}
68+
onChangeText={setInput}
69+
placeholder="0"
70+
/>
71+
{isRunning ? (
72+
<ActivityIndicator />
73+
) : (
74+
<Text>Fibonacci Number: {result}</Text>
75+
)}
76+
</View>
77+
);
78+
}
79+
80+
const styles = StyleSheet.create({
81+
container: {
82+
flex: 1,
83+
alignItems: 'center',
84+
marginTop: 150,
85+
},
86+
input: {
87+
width: '50%',
88+
paddingVertical: 5,
89+
marginVertical: 10,
90+
borderWidth: StyleSheet.hairlineWidth,
91+
borderRadius: 5,
92+
borderColor: 'black',
93+
textAlign: 'center',
94+
fontSize: 14,
95+
},
96+
});

‎example/src/PressableOpacity.tsx

+56
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
import React, { useCallback } from 'react';
2+
import {
3+
PressableProps,
4+
Pressable,
5+
PressableStateCallbackType,
6+
StyleProp,
7+
ViewStyle,
8+
} from 'react-native';
9+
10+
export interface PressableOpacityProps extends PressableProps {
11+
/**
12+
* The opacity to use when `disabled={true}`
13+
*
14+
* @default 1
15+
*/
16+
disabledOpacity?: number;
17+
/**
18+
* The opacity to animate to when the user presses the button
19+
*
20+
* @default 0.2
21+
*/
22+
activeOpacity?: number;
23+
}
24+
25+
export type StyleType = (
26+
state: PressableStateCallbackType
27+
) => StyleProp<ViewStyle>;
28+
29+
/**
30+
* A Pressable component that lowers opacity when in pressed state. Uses the JS Pressability API.
31+
*/
32+
export const PressableOpacity = ({
33+
style,
34+
disabled = false,
35+
disabledOpacity = 1,
36+
activeOpacity = 0.2,
37+
...passThroughProps
38+
}: PressableOpacityProps): React.ReactElement => {
39+
const getOpacity = useCallback(
40+
(pressed: boolean) => {
41+
if (disabled) {
42+
return disabledOpacity;
43+
} else {
44+
if (pressed) return activeOpacity;
45+
else return 1;
46+
}
47+
},
48+
[activeOpacity, disabled, disabledOpacity]
49+
);
50+
const _style = useCallback<StyleType>(
51+
({ pressed }) => [style as ViewStyle, { opacity: getOpacity(pressed) }],
52+
[getOpacity, style]
53+
);
54+
55+
return <Pressable style={_style} disabled={disabled} {...passThroughProps} />;
56+
};

0 commit comments

Comments
 (0)