Skip to content

yonahforst/react-native-emoji-picker

master
Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
 
 
 
 
 
 
 
 
 
 

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