title: Where to put all the screens which are common in multiple stack navigators? - React Navigation v5
body: <p>Following is the hierarchy of my app navigators</p>
  <p>├── appNavigator ( Bottom Tab Navigator)</p>
  <ul>
  <li><p>├── feed (Stack Navigator)</p>
  <ul>
  <li>postDetailScreen</li>
  <li>pageDetailScreen</li>
  <li>ProfileDetailScreen</li>
  <li>...other screens</li>
  </ul>
  </li>
  <li><p>├── notifications (Stack Navigator)</p>
  <ul>
  <li>ProfileDetailScreen</li>
  <li>PageDetailScreen</li>
  <li>PostDetailScreen</li>
  <li>...other screens</li>
  </ul>
  </li>
  <li><p>├── profile (Stack Navigator)</p>
  <ul>
  <li>ProfileDetailScreen</li>
  <li>PageDetailScreen</li>
  <li>PostDetailScreen</li>
  <li>...other screens</li>
  </ul>
  </li>
  </ul>
  <p>Now the problem is I have to duplicate the screens (ProfileDetail, PostDetail and PageDetail) which are common among all the stacks in order for them to be accessible within the stacks.</p>
  <p>Is there a better solution for this usecase. Where should I put the common screens so that they are available in all the children stack and I don't have to duplicate them everywhere.</p>
  <p>Here's an open github issue which I went through but could not find a good solution
  <a href="https://github.com/react-navigation/react-navigation/issues/6434#issuecomment-551995350" rel="noreferrer">Isuue</a></p>