fix: paddingHorizontal with TextInput.Affix

[dcangulo]

Summary

Fixes: #2303

paddingHorizontal is disregarded when using left prop on TextInput.

Test plan

Snack: https://snack.expo.io/@dcangulo/textinput

Sample Code in screenshot:

import React from 'react';
import { SafeAreaView, View } from 'react-native';
import { TextInput } from 'react-native-paper';

export default function App() {
  const [text, setText] = React.useState('');

  return (
    <SafeAreaView>
      <View style={{ padding: 20 }}>
        <TextInput
          label='Contact Number'
          value={text}
          onChangeText={setText}
          left={<TextInput.Affix text='+63' />}
          style={{ paddingHorizontal: 60 }}
        />
      </View>
    </SafeAreaView>
  );
}

Before this PR:

After this PR:

[callstack-bot]

Hey @dcangulo, thank you for your pull request 🤗. The documentation from this branch can be viewed here.

[dcangulo]

@Trancever @unikvozm @jbinda @matkoson @OlimpiaZurek Please check. Thanks.

[Trancever]

Can we type it as paddingHorizontal?: number;?

[dcangulo]

@Trancever

I'm not sure but I get Type 'string | number | undefined' is not assignable to type 'number'. error if I use paddingHorizontal?: number;. I am also new to typescript, any pointers will be appreciated.

Also according to the docs, paddingHorizontal has a type of number, string.

[Trancever]

Ok, I see. Then it should be paddingHorizontal?: number | string. We don't have to add undefined, because we already have a question mark after the prop name.

[Trancever]

If we change the type we won't need this check typeof paddingHorizontal === 'number'

[Trancever]

Same here

[Trancever]

And here

[dcangulo]

@Trancever Updated to paddingHorizontal?: number | string. Please check. Thanks.

[Trancever]

Merged in 4b1c150

[ecmap]

Does TextInput.Icon support?