diff --git a/native/search/search-bar.react.js b/native/search/search-bar.react.js
new file mode 100644
--- /dev/null
+++ b/native/search/search-bar.react.js
@@ -0,0 +1,110 @@
+//@flow
+
+import * as React from 'react';
+import { TextInput, TouchableOpacity, View } from 'react-native';
+
+import SWMansionIcon from '../components/swmansion-icon.react.js';
+import { useStyles } from '../themes/colors.js';
+
+type Props = {
+  onPressSend: (text: string) => void,
+  onClear: () => void,
+};
+
+function SearchBox(props: Props): React.Node {
+  const { onPressSend, onClear } = props;
+
+  const [text, setText] = React.useState('');
+
+  const onEndEditing = React.useCallback(
+    () => onPressSend(text),
+    [onPressSend, text],
+  );
+
+  const onClearSearchFiled = React.useCallback(() => {
+    onClear();
+    setText('');
+  }, [onClear]);
+
+  const styles = useStyles(unboundStyles);
+
+  const clearButton = React.useMemo(() => {
+    if (text.length !== 0) {
+      return (
+        <TouchableOpacity
+          onPress={onClearSearchFiled}
+          style={styles.cancelButton}
+        >
+          <SWMansionIcon
+            name="cross"
+            size={11}
+            style={styles.cancelButtonIcon}
+          />
+        </TouchableOpacity>
+      );
+    }
+    return null;
+  }, [
+    onClearSearchFiled,
+    styles.cancelButton,
+    styles.cancelButtonIcon,
+    text.length,
+  ]);
+
+  return (
+    <View style={styles.container}>
+      <SWMansionIcon name="search" size={24} style={styles.button} />
+
+      <View style={styles.wrapper}>
+        <TextInput
+          value={text}
+          onChangeText={setText}
+          placeholder="Search"
+          style={styles.searchBoxTextStyle}
+          placeholderTextColor="#808080"
+          onEndEditing={onEndEditing}
+          returnKeyType="search"
+        />
+      </View>
+      {clearButton}
+    </View>
+  );
+}
+
+const unboundStyles = {
+  container: {
+    backgroundColor: 'panelInputBackground',
+    borderRadius: 8,
+    paddingHorizontal: 11,
+    alignItems: 'center',
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+  },
+  searchBoxTextStyle: {
+    color: 'panelForegroundLabel',
+    fontSize: 16,
+    fontWeight: '400',
+    placeholderTextColor: 'panelInputSecondaryForeground',
+    marginHorizontal: 8,
+    marginVertical: 6,
+  },
+  button: {
+    color: 'panelInputSecondaryForeground',
+  },
+  cancelButton: {
+    backgroundColor: 'panelButton',
+    borderRadius: 56,
+    width: 18,
+    height: 18,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  cancelButtonIcon: {
+    color: 'panelForegroundLabel',
+  },
+  wrapper: {
+    flex: 1,
+  },
+};
+
+export default SearchBox;
diff --git a/native/search/search-header.react.js b/native/search/search-header.react.js
new file mode 100644
--- /dev/null
+++ b/native/search/search-header.react.js
@@ -0,0 +1,17 @@
+// @flow
+
+import invariant from 'invariant';
+import * as React from 'react';
+
+import SearchBox from './search-bar.react.js';
+import { MessageSearchContext } from './search-provider.react.js';
+
+function SearchHeader(): React.Node {
+  const searchContext = React.useContext(MessageSearchContext);
+  invariant(searchContext, 'searchContext should be set');
+  const { setQuery, clearQuery } = searchContext;
+
+  return <SearchBox onPressSend={setQuery} onClear={clearQuery} />;
+}
+
+export default SearchHeader;
diff --git a/native/themes/colors.js b/native/themes/colors.js
--- a/native/themes/colors.js
+++ b/native/themes/colors.js
@@ -99,11 +99,14 @@
   navigationChevron: designSystemColors.shadesWhite60,
   panelBackground: designSystemColors.shadesWhite90,
   panelBackgroundLabel: '#888888',
+  panelButton: designSystemColors.shadesWhite70,
   panelForeground: designSystemColors.shadesWhite100,
   panelForegroundBorder: designSystemColors.shadesWhite60,
   panelForegroundLabel: designSystemColors.shadesBlack100,
   panelForegroundSecondaryLabel: '#333333',
   panelForegroundTertiaryLabel: '#888888',
+  panelInputBackground: designSystemColors.shadesWhite60,
+  panelInputSecondaryForeground: designSystemColors.shadesBlack60,
   panelIosHighlightUnderlay: '#EBEBEBDD',
   panelSecondaryForeground: designSystemColors.shadesWhite80,
   panelSecondaryForegroundBorder: designSystemColors.shadesWhite70,
@@ -188,11 +191,14 @@
   navigationChevron: designSystemColors.shadesBlack70,
   panelBackground: designSystemColors.shadesBlack100,
   panelBackgroundLabel: designSystemColors.shadesWhite60,
+  panelButton: designSystemColors.shadesBlack70,
   panelForeground: designSystemColors.shadesBlack90,
   panelForegroundBorder: '#2C2C2E',
   panelForegroundLabel: designSystemColors.shadesWhite100,
   panelForegroundSecondaryLabel: designSystemColors.shadesWhite60,
   panelForegroundTertiaryLabel: '#AAAAAA',
+  panelInputBackground: designSystemColors.shadesBlack80,
+  panelInputSecondaryForeground: designSystemColors.shadesBlack60,
   panelIosHighlightUnderlay: '#313035',
   panelSecondaryForeground: designSystemColors.shadesBlack80,
   panelSecondaryForegroundBorder: designSystemColors.shadesBlack70,