import React , { useContext } from 'react' ; import { FlatList , StyleSheet , TextInput , TouchableOpacity , View } from 'react-native' ; import { ArrowRight , Search , useTheme } from 'stream-chat-react-native' ; import { ScreenHeader } from '../components/ScreenHeader' ; import { UserGridItem } from '../components/UserSearch/UserGridItem' ; import { UserSearchResults } from '../components/UserSearch/UserSearchResults' ; import { AppContext } from '../context/AppContext' ; import { useUserSearchContext } from '../context/UserSearchContext' ; import type { StackNavigationProp } from '@react-navigation/stack' ; import type { StackNavigatorParamList } from '../types' ; const styles = StyleSheet . create ( { container : { flex : 1 , } , flatList : { paddingBottom : 16 } , inputBox : { flex : 1 , fontSize : 14 , includeFontPadding : false , padding : 0 , paddingHorizontal : 16 , paddingTop : 0 , textAlignVertical : 'center' , } , inputBoxContainer : { alignItems : 'center' , borderRadius : 18 , borderWidth : 1 , flexDirection : 'row' , marginHorizontal : 8 , marginTop : 8 , paddingHorizontal : 10 , paddingVertical : 8 , } , navigationButton : { paddingRight : 8 , } , userGridItemContainer : { marginHorizontal : 8 , width : 64 } , } ) ; type RightArrowButtonProps = { disabled ? : boolean ; onPress ? : ( ) => void ; } ; const RightArrowButton = ( props ) => { const { disabled , onPress } = props ; const { theme : { colors : { accent_blue } , } , } = useTheme ( ) ; return ( < TouchableOpacity disabled = { disabled } onPress = { onPress } style = { styles . navigationButton } > < ArrowRight pathFill = { disabled ? 'transparent' : accent_blue } /> < /TouchableOpacity>); } ; export type NewGroupChannelAddMemberScreenNavigationProp = StackNavigationProp < StackNavigatorParamList , 'NewGroupChannelAddMemberScreen' > ; type Props = { navigation : NewGroupChannelAddMemberScreenNavigationProp ; } ; export const NewGroupChannelAddMemberScreen = ( { navigation } ) => { const { chatClient } = useContext ( AppContext ) ; const { theme : { colors : { black , border , grey , white } , } , } = useTheme ( ) ; const { onChangeSearchText , onFocusInput , removeUser , reset , searchText , selectedUsers } = useUserSearchContext ( ) ; const onRightArrowPress = ( ) => { if ( selectedUsers . length === 0 ) return ; navigation . navigate ( 'NewGroupChannelAssignNameScreen' ) ; } ; if ( ! chatClient ) return null ; return ( < View style = { styles . container } > < ScreenHeader onBack = { reset } RightContent = { ( ) => ( < RightArrowButton disabled = { selectedUsers . length === 0 } onPress = { onRightArrowPress } / > ) } titleText = 'Add Group Members' / > < View > < View style = { [ styles . inputBoxContainer , { backgroundColor : white , borderColor : border , marginBottom : selectedUsers . length === 0 ? 8 : 16 , } , ] } > < Search pathFill = { black } /> < TextInput onChangeText = { onChangeSearchText } onFocus = { onFocusInput } placeholder = 'Search' placeholderTextColor = { grey } style = { [ styles . inputBox , { color : black , } , ] } value = { searchText } / > < /View> < FlatList data = { selectedUsers } horizontal keyExtractor = { ( item , index ) => `${ item . id }-${ index }` } renderItem = { ( { index , item : user } ) => ( < View style = { styles . userGridItemContainer } > < UserGridItem onPress = { ( ) => { removeUser ( index ) ; } } user = { user } / > < /View>)} style={selectedUsers.length ? styles.flatList : {}}/ > < /View> < UserSearchResults / > < /View>); } ;