-
-
Notifications
You must be signed in to change notification settings - Fork 1.3k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Adding playground to withRepeat subpage (#5917)
## Summary This PR includes a playground to withRepeat subpage. ## Preview withRepeat Playground <img width="1024" alt="Zrzut ekranu 2024-04-19 o 14 38 33" src="https://github.com/software-mansion/react-native-reanimated/assets/80314375/cbdcf6c6-8d34-4fe3-a4aa-9e5a196b9273"> ## Test plan Command to change current working dictionary: > cd docs Command to download libraries: > yarn Command to preview feature: > yarn start
- Loading branch information
Showing
8 changed files
with
194 additions
and
6 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
93 changes: 93 additions & 0 deletions
93
docs/src/components/InteractivePlayground/useRepeatPlayground/Example.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,93 @@ | ||
import React, { useEffect } from 'react'; | ||
import { StyleSheet, View, Button } from 'react-native'; | ||
import Animated, { | ||
useSharedValue, | ||
useAnimatedStyle, | ||
cancelAnimation, | ||
ReduceMotion, | ||
withTiming, | ||
withRepeat, | ||
} from 'react-native-reanimated'; | ||
|
||
interface Props { | ||
options: { | ||
numberOfReps: number; | ||
reverse: boolean; | ||
reduceMotion: ReduceMotion; | ||
}; | ||
} | ||
|
||
export default function App({ options }: Props) { | ||
const offset = useSharedValue(0); | ||
const [running, setRunning] = React.useState(false); | ||
|
||
const animatedStyles = useAnimatedStyle(() => { | ||
return { | ||
transform: [{ translateX: offset.value }], | ||
}; | ||
}); | ||
|
||
useEffect(() => { | ||
cancelAnimation(offset); | ||
offset.value = 0; | ||
}, [options]); | ||
|
||
const handlePress = () => { | ||
if (running) { | ||
cancelAnimation(offset); | ||
setRunning(false); | ||
return; | ||
} | ||
|
||
setRunning(true); | ||
offset.value = 0; | ||
offset.value = withRepeat( | ||
withTiming(200, { duration: 1000 }), | ||
options.numberOfReps, | ||
options.reverse, | ||
() => setRunning(false), | ||
options.reduceMotion | ||
); | ||
}; | ||
|
||
return ( | ||
<View style={styles.container}> | ||
<View style={[styles.wrapper]}> | ||
<Animated.View style={[styles.box, animatedStyles]} /> | ||
</View> | ||
<View style={styles.buttonWrapper}> | ||
<Button onPress={handlePress} title={running ? 'Stop' : 'Start'} /> | ||
</View> | ||
</View> | ||
); | ||
} | ||
|
||
const styles = StyleSheet.create({ | ||
container: { | ||
flex: 1, | ||
alignItems: 'center', | ||
justifyContent: 'center', | ||
height: '100%', | ||
marginTop: 64, | ||
marginBottom: 34, | ||
}, | ||
wrapper: { | ||
flex: 1, | ||
width: 300, | ||
}, | ||
box: { | ||
height: 100, | ||
width: 100, | ||
backgroundColor: '#b58df1', | ||
borderRadius: 20, | ||
cursor: 'grab', | ||
alignItems: 'center', | ||
justifyContent: 'center', | ||
}, | ||
buttonWrapper: { | ||
display: 'flex', | ||
alignItems: 'center', | ||
justifyContent: 'center', | ||
marginTop: 16, | ||
}, | ||
}); |
77 changes: 77 additions & 0 deletions
77
docs/src/components/InteractivePlayground/useRepeatPlayground/index.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,77 @@ | ||
import React, { useState } from 'react'; | ||
import Example from './Example'; | ||
|
||
import { Range, CheckboxOption, SelectOption, formatReduceMotion } from '..'; | ||
import { ReduceMotion } from 'react-native-reanimated'; | ||
|
||
const defaultConfig = { | ||
numberOfReps: 2, | ||
reverse: false, | ||
reduceMotion: ReduceMotion.System, | ||
}; | ||
|
||
const TIMING_OFFSET = 200; | ||
|
||
export default function useRepeatPlayground() { | ||
const [infinity, setInfinity] = useState(false); | ||
const [numberOfReps, setNumberOfReps] = useState(defaultConfig.numberOfReps); | ||
const [reverse, setReverse] = useState(defaultConfig.reverse); | ||
const [reduceMotion, setReduceMotion] = useState(defaultConfig.reduceMotion); | ||
|
||
const resetOptions = () => { | ||
setNumberOfReps(() => defaultConfig.numberOfReps); | ||
setReverse(() => defaultConfig.reverse); | ||
setReduceMotion(() => defaultConfig.reduceMotion); | ||
}; | ||
|
||
const code = ` | ||
withRepeat( | ||
withTiming(${TIMING_OFFSET}, { duration: 1000 }), | ||
${infinity ? -1 : numberOfReps}, | ||
${reverse}, | ||
() => {}, | ||
${formatReduceMotion(reduceMotion)}, | ||
) | ||
`; | ||
|
||
const controls = ( | ||
<> | ||
<CheckboxOption | ||
label="Infinity" | ||
value={infinity} | ||
onChange={setInfinity} | ||
/> | ||
<Range | ||
label="Repetitions" | ||
min={1} | ||
max={10} | ||
step={1} | ||
disabled={infinity} | ||
value={numberOfReps} | ||
onChange={setNumberOfReps} | ||
/> | ||
<CheckboxOption label="Reverse" value={reverse} onChange={setReverse} /> | ||
<SelectOption | ||
label="Reduce motion" | ||
value={reduceMotion} | ||
onChange={(option) => setReduceMotion(option as ReduceMotion)} | ||
options={[ReduceMotion.System, ReduceMotion.Always, ReduceMotion.Never]} | ||
/> | ||
</> | ||
); | ||
|
||
return { | ||
example: Example, | ||
props: { | ||
options: { | ||
numberOfReps: infinity ? -1 : numberOfReps, | ||
reverse, | ||
reduceMotion, | ||
}, | ||
}, | ||
controls, | ||
code, | ||
resetOptions, | ||
additionalComponents: {}, | ||
}; | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters