blntylmn / react-native-floating-hearts

Periscope floating hearts animation for React Native

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 App

Using 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 App

Props

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