
import React, {Component } from 'react';
import {Animated ,Text,View,AppRegistry,Button, StyleSheet,Image } from 'react-native';
// Badge
export default class App extends Component {
state = {
badgeScale : new Animated.Value(0),
textValue :0,
}
animatedBadge(){
this.state.badgeScale.setValue(0);
const newTextValue = ++this.state.textValue
this.setState({textValue: newTextValue})
Animated.timing(this.state.badgeScale , {
toValue : 1,
duration : 500
}).start()
}
render(){
const msize = 40;
return(
<View style={styles.container}>
<View style={{ width :100, height :100, borderRadius :50, margin:10,}}>
<View
style={{ width :100, height :100, backgroundColor:'green', borderRadius :50,}}
/>
{/* <Image
source={require('./circle.png')} // style={imageStyle}
style={{ width :100, height :100, borderRadius :50,}}
/> */}
<Animated.View style={{
position: 'absolute', width:msize, height:msize,
borderRadius:msize/2, backgroundColor:'black',
justifyContent:'center', alignContent:'center',
borderColor:'green',borderWidth:1,
// left:0, top:0,
left:70, top:0,
// using this change bedge position
transform:[
{
scale:this.state.badgeScale
}
]
}}>
<Text style={{backgroundColor :'transparent' ,
textAlign:'center',
color:'red'}}>
{this.state.textValue}
</Text>
</Animated.View>
<Button style={{ flex:1 , marginTop:50,justifyContent:'center',
alignContent:'center', }}
title='Add'
onPress={ () =>this.animatedBadge() }>
</Button>
</View>
</View>
);
}
}
const styles = StyleSheet.create({
container:{
flex:1,
justifyContent:'center',
alignItems :'center',
// backgroundColor:'#F5FCFF'
},
imageStyle :{
width:200,
height:200,
},
viewTextStyle:{
position : 'absolute',
justifyContent:'center',
alignItems:'center',
},
textStyle:{
fontSize:23,
fontWeight:'bold',
color:'white'
}
})