title: React Native: what is a proper way to pass style as props, when using spread operator on the child component
body: <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>