React Native - Creating sections in a list with clickable link to screen

Question

Im trying to create a Settings Page like so in React Native:

Using SectionList in react native, but im not sure how I pass in a navigation to link to another view.

For example

• when I click Edit Profile, this should take me to another page.
• when I click on Privacy policy, this should open webpage with link.

UPDATED CODE

settingsNavigator.js

import React from 'react';
import { createStackNavigator } from "@react-navigation/stack";

import SettingsScreen from "../screens/settingsScreen";
import EditProfileScreen from "../screens/editProfileScreen"

const SettingsStack = createStackNavigator();

const SettingsNavigator = () => (
    <SettingsStack.Navigator>
        <SettingsStack.Screen name="Settings" component={SettingsScreen} options={{ headerShown: false }} />
        <SettingsStack.Screen name="EditProfileScreen" component={EditProfileScreen} options={{ title: 'Edit Profile' }} />
    </SettingsStack.Navigator>
)

export default SettingsNavigator

settingScreen.js

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 (
        <Screen style={styles.screen}>
            <TouchableOpacity onPress={() => navigation.navigate("EditProfileScreen")}>
                <Card style={styles.list} >
                    <Text>Edit Profile</Text>
                </Card>
            </TouchableOpacity>
        </Screen>
    )
}

const styles = StyleSheet.create({
    list: {
        padding: 20,
        backgroundColor: 'white',
        borderRadius: 5,
        marginTop: 10,
      },
})

export default SettingsScreen

editProfileScreen

import React from 'react';
import { Text, StyleSheet} from 'react-native';

import Screen from '../Components/Screen'

function EditProfileScreen({navigation}) {
    return (
        <Screen style={styles.screen}>
            <Text>Edit Profile Screen</Text>
        </Screen>
    )
}

const styles = StyleSheet.create({
    
})

export default EditProfileScreen

error im getting:

The action 'NAVIGATE' with payload {"name":"EditProfileScreen"} was not handled by any navigator.

Do you have a screen named 'EditProfileScreen'?

question from:https://stackoverflow.com/questions/65647568/react-native-creating-sections-in-a-list-with-clickable-link-to-screen

Answer 1

Use React Navigation for navigating from one screen to another and the Linking component of react-native open URL in the browser.

Working App: Expo Snack

App Output:

Sample App:

import * as React from 'react';
import {
  Text,
  View,
  StyleSheet,
  TouchableOpacity,
  Linking,
} from 'react-native';
import Constants from 'expo-constants';

import { Card } from 'react-native-paper';

import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
const Stack = createStackNavigator();

const url =
  'https://stackoverflow.com/questions/65647568/react-native-creating-sections-in-a-list-with-clickable-link-to-screen#65647648';

export default function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name={'Home'} component={Home} />

        <Stack.Screen name={'EditProfile'} component={EditProfile} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

const Home = ({ navigation }) => {
  return (
    <View style={styles.container}>
      <TouchableOpacity onPress={() => navigation.navigate('EditProfile')}>
        <Card style={styles.list}>
          <Text>EditProfile</Text>
        </Card>
      </TouchableOpacity>
      <TouchableOpacity onPress={() => Linking.openURL(url)}>
        <Card style={styles.list}>
          <Text>Privacy Policy</Text>
        </Card>
      </TouchableOpacity>
    </View>
  );
};
const EditProfile = ({ navigation }) => {
  return (
    <View style={styles.container}>
      <Text style={styles.text}>EditProfile Screen</Text>
    </View>
  );
};


const styles = StyleSheet.create({
  container: {
    flex: 1,
    paddingTop: Constants.statusBarHeight,
    backgroundColor: '#ecf0f1',
    padding: 8,
  },
  list: {
    padding: 20,
    backgroundColor: 'white',
    borderRadius: 5,
    marginTop: 10,
  },
});