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.

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

Update examples #2919

Merged
merged 25 commits into from
Sep 26, 2024
Merged
Show file tree
Hide file tree
Changes from 24 commits
Commits
Show all changes
25 commits
Select commit Hold shift + click to select a range
7be39f5
Unify white-ish backgrounds, reorder examples
j-piasecki May 17, 2024
f5b2eef
Unify examples
j-piasecki May 17, 2024
767c724
Ignore unused variable
j-piasecki May 20, 2024
a274018
Update transformations
j-piasecki May 20, 2024
9dcd131
Fix logic
j-piasecki May 20, 2024
aac0b4e
Use GH logo
j-piasecki May 20, 2024
faffba2
Update colors
j-piasecki May 20, 2024
54c5ab1
Update camera sample
j-piasecki May 20, 2024
22ea457
Adjust values
j-piasecki May 20, 2024
29e0ca9
Fix pan responder example on web
j-piasecki May 22, 2024
f71e6dc
Merge branch 'main' into @jpiasecki/update-examples
j-piasecki May 28, 2024
ec2b7f3
Update example/App.tsx
j-piasecki Jun 3, 2024
83d34b3
Update example/src/ListWithHeader/Header.tsx
j-piasecki Jun 3, 2024
e3919c2
Animate color
j-piasecki Jun 3, 2024
1e306ee
Make it apply styles on web
j-piasecki Jun 3, 2024
156c3bc
Remove setNativeProps
j-piasecki Jun 3, 2024
eba49bf
Merge remote-tracking branch 'origin/@jpiasecki/update-examples' into…
j-piasecki Jun 3, 2024
5cb27a8
Merge branch 'main' into @jpiasecki/update-examples
j-piasecki Jun 14, 2024
eb346fb
Merge branch 'main' into @jpiasecki/update-examples
latekvo Jul 25, 2024
40cc7a8
add missing example to the new app.tsx scheme
latekvo Jul 25, 2024
580a955
Merge branch 'main' into @jpiasecki/update-examples
j-piasecki Sep 25, 2024
1f455ad
Update colors
j-piasecki Sep 25, 2024
161dadc
Merge remote-tracking branch 'origin/@jpiasecki/update-examples' into…
j-piasecki Sep 25, 2024
8f2c8be
Use simpler transformations
j-piasecki Sep 25, 2024
ec22be4
Remove mic permission
j-piasecki Sep 26, 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
73 changes: 36 additions & 37 deletions example/App.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -55,11 +55,9 @@
import WebStylesResetExample from './src/release_tests/webStylesReset';
import StylusData from './src/release_tests/StylusData';

import ReanimatedSimple from './src/new_api/reanimated';
import Camera from './src/new_api/camera';
import Transformations from './src/new_api/transformations';
import OverlapParents from './src/new_api/overlap_parent';
import OverlapSiblings from './src/new_api/overlap_siblings';
import Overlap from './src/new_api/overlap';
import Calculator from './src/new_api/calculator';
import BottomSheetNewApi from './src/new_api/bottom_sheet';
import ChatHeadsNewApi from './src/new_api/chat_heads';
Expand All @@ -75,6 +73,7 @@
import EmptyExample from './src/empty/EmptyExample';
import RectButtonBorders from './src/release_tests/rectButton';
import { ListWithHeader } from './src/ListWithHeader';
import { COLORS } from './src/common';

import { Icon } from '@swmansion/icons';

Expand All @@ -92,6 +91,32 @@
sectionTitle: 'Empty',
data: [{ name: 'Empty Example', component: EmptyExample }],
},
{
sectionTitle: 'New api',
data: [
{ name: 'Ball with velocity', component: VelocityTest },
{ name: 'Camera', component: Camera },
{ name: 'Transformations', component: Transformations },
{ name: 'Overlap', component: Overlap },
{ name: 'Bottom Sheet', component: BottomSheetNewApi },
{ name: 'Calculator', component: Calculator },
{ name: 'Chat Heads', component: ChatHeadsNewApi },
{ name: 'Drag and drop', component: DragNDrop },
{ name: 'New Swipeable', component: Swipeable },
{ name: 'New Pressable', component: Pressable },
{ name: 'Hover', component: Hover },
{ name: 'Hoverable icons', component: HoverableIcons },
{
name: 'Horizontal Drawer (Reanimated 2 & RNGH 2)',
component: BetterHorizontalDrawer,
},
{
name: 'Manual gestures',
component: ManualGestures,
},
{ name: 'Pressable', component: Pressable },
],
},
{
sectionTitle: 'Basic examples',
data: [
Expand Down Expand Up @@ -159,36 +184,6 @@
{ name: 'Stylus data', component: StylusData },
],
},
{
sectionTitle: 'New api',
data: [
{
name: 'Simple interaction with Reanimated',
component: ReanimatedSimple,
},
{ name: 'Hover', component: Hover },
{ name: 'Hoverable icons', component: HoverableIcons },
{ name: 'Camera', component: Camera },
{ name: 'Velocity test', component: VelocityTest },
{ name: 'Transformations', component: Transformations },
{ name: 'Overlap parents', component: OverlapParents },
{ name: 'Overlap siblings', component: OverlapSiblings },
{ name: 'Calculator', component: Calculator },
{ name: 'Bottom Sheet', component: BottomSheetNewApi },
{ name: 'Chat Heads', component: ChatHeadsNewApi },
{ name: 'Drag and drop', component: DragNDrop },
{ name: 'Swipeable', component: Swipeable },
{ name: 'Pressable', component: Pressable },
{
name: 'Horizontal Drawer (Reanimated 2 & RNGH 2)',
component: BetterHorizontalDrawer,
},
{
name: 'Manual gestures',
component: ManualGestures,
},
],
},
];

const OPEN_LAST_EXAMPLE_KEY = 'openLastExample';
Expand All @@ -213,9 +208,12 @@
cardStyle: {
// It's important to set height for the screen, without it scroll doesn't work on web platform.
height: Dimensions.get('window').height,
backgroundColor: COLORS.offWhite,
},
headerStyle: {
backgroundColor: '#f8f9ff',
backgroundColor: COLORS.offWhite,
borderBottomColor: COLORS.headerSeparator,
borderBottomWidth: 1,
},
}}>
<Stack.Screen
Expand Down Expand Up @@ -277,7 +275,7 @@
renderSectionHeader={({ section: { sectionTitle } }) => (
<Text style={styles.sectionTitle}>{sectionTitle}</Text>
)}
ItemSeparatorComponent={() => <View style={styles.separator} />}

Check warning on line 278 in example/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
/>
</SafeAreaView>
);
Expand Down Expand Up @@ -335,7 +333,7 @@
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#f8f9ff',
backgroundColor: COLORS.offWhite,
},
sectionTitle: {
...Platform.select({
Expand All @@ -349,7 +347,7 @@
},
}),
padding: 16,
backgroundColor: '#f8f9ff',
backgroundColor: COLORS.offWhite,
},
list: {},
separator: {
Expand All @@ -358,7 +356,8 @@
button: {
flex: 1,
height: 50,
padding: 10,
paddingVertical: 10,
paddingHorizontal: 20,
flexDirection: 'row',
backgroundColor: '#fff',
alignItems: 'center',
Expand Down
8 changes: 8 additions & 0 deletions example/app.json
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,14 @@
"favicon": "./assets/favicon.png"
},
"plugins": [
[
"expo-camera",
{
"cameraPermission": "Allow RNGH example to access your camera",
"microphonePermission": "Allow RNGH example to access your microphone",
"recordAudioAndroid": true
j-piasecki marked this conversation as resolved.
Show resolved Hide resolved
}
],
[
"expo-font",
{
Expand Down
2 changes: 2 additions & 0 deletions example/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,7 @@
"@react-navigation/stack": "^6.3.29",
"@swmansion/icons": "^0.0.1",
"expo": "^51.0.0",
"expo-camera": "~15.0.9",
"expo-font": "~12.0.10",
"hoist-non-react-statics": "^3.3.2",
"invariant": "^2.2.4",
Expand All @@ -37,6 +38,7 @@
"react-native-reanimated": "3.10.0",
"react-native-safe-area-context": "4.10.1",
"react-native-screens": "3.31.1",
"react-native-svg": "15.2.0",
"react-native-web": "~0.19.10"
},
"devDependencies": {
Expand Down
5 changes: 3 additions & 2 deletions example/src/ListWithHeader/Header.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ import Animated, {
useSharedValue,
withTiming,
} from 'react-native-reanimated';
import { COLORS } from '../common';

const SIGNET = require('./signet.png');
const TEXT = require('./text.png');
Expand Down Expand Up @@ -153,14 +154,14 @@ const styles = StyleSheet.create({
nativeHeader: {
width: '100%',
position: 'absolute',
backgroundColor: '#f8f9ff',
backgroundColor: COLORS.offWhite,
zIndex: 100,
flexDirection: 'row',
},
webHeader: {
width: '100%',
position: 'absolute',
backgroundColor: '#f8f9ff',
backgroundColor: COLORS.offWhite,
zIndex: 100,
flexDirection: 'row',
alignItems: 'center',
Expand Down
1 change: 0 additions & 1 deletion example/src/basic/bouncing/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -132,7 +132,6 @@ const styles = StyleSheet.create({
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
box: {
width: BOX_SIZE,
Expand Down
60 changes: 33 additions & 27 deletions example/src/basic/panResponder/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -23,14 +23,10 @@ type CircleStyles = {
};

// A clone of: https://github.com/facebook/react-native/blob/master/packages/rn-tester/js/examples/PanResponder/PanResponderExample.js
class PanResponderExample extends Component {
class PanResponderExample extends Component<{}, { style: CircleStyles }> {
private panResponder: { panHandlers?: GestureResponderHandlers } = {};
private previousLeft = 0;
private previousTop = 0;
private circleStyles: { style: CircleStyles } = {
style: { left: 0, top: 0, backgroundColor: '#000' },
};
private circle: React.ElementRef<typeof View> | null = null;

constructor(props: Record<string, unknown>) {
super(props);
Expand All @@ -42,45 +38,56 @@ class PanResponderExample extends Component {
onPanResponderRelease: this.handlePanResponderEnd,
onPanResponderTerminate: this.handlePanResponderEnd,
});

this.previousLeft = 20;
this.previousTop = 84;
this.circleStyles = {

this.state = {
style: {
backgroundColor: 'green',
left: this.previousLeft,
top: this.previousTop,
backgroundColor: 'green',
},
};
}

componentDidMount() {
this.updateNativeStyles();
}

render() {
return (
<View
ref={(circle) => {
this.circle = circle;
}}
style={styles.circle}
style={[styles.circle, this.state.style]}
{...this.panResponder.panHandlers}
/>
);
}

private highlight = () => {
this.circleStyles.style.backgroundColor = 'blue';
this.updateNativeStyles();
this.setState({
style: {
backgroundColor: 'blue',
left: this.previousLeft,
top: this.previousTop,
},
});
};

private unHighlight = () => {
this.circleStyles.style.backgroundColor = 'green';
this.updateNativeStyles();
this.setState({
style: {
backgroundColor: 'green',
left: this.previousLeft,
top: this.previousTop,
},
});
};

private updateNativeStyles = () => {
this.circle?.setNativeProps(this.circleStyles);
private setPosition = (x: number, y: number) => {
this.setState({
style: {
backgroundColor: 'blue',
left: x,
top: y,
},
});
};

private handleStartShouldSetPanResponder = (
Expand Down Expand Up @@ -110,19 +117,19 @@ class PanResponderExample extends Component {
_e: GestureResponderEvent,
gestureState: PanResponderGestureState
) => {
this.circleStyles.style.left =
this.previousLeft + gestureState.dx * (I18nManager.isRTL ? -1 : 1);
this.circleStyles.style.top = this.previousTop + gestureState.dy;
this.updateNativeStyles();
this.setPosition(
this.previousLeft + gestureState.dx * (I18nManager.isRTL ? -1 : 1),
this.previousTop + gestureState.dy
);
};

private handlePanResponderEnd = (
_e: GestureResponderEvent,
gestureState: PanResponderGestureState
) => {
this.unHighlight();
this.previousLeft += gestureState.dx * (I18nManager.isRTL ? -1 : 1);
this.previousTop += gestureState.dy;
this.unHighlight();
};
}

Expand All @@ -146,7 +153,6 @@ export default class Example extends Component {
const styles = StyleSheet.create({
scrollView: {
flex: 1,
backgroundColor: '#F5FCFF',
},
circle: {
width: CIRCLE_SIZE,
Expand Down
5 changes: 5 additions & 0 deletions example/src/common.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,11 @@ export class LoremIpsum extends React.Component<Props> {
}
}

export const COLORS = {
offWhite: '#f8f9ff',
headerSeparator: '#eef0ff',
};

const LOREM_IPSUM = `
Curabitur accumsan sit amet massa quis cursus. Fusce sollicitudin nunc nisl, quis efficitur quam tristique eget. Ut non erat molestie, ullamcorper turpis nec, euismod neque. Praesent aliquam risus ultricies, cursus mi consectetur, bibendum lorem. Nunc eleifend consectetur metus quis pulvinar. In vitae lacus eu nibh tincidunt sagittis ut id lorem. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque sagittis mauris rhoncus, maximus justo in, consequat dolor. Pellentesque ornare laoreet est vulputate vestibulum. Aliquam sit amet metus lorem.

Expand Down
4 changes: 2 additions & 2 deletions example/src/empty/EmptyExample.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,8 @@
export default function EmptyExample() {
return (
<View style={styles.container}>
<Text>Hello World!</Text>
<Text style={{ fontSize: 64, opacity: 0.25 }}>😞</Text>

Check warning on line 7 in example/src/empty/EmptyExample.tsx

View workflow job for this annotation

GitHub Actions / check (example)

Inline style: { fontSize: 64, opacity: 0.25 }
<Text style={{ fontSize: 24, opacity: 0.25 }}>It's so empty here</Text>

Check warning on line 8 in example/src/empty/EmptyExample.tsx

View workflow job for this annotation

GitHub Actions / check (example)

Inline style: { fontSize: 24, opacity: 0.25 }
</View>
);
}
Expand All @@ -14,6 +15,5 @@
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
});
1 change: 0 additions & 1 deletion example/src/new_api/bottom_sheet/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -53,7 +53,7 @@
return;
}

for (const snapPoint of SNAP_POINTS_FROM_TOP) {

Check warning on line 56 in example/src/new_api/bottom_sheet/index.tsx

View workflow job for this annotation

GitHub Actions / check (example)

'snapPoint' is already declared in the upper scope on line 32 column 10
const distFromSnap = Math.abs(snapPoint - endOffsetY);
if (distFromSnap < Math.abs(destSnapPoint - endOffsetY)) {
destSnapPoint = snapPoint;
Expand Down Expand Up @@ -142,7 +142,6 @@
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#eef',
},
header: {
height: HEADER_HEIGTH,
Expand Down
Loading
Loading