1  import React, {
 2    PropTypes,
 3    Component,
 4  } from 'react'
 5  
 6  import {
 7   StyleSheet,
 8    Text,
 9    View,
10    TouchableHighlight,
11  } from 'react-native'
12  
13  import { EmojiOverlay } from '../'
14  // var {EmojiOverlay} = require('../')
15  
16  const styles = StyleSheet.create({
17    container: {
18      flex: 1,
19      backgroundColor: '#F5FCFF',
20    },
21    emoji: {
22      fontSize: 50,
23      textAlign: 'center',
24      margin: 50,
25      color: 'black'
26    },
27  });
28  
29  
30  class Example extends Component {
31    state = {
32      selectedEmoji: null,
33      showPicker: false,
34    };
35  
36    _emojiSelected = emoji => {
37      this.setState({
38        selectedEmoji: emoji,
39        showPicker: false,
40      });
41    }
42  
43    render() {
44      return (
45        <View style={styles.container}>
46  
47          <TouchableHighlight
48            onPress={() => this.setState({showPicker: true})}>
49            <Text style={styles.emoji}>
50              {this.state.selectedEmoji || 'no emoji selected'}
51            </Text>
52          </TouchableHighlight>
53  
54          <EmojiOverlay
55            style={{
56              height: 400,
57              backgroundColor: '#f4f4f4'
58            }}
59            horizontal={true}
60            visible={this.state.showPicker}
61            onEmojiSelected={this._emojiSelected.bind(this)}
62            onTapOutside={() => this.setState({showPicker: false})} />
63  
64        </View>
65      );
66    }
67  };
68  
69  module.exports = Example