React Native: what is a proper way to pass style as props, when using spread operator on the child component

Question

This is my component A:

const GenericTextInput = (props) => {
  return (
      <TextInput
        style={styles.input}
        {...props}
      />
  );
};

This is my component B:

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

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

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

If I simply make:

//component A

const GenericTextInput = (props) => {
  return (
      <TextInput
        style={[styles.input, props.styles]}
        {...props}
      />
  );
};


//component B

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

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

                        style={styles.customStyleForSecondInput}
            />
        </View>
       );
    };

I'll have 2 style props in comp. A, and the second style prop will completely overwrite the first one.

What is the proper way of adding a specific styling to the 2nd GenericTextInput?

Answer 1

I usually destructure the named property (style) out for the object, and use the rest operator to collect the remaining props into a new object:

const {style, ...rest} = props;

return (
  <TextInput
    style={[styles.input, style]}
    {...rest}
  />
)

Note that this requires the transform-object-rest-spread Babel plugin. This plugin is included in the React Native Babel preset, so it will work out of the box -- but may not work in other JavaScript environments without this plugin.