React Native Header title with flex elipse and right icon

I am trying to get this flex situation fixed on the title, where if its a long title you get the ellipse, but if short its centered with the v icon to the immediate right like in the first screenshot, but there is this spacing that wont go away because of the flex: 1. Is there a way to accomplish this?

<AppView            paddingHorizontal={5}            useButton={dropDown}            onPress={onTitlePress}            flexDirection="row"            justifyContent="center"            flex={true}            alignItems="center"><AppText             style={{ flex: 1, backgroundColor: 'red'}}              textColor="text"              textAlign='center'              isDarkTheme={isDarkTheme}              numberOfLines={1}              fontSize={AppFonts[17]}              fontFamily="DMSansBold">              Little</AppText>            {dropDown ? (<AppView flexDirection='row' style={{paddingLeft: 2, width: 30}}><FontAwesomeSvg                iconType="SolidIcons"                color={getAppColor('text', 1, isDarkTheme)}                icon={'faAngleDown'}                size={12}              /></AppView>            ) : null}</AppView>