Add contacts screen

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,
+  },
+})