ChipsInput's nested TextInput inherits height of entire container even when leadingAccessory causes a flex-wrap

[itsalam]

Description

• When using Chips Input, when the chips cause a wrap, the TextInput component inherits the resulting parent container height and overflows.
• This is seemingly due to the nested View for the TextInput compoenent using the centerV prop

• Initial chips input
• Text field shown in red for visual clairty

• When not wrapping behaves as expected

• When wrapped, the TextInput component inherited the parent components height, and overflows. (Chips/"Suggested" text from the 3rd row in the image are from a seperate component)

• Also causes unwanted spacing from first and second row

• Can work on/provide a PR for fix if requested!

Related to

• [x] Components
• [ ] Demo
• [ ] Docs
• [ ] Typings

Steps to reproduce

1. Use ChipsInput component in a fixed sized View, specific the textInput's style/height via inputStyle prop
2. Add enough chip props to cause a chip overflow
3. Use Element Inspector to view the dimensions of the ChipsInput and its inner TextInput elements,

Expected behavior

textInput should not stretch/overflow parent, if a height is specified via inputStyle, the TextInput should comply.

Actual behavior

Overflowed textinput with mismatching height/dimensions.

More Info

Code snippet

   <View ref={viewRef}>
      <BadgeInput
        ref={ref}
        placeholder={'Tags'}
        chips={tagsProps}
        value={currTagQuery}
        onFocus={() => {
          setIsFocused(true)
        }}
        onBlur={() => {
          setIsFocused(false)
        }}
        onChangeText={(text) => {
          setHasInput(text.length > 0)
          onChangeText?.(text)
          const cleaned = text.replace(/\s+/g, ' ').trim()
          const tokens = cleaned
            .split('  ')
            .filter(Boolean)
            .map((t) => t.trim())

          if (tokens.length > 1) {
            setTags((currTokens) => [...currTokens, { label: tokens[0] }])
            setCurrTagQuery('')
          } else {
            setCurrTagQuery(text)
          }
        }}
        onChange={(newChips: ChipsInputChipProps[]) => {
          if (Array.isArray(newChips)) {
            setTags(newChips ?? [])
          }
        }}
        inputStyle={[styles.input]}
        fieldStyle={[styles.tagsInputBody]}
        style={[
          styles.attributeInputBody,
          {
            backgroundColor: 'red',
          },
        ]}
        defaultChipProps={{
          leftElement: renderIconElement('general'),
        }}
        {...props}
      />

Affected platforms

• [ ] Android
• [x] iOS
• [ ] Web