React-native: Style is not passed down to custom components

[javorosas]

Why do I have to explicitly pass the style prop to custom components? Is this by design?

Consider the following app

import React from 'react';
import { View, StyleSheet, Text } from 'react-native';

const Component = () => {
  return (
    <View>
      <Text>This is a custom component</Text>
    </View>
  );
}

const App = () => {
  return (
    <View>
      <Component style={styles.component} />
      <Component style={styles.component} />
    </View>
  );
}

const styles = StyleSheet.create({
  component: {
    backgroundColor: '#f88',
    marginVertical: 10
  }
});

export default App;

I would intuitively expect to be styling the component's container View without explicitly passing the style as a prop. Is this intended?

[brunolemos]

Yes this is by design. The Component must clearly specify the props it can receive, and it does not apply anything implicitly to its children.

[charpeni]

@brunolemos has answered the question correctly, so I'll close this issue. Don't forget you can use StackOverflow for your question.

Besides, IMO you should use regular fonction instead of arrow function as they are anonymous, so you're relying on function name inference.

[ghost]

Closing this issue as @charpeni says the question asked has been answered. Please help us by asking questions on StackOverflow. StackOverflow is amazing for Q&A: it has a reputation system, voting, the ability to mark a question as answered. Because of the reputation system it is likely the community will see and answer your question there. This also helps us use the GitHub bug tracker for bugs only.

[javorosas]

Ok, I get it. Just for future reference, this is what needs to be done to achieve the desired behavior:

const Component = (props) => {
  return (
    <View {...props}>
      <Text>This is a custom component</Text>
    </View>
  );
}

[smitthakkar1]

Still not getting the desired behavior.
Can I export a component with styles?