diff --git a/index.js b/index.js index e2bba1b..52a5910 100644 --- a/index.js +++ b/index.js @@ -7,7 +7,6 @@ import { TouchableOpacity, TextInput, Platform, - Dimensions, ActivityIndicator, AsyncStorage, FlatList @@ -65,10 +64,9 @@ const filteredEmojis = emoji.filter(e => !e["obsoleted_by"]); const emojiByCategory = category => filteredEmojis.filter(e => e.category === category); const sortEmoji = list => list.sort((a, b) => a.sort_order - b.sort_order); -const { width } = Dimensions.get("screen"); const categoryKeys = Object.keys(Categories); -const TabBar = ({ theme, activeCategory, onPress }) => { +const TabBar = ({ theme, activeCategory, onPress, width }) => { const tabSize = width / categoryKeys.length; return categoryKeys.map(c => { @@ -126,7 +124,8 @@ export default class EmojiSelector extends Component { isReady: false, history: [], emojiList: null, - colSize: 0 + colSize: 0, + width: 0 }; // @@ -243,12 +242,20 @@ export default class EmojiSelector extends Component { this.setState( { emojiList, - colSize: Math.floor(width / this.props.columns) + colSize: Math.floor(this.state.width / this.props.columns) }, cb ); } + handleLayout = ({ nativeEvent: { layout } }) => { + this.setState({ width: layout.width }, () => { + this.prerenderEmojis(() => { + this.setState({ isReady: true }); + }); + }) + }; + // // LIFECYCLE METHODS // @@ -259,14 +266,6 @@ export default class EmojiSelector extends Component { if (showHistory) { this.loadHistoryAsync(); } - - this.prerenderEmojis(() => { - this.setState({ isReady: true }); - }); - } - - handleLayout = ({ nativeEvent: { layout: { width: layoutWidth } } }) => { - this.setState({ colSize: Math.floor(layoutWidth / this.props.columns) }); } render() { @@ -308,6 +307,7 @@ export default class EmojiSelector extends Component { activeCategory={category} onPress={this.handleTabSelect} theme={theme} + width={this.state.width} /> )} diff --git a/package.json b/package.json index 3883c31..04511d7 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "react-native-emoji-selector", - "version": "0.1.7", + "version": "0.1.8", "description": "A react native emoji selector", "main": "index.js", "scripts": { @@ -19,6 +19,6 @@ }, "repository": { "type": "git", - "url": "git+https://github.com/arronhunt/react-native-emoji-selector.git" + "url": "git+https://github.com/lucasfeijo/react-native-emoji-selector.git" } }