Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Pass { flex: 1 } as default style to GestureHandlerRootView #2757

Merged
merged 4 commits into from
Feb 12, 2024
Merged

Pass { flex: 1 } as default style to GestureHandlerRootView #2757

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
3b87f3c
Pass flex:1 by default to GestureHandlerRootView
kacperkapusciak Feb 12, 2024
7c559d9
Remove flex:1 in example app to prove my point
kacperkapusciak Feb 12, 2024
7979924
Put props in order and make the style take less space
kacperkapusciak Feb 12, 2024
282ebdc
Destruct props in place
kacperkapusciak Feb 12, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 1 addition & 4 deletions example/src/App.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -161,7 +161,7 @@

export default function App() {
return (
<GestureHandlerRootView style={styles.root}>
<GestureHandlerRootView>
<NavigationContainer>
<Stack.Navigator>
<Stack.Screen
Expand Down Expand Up @@ -201,7 +201,7 @@
renderSectionHeader={({ section: { sectionTitle } }) => (
<Text style={styles.sectionTitle}>{sectionTitle}</Text>
)}
ItemSeparatorComponent={() => <View style={styles.separator} />}

Check warning on line 204 in example/src/App.tsx

View workflow job for this annotation

GitHub Actions / check (example) 

Do not define components during render. React will see a new component type on every render and destroy the entire subtree’s DOM nodes and state (https://reactjs.org/docs/reconciliation.html#elements-of-different-types). Instead, move this component definition out of the parent component “MainScreen” and pass data as props. If you want to allow component creation in props, set allowAsProps option to true
/>
);
}
Expand All @@ -220,9 +220,6 @@
}

const styles = StyleSheet.create({
root: {
flex: 1,
},
sectionTitle: {
...Platform.select({
ios: {
Expand Down
13 changes: 11 additions & 2 deletions src/components/GestureHandlerRootView.android.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import * as React from 'react';
import { PropsWithChildren } from 'react';
import { ViewProps } from 'react-native';
import { ViewProps, StyleSheet } from 'react-native';
import { maybeInitializeFabric } from '../init';
import GestureHandlerRootViewContext from '../GestureHandlerRootViewContext';
import GestureHandlerRootViewNativeComponent from '../specs/RNGestureHandlerRootViewNativeComponent';
Expand All @@ -16,9 +16,18 @@ export default function GestureHandlerRootView(
// to make sure it's called only once)
maybeInitializeFabric();

const { style, ...rest } = props;

return (
<GestureHandlerRootViewContext.Provider value>
<GestureHandlerRootViewNativeComponent {...props} />
<GestureHandlerRootViewNativeComponent
style={style ?? styles.container}
{...rest}
/>
</GestureHandlerRootViewContext.Provider>
);
}

const styles = StyleSheet.create({
container: { flex: 1 },
});
10 changes: 8 additions & 2 deletions src/components/GestureHandlerRootView.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import * as React from 'react';
import { PropsWithChildren } from 'react';
import { View, ViewProps } from 'react-native';
import { View, ViewProps, StyleSheet } from 'react-native';
import { maybeInitializeFabric } from '../init';
import GestureHandlerRootViewContext from '../GestureHandlerRootViewContext';

Expand All @@ -15,9 +15,15 @@ export default function GestureHandlerRootView(
// to make sure it's called only once)
maybeInitializeFabric();

const { style, ...rest } = props;

return (
<GestureHandlerRootViewContext.Provider value>
<View {...props} />
<View style={style ?? styles.container} {...rest} />
</GestureHandlerRootViewContext.Provider>
);
}

const styles = StyleSheet.create({
container: { flex: 1 },
});
10 changes: 8 additions & 2 deletions src/components/GestureHandlerRootView.web.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import * as React from 'react';
import { PropsWithChildren } from 'react';
import { View, ViewProps } from 'react-native';
import { View, ViewProps, StyleSheet } from 'react-native';
import GestureHandlerRootViewContext from '../GestureHandlerRootViewContext';

export interface GestureHandlerRootViewProps
Expand All @@ -9,9 +9,15 @@ export interface GestureHandlerRootViewProps
export default function GestureHandlerRootView(
props: GestureHandlerRootViewProps
) {
const { style, ...rest } = props;

return (
<GestureHandlerRootViewContext.Provider value>
<View {...props} />
<View style={style ?? styles.container} {...rest} />
</GestureHandlerRootViewContext.Provider>
);
}

const styles = StyleSheet.create({
container: { flex: 1 },
});
Loading