title: react native new screen onPress with BottomTabBar
body: <p>I got stuck in my code.</p>
  <p>how do i get redirected to a new screen using code from the same file?</p>
  <p>App.js:</p>
  <pre><code>const Navigator = ()=&gt; {
      return(
          &lt;NavigationContainer&gt;
              &lt;Tab.Navigator
              initialRouteName={homeName}
              &gt;
                  &lt;Tab.Screen name={homeName} component={HomeScreen} options={{ headerShown: false, tabBarIcon:()=&gt;(&lt;Icon name={&quot;home&quot;} size={25}/&gt;)}}/&gt;
                  &lt;Tab.Screen name={listName} component={ListScreen} options={{headerShown: false, tabBarIcon:()=&gt;(&lt;Icon name={&quot;list&quot;} size={20}/&gt;)}}/&gt;
                  &lt;Tab.Screen name={perizieName} component={PeritiScreen} options={{ headerShown: false, tabBarIcon:()=&gt;(&lt;Icon name={&quot;laptop&quot;} size={25}/&gt;) }}/&gt;
              &lt;/Tab.Navigator&gt;
          &lt;/NavigationContainer&gt;
      );
  }
  </code></pre>
  <p>===UPDATE===</p>
  <p>I would like to do this but unfortunately I don't find the right way to do it, in addition I should be able to pass the &quot;provincia&quot; parameter.</p>
  <pre><code>&lt;SafeAreaView&gt;
              &lt;View style={style.searchContainer}&gt;
                  &lt;Text style={{paddingLeft:10}}&gt;
                      &lt;Icon name=&quot;search&quot; size={25} color={COLORS.grey} /&gt;
                  &lt;/Text&gt;
                  &lt;TextInput placeholder=&quot;Cerca provincia&quot; style={{fontSize:20, paddingLeft:10}} /&gt;
              &lt;/View&gt;
              &lt;ScrollView&gt;
              {
                  masterList.map((provincia)=&gt;{
                      return(
                          &lt;View&gt;
                              &lt;View style={{flexDirection:&quot;row&quot;}}&gt;
                                  &lt;View&gt;
                                      &lt;Text style={style.provincia}&gt;
                                          {provincia.nome}
                                      &lt;/Text&gt;
                                      &lt;Text style={{marginLeft:10, fontSize: 12, color:COLORS.grey, marginBottom:5}}&gt;Ristoranti consigliati nella provincia di {provincia.nome},{&quot;\n&quot;}selezione quello che preferisci&lt;/Text&gt;
                                  &lt;/View&gt;
                                  &lt;View style={{alignSelf:&quot;center&quot;, alignItems:&quot;center&quot;, paddingLeft: &quot;18%&quot;}}&gt;
                                      &lt;Icon 
                                      onPress={&quot;i need to go to DetailsScreen&quot;} // &lt;== here
                                      name={&quot;arrow-right&quot;} size={20} /&gt;
                                  &lt;/View&gt;
                              &lt;/View&gt;
                              &lt;ScrollView
                              horizontal={true}
                              showsHorizontalScrollIndicator={false}
                              &gt;
                                  {
                                      provincia.ristoranti.map((ristorante)=&gt;{
                                          return(
                                              &lt;CardResturant
                                              resturant = {ristorante}
                                              /&gt;
                                          )
                                      })
                                  }
                              &lt;/ScrollView&gt;
                          &lt;/View&gt;
                  )})
              }
              
              &lt;/ScrollView&gt;
          &lt;/SafeAreaView&gt;
  </code></pre>
  <p>The file that recalls the code shown above in turn contains navigation:</p>
  <pre><code>const ListScreen = ()=&gt;{
  
      return(
          &lt;SafeAreaView style={{flex:1}}&gt;
              &lt;Tab.Navigator
              swipeEnabled={false}
              initialRouteName={&quot;Lista completa&quot;}
              style={style.topTap}
              &gt;
                  &lt;Tab.Screen name=&quot;Mappa&quot; component={MapScreen} /&gt;
                  &lt;Tab.Screen name=&quot;Lista completa&quot; component={AllScreen} /&gt; // &lt;== the code shown above
              &lt;/Tab.Navigator&gt;
          &lt;/SafeAreaView&gt;
      );
  };
  </code></pre>
  <p>once I understand this, I can in turn adapt it to the  to make it clickable and show the details of the resturant.</p>