Simple emoji picker for react-native
JavaScript Objective-C Python Java
Switch branches/tags
Nothing to show
Clone or download
yonahforst Merge pull request #7 from dinodsaurus/master
added support for react >= 16
Latest commit 5a36524 Apr 5, 2018
Permalink
Failed to load latest commit information.
Example fix example Aug 17, 2016
.gitignore first commit Jun 12, 2016
.npmignore update example Jul 31, 2016
LICENSE first commit Jun 12, 2016
README.md fixed typo Feb 16, 2017
animated-example.gif update example gif Aug 17, 2016
index.js added support for react > 16 Nov 15, 2017
package.json Merge branch 'master' into master Apr 4, 2018

README.md

Emoji picker for react-native

Powered by the awesome emoji-datasource

AnimatedExample

Installation

npm install react-native-emoji-picker

EmojiPicker component

const EmojiPicker = require('react-native-emoji-picker');

class Main extends React.Component {
  _emojiSelected(emoji) {
    console.log(emoji)
  }

  render() {
    return (
      <View style={styles.container}>
        <EmojiPicker 
          style={styles.emojiPicker} 
          onEmojiSelected={this._emojiSelected}/>
      </View>
    );
  }
}

Component props

  • onEmojiSelected (Function) - Required. Called when the user taps on an emoji.
  • style (Object) - Optional. Standard view style for the enclosing component.
  • clearButtonText (String) - Optional. Alternate text for the clear button. Defaults to 'Clear'.
  • hideClearButton (Bool) - Optional. Hide the clear button.
  • rows (Number) - Optional. Number of rows used to show all emojis. Defaults to 7.

EmojiOverlay component

Optional overlay which wraps the picker in a modal-like component

const { EmojiOverlay } = require('react-native-emoji-picker');

class Main extends React.Component {
  state = {
    showPicker: false,
  }

  _emojiSelected(emoji) {
    this.setState({showPicker: false})
    console.log(emoji)
  }

  render() {
    return (
      <View style={styles.container}>

        <TouchableHighlight
          onPress={() => this.setState({showPicker: true})}>
          <Text> Show picker </Text>
        </TouchableHighlight>

        <EmojiOverlay 
          style={styles.emojiPicker} 
          visible={this.state.showPicker}
          onTapOutside={() => this.setState({showPicker: false})}
          horizontal={true}
          onEmojiSelected={this._emojiSelected}/>

      </View>
    );
  }
}

Component props

  • (...all EmojiPicker props)
  • visible (Bool) - Required. Is the overlay visible
  • onTapOutside (Function) - Required. Callback for when user taps outside the EmojiPicker area. Should set visible to false