Scribd
Upload
2 views13 pages

React Navigation Stack Overview

The document outlines a React Native application structure featuring stack and tab navigation. It includes code snippets for setting up a stack navigator with Home and Details screens, as well as a tab navigator with Profile and More screens. The application allows users to navigate between different screens using buttons and icons.

Uploaded by

johnmichaelrivera028
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
2 views13 pages

React Navigation Stack Overview

The document outlines a React Native application structure featuring stack and tab navigation. It includes code snippets for setting up a stack navigator with Home and Details screens, as well as a tab navigator with Profile and More screens. The application allows users to navigate between different screens using buttons and icons.

Uploaded by

johnmichaelrivera028
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd

RIVERA, JOHN MICHAEL N.

BSIT 2B
STACK NAVIGATION
/root
├── [Link]
├── navigation/
│ ├── [Link]
├── screens/
│ ├── [Link]
│ ├── [Link]
//[Link]
import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import StackNavigator from './navigation/StackNavigator';

export default function App() {


return (
<NavigationContainer>
<StackNavigator />
</NavigationContainer>
);
}
//navigation/[Link]
import React from 'react';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import HomeScreen from '../screens/HomeScreen';
import DetailsScreen from '../screens/DetailsScreen';
const Stack = createNativeStackNavigator();
export default function StackNavigator() {
return (
<[Link]>
<[Link] name="Home" component={HomeScreen} />
<[Link] name="Details" component={DetailsScreen} />
</[Link]>
);
}
//screens/[Link]
import React from 'react';
import { View, Text, Button } from 'react-native';

export default function HomeScreen({ navigation }) {


return (
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<Text style={{ fontSize: 20, marginBottom: 20 }}>Home Screen</Text>
<Button title="Go to Details" onPress={() => [Link]('Details')} />
</View>
);
}

//screens/[Link]
import React from 'react';
import { View, Text, Button } from 'react-native';

export default function DetailsScreen({ navigation }) {


return (
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<Text style={{ fontSize: 20, marginBottom: 20 }}>Details Screen</Text>
<Button title="Go Back" onPress={() => [Link]()} />
</View>
);
}

TAB NAVIGATION
//[Link]
import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { Ionicons } from '@expo/vector-icons';
import HomeScreen from './screens/HomeScreen';
import SettingsScreen from './screens/SettingsScreen';
import ProfileScreen from './screens/ProfileScreen';

const Tab = createBottomTabNavigator();

export default function App() {


return (
<NavigationContainer>
<[Link]
screenOptions={({ route }) => ({
tabBarIcon: ({ focused, color, size }) => {
let iconName;

if ([Link] === 'Home') {


iconName = focused ? 'home' : 'home-outline';
} else if ([Link] === 'Settings') {
iconName = focused ? 'settings' : 'settings-outline';
} else if ([Link] === 'Profile') {
iconName = focused ? 'person' : 'person-outline';
}

return <Ionicons name={iconName} size={size} color={color} />;


},
tabBarActiveTintColor: 'tomato',
tabBarInactiveTintColor: 'gray',
})}
>
<[Link] name="Home" component={HomeScreen} />
<[Link] name="Settings" component={SettingsScreen} />
<[Link] name="Profile" component={ProfileScreen} />
</[Link]>
</NavigationContainer>
);
}

//screens/[Link]
import React from 'react';
import { View, Text, StyleSheet } from 'react-native';

export default function HomeScreen() {


return (
<View style={[Link]}>
<Text style={[Link]}>Welcome to the Home Screen!</Text>
</View>
);
}

const styles = [Link]({


container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#fff',
},
text: {
fontSize: 20,
fontWeight: 'bold',
},
});

//screens/[Link]
import React from 'react';
import { View, Text, StyleSheet } from 'react-native';

export default function SettingsScreen() {


return (
<View style={[Link]}>
<Text style={[Link]}>Settings Screen</Text>
</View>
);
}

const styles = [Link]({


container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#fff',
},
text: {
fontSize: 20,
fontWeight: 'bold',
},
});

//screens/[Link]
import React from 'react';
import { View, Text, StyleSheet } from 'react-native';

export default function ProfileScreen() {


return (
<View style={[Link]}>
<Text style={[Link]}>Profile Screen</Text>
</View>
);
}

const styles = [Link]({


container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#fff',
},
text: {
fontSize: 20,
fontWeight: 'bold',
},
});
TAB WITH STACK NAVIGATION
/root
├── [Link]
├── navigation/
│ ├── [Link]
│ ├── [Link]
├── screens/
│ ├── [Link]
│ ├── [Link]
│ ├── [Link]
│ ├── [Link]

//[Link]
import React from 'react';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import ProfileScreen from '../screens/ProfileScreen';
import StackNavigator from './StackNavigator';
import { Ionicons } from '@expo/vector-icons';

const Tab = createBottomTabNavigator();

export default function TabNavigator() {


return (
<[Link]
screenOptions={({ route }) => ({
tabBarIcon: ({ color, size }) => {
let iconName;

if ([Link] === 'Profile') {


iconName = 'person-circle-outline';
} else if ([Link] === 'More') {
iconName = 'ellipsis-horizontal-circle-outline';
}

return <Ionicons name={iconName} size={size} color={color} />;


},
})}
>
<[Link] name="Profile" component={ProfileScreen} />
<[Link] name="More" component={StackNavigator} options={{ headerShown:
false }} />
</[Link]>
);
}

//navigation/[Link]
import React from 'react';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import ProfileScreen from '../screens/ProfileScreen';
import StackNavigator from './StackNavigator';

const Tab = createBottomTabNavigator();


export default function TabNavigator() {
return (
<[Link]>
<[Link] name="Profile" component={ProfileScreen} />
<[Link] name="More" component={StackNavigator} options={{ headerShown:
false }} />
</[Link]>
);
}

//navigation/[Link]
import React from 'react';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import MoreScreen from '../screens/MoreScreen';
import HomeScreen from '../screens/HomeScreen';
import DetailsScreen from '../screens/DetailsScreen';

const Stack = createNativeStackNavigator();

export default function StackNavigator() {


return (
<[Link]>
<[Link] name="MoreScreen" component={MoreScreen} options={{ title:
"More" }} />
<[Link] name="Home" component={HomeScreen} />
<[Link] name="Details" component={DetailsScreen} />
</[Link]>
);
}

//screens/[Link]

import React from 'react';


import { View, Text, Button } from 'react-native';

export default function ProfileScreen({ navigation }) {


return (
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<Text style={{ fontSize: 20 }}>👤 Profile Screen</Text>
<Button title="More" onPress={() => [Link]('More')} />
</View>
);
}

//screens/[Link]
import React from 'react';
import { View, Text, Button } from 'react-native';

export default function MoreScreen({ navigation }) {


return (
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<Text style={{ fontSize: 20, marginBottom: 20 }}>📂 More Options</Text>
<Button title="Go to Home" onPress={() => [Link]('Home')} />
</View>
);
}

//screens/[Link]

import React from 'react';


import { View, Text, Button } from 'react-native';

export default function HomeScreen({ navigation }) {


return (
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<Text style={{ fontSize: 20 }}>🏠 Home Screen</Text>
<Button title="Go to Details" onPress={() =>
[Link]('Details')} />
</View>
);
}

//screens/[Link]
import React from 'react';
import { View, Text, Button } from 'react-native';

export default function DetailsScreen({ navigation }) {


return (
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<Text style={{ fontSize: 20 }}>📄 Details Screen</Text>
<Button title="Go Back" onPress={() => [Link]()} />
</View>
);
}

You might also like