title: How ro re-render everything in React Native
body: <p>My app has it's theme (colors and styles) delivered via a REST API. Whenever a theme is changed on the server the app gets notified via socket communication so it can get the new theme via REST.</p>
  
  <p>The theme is fetched in a Redux Saga and the colors are saved to both the Redux store (to enable persisting to disk) as well as a "global" singleton object which I can reach from everywhere, i.e. even non connected components.</p>
  
  <p>When a new theme arrives I want to re-render every element in the app. I have managed to re-render all store-connected components in a hacky way - by injecting a dummy property which changes when new a theme is changed.</p>
  
  <p>Is there a way to <code>forceUpdate</code> the whole app?</p>
  
  <p>Problem areas:</p>
  
  <ul>
  <li><p>dumb components (not aware of theme changes)</p></li>
  <li><p>really smart components (aware of the store, but knows not to re-render in vain)</p></li>
  </ul>
  
  <p>Here is an example of a hacky force-re-render of react-navigation:</p>
  
  <pre><code>myAppContainer.render() {
  
    &lt;AppRouter
      screenProps={this.props.styling}
    /&gt;
  }
  </code></pre>
  
  <p>I.e. my AppContainer gets <code>this.props.styling</code> via <code>mapStateToProps</code>. The wrapped <code>StackNavigator</code> gets this via <code>screenProps</code> which forces the navigator to re-render when the store gets new styling data.</p>
  
  <p>I don't want to continue on this hacky path. Instead I'd like a <code>forceUpdateEverything()</code> function which I could call from my <code>AppContainer</code>. Is there such a thing?</p>
  
  <hr>
  
  <p><strong>Edit to comment the answer from @bennygenel:</strong></p>
  
  <p>I think what Benny describes is essentially what I did. A change in this.props.styling triggers a re-render. </p>
  
  <p>But I'd have to implement this into all components and "hack" react-navigation via its screenProps as I described. This is what I'd hoped to avoid, but I guess I'll have to take the long way.. </p>
  
  <p>I'm using immutable.js, so sending in the complete style instead of just the theme name is no big deal as it's only a pointer which is speedy to compare with it's former value to look for changes.</p>
  
  <p>I didn't get forceUpdate() to work other than on the component it's called on. I assume it doesn't get propagated recursively through all children.</p>