Package Exports
- react-native-expanding-circle-transition
This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-native-expanding-circle-transition) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.
Readme
react-native-expanding-circle-transition
Preview
Installation
npm install react-native-expanding-circle-transition --save
Props
| Props | type | description | required or default |
|---|---|---|---|
| color | string | color of the circle view | 'orange' |
| size | number | size of the circle view when fully expanded | the height of the screen times 3 |
| duration | number | duration of the animation | 800 |
| expand | bool | expand if true, reduce false | true |
| position | enum | position of the circle : ['topLeft', 'topRight', 'bottomLeft', 'bottomRight', 'center', 'left', 'right', 'top', 'bottom', 'custom'] | 'topLeft' |
| customLeftMargin | number | custom position's left margin from the center of the circle positioned at topLeft | 0 |
| customTopMargin | number | custom position's top margin from the center of the circle positioned at topLeft | 0 |
How to use
To trigger the animation, you need to use a ref to call the start function of this component. Pass a callback to the start function to change the scene before the circle is hidden(check out usage exemple handlePress function).
Usage exemple
import React, {
Component
} from 'react'
import {
AppRegistry,
StyleSheet,
Text,
View,
TouchableWithoutFeedback
} from 'react-native'
import CircleTransition from 'react-native-expanding-circle-transition'
export default class Exemples extends Component {
constructor (props) {
super(props)
this.state = {
oldColor: '#E3E4E5',
color: 'orange'
}
this.handlePress = this.handlePress.bind(this)
}
handlePress() {
this.circleTransition.start(() => {
this.setState({
oldColor: this.state.color
})
})
}
render () {
let { color, oldColor } = this.state
return (
<View style={[styles.container, {
backgroundColor: oldColor
}]}>
<TouchableWithoutFeedback style={styles.touchable} onPress={this.handlePress} >
<View>
<Text style={styles.position}>
Press to start circle transition animation
</Text>
</View>
</TouchableWithoutFeedback>
<CircleTransition
ref={(circle) => { this.circleTransition = circle }}
color={color}
expand
position={'center'}
/>
</View>
)
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
flexDirection: 'row',
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF'
},
position: {
flex: 1,
top: 320,
fontSize: 25,
alignSelf: 'center',
fontWeight: '400',
textAlign: 'center',
color: '#253039'
},
touchable: {
flex: 1,
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'center'
}
})