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,109 @@
+//@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}
+        />
+      </View>
+      {clearButton}
+    </View>
+  );
+}
+
+const unboundStyles = {
+  container: {
+    backgroundColor: 'searchMessagesInputFieldBackground',
+    borderRadius: 20,
+    paddingHorizontal: 11,
+    alignItems: 'center',
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+  },
+  searchBoxTextStyle: {
+    color: 'whiteText',
+    fontSize: 16,
+    fontWeight: '400',
+    placeholderTextColor: 'searchMessagesSecondaryForeground',
+    marginHorizontal: 8,
+    marginVertical: 6,
+  },
+  button: {
+    color: 'searchMessagesSecondaryForeground',
+  },
+  cancelButton: {
+    backgroundColor: 'modalButton',
+    borderRadius: 56,
+    width: 18,
+    height: 18,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  cancelButtonIcon: {
+    color: 'modalButtonLabel',
+  },
+  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
@@ -95,6 +95,8 @@
   messageLabel: '#0A0A0A',
   modalSeparator: '#CCCCCC',
   secondaryButtonBorder: '#FFFFFF',
+  searchMessagesInputFieldBackground: '#CCCCCC',
+  searchMessagesSecondaryForeground: '#999999',
 });
 export type Colors = $Exact<typeof light>;
 
@@ -186,6 +188,8 @@
   messageLabel: '#CCCCCC',
   modalSeparator: '#404040',
   secondaryButtonBorder: '#FFFFFF',
+  searchMessagesInputFieldBackground: '#404040',
+  searchMessagesSecondaryForeground: '#808080',
 });
 const colors = { light, dark };