title: Navigate to a screen of parent navigator from child navigator screen
body: <p>I am new to React Native and I have been building a simple Food Recipe app. My main <code>Stack Navigator</code> contains two screens: <code>Bottom Tab Navigator</code> and <code>Recipe screen</code>. I am in <code>Home screen</code> in the <code>Tab Navigator</code> and when I press any recipe, I want to pass recipe props and navigate to <code>Recipe screen</code> in the main <code>Stack Navigator</code>. Unfortunately, I haven't found any solution to this.
  Could you please help me solve this?</p>
  
  <p>This is the main file <code>App.js</code></p>
  
  <pre><code>const Navigator = createBottomTabNavigator(
    {
      Home: Home,
      Add: Add,
      Profile: Profile
    }
  );
  
  const Stack = createStackNavigator(
    {
      Navigator: Navigator,
      Recipe: Recipe
    },
    {
      headerMode: "none",
      navigationOptions: {
          headerVisible: false,
      }
    }
  );
  
  export default createAppContainer(Stack)
  </code></pre>
  
  <p>This is my <code>Home Screen</code> class</p>
  
  <pre><code>export default class Home extends Component {
      render() {
          return (
              &lt;SafeAreaView style={styles.container}&gt;
                  &lt;View style={styles.header}&gt;
                      &lt;Text style={styles.headerTitle}&gt;Recipes&lt;/Text&gt;
                  &lt;/View&gt;
  
                  &lt;ScrollView style={styles.categoryContainer}&gt;
                      &lt;Category name={"All Foods"} recipes={recipes} /&gt;
                      &lt;Category name={"Meat"} recipes={[ recipes[1], recipes[3] ]} /&gt;
                      &lt;Category name={"Vegetarian"} recipes={[ recipes[0], recipes[2] ]} /&gt;
                      &lt;Category name={"Desserts"} recipes={[ recipes[4] ]} /&gt;
                  &lt;/ScrollView&gt;
              &lt;/SafeAreaView&gt;
          )
      }
  }
  </code></pre>
  
  <p>This is the <code>Category</code> class</p>
  
  <pre><code>export default class Category extends Component {
      render() {
          return (
              &lt;View style={styles.container}&gt;
                  &lt;View style={styles.categoryHeader}&gt;
                      &lt;Text style={styles.categoryHeaderTitle}&gt;{this.props.name}&lt;/Text&gt;
                  &lt;/View&gt;
  
                  &lt;ScrollView &gt;
                      &lt;View style={styles.categoryContent}&gt;
                          &lt;FlatList
                              data={this.props.recipes}
                              renderItem={({ item }) =&gt; &lt;Block name={item.name} image={item.image} time={item.time} portions={item.portions} /&gt;}
                              keyExtractor={(item, index) =&gt; index.toString()}
                              horizontal={true}
                          /&gt; 
                      &lt;/View&gt;  
                  &lt;/ScrollView&gt;
              &lt;/View&gt;
          )
      }
  }
  </code></pre>
  
  <p>This is the actual recipe block where I want to navigate all the way back to the <code>Recipe screen</code> and pass recipe props using <code>onPress={}</code> function</p>
  
  <pre><code>export default class Block extends Component {
      render() {
          return (
              &lt;TouchableOpacity style={styles.container} onPress={null} &gt;
                  &lt;Image style={styles.image} source={this.props.image} /&gt;
  
                  &lt;Text style={styles.title}&gt;{this.props.name}&lt;/Text&gt;
                  &lt;Text style={styles.info}&gt;{this.props.time} min | portions: {this.props.portions}&lt;/Text&gt;
              &lt;/TouchableOpacity&gt;
          )
      }
  }
  </code></pre>
  
  <p>Thank you for all your answers</p>