react-native-floating-hearts
Periscope floating hearts animation for React Native.
Installation
npm install --save react-native-floating-hearts Quick start
import React, { Component } from 'react' import { View, TouchableOpacity, StyleSheet } from 'react-native' import FloatingHearts from 'react-native-floating-hearts' class App extends Component { state = { count: 0, } render() { const { count } = this.state return ( <TouchableOpacity activeOpacity={1} style={styles.container} onPress={() => this.setState({ count: count + 1 })} > <FloatingHearts count={count} /> </TouchableOpacity> ) } } const styles = StyleSheet.create({ container: { flex: 1, paddingTop: 300, } }) export default AppUsing a custom shape
import React, { Component } from 'react' import { View, TouchableOpacity, StyleSheet } from 'react-native' import FloatingHearts from 'react-native-floating-hearts' class App extends Component { state = { count: 0, } render() { const { count } = this.state return ( <TouchableOpacity activeOpacity={1} style={styles.container} onPress={() => this.setState({ count: count + 1 })} > <FloatingHearts count={count} renderCustomShape={() => { return <View style={styles.square} /> }} /> </TouchableOpacity> ) } } const styles = StyleSheet.create({ container: { flex: 1, paddingTop: 300, }, square: { width: 40, height: 40, backgroundColor: 'red', }, }) export default AppProps
| Props name | Type | Description | Default |
|---|---|---|---|
| count* | Number | Adds a heart when incremented | |
| color | Number | The hearts color | 'red' |
| renderCustomShape | Function | Renders a custom shape instead of a heart |
(*) required
Acknowledgements
Based on this blog post by @browniefed
