React Native: what is a proper way to pass style as props, when using spread operator on the child component
<p>This is my <em>component A:</em></p>

<pre><code>const GenericTextInput = (props) =&gt; {
  return (
      &lt;TextInput
        style={styles.input}
        {...props}
      /&gt;
  );
};
</code></pre>

<p>This is my <em>component B:</em></p>

<pre><code>const SignIn = (props) =&gt; {
   return (
      &lt;View&gt;
        &lt;GenericTextInput
                    placeholder="Email"
                    autoFocus={true}
                    keyboardType="email-address"
                    returnKeyType="next"
                    autoCorrect={false}
                    placeholderTextColor='rgba(250,248,244, .4)'
                    underlineColorAndroid='rgba(250,248,244, .7)'
        /&gt;

        &lt;GenericTextInput
                    placeholder="Password"
                    placeholderTextColor='rgba(250,248,244, .4)'
                    underlineColorAndroid='rgba(250,248,244, .7)'
                    secureTextEntry={true}
        /&gt;
    &lt;/View&gt;
   );
};
</code></pre>

<p>I want to add a specific styling to the 2nd <code>GenericTextInput</code> in my <em>component B</em>. In the <em>component A</em> I want to use the <code>spread operator</code> (it is so convenient).</p>

<p>If I simply make:</p>

<pre><code>//component A

const GenericTextInput = (props) =&gt; {
  return (
      &lt;TextInput
        style={[styles.input, props.styles]}
        {...props}
      /&gt;
  );
};


//component B

    const SignIn = (props) =&gt; {
       return (
          &lt;View&gt;
            &lt;GenericTextInput
                        placeholder="Email"
                        autoFocus={true}
                        keyboardType="email-address"
                        returnKeyType="next"
                        autoCorrect={false}
                        placeholderTextColor='rgba(250,248,244, .4)'
                        underlineColorAndroid='rgba(250,248,244, .7)'
            /&gt;

            &lt;GenericTextInput
                        placeholder="Password"
                        placeholderTextColor='rgba(250,248,244, .4)'
                        underlineColorAndroid='rgba(250,248,244, .7)'
                        secureTextEntry={true}

                        style={styles.customStyleForSecondInput}
            /&gt;
        &lt;/View&gt;
       );
    };
</code></pre>

<p>I'll have 2 <code>style</code> <code>props</code> in <em>comp. A</em>, and the second <code>style</code> <code>prop</code> will <strong>completely</strong> overwrite the first one.</p>

<p>What is the proper way of adding a specific styling to the 2nd <code>GenericTextInput</code>? </p>