Skip to content

Commit de28e19

Browse files
SimekSimek
authored
fix Animation examples - port changes to versioned docs (facebook#4715)
1 parent d596f06 commit de28e19

File tree

20 files changed

+232
-280
lines changed

20 files changed

+232
-280
lines changed

‎website/versioned_docs/version-0.73/animations.md‎

Lines changed: 25 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -20,12 +20,12 @@ For example, a container view that fades in when it is mounted may look like thi
2020
<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
2121
<TabItem value="javascript">
2222

23-
```SnackPlayer ext=js&supportedPlatforms=ios,android
24-
import React, {useEffect} from 'react';
25-
import {Animated, Text, View, useAnimatedValue} from 'react-native';
23+
```SnackPlayer ext=js
24+
import React, {useEffect, useRef} from 'react';
25+
import {Animated, Text, View} from 'react-native';
2626
2727
const FadeInView = props => {
28-
const fadeAnim = useAnimatedValue(0); // Initial value for opacity: 0
28+
const fadeAnim = useRef(new Animated.Value(0)).current; // Initial value for opacity: 0
2929
3030
useEffect(() => {
3131
Animated.timing(fadeAnim, {
@@ -74,15 +74,13 @@ export default () => {
7474
<TabItem value="typescript">
7575

7676
```SnackPlayer ext=tsx
77-
import React, {useEffect} from 'react';
78-
import {Animated, Text, View, useAnimatedValue} from 'react-native';
79-
import type {PropsWithChildren} from 'react';
80-
import type {ViewStyle} from 'react-native';
77+
import React, {useEffect, useRef, type PropsWithChildren} from 'react';
78+
import {Animated, Text, View, type ViewStyle} from 'react-native';
8179
8280
type FadeInViewProps = PropsWithChildren<{style: ViewStyle}>;
8381
8482
const FadeInView: React.FC<FadeInViewProps> = props => {
85-
const fadeAnim = useAnimatedValue(0); // Initial value for opacity: 0
83+
const fadeAnim = useRef(new Animated.Value(0)).current; // Initial value for opacity: 0
8684
8785
useEffect(() => {
8886
Animated.timing(fadeAnim, {
@@ -592,7 +590,7 @@ UIManager.setLayoutAnimationEnabledExperimental(true);
592590
```
593591

594592
```SnackPlayer name=LayoutAnimations&supportedPlatforms=ios,android
595-
import React from 'react';
593+
import React, {useState} from 'react';
596594
import {
597595
NativeModules,
598596
LayoutAnimation,
@@ -607,32 +605,30 @@ const {UIManager} = NativeModules;
607605
UIManager.setLayoutAnimationEnabledExperimental &&
608606
UIManager.setLayoutAnimationEnabledExperimental(true);
609607
610-
export default class App extends React.Component {
611-
state = {
608+
export default function App() {
609+
const [state, setState] = useState({
612610
w: 100,
613611
h: 100,
614-
};
612+
});
615613
616-
_onPress = () => {
614+
const onPress = () => {
617615
// Animate the update
618616
LayoutAnimation.spring();
619-
this.setState({w: this.state.w + 15, h: this.state.h + 15});
617+
setState({w: state.w + 15, h: state.h + 15});
620618
};
621619
622-
render() {
623-
return (
624-
<View style={styles.container}>
625-
<View
626-
style={[styles.box, {width: this.state.w, height: this.state.h}]}
627-
/>
628-
<TouchableOpacity onPress={this._onPress}>
629-
<View style={styles.button}>
630-
<Text style={styles.buttonText}>Press me!</Text>
631-
</View>
632-
</TouchableOpacity>
633-
</View>
634-
);
635-
}
620+
return (
621+
<View style={styles.container}>
622+
<View
623+
style={[styles.box, {width: state.w, height: state.h}]}
624+
/>
625+
<TouchableOpacity onPress={onPress}>
626+
<View style={styles.button}>
627+
<Text style={styles.buttonText}>Press me!</Text>
628+
</View>
629+
</TouchableOpacity>
630+
</View>
631+
);
636632
}
637633
638634
const styles = StyleSheet.create({

‎website/versioned_docs/version-0.74/animations.md‎

Lines changed: 25 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -20,12 +20,12 @@ For example, a container view that fades in when it is mounted may look like thi
2020
<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
2121
<TabItem value="javascript">
2222

23-
```SnackPlayer ext=js&supportedPlatforms=ios,android
24-
import React, {useEffect} from 'react';
25-
import {Animated, Text, View, useAnimatedValue} from 'react-native';
23+
```SnackPlayer ext=js
24+
import React, {useEffect, useRef} from 'react';
25+
import {Animated, Text, View} from 'react-native';
2626
2727
const FadeInView = props => {
28-
const fadeAnim = useAnimatedValue(0); // Initial value for opacity: 0
28+
const fadeAnim = useRef(new Animated.Value(0)).current; // Initial value for opacity: 0
2929
3030
useEffect(() => {
3131
Animated.timing(fadeAnim, {
@@ -74,15 +74,13 @@ export default () => {
7474
<TabItem value="typescript">
7575

7676
```SnackPlayer ext=tsx
77-
import React, {useEffect} from 'react';
78-
import {Animated, Text, View, useAnimatedValue} from 'react-native';
79-
import type {PropsWithChildren} from 'react';
80-
import type {ViewStyle} from 'react-native';
77+
import React, {useEffect, useRef, type PropsWithChildren} from 'react';
78+
import {Animated, Text, View, type ViewStyle} from 'react-native';
8179
8280
type FadeInViewProps = PropsWithChildren<{style: ViewStyle}>;
8381
8482
const FadeInView: React.FC<FadeInViewProps> = props => {
85-
const fadeAnim = useAnimatedValue(0); // Initial value for opacity: 0
83+
const fadeAnim = useRef(new Animated.Value(0)).current; // Initial value for opacity: 0
8684
8785
useEffect(() => {
8886
Animated.timing(fadeAnim, {
@@ -591,7 +589,7 @@ UIManager.setLayoutAnimationEnabledExperimental(true);
591589
```
592590

593591
```SnackPlayer name=LayoutAnimations&supportedPlatforms=ios,android
594-
import React from 'react';
592+
import React, {useState} from 'react';
595593
import {
596594
NativeModules,
597595
LayoutAnimation,
@@ -606,32 +604,30 @@ const {UIManager} = NativeModules;
606604
UIManager.setLayoutAnimationEnabledExperimental &&
607605
UIManager.setLayoutAnimationEnabledExperimental(true);
608606
609-
export default class App extends React.Component {
610-
state = {
607+
export default function App() {
608+
const [state, setState] = useState({
611609
w: 100,
612610
h: 100,
613-
};
611+
});
614612
615-
_onPress = () => {
613+
const onPress = () => {
616614
// Animate the update
617615
LayoutAnimation.spring();
618-
this.setState({w: this.state.w + 15, h: this.state.h + 15});
616+
setState({w: state.w + 15, h: state.h + 15});
619617
};
620618
621-
render() {
622-
return (
623-
<View style={styles.container}>
624-
<View
625-
style={[styles.box, {width: this.state.w, height: this.state.h}]}
626-
/>
627-
<TouchableOpacity onPress={this._onPress}>
628-
<View style={styles.button}>
629-
<Text style={styles.buttonText}>Press me!</Text>
630-
</View>
631-
</TouchableOpacity>
632-
</View>
633-
);
634-
}
619+
return (
620+
<View style={styles.container}>
621+
<View
622+
style={[styles.box, {width: state.w, height: state.h}]}
623+
/>
624+
<TouchableOpacity onPress={onPress}>
625+
<View style={styles.button}>
626+
<Text style={styles.buttonText}>Press me!</Text>
627+
</View>
628+
</TouchableOpacity>
629+
</View>
630+
);
635631
}
636632
637633
const styles = StyleSheet.create({

‎website/versioned_docs/version-0.75/animations.md‎

Lines changed: 25 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -20,12 +20,12 @@ For example, a container view that fades in when it is mounted may look like thi
2020
<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
2121
<TabItem value="javascript">
2222

23-
```SnackPlayer ext=js&supportedPlatforms=ios,android
24-
import React, {useEffect} from 'react';
25-
import {Animated, Text, View, useAnimatedValue} from 'react-native';
23+
```SnackPlayer ext=js
24+
import React, {useEffect, useRef} from 'react';
25+
import {Animated, Text, View} from 'react-native';
2626
2727
const FadeInView = props => {
28-
const fadeAnim = useAnimatedValue(0); // Initial value for opacity: 0
28+
const fadeAnim = useRef(new Animated.Value(0)).current; // Initial value for opacity: 0
2929
3030
useEffect(() => {
3131
Animated.timing(fadeAnim, {
@@ -74,15 +74,13 @@ export default () => {
7474
<TabItem value="typescript">
7575

7676
```SnackPlayer ext=tsx
77-
import React, {useEffect} from 'react';
78-
import {Animated, Text, View, useAnimatedValue} from 'react-native';
79-
import type {PropsWithChildren} from 'react';
80-
import type {ViewStyle} from 'react-native';
77+
import React, {useEffect, useRef, type PropsWithChildren} from 'react';
78+
import {Animated, Text, View, type ViewStyle} from 'react-native';
8179
8280
type FadeInViewProps = PropsWithChildren<{style: ViewStyle}>;
8381
8482
const FadeInView: React.FC<FadeInViewProps> = props => {
85-
const fadeAnim = useAnimatedValue(0); // Initial value for opacity: 0
83+
const fadeAnim = useRef(new Animated.Value(0)).current; // Initial value for opacity: 0
8684
8785
useEffect(() => {
8886
Animated.timing(fadeAnim, {
@@ -591,7 +589,7 @@ UIManager.setLayoutAnimationEnabledExperimental(true);
591589
```
592590

593591
```SnackPlayer name=LayoutAnimations&supportedPlatforms=ios,android
594-
import React from 'react';
592+
import React, {useState} from 'react';
595593
import {
596594
NativeModules,
597595
LayoutAnimation,
@@ -606,32 +604,30 @@ const {UIManager} = NativeModules;
606604
UIManager.setLayoutAnimationEnabledExperimental &&
607605
UIManager.setLayoutAnimationEnabledExperimental(true);
608606
609-
export default class App extends React.Component {
610-
state = {
607+
export default function App() {
608+
const [state, setState] = useState({
611609
w: 100,
612610
h: 100,
613-
};
611+
});
614612
615-
_onPress = () => {
613+
const onPress = () => {
616614
// Animate the update
617615
LayoutAnimation.spring();
618-
this.setState({w: this.state.w + 15, h: this.state.h + 15});
616+
setState({w: state.w + 15, h: state.h + 15});
619617
};
620618
621-
render() {
622-
return (
623-
<View style={styles.container}>
624-
<View
625-
style={[styles.box, {width: this.state.w, height: this.state.h}]}
626-
/>
627-
<TouchableOpacity onPress={this._onPress}>
628-
<View style={styles.button}>
629-
<Text style={styles.buttonText}>Press me!</Text>
630-
</View>
631-
</TouchableOpacity>
632-
</View>
633-
);
634-
}
619+
return (
620+
<View style={styles.container}>
621+
<View
622+
style={[styles.box, {width: state.w, height: state.h}]}
623+
/>
624+
<TouchableOpacity onPress={onPress}>
625+
<View style={styles.button}>
626+
<Text style={styles.buttonText}>Press me!</Text>
627+
</View>
628+
</TouchableOpacity>
629+
</View>
630+
);
635631
}
636632
637633
const styles = StyleSheet.create({

‎website/versioned_docs/version-0.76/animations.md‎

Lines changed: 25 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -20,12 +20,12 @@ For example, a container view that fades in when it is mounted may look like thi
2020
<Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
2121
<TabItem value="javascript">
2222

23-
```SnackPlayer ext=js&supportedPlatforms=ios,android
24-
import React, {useEffect} from 'react';
25-
import {Animated, Text, View, useAnimatedValue} from 'react-native';
23+
```SnackPlayer ext=js
24+
import React, {useEffect, useRef} from 'react';
25+
import {Animated, Text, View} from 'react-native';
2626
2727
const FadeInView = props => {
28-
const fadeAnim = useAnimatedValue(0); // Initial value for opacity: 0
28+
const fadeAnim = useRef(new Animated.Value(0)).current; // Initial value for opacity: 0
2929
3030
useEffect(() => {
3131
Animated.timing(fadeAnim, {
@@ -74,15 +74,13 @@ export default () => {
7474
<TabItem value="typescript">
7575

7676
```SnackPlayer ext=tsx
77-
import React, {useEffect} from 'react';
78-
import {Animated, Text, View, useAnimatedValue} from 'react-native';
79-
import type {PropsWithChildren} from 'react';
80-
import type {ViewStyle} from 'react-native';
77+
import React, {useEffect, useRef, type PropsWithChildren} from 'react';
78+
import {Animated, Text, View, type ViewStyle} from 'react-native';
8179
8280
type FadeInViewProps = PropsWithChildren<{style: ViewStyle}>;
8381
8482
const FadeInView: React.FC<FadeInViewProps> = props => {
85-
const fadeAnim = useAnimatedValue(0); // Initial value for opacity: 0
83+
const fadeAnim = useRef(new Animated.Value(0)).current; // Initial value for opacity: 0
8684
8785
useEffect(() => {
8886
Animated.timing(fadeAnim, {
@@ -595,7 +593,7 @@ UIManager.setLayoutAnimationEnabledExperimental(true);
595593
```
596594

597595
```SnackPlayer name=LayoutAnimations&supportedPlatforms=ios,android
598-
import React from 'react';
596+
import React, {useState} from 'react';
599597
import {
600598
NativeModules,
601599
LayoutAnimation,
@@ -610,32 +608,30 @@ const {UIManager} = NativeModules;
610608
UIManager.setLayoutAnimationEnabledExperimental &&
611609
UIManager.setLayoutAnimationEnabledExperimental(true);
612610
613-
export default class App extends React.Component {
614-
state = {
611+
export default function App() {
612+
const [state, setState] = useState({
615613
w: 100,
616614
h: 100,
617-
};
615+
});
618616
619-
_onPress = () => {
617+
const onPress = () => {
620618
// Animate the update
621619
LayoutAnimation.spring();
622-
this.setState({w: this.state.w + 15, h: this.state.h + 15});
620+
setState({w: state.w + 15, h: state.h + 15});
623621
};
624622
625-
render() {
626-
return (
627-
<View style={styles.container}>
628-
<View
629-
style={[styles.box, {width: this.state.w, height: this.state.h}]}
630-
/>
631-
<TouchableOpacity onPress={this._onPress}>
632-
<View style={styles.button}>
633-
<Text style={styles.buttonText}>Press me!</Text>
634-
</View>
635-
</TouchableOpacity>
636-
</View>
637-
);
638-
}
623+
return (
624+
<View style={styles.container}>
625+
<View
626+
style={[styles.box, {width: state.w, height: state.h}]}
627+
/>
628+
<TouchableOpacity onPress={onPress}>
629+
<View style={styles.button}>
630+
<Text style={styles.buttonText}>Press me!</Text>
631+
</View>
632+
</TouchableOpacity>
633+
</View>
634+
);
639635
}
640636
641637
const styles = StyleSheet.create({

0 commit comments

Comments
 (0)