rendering mobile contacts header

app/client/mobile/src/contacts/Contacts.styled.ts

@@ -0,0 +1,48 @@
+import {StyleSheet} from 'react-native';
+import {Colors} from '../constants/Colors';
+
+export const styles = StyleSheet.create({
+  contacts: {
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'center',
+    width: '100%',
+    height: '100%',
+  },
+  header: {
+    position: 'relative',
+    display: 'flex',
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    paddingRight: 8,
+    paddingLeft: 8,
+    width: '100%',
+  },
+  sort: {
+    borderRadius: 4,
+  },
+  inputSurface: {
+    flexGrow: 1,
+    height: 40,
+    marginRight: 8,
+    marginLeft: 4,
+    display: 'flex',
+  },
+  input: {
+    flexGrow: 1,
+    backgroundColor: 'transparent',
+    paddingTop: 0,
+    paddingBottom: 0,
+    display: 'flex',
+    height: 40,
+    maxHeight: 40,
+    borderRadius: 8,
+  },
+  inputUnderline: {
+    display: 'none',
+  },
+  icon: {
+    backgroundColor: 'transparent',
+  },
+});

app/client/mobile/src/contacts/useContacts.hook.ts

@@ -0,0 +1,20 @@
+import {useEffect, useState, useContext, useRef} from 'react';
+import {AppContext} from '../context/AppContext';
+import {DisplayContext} from '../context/DisplayContext';
+import {ContextType} from '../context/ContextType';
+
+export function useContacts() {
+  const display = useContext(DisplayContext) as ContextType;
+  const app = useContext(AppContext) as ContextType;
+  const debounce = useRef(setTimeout(() => {}, 0));
+
+  const [state, setState] = useState({
+    strings: display.state.strings,
+  });
+
+  const actions = {
+  };
+
+  return { state, actions };
+}
+