import React from 'react' ; import { Image , StyleSheet , Text , TouchableOpacity } from 'react-native' ; import { useTheme } from 'stream-chat-react-native' ; import type { UserResponse } from 'stream-chat' ; import type { LocalUserType } from '../../types' ; const styles = StyleSheet . create ( { tagContainer : { borderRadius : 12 , flexDirection : 'row' , marginRight : 8 , marginVertical : 8 , } , tagImage : { borderRadius : 12 , height : 24 , width : 24 , } , tagText : { alignSelf : 'center' , fontSize : 14 , paddingLeft : 7 , paddingRight : 12 , } , } ) ; type SelectedUserTagProps = { index : number ; onPress : ( ) => void ; tag : UserResponse < LocalUserType > ; disabled ? : boolean ; } ; export const SelectedUserTag = ( { disabled = false , index , onPress , tag , } ) => { const { theme : { colors : { black , grey_gainsboro } , } , } = useTheme ( ) ; return ( < TouchableOpacity disabled = { disabled } key = { `${ tag }-${ index }` } onPress = { onPress } style = { [ styles . tagContainer , { backgroundColor : grey_gainsboro } ] } > < Image source = { { uri : tag . image , } } style = { styles . tagImage } / > < Text style = { [ styles . tagText , { color : black , } , ] } > { tag . name } < /Text> < /TouchableOpacity>); } ;