Skip to content

Commit adce414

Browse files
alexbabrykovichalexbabrykovich
committed
fix: eslint issues
1 parent ed52c5a commit adce414

File tree

7 files changed

+87
-65
lines changed

7 files changed

+87
-65
lines changed

‎.eslintrc.js‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,9 @@
11
module.exports = {
22
root: true,
33
extends: '@react-native',
4+
ignorePatterns: [
5+
'**/*.eslintrc.js',
6+
'**/*.config.js',
7+
'packages/examples/*/*.js', // React Native entry points don't need linting
8+
],
49
};

‎docs/logo.svg‎

Lines changed: 3 additions & 3 deletions
Loading

‎packages/examples/recursive/App.tsx‎

Lines changed: 15 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,7 @@ function Section({ children, title, depth }: SectionProps): React.JSX.Element {
3636
styles.sectionTitle,
3737
{
3838
color: isDarkMode ? Colors.white : Colors.black,
39-
fontSize: 26 - depth * 3
39+
fontSize: 26 - depth * 3,
4040
},
4141
]}>
4242
{title}
@@ -46,7 +46,7 @@ function Section({ children, title, depth }: SectionProps): React.JSX.Element {
4646
styles.sectionDescription,
4747
{
4848
color: isDarkMode ? Colors.light : Colors.dark,
49-
fontSize: 20 - depth * 3
49+
fontSize: 20 - depth * 3,
5050
},
5151
]}>
5252
{children}
@@ -80,13 +80,13 @@ function App({ depth = 1 }: AppProps): React.JSX.Element {
8080
style={backgroundStyle}>
8181
<Header />
8282
<View
83-
style={{
84-
backgroundColor: isDarkMode ? Colors.black : Colors.white,
85-
borderWidth: depth > 1 ? 2 : 0,
86-
borderColor: borderColor,
87-
margin: depth > 1 ? 5 : 0,
88-
padding: depth > 1 ? 5 : 0,
89-
}}>
83+
style={[
84+
{
85+
backgroundColor: isDarkMode ? Colors.black : Colors.white,
86+
borderColor: borderColor,
87+
},
88+
depth > 1 && styles.nestedContainer,
89+
]}>
9090
<Section title={`Recursive Sandbox (Depth: ${depth})`} depth={depth}>
9191
This is a nested React Native instance.
9292
</Section>
@@ -135,6 +135,11 @@ const styles = StyleSheet.create({
135135
highlight: {
136136
fontWeight: '700',
137137
},
138+
nestedContainer: {
139+
borderWidth: 2,
140+
margin: 5,
141+
padding: 5,
142+
},
138143
recursiveSandboxContainer: {
139144
marginTop: 20,
140145
height: 500,
@@ -155,4 +160,4 @@ const styles = StyleSheet.create({
155160
},
156161
});
157162

158-
export default App;
163+
export default App;

‎packages/examples/side-by-side/App.tsx‎

Lines changed: 42 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React, { useRef, useState } from 'react';
2-
import { Button, View, Dimensions, StyleSheet, SafeAreaView, Switch, TouchableOpacity, Text, ColorValue, ViewStyle } from 'react-native';
2+
import { Button, View, Dimensions, StyleSheet, SafeAreaView, Switch, ColorValue } from 'react-native';
33
import Animated, {
44
useSharedValue,
55
useAnimatedStyle,
@@ -15,22 +15,22 @@ const BALL_SIZE = 50;
1515
function SandboxDemoView({initialProperties}: {initialProperties: any}) {
1616
const [isVisible, setVisible] = useState(false);
1717
const sandboxRef = useRef<SandboxReactNativeViewRef>(null);
18-
18+
1919
return (
20-
<View style={{ flex: 1 }}>
21-
<SafeAreaView style={{ margin: 10, flex: 1 }}>
20+
<View style={styles.container}>
21+
<SafeAreaView style={styles.safeArea}>
2222
<View style={styles.control}>
2323
<Switch value={isVisible} onValueChange={() => setVisible(v => !v)} />
2424
<Button color={styles.button.backgroundColor} title="Post message" onPress={() => {
25-
sandboxRef?.current?.postMessage({date: new Date().toJSON(), origin: "host"})
25+
sandboxRef?.current?.postMessage({date: new Date().toJSON(), origin: 'host'});
2626
}} />
2727
</View>
2828
{isVisible ?
2929
<SandboxReactNativeView
3030
ref={sandboxRef}
31-
jsBundleName={"sandbox"}
32-
moduleName={"SandboxApp"}
33-
style={{flex: 1, padding: 30}}
31+
jsBundleName={'sandbox'}
32+
moduleName={'SandboxApp'}
33+
style={styles.sandboxView}
3434
initialProperties={initialProperties}
3535
onMessage={(msg) => {
3636
console.log(`Got message from ${initialProperties.sourceName}`, msg);
@@ -52,8 +52,8 @@ function SandboxDemoView({initialProperties}: {initialProperties: any}) {
5252
type: 'error',
5353
text1: message,
5454
text2: `${error.name}: ${error.message}`,
55-
visibilityTime: 5000
56-
})
55+
visibilityTime: 5000,
56+
});
5757
return false;
5858
}}
5959
/> : null
@@ -64,19 +64,19 @@ function SandboxDemoView({initialProperties}: {initialProperties: any}) {
6464
}
6565

6666
function BouncingBall() {
67-
// Position and velocity shared values
67+
// Position and velocity shared values
6868
const ballX = useSharedValue(50);
6969
const ballY = useSharedValue(50);
7070
const velocityX = useSharedValue(6);
7171
const velocityY = useSharedValue(6);
7272

73-
// Animation loop using derived value for continuous movement
73+
// Animation loop using derived value for continuous movement
7474
useDerivedValue(() => {
75-
// Update position
75+
// Update position
7676
ballX.value += velocityX.value;
7777
ballY.value += velocityY.value;
7878

79-
// Bounce off walls
79+
// Bounce off walls
8080
if (ballX.value <= 0 || ballX.value >= screenWidth - BALL_SIZE) {
8181
velocityX.value *= -1;
8282
ballX.value = Math.max(0, Math.min(screenWidth - BALL_SIZE, ballX.value));
@@ -88,7 +88,7 @@ function BouncingBall() {
8888
}
8989
});
9090

91-
// Animated style for the ball
91+
// Animated style for the ball
9292
const animatedStyle = useAnimatedStyle(() => {
9393
return {
9494
transform: [
@@ -103,23 +103,25 @@ function BouncingBall() {
103103
);
104104
}
105105

106+
// Move toast config outside component to avoid re-creation on every render
107+
const toastConfig = {
108+
customColored: (props: ToastConfigParams<{leftColor: ColorValue}>) => (
109+
<BaseToast
110+
{...props}
111+
text2NumberOfLines={0}
112+
style={{
113+
borderLeftColor: props?.props.leftColor,
114+
}}
115+
/>
116+
),
117+
};
118+
106119
export default function App() {
107-
const toastConfig = {
108-
customColored: (props: ToastConfigParams<{leftColor: ColorValue}>) => (
109-
<BaseToast
110-
{...props}
111-
text2NumberOfLines={0}
112-
style={{
113-
borderLeftColor: props?.props.leftColor,
114-
}}
115-
/>
116-
),
117-
};
118120

119121
return (
120-
<SafeAreaView style={styles.container}>
121-
<SandboxDemoView initialProperties={{sourceName: "green", backgroundColor: '#CCFFCC'}} />
122-
<SandboxDemoView initialProperties={{sourceName: "blue", backgroundColor: '#CCCCFF'}} />
122+
<SafeAreaView style={styles.appContainer}>
123+
<SandboxDemoView initialProperties={{sourceName: 'green', backgroundColor: '#CCFFCC'}} />
124+
<SandboxDemoView initialProperties={{sourceName: 'blue', backgroundColor: '#CCCCFF'}} />
123125
<BouncingBall />
124126
<Toast config={toastConfig} />
125127
</SafeAreaView>
@@ -129,6 +131,17 @@ export default function App() {
129131
const styles = StyleSheet.create({
130132
container: {
131133
flex: 1,
134+
},
135+
safeArea: {
136+
margin: 10,
137+
flex: 1,
138+
},
139+
sandboxView: {
140+
flex: 1,
141+
padding: 30,
142+
},
143+
appContainer: {
144+
flex: 1,
132145
flexDirection: 'column',
133146
},
134147
ball: {

‎packages/examples/side-by-side/SandboxApp.tsx‎

Lines changed: 11 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ import {
77
View,
88
StyleSheet,
99
ColorValue,
10-
SafeAreaView
10+
SafeAreaView,
1111
} from 'react-native';
1212

1313
declare global {
@@ -37,13 +37,13 @@ function App({sourceName, backgroundColor}: AppProps) {
3737
};
3838

3939
const onMessage = useCallback((payload: unknown) => {
40-
console.log("onMessage", payload);
41-
addItem(JSON.stringify(payload))
40+
console.log('onMessage', payload);
41+
addItem(JSON.stringify(payload));
4242
}, []);
4343

4444
const sendInput = () => {
4545
setCounter((c) => c + 1);
46-
globalThis.postMessage({ data: targetInput, date: new Date(), origin: sourceName, counter })
46+
globalThis.postMessage({ data: targetInput, date: new Date(), origin: sourceName, counter });
4747
};
4848

4949
const panic = () => (globalThis as any).panic();
@@ -71,7 +71,7 @@ function App({sourceName, backgroundColor}: AppProps) {
7171
<Text>Crash TypeError</Text>
7272
</TouchableOpacity>
7373

74-
<View style={{ flex: 1 }}>
74+
<View style={styles.listContainer}>
7575
<FlatList
7676
style={styles.list}
7777
ref={flatListRef}
@@ -92,11 +92,14 @@ function App({sourceName, backgroundColor}: AppProps) {
9292
const styles = StyleSheet.create({
9393
safeRoot: {
9494
flex: 1,
95-
width: '100%'
95+
width: '100%',
9696
},
9797
container: {
9898
flex: 1,
99-
paddingHorizontal: 5
99+
paddingHorizontal: 5,
100+
},
101+
listContainer: {
102+
flex: 1,
100103
},
101104
input: {
102105
borderWidth: 1,
@@ -143,4 +146,4 @@ const styles = StyleSheet.create({
143146
},
144147
});
145148

146-
export default App;
149+
export default App;

‎packages/examples/side-by-side/sandbox.js‎

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,3 @@
1-
/**
2-
* @format
3-
*/
4-
51
import {AppRegistry} from 'react-native';
62
import App from './SandboxApp';
73

‎packages/react-native-multinstance/src/index.tsx‎

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
import { ElementRef, forwardRef, useCallback, useId, useImperativeHandle, useMemo, useRef } from "react";
2-
import { findNodeHandle, HostComponent, NativeSyntheticEvent, requireNativeComponent, StyleProp, StyleSheet, UIManager, View, ViewProps, ViewStyle } from "react-native";
1+
import { ElementRef, forwardRef, useCallback, useImperativeHandle, useMemo, useRef } from 'react';
2+
import { findNodeHandle, HostComponent, NativeSyntheticEvent, requireNativeComponent, StyleProp, StyleSheet, UIManager, View, ViewProps, ViewStyle } from 'react-native';
33
import type {
44
DirectEventHandler,
55
} from 'react-native/Libraries/Types/CodegenTypes';
@@ -64,19 +64,19 @@ const SandboxReactNativeView = forwardRef<SandboxReactNativeViewRef, SandboxReac
6464
);
6565
}, []);
6666

67-
const _onError = onError ? useCallback(
67+
const _onError = useCallback(
6868
(e: NativeSyntheticEvent<{}>) => {
6969
onError?.(e.nativeEvent as Error);
7070
},
7171
[onError],
72-
) : undefined;
72+
);
7373

74-
const _onMessage = onMessage ? useCallback(
74+
const _onMessage = useCallback(
7575
(e: NativeSyntheticEvent<{}>) => {
7676
onMessage?.(e.nativeEvent);
7777
},
7878
[onMessage],
79-
) : undefined;
79+
);
8080

8181
useImperativeHandle(
8282
ref,
@@ -103,16 +103,16 @@ const SandboxReactNativeView = forwardRef<SandboxReactNativeViewRef, SandboxReac
103103
const _allowedTurboModules = [
104104
...new Set([
105105
...(allowedTurboModules ?? []),
106-
...SANDBOX_TURBOMODULES_WHITELIST
107-
])
106+
...SANDBOX_TURBOMODULES_WHITELIST,
107+
]),
108108
];
109109

110110
return (
111111
<View style={style}>
112112
<NativeComponent
113113
ref={nativeRef}
114-
onError={_onError}
115-
onMessage={_onMessage}
114+
onError={onError ? _onError : undefined}
115+
onMessage={onMessage ? _onMessage : undefined}
116116
allowedTurboModules={_allowedTurboModules}
117117
style={_style}
118118
{...rest} />
@@ -123,4 +123,4 @@ const SandboxReactNativeView = forwardRef<SandboxReactNativeViewRef, SandboxReac
123123
);
124124

125125
SandboxReactNativeView.displayName = 'SandboxReactNativeView';
126-
export default SandboxReactNativeView;
126+
export default SandboxReactNativeView;

0 commit comments

Comments
 (0)