<View style={[subComponentStyling, {backgroundColor: blue}]}>


// Context lets us pass a value deep into the component tree
// without explicitly threading it through every component.
// Create a context for the current style (with "{display:none}" as the default).
const SubComponentStyleContext = React.createContext({display:none});

class App extends React.Component {
  render() {
    // Use a Provider to pass the current style to the tree below.
    // Any component can read it, no matter how deep it is.
    // In this example, we're passing "{display:block}" as the current value.
    return (
      <SubComponentStyleContext.Provider value={{display:block}}>
        <MainComponent />

// A component in the middle doesn't have to
// pass the style down explicitly anymore.
function MainComponent(props) {
  return (
      <SubComponent />

function SubComponent(props) {
  // Use a Consumer to read the current style context.
  // React will find the closest theme Provider above and use its value.
  // In this example, the current style is "{display:block}".
  return (
      {style => /*use style here as you want*/}

Related Query

More Query from same tag