- Home.js
import React from 'react';
import { Text, View } from 'react-native';
function HelloWorldApp() {
return (
<View
style={{
flex: 1,
justifyContent: "center",
alignItems: "center",
}}>
<Text>home Screen</Text>
</View>
)
}
export default HelloWorldApp;
2 . Setting.js
import React from 'react';
import { Text, View } from 'react-native';
function HelloWorldApp() {
return (
<View
style={{
flex: 1,
justifyContent: "center",
alignItems: "center"
}}>
<Text>Setting Screen</Text>
</View>
)
}
export default HelloWorldApp;
3 . Router.js
import * as React from 'react';
import { Text, View } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import Ionicons from 'react-native-vector-icons/Ionicons';
import Home from './App/Screen/Home/Home'
import Setting from './App/Screen/Home/Setting'
const Tab = createBottomTabNavigator();
export default function App() {
return (
<NavigationContainer>
<Tab.Navigator
screenOptions={({ route }) => ({
tabBarIcon: ({ focused, color, size }) => {
let iconName;
if (route.name === 'Home') {
iconName = focused
? 'ios-information-circle'
: 'ios-information-circle-outline';
} else if (route.name === 'Settings') {
iconName = focused ? 'ios-list-box' : 'ios-list';
}
// You can return any component that you like here!
return <Ionicons name={iconName} size={size} color={color} />;
},
})}
tabBarOptions={{
activeTintColor: 'black',
inactiveTintColor: 'gray',
}}
>
<Tab.Screen name="Home" component={Home} />
<Tab.Screen name="Settings" component={Setting} />
</Tab.Navigator>
</NavigationContainer>
);
}
Part -2
How to chnage icon to image in react navigation 5x
import * as React from 'react';
import { Text, View } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import Ionicons from 'react-native-vector-icons/Ionicons';
import Home from './App/Screen/Home/Home'
import Setting from './App/Screen/Home/Setting'
const Tab = createBottomTabNavigator();
export default function App() {
return (
<NavigationContainer>
<Tab.Navigator
screenOptions={({ route }) => ({
tabBarIcon: ({ focused, color, size }) => {
if (route.name == 'Training') {
image = focused ? require('../../Assets/Images/Training.png') :
require('../../Assets/Images/training_inactive.png')
}
else if (route.name == 'Course') {
image = focused ? require('../../Assets/Images/Cource.png') :
require('../../Assets/Images/course_inactive.png')
}
else if (route.name == 'Goal') {
image = focused ? require('../../Assets/Images/Goal.png') :
require('../../Assets/Images/goal_inactive.png')
}
else if (route.name == 'New Feed') {
image = focused ? require('../../Assets/Images/New_feed.png') :
require('../../Assets/Images/star_inactive.png')
}
else if (route.name == 'Profile') {
image = focused ? require('../../Assets/Images/user.png') :
require('../../Assets/Images/use_inactive.png')
}
})}
tabBarOptions={{
activeTintColor: 'black',
inactiveTintColor: 'gray',
}}
>
<Tab.Screen name="Home" component={Home} />
<Tab.Screen name="Settings" component={Setting} />
</Tab.Navigator>
</NavigationContainer>
);
}
How to redirect next screen using stack navigator in react native
import * as React from 'react';
import { Text, View } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import Ionicons from 'react-native-vector-icons/Ionicons';
import Home from './App/Screen/Home/Home'
import Setting from './App/Screen/Home/Setting'
import Profile from './App/Screen/Home/Profile'
import { createStackNavigator } from '@react-navigation/stack';
function getTabBarVisible(route) {
const routeName = route.state
? route.state.routes[route.state.index].name
: route.params?.screen || 'Profile';
if (routeName === 'Profile') {
return false;
}
return true;
}
const Tab = createBottomTabNavigator();
const Stack = createStackNavigator();
function MyStack() {
return (
<Stack.Navigator>
<Stack.Screen name="Profile" component={Profile} />
<Stack.Screen name="Home" component={Home} />
</Stack.Navigator>
);
}
export default function App() {
return (
<NavigationContainer>
<Tab.Navigator
screenOptions={({ route }) => ({
tabBarIcon: ({ focused, color, size }) => {
if (route.name == 'Training') {
image = focused ? require('../../Assets/Images/Training.png') :
require('../../Assets/Images/training_inactive.png')
}
else if (route.name == 'Course') {
image = focused ? require('../../Assets/Images/Cource.png') :
require('../../Assets/Images/course_inactive.png')
}
else if (route.name == 'Goal') {
image = focused ? require('../../Assets/Images/Goal.png') :
require('../../Assets/Images/goal_inactive.png')
}
else if (route.name == 'New Feed') {
image = focused ? require('../../Assets/Images/New_feed.png') :
require('../../Assets/Images/star_inactive.png')
}
else if (route.name == 'Profile') {
image = focused ? require('../../Assets/Images/user.png') :
require('../../Assets/Images/use_inactive.png')
}
return (
<Image
source={image}
style={{
width: 15, height: 15,
}}
/>
)
},
})}
tabBarOptions={{
activeTintColor: 'black',
inactiveTintColor: 'gray',
}}
>
<Tab.Screen name="Home" component={MyStack} options={({ route }) => ({ tabBarVisible: getTabBarVisible(route) })} />
<Tab.Screen name="Settings" component={Setting} />
</Tab.Navigator>
</NavigationContainer>
);
}
Tag:
react navigation 5x
No comments:
Post a Comment