Add contacts screen

src/view/com/util/Selector.tsx

@@ -113,6 +113,7 @@ const styles = StyleSheet.create({
   },
   item: {
     marginRight: 20,
+    paddingHorizontal: 10,
   },
   itemLabel: {
     fontWeight: '600',

src/view/routes.ts

@@ -2,6 +2,7 @@ import React, {MutableRefObject} from 'react'
 import {FlatList} from 'react-native'
 import {IconProp} from '@fortawesome/fontawesome-svg-core'
 import {Home} from './screens/Home'
+import {Contacts} from './screens/Contacts'
 import {Search} from './screens/Search'
 import {Notifications} from './screens/Notifications'
 import {NotFound} from './screens/NotFound'
@@ -28,6 +29,7 @@ export type MatchResult = {
 const r = (pattern: string) => new RegExp('^' + pattern + '([?]|$)', 'i')
 export const routes: Route[] = [
   [Home, 'house', r('/')],
+  [Contacts, ['far', 'circle-user'], r('/contacts')],
   [Search, 'magnifying-glass', r('/search')],
   [Notifications, 'bell', r('/notifications')],
   [Settings, 'bell', r('/settings')],

src/view/screens/Contacts.tsx

@@ -0,0 +1,82 @@
+import React, {useEffect, useState, useRef} from 'react'
+import {StyleSheet, Text, TextInput, View} from 'react-native'
+import {useSharedValue} from 'react-native-reanimated'
+import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
+import {ProfileFollows as ProfileFollowsComponent} from '../com/profile/ProfileFollows'
+import {Selector} from '../com/util/Selector'
+import {colors} from '../lib/styles'
+import {ScreenParams} from '../routes'
+import {useStores} from '../../state'
+
+export const Contacts = ({visible, params}: ScreenParams) => {
+  const store = useStores()
+  const selectorInterp = useSharedValue(0)
+
+  useEffect(() => {
+    if (visible) {
+      store.nav.setTitle(`Contacts`)
+    }
+  }, [store, visible])
+
+  const [searchText, onChangeSearchText] = useState('')
+  const inputRef = useRef<TextInput | null>(null)
+
+  return (
+    <View>
+      <View style={styles.section}>
+        <Text style={styles.title}>Contacts</Text>
+      </View>
+      <View style={styles.section}>
+        <View style={styles.searchContainer}>
+          <FontAwesomeIcon
+            icon="magnifying-glass"
+            size={16}
+            style={styles.searchIcon}
+          />
+          <TextInput
+            ref={inputRef}
+            value={searchText}
+            style={styles.searchInput}
+            placeholder="Search"
+            onChangeText={onChangeSearchText}
+          />
+        </View>
+      </View>
+      <Selector
+        items={['All', 'Following']}
+        selectedIndex={0}
+        swipeGestureInterp={selectorInterp}
+      />
+      {!!store.me.name && <ProfileFollowsComponent name={store.me.name} />}
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  section: {
+    backgroundColor: colors.white,
+  },
+  title: {
+    fontSize: 30,
+    fontWeight: 'bold',
+    paddingHorizontal: 12,
+    paddingVertical: 6,
+  },
+
+  searchContainer: {
+    flexDirection: 'row',
+    backgroundColor: colors.gray1,
+    paddingHorizontal: 8,
+    paddingVertical: 8,
+    marginHorizontal: 10,
+    marginBottom: 6,
+    borderRadius: 4,
+  },
+  searchIcon: {
+    color: colors.gray5,
+    marginRight: 8,
+  },
+  searchInput: {
+    flex: 1,
+  },
+})