import React, { Component } from 'react';
import {
View,
Text,
Dimensions,
FlatList,
Animated,
LayoutAnimation,
StyleSheet,PanResponder,
Easing,TouchableOpacity,
} from 'react-native';
const {width, height} = Dimensions.get('window');
import Icon from 'react-native-vector-icons/MaterialCommunityIcons'
import randomcolor from 'randomcolor';
const DELAY = 100;
class AnimatedBar extends Component {
// ...
constructor(props) {
super(props);
this._width = new Animated.Value(0); // Added
this.state = {
// color: "blue",
color: randomcolor()
};
}
componentDidMount() {
this.animateTo(this.props.delay, this.props.value);
}
componentWillReceiveProps(nextProps) {
this.animateTo(nextProps.delay, nextProps.value);
}
animateTo = (delay, value) => {
Animated.sequence([
Animated.delay(delay),
Animated.timing(this._width, {
toValue: value,
}),
]).start();
}
render() {
const barStyles = {
backgroundColor: this.state.color,
height: 40,
width: this._width, // Changed
borderTopRightRadius: 4,
borderBottomRightRadius: 4,
};
return (
<Animated.View style={barStyles} />
);
}
}
export default class App extends Component {
constructor(props){
super(props);
this.state = {
data: [],
};
this.startAnimation=this.startAnimation.bind(this)
this.endAnimation=this.endAnimation.bind(this)
this.generateData=this.generateData.bind(this)
}
startAnimation(){
this.interval = setInterval(() => {
this.generateData();
}, 1000);
}
endAnimation(){
clearInterval(this.interval);
}
componentDidMount() {
this.interval = setInterval(() => {
this.generateData();
}, 1000);
}
// generateData = () => {
generateData(){
const data = [];
for (let i = 0; i < 10; i++) {
data.push(Math.floor(Math.random() * window.width));
}
this.setState({
data,
});
}
render() {
// const slideStyle = this.state.example.getTranslateTransform();
return (
<View style={[s.container]}>
<TouchableOpacity onPress={this.startAnimation}
style={{position:"absolute",top:25,right:10,flex:1,zIndex:3,width:35,height:35,alignItems:"center",justifyContent:"center",backgroundColor:"transparent"}}>
<Icon name={"circle-outline"} size={25} color="rgba(0,0,0,0.5)"/>
</TouchableOpacity>
<TouchableOpacity onPress={this.endAnimation}
style={{position:"absolute",top:25,left:10,flex:1,zIndex:3,width:35,height:35,alignItems:"center",justifyContent:"center",backgroundColor:"transparent"}}>
<Icon name={"circle-outline"} size={25} color="red"/>
</TouchableOpacity>
{this.state.data.map((value, index) => <AnimatedBar value={value} delay={DELAY * index} key={index} />)}
</View>
);
}
}
const s = StyleSheet.create({
animatedViewConatiner:{
// flex:1,
// position: 'absolute',
width:100,
height:100,
justifyContent:"center",
alignItems:"center",
backgroundColor:"rgba(240,0,0,.5)",
},
container: {
flex: 1,
height,
width,
// justifyContent: "center",
// alignItems: "center",
backgroundColor: "#F5FCFF",
},
text:{
fontWeight:"600",
// fontSize:100,
textAlignVertical: "center", textAlign: "center",},
// container: {
// flex: 10,
// flexDirection: 'column'
// },
body: {
flex: 10,
backgroundColor: '#ccc'
},
footer_menu: {
position: 'absolute',
left:0,right:0,
width: 600,
height: 350,
bottom: -300,
backgroundColor: '#1fa67a',
alignItems: 'center',
// justifyContent:"center",
},
tip_menu: {
flexDirection: 'row'
},
button: {
backgroundColor: '#fff'
},
button_label: {
fontSize: 20,
fontWeight: 'bold'
}
});
Last active
December 26, 2022 12:23
-
-
Save garrettmac/a9cc241c829ab2bda89096041c7f4f5d to your computer and use it in GitHub Desktop.
Medium Blog Post - React Native Animation Cheat Sheet: Using the “LayoutAnimation” and “Animated” Components
import React, { Component } from 'react';
import {
View,
Text,
Dimensions,
FlatList,
Animated,
LayoutAnimation,
StyleSheet,PanResponder,
Easing,TouchableOpacity,
} from 'react-native';
const {width, height} = Dimensions.get('window');
import Icon from 'react-native-vector-icons/MaterialCommunityIcons'
export default class Example extends Component {
constructor(props){
super(props);
this.state={
example:new Animated.ValueXY({x:100,y:0}),
boo:false,
}
//create animation
this.slideIn = Animated.timing(
this.state.example,
{
toValue:{x:200,y:0},
duration:2000,
delay:1000,
easing:Easing.in(Easing.ease)
}
)
this.triggerAnimation=this.triggerAnimation.bind(this)
}
componentDidMount() {
}
triggerAnimation(){
this.slideIn.start()
}
render() {
const slideStyle = this.state.example.getTranslateTransform();
return (
<View style={[s.container]}>
<TouchableOpacity onPress={this.triggerAnimation}
style={{position:"absolute",top:25,right:10,flex:1,zIndex:3,width:35,height:35,alignItems:"center",justifyContent:"center",backgroundColor:"transparent"}}>
<Icon name={"circle-outline"} size={25} color="rgba(0,0,0,0.5)"/>
</TouchableOpacity>
<Animated.View style={[s.animatedViewConatiner,{transform:slideStyle}]}>
<Text style={s.text}>
Hello
</Text>
</Animated.View>
</View>
);
}
}
const s = StyleSheet.create({
animatedViewConatiner:{
// flex:1,
// position: 'absolute',
width:100,
height:100,
justifyContent:"center",
alignItems:"center",
backgroundColor:"rgba(240,0,0,.5)",
},
container: {
flex: 1,
height,
width,
// justifyContent: "center",
// alignItems: "center",
backgroundColor: "#F5FCFF",
},
text:{
fontWeight:"600",
// fontSize:100,
textAlignVertical: "center", textAlign: "center",}
});
import React, { Component } from 'react';
import {
View,
Text,
Dimensions,
FlatList,
Animated,ImageBackground,
LayoutAnimation,
StyleSheet,PanResponder,
Easing,TouchableOpacity,
} from 'react-native';
const {width, height} = Dimensions.get('window');
import Icon from 'react-native-vector-icons/MaterialCommunityIcons'
import randomcolor from 'randomcolor';
let IMAGE_HEIGHT_SMALL =200
let IMAGE_HEIGHT =500
export default class App extends Component {
constructor(props){
super(props);
this.topSectionHeight = new Animated.Value(IMAGE_HEIGHT);
// this.topSectionHeight = new Animated.Value(IMAGE_HEIGHT);
}
componentWillMount () {
}
componentWillUnmount() {
this.keyboardWillShowSub.remove();
this.keyboardWillHideSub.remove();
}
keyboardWillShow = (event) => {
Animated.timing(this.topSectionHeight, {
duration: event.duration,
toValue: IMAGE_HEIGHT_SMALL,
}).start();
};
keyboardWillHide = (event) => {
Animated.timing(this.topSectionHeight, {
duration: event.duration,
toValue: IMAGE_HEIGHT,
}).start();
};
render() {
// const slideStyle = this.state.example.getTranslateTransform();
return (
<View style={[s.container]}>
<TouchableOpacity onPress={this.keyboardWillShow}
style={{position:"absolute",top:25,right:10,flex:1,zIndex:3,width:35,height:35,alignItems:"center",justifyContent:"center",backgroundColor:"transparent"}}>
<Icon name={"circle-outline"} size={25} color="rgba(0,0,0,0.5)"/>
</TouchableOpacity>
<TouchableOpacity onPress={this.keyboardWillHide}
style={{position:"absolute",top:25,left:10,flex:1,zIndex:3,width:35,height:35,alignItems:"center",justifyContent:"center",backgroundColor:"transparent"}}>
<Icon name={"circle-outline"} size={25} color="rgba(0,0,0,0.5)"/>
</TouchableOpacity>
<Animated.View style={[{height:null}, {backgroundColor:"red"},
{height: this.topSectionHeight}
]}
>
<ImageBackground
source={{uri:"http://source.unsplash.com/category/nature?ocean"}} style={{width}}>
<Text style={{textAlignVertical: "center", textAlign: "center",fontSize: 20,}}>top text</Text>
</ImageBackground>
</Animated.View>
<Animated.View style={[ {height:null},{backgroundColor:"blue"},
// {height: -this.topSectionHeight}
]}
>
<Text style={{textAlignVertical: "center", textAlign: "center",fontSize: 20,}}>bottom text</Text>
</Animated.View>
</View>
);
}
}
const s = StyleSheet.create({
animatedViewConatiner:{
flex:1,
// position: 'absolute',
// width,
// height:100,
// top:0,
// bottom:0,
// justifyContent:"flex-end",
// alignItems:"flex-end",
// left:0,right:0,
backgroundColor:"rgba(240,0,0,.5)",
},
container: {
flex: 1,
// height,
// width,
// justifyContent: "center",
// alignItems: "center",
backgroundColor: "#F5FCFF",
},
text:{
fontWeight:"600",
// fontSize:100,
textAlignVertical: "center", textAlign: "center",},
// container: {
// flex: 10,
// flexDirection: 'column'
// },
body: {
flex: 10,
backgroundColor: '#ccc'
},
footer_menu: {
position: 'absolute',
left:0,right:0,
width: 600,
height: 350,
bottom: -300,
backgroundColor: '#1fa67a',
alignItems: 'center',
// justifyContent:"center",
},
tip_menu: {
flexDirection: 'row'
},
button: {
backgroundColor: '#fff'
},
button_label: {
fontSize: 20,
fontWeight: 'bold'
}
});
SPIT SCREEN
import React, { Component } from 'react';
import {
View,
Text,
Dimensions,
FlatList,
Animated,ImageBackground,
LayoutAnimation,
StyleSheet,PanResponder,
Easing,TouchableOpacity,
} from 'react-native';
const {width, height} = Dimensions.get('window');
import {BlurView} from 'react-native-blur'
import Icon from 'react-native-vector-icons/MaterialCommunityIcons'
import randomcolor from 'randomcolor';
let T0P_OPEN_HEIGHT_SMALL =200
let T0P_OPEN_HEIGHT =height*.94
let TOUCHABLE_HEADING =height-T0P_OPEN_HEIGHT
export default class App extends Component {
constructor(props){
super(props);
this.topSectionHeight = new Animated.Value(T0P_OPEN_HEIGHT);
// this.topSectionHeight = new Animated.Value(T0P_OPEN_HEIGHT);
this.state={
isMenuOpen:false
}
}
componentWillMount () {
}
componentWillUnmount() {
this.keyboardWillShowSub.remove();
this.keyboardWillHideSub.remove();
}
showBottomMenu = (event) => {
Animated.spring(this.topSectionHeight, {
duration: event.duration,
toValue: T0P_OPEN_HEIGHT_SMALL,
}).start();
};
hideBottomMenu = (event) => {
Animated.spring(this.topSectionHeight, {
duration: event.duration,
toValue: T0P_OPEN_HEIGHT,
}).start();
};
toggleMenu=()=>{
this.setState({isMenuOpen:!this.state.isMenuOpen})
Animated.spring(this.topSectionHeight, {
duration: 500,
toValue: (this.topSectionHeight._value===T0P_OPEN_HEIGHT_SMALL)?T0P_OPEN_HEIGHT:T0P_OPEN_HEIGHT_SMALL,
}).start();
}
render() {
// const slideStyle = this.state.example.getTranslateTransform();
return (
<View style={[s.container]}>
<TouchableOpacity onPress={this.showBottomMenu}
style={{position:"absolute",top:25,right:10,flex:1,zIndex:3,width:35,height:35,alignItems:"center",justifyContent:"center",backgroundColor:"transparent"}}>
<Icon name={"circle-outline"} size={25} color="rgba(0,0,0,0.5)"/>
</TouchableOpacity>
<TouchableOpacity onPress={this.hideBottomMenu}
style={{position:"absolute",top:25,left:10,flex:1,zIndex:3,width:35,height:35,alignItems:"center",justifyContent:"center",backgroundColor:"transparent"}}>
<Icon name={"circle-outline"} size={25} color="rgba(0,0,0,0.5)"/>
</TouchableOpacity>
<Animated.View style={[
{justifyContent:"center",alignItems:"center",},
{height: this.topSectionHeight}
]}
>
<ImageBackground source={{
uri: "https://res.cloudinary.com/politicc/image/upload/articles/2017/08/14/donald-trumps-father-was-arrested-at-ku-klux-klan-riot-in-new-york-in-1927-records-reveal.jpg",
// uri: _.get(this.state, "data[0].image",overlayImage),
}} style={{ flex: 1,
width,
}}>
<BlurView blurType="light" blurAmount={3} style={{ width,
flex:1,
alignItems:"center",
// borderWidth: 2,borderColor: 'red',
alignItems: "center",
justifyContent: "center",
height,}}>
<Animated.View style={{
flex: 1,height,width,
// flex:1,
position:"absolute",
// textAlignVertical: "center",
// textAlign: "center",
top:this.topSectionHeight.interpolate({
inputRange: [200, T0P_OPEN_HEIGHT],
outputRange: [ -200,0]
}),
bottom:0,left:0,right:0,
justifyContent: 'center', alignItems: 'center',
}}>
<Animated.View style={{
flex: 1,height,width,
// flex:1,
position:"absolute",
// textAlignVertical: "center",
// textAlign: "center",
top:this.topSectionHeight.interpolate({
inputRange: [200, T0P_OPEN_HEIGHT],
outputRange: [ 0,-120]
}),
bottom:0,left:0,right:0,
justifyContent: 'center', alignItems: 'center',
}}>
<Text style={{
// flex:1,
textAlignVertical: "center",
textAlign: "center",
fontSize: 20,
}}>
top text
</Text>
</Animated.View>
<TouchableOpacity
style={{flex:1,height,width,justifyContent:"center",alignItems:"center"}}
onPress={this.showBottomMenu}>
<Animated.Text style={{
// textAlignVertical: "center", textAlign: "center",
// fontSize: 10,
margin:20,
position:"absolute",
opacity:this.topSectionHeight.interpolate({
inputRange: [200, T0P_OPEN_HEIGHT],
outputRange: [0, 1]
})
}}>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</Animated.Text>
</TouchableOpacity>
</Animated.View>
</BlurView>
</ImageBackground>
</Animated.View>
<Animated.View style={[ {flex:1,backgroundColor:"blue"},
// {height: -this.topSectionHeight}
]}
>
<Animated.View style={[ {
justifyContent:"center",
height:TOUCHABLE_HEADING,
alignItems:"center",
backgroundColor:"teal"},
// {height: -this.topSectionHeight}
]}
>
<TouchableOpacity onPress={this.toggleMenu}
// style={{position:"absolute",top:25,left:10,flex:1,zIndex:3,width:35,height:35,alignItems:"center",justifyContent:"center",backgroundColor:"transparent"}}
>
<Icon name={
(this.state.isMenuOpen)?"circle":"circle-outline"
} size={25} color="rgba(0,0,0,0.5)"/>
</TouchableOpacity>
</Animated.View>
<Animated.View
style={{height,width,backgroundColor:"rgba(0,0,0,.5)", justifyContent:"center",alignItems:"center"}}>
<Text style={{textAlignVertical: "center", textAlign: "center",fontSize: 20,}}>body</Text>
</Animated.View>
</Animated.View>
</View>
);
}
}
const s = StyleSheet.create({
animatedViewConatiner:{
flex:1,
// position: 'absolute',
// width,
// height:100,
// top:0,
// bottom:0,
// justifyContent:"flex-end",
// alignItems:"flex-end",
// left:0,right:0,
backgroundColor:"rgba(240,0,0,.5)",
},
container: {
flex: 1,
// height,
// width,
// justifyContent: "center",
// alignItems: "center",
backgroundColor: "#F5FCFF",
},
text:{
fontWeight:"600",
// fontSize:100,
textAlignVertical: "center", textAlign: "center",},
// container: {
// flex: 10,
// flexDirection: 'column'
// },
body: {
flex: 10,
backgroundColor: '#ccc'
},
footer_menu: {
position: 'absolute',
left:0,right:0,
width: 600,
height: 350,
bottom: -300,
backgroundColor: '#1fa67a',
alignItems: 'center',
// justifyContent:"center",
},
tip_menu: {
flexDirection: 'row'
},
button: {
backgroundColor: '#fff'
},
button_label: {
fontSize: 20,
fontWeight: 'bold'
}
});
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
and this