TextField with leadingAccessory lets text go over the field border

[Nodirbek3d]

Description

When a leadingAccessory is added to text field, it does not keep text inside the border of field

Code:

function TextFieldIcon(props) {
  const {Icon} = props;
  return (
    <View marginR-2>
      <Icon fill={Colors.grey50} height={24} width={24}/>
    </View>
  );
}

Using leadingAccessory:

        <TextField
          $outlineDanger
          enableErrors={enableAddressErrors}
          leadingAccessory={<TextFieldIcon Icon={LocationSvg}/>}
          onChangeText={(value) => onChange(value, 'location.address')}
          onChangeValidity={(isValid) => setEnableAddressErrors(!isValid)}
          onSubmitEditing={() => refToLandmark.current.focus()}
          placeholder='Address'
          returnKeyType='next'
          value={address}
        />

Text field styling:

export const tfStyles = StyleSheet.create({
  fieldStyle: {
    fontWeight: 'bold',
    fontSize: 20,
    borderColor: 'red',
    borderWidth: 1,
  },
  container: {
    height: 45,
    borderColor: 'gray',
    borderWidth: 1,
    borderRadius: 6,
    padding: 6,
    marginBottom: 10,
    marginTop: 10,
    justifyContent: 'center'
  }
});

If I remove leadingAccessory, text stays within textfield border

Related to

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

Steps to reproduce

Expected behavior

Text field's text should stay within border

Actual behavior

text overflows text field's border

More Info

Code snippet

Screenshots/Video

Environment

• React Native version:
• React Native UI Lib version:

Affected platforms

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

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[afdza3]

I am also facing this issue with trailingAccesory. Kinda made it work like this, but I think it's hacky.

trailingAccessory={
    <View style={{ position: 'absolute', right: 0, top: 0, bottom: 0, justifyContent: 'center' }}>
        <Ionicons name="chevron-down-outline" size={24} color={Colors.neutral400} style={{ backgroundColor: Colors.$backgroundDefault }} />
    </View>
}