title: React Native - Creating sections in a list with clickable link to screen
body: <p>Im trying to create a <code>Settings Page</code> like so in <code>React Native</code>:</p>
  <p><a href="https://i.stack.imgur.com/CxdRz.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/CxdRz.png" alt="enter image description here" /></a></p>
  <p>Using <code>SectionList</code> in <code>react native</code>, but im not sure how I pass in a <code>navigation</code> to link to another <code>view</code>.</p>
  <p>For example</p>
  <ul>
  <li>when I click <code>Edit Profile</code>, this should take me to another page.</li>
  <li>when I click on <code>Privacy policy</code>, this should open webpage with link.</li>
  </ul>
  <p><strong>UPDATED CODE</strong></p>
  <p>settingsNavigator.js</p>
  <pre><code>import React from 'react';
  import { createStackNavigator } from &quot;@react-navigation/stack&quot;;
  
  import SettingsScreen from &quot;../screens/settingsScreen&quot;;
  import EditProfileScreen from &quot;../screens/editProfileScreen&quot;
  
  const SettingsStack = createStackNavigator();
  
  const SettingsNavigator = () =&gt; (
      &lt;SettingsStack.Navigator&gt;
          &lt;SettingsStack.Screen name=&quot;Settings&quot; component={SettingsScreen} options={{ headerShown: false }} /&gt;
          &lt;SettingsStack.Screen name=&quot;EditProfileScreen&quot; component={EditProfileScreen} options={{ title: 'Edit Profile' }} /&gt;
      &lt;/SettingsStack.Navigator&gt;
  )
  
  export default SettingsNavigator
  </code></pre>
  <p>settingScreen.js</p>
  <pre><code>import React from 'react';
  import { Text, StyleSheet, TouchableOpacity, Linking } from 'react-native';
  import { Card } from 'react-native-paper'
  
  import Screen from '../Components/Screen'
  
  function SettingsScreen({navigation}) {
      return (
          &lt;Screen style={styles.screen}&gt;
              &lt;TouchableOpacity onPress={() =&gt; navigation.navigate(&quot;EditProfileScreen&quot;)}&gt;
                  &lt;Card style={styles.list} &gt;
                      &lt;Text&gt;Edit Profile&lt;/Text&gt;
                  &lt;/Card&gt;
              &lt;/TouchableOpacity&gt;
          &lt;/Screen&gt;
      )
  }
  
  const styles = StyleSheet.create({
      list: {
          padding: 20,
          backgroundColor: 'white',
          borderRadius: 5,
          marginTop: 10,
        },
  })
  
  export default SettingsScreen
  </code></pre>
  <p>editProfileScreen</p>
  <pre><code>import React from 'react';
  import { Text, StyleSheet} from 'react-native';
  
  import Screen from '../Components/Screen'
  
  function EditProfileScreen({navigation}) {
      return (
          &lt;Screen style={styles.screen}&gt;
              &lt;Text&gt;Edit Profile Screen&lt;/Text&gt;
          &lt;/Screen&gt;
      )
  }
  
  const styles = StyleSheet.create({
      
  })
  
  export default EditProfileScreen
  </code></pre>
  <p>error im getting:</p>
  <pre><code>The action 'NAVIGATE' with payload {&quot;name&quot;:&quot;EditProfileScreen&quot;} was not handled by any navigator.
  
  Do you have a screen named 'EditProfileScreen'?
  </code></pre>