diff --git a/src/view/com/util/Selector.tsx b/src/view/com/util/Selector.tsx index 6b0d5ac1..f0e685fe 100644 --- a/src/view/com/util/Selector.tsx +++ b/src/view/com/util/Selector.tsx @@ -113,6 +113,7 @@ const styles = StyleSheet.create({ }, item: { marginRight: 20, + paddingHorizontal: 10, }, itemLabel: { fontWeight: '600', diff --git a/src/view/routes.ts b/src/view/routes.ts index e7d6de7f..d75280d1 100644 --- a/src/view/routes.ts +++ b/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')], diff --git a/src/view/screens/Contacts.tsx b/src/view/screens/Contacts.tsx new file mode 100644 index 00000000..7c079cde --- /dev/null +++ b/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(null) + + return ( + + + Contacts + + + + + + + + + {!!store.me.name && } + + ) +} + +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, + }, +})