diff --git a/app/components/emoji_picker/__snapshots__/emoji_picker.test.js.snap b/app/components/emoji_picker/__snapshots__/emoji_picker.test.js.snap
index a4a9bb84c..fa4026572 100644
--- a/app/components/emoji_picker/__snapshots__/emoji_picker.test.js.snap
+++ b/app/components/emoji_picker/__snapshots__/emoji_picker.test.js.snap
@@ -2,12 +2,13 @@
exports[`components/emoji_picker/EmojiPicker should match snapshot 1`] = `
-
-
+ >
+
+
+
diff --git a/app/components/emoji_picker/emoji_picker.android.js b/app/components/emoji_picker/emoji_picker.android.js
new file mode 100644
index 000000000..a835fddef
--- /dev/null
+++ b/app/components/emoji_picker/emoji_picker.android.js
@@ -0,0 +1,102 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+import React from 'react';
+import {
+ FlatList,
+ SectionList,
+ View,
+} from 'react-native';
+
+import SearchBar from 'app/components/search_bar';
+import {changeOpacity, getKeyboardAppearanceFromTheme} from 'app/utils/theme';
+
+import EmojiPickerBase, {getStyleSheetFromTheme, SECTION_MARGIN} from './emoji_picker_base';
+
+export default class EmojiPicker extends EmojiPickerBase {
+ render() {
+ const {formatMessage} = this.context.intl;
+ const {deviceWidth, theme} = this.props;
+ const {emojis, filteredEmojis, searchTerm} = this.state;
+ const styles = getStyleSheetFromTheme(theme);
+
+ let listComponent;
+ if (searchTerm) {
+ listComponent = (
+
+ );
+ } else {
+ listComponent = (
+
+ );
+ }
+
+ const searchBarInput = {
+ backgroundColor: theme.centerChannelBg,
+ color: theme.centerChannelColor,
+ fontSize: 13,
+ marginBottom: -3,
+ };
+
+ return (
+
+
+
+
+
+ {listComponent}
+ {!searchTerm &&
+
+
+ {this.renderSectionIcons()}
+
+
+ }
+
+
+ );
+ }
+}
diff --git a/app/components/emoji_picker/emoji_picker.ios.js b/app/components/emoji_picker/emoji_picker.ios.js
new file mode 100644
index 000000000..c1603f6e7
--- /dev/null
+++ b/app/components/emoji_picker/emoji_picker.ios.js
@@ -0,0 +1,133 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+import React from 'react';
+import {
+ FlatList,
+ KeyboardAvoidingView,
+ SectionList,
+ View,
+} from 'react-native';
+import {KeyboardTrackingView} from 'react-native-keyboard-tracking-view';
+
+import SafeAreaView from 'app/components/safe_area_view';
+import {paddingHorizontal as padding} from 'app/components/safe_area_view/iphone_x_spacing';
+import SearchBar from 'app/components/search_bar';
+import {DeviceTypes} from 'app/constants';
+import {changeOpacity, getKeyboardAppearanceFromTheme} from 'app/utils/theme';
+
+import EmojiPickerBase, {getStyleSheetFromTheme, SECTION_MARGIN} from './emoji_picker_base';
+
+const SCROLLVIEW_NATIVE_ID = 'emojiPicker';
+
+export default class EmojiPicker extends EmojiPickerBase {
+ render() {
+ const {formatMessage} = this.context.intl;
+ const {deviceWidth, isLandscape, theme} = this.props;
+ const {emojis, filteredEmojis, searchTerm} = this.state;
+ const styles = getStyleSheetFromTheme(theme);
+
+ const shorten = DeviceTypes.IS_IPHONE_X && isLandscape ? 6 : 2;
+
+ let listComponent;
+ if (searchTerm) {
+ listComponent = (
+
+ );
+ } else {
+ listComponent = (
+
+ );
+ }
+
+ let keyboardOffset = DeviceTypes.IS_IPHONE_X ? 50 : 30;
+ if (isLandscape) {
+ keyboardOffset = DeviceTypes.IS_IPHONE_X ? 0 : 10;
+ }
+
+ const searchBarInput = {
+ backgroundColor: theme.centerChannelBg,
+ color: theme.centerChannelColor,
+ fontSize: 13,
+ };
+
+ return (
+
+
+
+
+
+
+ {listComponent}
+ {!searchTerm &&
+
+
+
+ {this.renderSectionIcons()}
+
+
+
+ }
+
+
+
+ );
+ }
+}
diff --git a/app/components/emoji_picker/emoji_picker.test.js b/app/components/emoji_picker/emoji_picker.test.js
index c9f2233f4..2b0b24d8b 100644
--- a/app/components/emoji_picker/emoji_picker.test.js
+++ b/app/components/emoji_picker/emoji_picker.test.js
@@ -6,7 +6,8 @@ import React from 'react';
import Preferences from 'mattermost-redux/constants/preferences';
import {shallowWithIntl} from 'test/intl-test-helper';
-import EmojiPicker, {filterEmojiSearchInput} from './emoji_picker.js';
+import {filterEmojiSearchInput} from './emoji_picker_base';
+import EmojiPicker from './emoji_picker.ios';
describe('components/emoji_picker/EmojiPicker', () => {
const baseProps = {
diff --git a/app/components/emoji_picker/emoji_picker.js b/app/components/emoji_picker/emoji_picker_base.js
similarity index 71%
rename from app/components/emoji_picker/emoji_picker.js
rename to app/components/emoji_picker/emoji_picker_base.js
index 220ce6f73..249df1ceb 100644
--- a/app/components/emoji_picker/emoji_picker.js
+++ b/app/components/emoji_picker/emoji_picker_base.js
@@ -6,10 +6,7 @@ import PropTypes from 'prop-types';
import {intlShape} from 'react-intl';
import {
ActivityIndicator,
- FlatList,
- KeyboardAvoidingView,
Platform,
- SectionList,
Text,
TouchableOpacity,
View,
@@ -21,23 +18,20 @@ import {isMinimumServerVersion} from 'mattermost-redux/utils/helpers';
import Emoji from 'app/components/emoji';
import FormattedText from 'app/components/formatted_text';
-import SafeAreaView from 'app/components/safe_area_view';
-import SearchBar from 'app/components/search_bar';
import {DeviceTypes} from 'app/constants';
import {emptyFunction} from 'app/utils/general';
import {
makeStyleSheetFromTheme,
changeOpacity,
- getKeyboardAppearanceFromTheme,
} from 'app/utils/theme';
import {paddingHorizontal as padding} from 'app/components/safe_area_view/iphone_x_spacing';
import EmojiPickerRow from './emoji_picker_row';
const EMOJI_SIZE = 30;
const EMOJI_GUTTER = 7.5;
-const SECTION_MARGIN = 15;
-const SECTION_HEADER_HEIGHT = 28;
const EMOJIS_PER_PAGE = 200;
+const SECTION_HEADER_HEIGHT = 28;
+export const SECTION_MARGIN = 15;
export function filterEmojiSearchInput(searchText) {
return searchText.toLowerCase().replace(/^:|:$/g, '');
@@ -83,6 +77,7 @@ export default class EmojiPicker extends PureComponent {
const emojis = this.renderableEmojis(props.emojisBySection, props.deviceWidth);
const emojiSectionIndexByOffset = this.measureEmojiSections(emojis);
+ this.searchBarRef = React.createRef();
this.scrollToSectionTries = 0;
this.state = {
emojis,
@@ -99,8 +94,8 @@ export default class EmojiPicker extends PureComponent {
if (this.props.deviceWidth !== nextProps.deviceWidth) {
this.rebuildEmojis = true;
- if (this.refs.search_bar) {
- this.refs.search_bar.blur();
+ if (this.searchBarRef?.current) {
+ this.searchBarRef.current.blur();
}
}
@@ -399,118 +394,9 @@ export default class EmojiPicker extends PureComponent {
);
}
-
- render() {
- const {deviceWidth, isLandscape, theme} = this.props;
- const {emojis, filteredEmojis, searchTerm} = this.state;
- const {intl} = this.context;
- const {formatMessage} = intl;
- const styles = getStyleSheetFromTheme(theme);
-
- const shorten = DeviceTypes.IS_IPHONE_X && isLandscape ? 6 : 2;
-
- let listComponent;
- if (searchTerm) {
- listComponent = (
-
- );
- } else {
- listComponent = (
-
- );
- }
-
- let keyboardOffset = 64;
- if (Platform.OS === 'android') {
- keyboardOffset = -200;
- } else if (DeviceTypes.IS_IPHONE_X) {
- keyboardOffset = isLandscape ? 35 : 107;
- } else if (isLandscape) {
- keyboardOffset = 52;
- }
-
- const searchBarInput = {
- backgroundColor: theme.centerChannelBg,
- color: theme.centerChannelColor,
- fontSize: 13,
- ...Platform.select({
- android: {
- marginBottom: -3,
- },
- }),
- };
-
- return (
-
-
-
-
-
-
- {listComponent}
- {!searchTerm &&
-
-
- {this.renderSectionIcons()}
-
-
- }
-
-
-
- );
- }
}
-const getStyleSheetFromTheme = makeStyleSheetFromTheme((theme) => {
+export const getStyleSheetFromTheme = makeStyleSheetFromTheme((theme) => {
return {
flex: {
flex: 1,
@@ -521,39 +407,29 @@ const getStyleSheetFromTheme = makeStyleSheetFromTheme((theme) => {
borderTopWidth: 1,
flexDirection: 'row',
justifyContent: 'space-between',
- },
- bottomContentWrapper: {
- position: 'absolute',
- bottom: 0,
- left: 0,
- right: 0,
- height: 35,
width: '100%',
},
- columnStyle: {
- alignSelf: 'stretch',
- flexDirection: 'row',
- marginVertical: EMOJI_GUTTER,
- justifyContent: 'flex-start',
+ bottomContentWrapper: {
+ ...Platform.select({
+ android: {
+ position: 'absolute',
+ bottom: 0,
+ left: 0,
+ right: 0,
+ },
+ ios: {
+ width: '100%',
+ flexDirection: 'row',
+ },
+ }),
+ backgroundColor: theme.centerChannelBg,
+ height: 35,
},
container: {
alignItems: 'center',
backgroundColor: theme.centerChannelBg,
flex: 1,
},
- emoji: {
- width: EMOJI_SIZE,
- height: EMOJI_SIZE,
- marginHorizontal: EMOJI_GUTTER,
- alignItems: 'center',
- justifyContent: 'center',
- },
- emojiLeft: {
- marginLeft: 0,
- },
- emojiRight: {
- marginRight: 0,
- },
flatList: {
flex: 1,
backgroundColor: theme.centerChannelBg,
@@ -580,16 +456,16 @@ const getStyleSheetFromTheme = makeStyleSheetFromTheme((theme) => {
borderRightColor: changeOpacity(theme.centerChannelColor, 0.2),
overflow: 'hidden',
},
- listView: {
- backgroundColor: theme.centerChannelBg,
- marginBottom: 35,
- },
searchBar: {
backgroundColor: changeOpacity(theme.centerChannelColor, 0.2),
paddingVertical: 5,
},
- section: {
- alignItems: 'center',
+ sectionList: {
+ ...Platform.select({
+ android: {
+ marginBottom: 35,
+ },
+ }),
},
sectionIcon: {
color: changeOpacity(theme.centerChannelColor, 0.3),
@@ -613,9 +489,6 @@ const getStyleSheetFromTheme = makeStyleSheetFromTheme((theme) => {
justifyContent: 'center',
backgroundColor: theme.centerChannelBg,
},
- wrapper: {
- flex: 1,
- },
loading: {
flex: 1,
alignItems: 'center',
diff --git a/package-lock.json b/package-lock.json
index a1555a9ce..0a17b5acb 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -16580,8 +16580,8 @@
}
},
"react-native-keyboard-tracking-view": {
- "version": "github:enahum/react-native-keyboard-tracking-view#66979a750e42fefe06366f0c924b29368bb586f2",
- "from": "github:enahum/react-native-keyboard-tracking-view#66979a750e42fefe06366f0c924b29368bb586f2"
+ "version": "github:enahum/react-native-keyboard-tracking-view#6ac2c73dee8f86be57bfe6509f59db6e04d36594",
+ "from": "github:enahum/react-native-keyboard-tracking-view#6ac2c73dee8f86be57bfe6509f59db6e04d36594"
},
"react-native-keychain": {
"version": "3.1.3",
diff --git a/package.json b/package.json
index ece3d5d3a..f44c12ed1 100644
--- a/package.json
+++ b/package.json
@@ -43,7 +43,7 @@
"react-native-image-gallery": "github:mattermost/react-native-image-gallery#c1a9f7118e90cc87d47620bc0584c9cac4b0cf38",
"react-native-image-picker": "0.28.1",
"react-native-keyboard-aware-scroll-view": "0.8.0",
- "react-native-keyboard-tracking-view": "github:enahum/react-native-keyboard-tracking-view#66979a750e42fefe06366f0c924b29368bb586f2",
+ "react-native-keyboard-tracking-view": "github:enahum/react-native-keyboard-tracking-view#6ac2c73dee8f86be57bfe6509f59db6e04d36594",
"react-native-keychain": "3.1.3",
"react-native-linear-gradient": "2.5.4",
"react-native-local-auth": "github:mattermost/react-native-local-auth#cc9ce2f468fbf7b431dfad3191a31aaa9227a6ab",