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

[2/2] Fix RNTester strict mode warnings #48620

Closed
wants to merge 1 commit into from
+219 −225
Closed

[2/2] Fix RNTester strict mode warnings #48620

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
10 changes: 5 additions & 5 deletions packages/rn-tester/js/examples/AnimatedGratuitousApp/AnExApp.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,15 +10,15 @@

'use strict';

const AnExSet = require('./AnExSet');
const React = require('react');
const {
import AnExSet from './AnExSet';
import React from 'react';
import {
Animated,
LayoutAnimation,
PanResponder,
StyleSheet,
View,
} = require('react-native');
} from 'react-native';

const CIRCLE_SIZE = 80;
const CIRCLE_MARGIN = 18;
Expand Down Expand Up @@ -188,7 +188,7 @@ class Circle extends React.Component<any, any> {
</Animated.View>
);
}
_toggleIsActive = (velocity: void) => {
_toggleIsActive = (velocity: ?number) => {
const config = {tension: 30, friction: 7};
if (this.state.isActive) {
Animated.spring(this.props.openVal, {
Expand Down
6 changes: 3 additions & 3 deletions packages/rn-tester/js/examples/AnimatedGratuitousApp/AnExBobble.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,8 +10,8 @@

'use strict';

const React = require('react');
const {Animated, PanResponder, StyleSheet, View} = require('react-native');
import React from 'react';
import {Animated, PanResponder, StyleSheet, View} from 'react-native';

const NUM_BOBBLES = 5;
const RAD_EACH = Math.PI / 2 / (NUM_BOBBLES - 2);
Expand Down Expand Up @@ -169,4 +169,4 @@ const BOBBLE_IMGS = [
'https://scontent-sea1-1.xx.fbcdn.net/hphotos-xaf1/t39.1997-6/851562_575284782557566_1188781517_n.png',
];

module.exports = AnExBobble;
export default AnExBobble;
6 changes: 3 additions & 3 deletions packages/rn-tester/js/examples/AnimatedGratuitousApp/AnExChained.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,8 +13,8 @@
import type {GestureState} from 'react-native/Libraries/Interaction/PanResponder';
import type {PressEvent} from 'react-native/Libraries/Types/CoreEventTypes';

const React = require('react');
const {Animated, PanResponder, StyleSheet, View} = require('react-native');
import React from 'react';
import {Animated, PanResponder, StyleSheet, View} from 'react-native';

class AnExChained extends React.Component<Object, any> {
constructor(props: Object) {
Expand Down Expand Up @@ -119,4 +119,4 @@ const CHAIN_IMGS = [
require('../../assets/bunny.png'),
];

module.exports = AnExChained;
export default AnExChained;
8 changes: 4 additions & 4 deletions packages/rn-tester/js/examples/AnimatedGratuitousApp/AnExScroll.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,15 +10,15 @@

'use strict';

const React = require('react');
const {
import React from 'react';
import {
Animated,
Image,
ScrollView,
StyleSheet,
Text,
View,
} = require('react-native');
} from 'react-native';

class AnExScroll extends React.Component<$FlowFixMeProps, any> {
state: any = {scrollX: new Animated.Value(0)};
Expand Down Expand Up @@ -118,4 +118,4 @@ const BUNNY_PIC = {
uri: 'https://scontent-sea1-1.xx.fbcdn.net/hphotos-xaf1/t39.1997-6/851564_531111380292237_1898871086_n.png',
};

module.exports = AnExScroll;
export default AnExScroll;
178 changes: 89 additions & 89 deletions packages/rn-tester/js/examples/AnimatedGratuitousApp/AnExSet.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,100 +10,100 @@

'use strict';

const AnExBobble = require('./AnExBobble');
const AnExChained = require('./AnExChained');
const AnExScroll = require('./AnExScroll');
const AnExTilt = require('./AnExTilt');
const React = require('react');
const {
Animated,
PanResponder,
StyleSheet,
Text,
View,
} = require('react-native');
import AnExBobble from './AnExBobble';
import AnExChained from './AnExChained';
import AnExScroll from './AnExScroll';
import AnExTilt from './AnExTilt';
import React, {useRef, useState} from 'react';
import {Animated, PanResponder, StyleSheet, Text, View} from 'react-native';

class AnExSet extends React.Component<Object, any> {
constructor(props: Object) {
super(props);
function randColor() {
const colors = [0, 1, 2].map(() => Math.floor(Math.random() * 150 + 100));
return 'rgb(' + colors.join(',') + ')';
}
this.state = {
closeColor: randColor(),
openColor: randColor(),
};
}
render(): React.Node {
const backgroundColor = this.props.openVal
? this.props.openVal.interpolate({
inputRange: [0, 1],
outputRange: [
this.state.closeColor, // interpolates color strings
this.state.openColor,
],
})
: this.state.closeColor;
const panelWidth =
(this.props.containerLayout && this.props.containerLayout.width) || 320;
return (
<View style={styles.container}>
<Animated.View
style={[styles.header, {backgroundColor}]}
{...this.state.dismissResponder.panHandlers}>
<Text style={[styles.text, styles.headerText]}>{this.props.id}</Text>
</Animated.View>
{this.props.isActive && (
<View style={styles.stream}>
<View style={styles.card}>
<Text style={styles.text}>July 2nd</Text>
<AnExTilt isActive={this.props.isActive} />
<AnExBobble />
</View>
<AnExScroll panelWidth={panelWidth} />
<AnExChained />
</View>
)}
</View>
);
}
const randColor = () => {
const colors = [0, 1, 2].map(() => Math.floor(Math.random() * 150 + 100));
return `rgb(${colors.join(',')})`;
};

type AnExSetProps = $ReadOnly<{|
openVal: Animated.Value,
containerLayout: {width: number, height: number},
id: string,
isActive: boolean,
onDismiss: (velocity: number) => void,
|}>;

UNSAFE_componentWillMount() {
this.state.dismissY = new Animated.Value(0);
this.state.dismissResponder = PanResponder.create({
onStartShouldSetPanResponder: () => this.props.isActive,
onPanResponderGrant: () => {
Animated.spring(this.props.openVal, {
// Animated value passed in.
toValue: this.state.dismissY.interpolate({
// Track dismiss gesture
inputRange: [0, 300], // and interpolate pixel distance
outputRange: [1, 0], // to a fraction.
}),
const AnExSet = ({
openVal,
containerLayout,
id,
isActive,
onDismiss,
}: AnExSetProps): React.Node => {
const [closeColor] = useState(randColor());
const [openColor] = useState(randColor());
const dismissY = useRef(new Animated.Value(0)).current;

const dismissResponder = PanResponder.create({
onStartShouldSetPanResponder: () => isActive,
onPanResponderGrant: () => {
Animated.spring(openVal, {
// Animated value passed in.
toValue: dismissY.interpolate({
// Track dismiss gesture
inputRange: [0, 300], // and interpolate pixel distance
outputRange: [1, 0], // to a fraction.
}),
useNativeDriver: false,
}).start();
},
onPanResponderMove: Animated.event(
[null, {dy: dismissY}], // track pan gesture
{useNativeDriver: false},
),
onPanResponderRelease: (e, gestureState) => {
if (gestureState.dy > 100) {
onDismiss(gestureState.vy); // delegates dismiss action to parent
} else {
Animated.spring(openVal, {
// animate back open if released early
toValue: 1,
useNativeDriver: false,
}).start();
},
onPanResponderMove: Animated.event(
[null, {dy: this.state.dismissY}], // track pan gesture
{useNativeDriver: false},
),
onPanResponderRelease: (e, gestureState) => {
if (gestureState.dy > 100) {
this.props.onDismiss(gestureState.vy); // delegates dismiss action to parent
} else {
Animated.spring(this.props.openVal, {
// animate back open if released early
toValue: 1,
}
},
});

const backgroundColor = openVal
? openVal.interpolate({
inputRange: [0, 1],
outputRange: [
closeColor, // interpolates color strings
openColor,
],
})
: closeColor;

useNativeDriver: false,
}).start();
}
},
});
}
}
const panelWidth = (containerLayout && containerLayout.width) || 320;

return (
<View style={styles.container}>
<Animated.View
style={[styles.header, {backgroundColor}]}
{...dismissResponder.panHandlers}>
<Text style={[styles.text, styles.headerText]}>{id}</Text>
</Animated.View>
{isActive && (
<View style={styles.stream}>
<View style={styles.card}>
<Text style={styles.text}>July 2nd</Text>
<AnExTilt isActive={isActive} />
<AnExBobble />
</View>
<AnExScroll panelWidth={panelWidth} />
<AnExChained />
</View>
)}
</View>
);
};

const styles = StyleSheet.create({
container: {
Expand Down Expand Up @@ -144,4 +144,4 @@ const styles = StyleSheet.create({
},
});

module.exports = AnExSet;
export default AnExSet;
Loading
Loading