Images:--
/**
*/**
* Sample React Native App
* https://github.com/facebook/react-native
*
* @format
* @flow strict-local
*/
import React, {Component} from 'react';
import {NavigationContainer} from '@react-navigation/native';
import MainTabScreen from './screens/MainTabScreen';
const Drawer = createDrawerNavigator();
const App = () => {
return (
<NavigationContainer>
<Drawer.Navigator initialRouteName="Home">
<Drawer.Screen name="Home" component={MainTabScreen} />
{/* <Drawer.Screen name="Details" component={DetailsStackScreen} /> */}
</Drawer.Navigator>
</NavigationContainer>
);
};
export default App;
sd
/**
* Sample React Native App
* https://github.com/facebook/react-native
*
* @format
* @flow strict-local
*/
import React, {Component} from 'react';
import {NavigationContainer} from '@react-navigation/native';
import {createStackNavigator} from '@react-navigation/stack';
import {createDrawerNavigator} from '@react-navigation/drawer';
import Icon from 'react-native-vector-icons/Ionicons';
const HomeStack = createStackNavigator();
const DetailsStack = createStackNavigator();
const Drawer = createDrawerNavigator();
import {
SafeAreaView,
StyleSheet,
ScrollView,
Text,
Button,
StatusBar,
View,
} from 'react-native';
const HomeScreen = ({navigation}) => {
return (
<SafeAreaView
style={{
flex: 1,
color: '#f59042',
alignContent: 'center',
justifyContent: 'center',
alignItems: 'center',
}}>
<Text
style={{
color: '#f59042',
alignContent: 'center',
justifyContent: 'center',
alignItems: 'center',
}}>
{/* align center styles are not working */} Home Screen
</Text>
<Button
title="Go to Details Screen"
onPress={() => navigation.navigate('Details')}
/>
</SafeAreaView>
);
};
const DetailsScreen = ({navigation}) => {
return (
<SafeAreaView
style={{
flex: 1,
color: '#f59042',
alignContent: 'center',
justifyContent: 'center',
alignItems: 'center',
}}>
<Text>Details Screen</Text>
<Button
title="Go to Details Screen.. Again"
onPress={() => navigation.push('Details')}
/>
<Button title="Go to Home" onPress={() => navigation.navigate('Home')} />
<Button title="Go Back" onPress={() => navigation.goBack('Details')} />
<Button
title="Go to First Screen"
onPress={() => navigation.popToTop('Details')}
/>
</SafeAreaView>
);
};
const HomeStackScreen = ({navigation}) => (
<HomeStack.Navigator
screenOptions={{
headerStyle: {
backgroundColor: '#f59042',
},
headerTintColor: '#00ff44',
headerTitleStyle: {fontWeight: 'bold'},
}}>
<HomeStack.Screen
name="Home"
component={HomeScreen}
options={{
title: 'Overview',
headerLeft: () => (
<Icon.Button
name="md-menu"
size={25}
backgroundColor="#f59042"
onPress={() => {
navigation.openDrawer();
}}></Icon.Button>
),
headerTintColor: '#00ff44',
headerTitleStyle: {fontWeight: 'bold'},
}}
/>
</HomeStack.Navigator>
);
const DetailsStackScreen = ({navigation}) => (
<DetailsStack.Navigator
screenOptions={{
headerStyle: {
backgroundColor: '#f59042',
},
headerTintColor: '#00ff44',
headerTitleStyle: {fontWeight: 'bold'},
}}>
<DetailsStack.Screen
name="Home"
component={DetailsScreen}
options={{
title: 'Second',
headerLeft: () => (
<Icon.Button
name="md-menu"
size={25}
backgroundColor="#f59042"
onPress={() => {
navigation.openDrawer();
}}></Icon.Button>
),
headerTintColor: '#00ff44',
headerTitleStyle: {fontWeight: 'bold'},
}}
/>
</DetailsStack.Navigator>
);
const App = () => {
return (
<NavigationContainer>
<Drawer.Navigator initialRouteName="Home">
<Drawer.Screen name="Home" component={HomeStackScreen} />
<Drawer.Screen name="Details" component={DetailsStackScreen} />
</Drawer.Navigator>
</NavigationContainer>
);
};
export default App;
HomeScreen.js
import React, {Component} from 'react';
import {createStackNavigator} from '@react-navigation/stack';
import {createDrawerNavigator} from '@react-navigation/drawer';
import {NavigationContainer} from '@react-navigation/native';
import Icon from 'react-native-vector-icons/Ionicons';
const HomeStack = createStackNavigator();
import {
SafeAreaView,
StyleSheet,
ScrollView,
Text,
Button,
StatusBar,
View,
} from 'react-native';
const HomeScreen = ({navigation}) => {
return (
<SafeAreaView
style={{
flex: 1,
color: '#f59042',
alignContent: 'center',
justifyContent: 'center',
alignItems: 'center',
}}>
<Text
style={{
color: '#f59042',
alignContent: 'center',
justifyContent: 'center',
alignItems: 'center',
}}>
Home Screen
</Text>
<Button
title="Go to Details Screen"
onPress={() => navigation.navigate('Details')}
/>
</SafeAreaView>
);
};
const HomeStackScreen = ({navigation}) => (
<HomeStack.Navigator
screenOptions={{
headerStyle: {
backgroundColor: '#f59042',
},
headerTintColor: '#00ff44',
headerTitleStyle: {fontWeight: 'bold'},
}}>
<HomeStack.Screen
name="Home"
component={HomeScreen}
options={{
title: 'Home',
headerLeft: () => (
<Icon.Button
name="md-menu"
size={25}
backgroundColor="#f59042"
onPress={() => {
navigation.openDrawer();
}}></Icon.Button>
),
headerTintColor: '#00ff44',
headerTitleStyle: {fontWeight: 'bold'},
}}
/>
</HomeStack.Navigator>
);
export default HomeStackScreen;
DetailsScreen.js(Cart)
import React, {Component} from 'react';
import {createStackNavigator} from '@react-navigation/stack';
import Icon from 'react-native-vector-icons/Ionicons';
const DetailsStack = createStackNavigator();
import {
SafeAreaView,
StyleSheet,
ScrollView,
Text,
Button,
StatusBar,
View,
} from 'react-native';
const DetailsScreen = ({navigation}) => {
return (
<SafeAreaView
style={{
flex: 1,
color: '#f59042',
alignContent: 'center',
justifyContent: 'center',
alignItems: 'center',
}}>
<Text>Details Screen</Text>
<Button
title="Go to Details Screen.. Again"
onPress={() => navigation.push('Details')}
/>
<Button title="Go to Home" onPress={() => navigation.navigate('Home')} />
<Button title="Go Back" onPress={() => navigation.goBack('Details')} />
<Button
title="Go to First Screen"
onPress={() => navigation.popToTop('Details')}
/>
</SafeAreaView>
);
};
const DetailsStackScreen = ({navigation}) => (
<DetailsStack.Navigator
screenOptions={{
headerStyle: {
backgroundColor: '#f59042',
},
headerTintColor: '#00ff44',
headerTitleStyle: {fontWeight: 'bold'},
}}>
<DetailsStack.Screen
name="Home"
component={DetailsScreen}
options={{
title: 'Cart',
headerLeft: () => (
<Icon.Button
name="md-menu"
size={25}
backgroundColor="#f59042"
onPress={() => {
navigation.openDrawer();
}}></Icon.Button>
),
headerTintColor: '#00ff44',
headerTitleStyle: {fontWeight: 'bold'},
}}
/>
</DetailsStack.Navigator>
);
export default DetailsStackScreen;
ExploreScreen.js
import React, {Component} from 'react';
import {createStackNavigator} from '@react-navigation/stack';
import Icon from 'react-native-vector-icons/Ionicons';
const DetailsStack = createStackNavigator();
import {
SafeAreaView,
StyleSheet,
ScrollView,
Text,
Button,
StatusBar,
View,
} from 'react-native';
const DetailsScreen = ({navigation}) => {
return (
<SafeAreaView
style={{
flex: 1,
color: '#f59042',
alignContent: 'center',
justifyContent: 'center',
alignItems: 'center',
}}>
<Text>Details Screen</Text>
<Button
title="Go to Details Screen.. Again"
onPress={() => navigation.push('Details')}
/>
<Button title="Go to Home" onPress={() => navigation.navigate('Home')} />
<Button title="Go Back" onPress={() => navigation.goBack('Details')} />
<Button
title="Go to First Screen"
onPress={() => navigation.popToTop('Details')}
/>
</SafeAreaView>
);
};
const DetailsStackScreen = ({navigation}) => (
<DetailsStack.Navigator
screenOptions={{
headerStyle: {
backgroundColor: '#f59042',
},
headerTintColor: '#00ff44',
headerTitleStyle: {fontWeight: 'bold'},
}}>
<DetailsStack.Screen
name="Home"
component={DetailsScreen}
options={{
title: 'Explore',
headerLeft: () => (
<Icon.Button
name="md-menu"
size={25}
backgroundColor="#f59042"
onPress={() => {
navigation.openDrawer();
}}></Icon.Button>
),
headerTintColor: '#00ff44',
headerTitleStyle: {fontWeight: 'bold'},
}}
/>
</DetailsStack.Navigator>
);
export default DetailsStackScreen;
ProfileScreen.js
import React, {Component} from 'react';
import {createStackNavigator} from '@react-navigation/stack';
import Icon from 'react-native-vector-icons/Ionicons';
const DetailsStack = createStackNavigator();
import {
SafeAreaView,
StyleSheet,
ScrollView,
Text,
Button,
StatusBar,
View,
} from 'react-native';
const DetailsScreen = ({navigation}) => {
return (
<SafeAreaView
style={{
flex: 1,
color: '#f59042',
alignContent: 'center',
justifyContent: 'center',
alignItems: 'center',
}}>
<Text>Your Profile Here</Text>
<Button
title="Go to Details Screen.. Again"
onPress={() => navigation.push('Details')}
/>
<Button
title="Go to Explore"
onPress={() => navigation.navigate('Explore')}
/>
<Button title="Go Back" onPress={() => navigation.goBack('Details')} />
<Button
title="Go to First Screen"
onPress={() => navigation.popToTop('Details')}
/>
</SafeAreaView>
);
};
const DetailsStackScreen = ({navigation}) => (
<DetailsStack.Navigator
screenOptions={{
headerStyle: {
backgroundColor: '#f59042',
},
headerTintColor: '#00ff44',
headerTitleStyle: {fontWeight: 'bold'},
}}>
<DetailsStack.Screen
name="Home"
component={DetailsScreen}
options={{
title: 'Profile',
headerLeft: () => (
<Icon.Button
name="md-menu"
size={25}
backgroundColor="#f59042"
onPress={() => {
navigation.openDrawer();
}}></Icon.Button>
),
headerTintColor: '#00ff44',
headerTitleStyle: {fontWeight: 'bold'},
}}
/>
</DetailsStack.Navigator>
);
export default DetailsStackScreen;
DrawerScreen.js
import React from 'react';
import {View, StyleSheet} from 'react-native';
import {DrawerContentScrollView, DrawerItem} from '@react-navigation/drawer';
import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
import {Provider as PaperProvider} from 'react-native-paper';
import {
Avatar,
Title,
Caption,
Text,
Paragraph,
Drawer,
TouchableRipple,
Switch,
} from 'react-native-paper';
export function DrawerContent(props) {
const [isDarkTheme, setIsDarkTheme] = React.useState(false);
const toggleTheme = () => {
setIsDarkTheme(!isDarkTheme);
};
return (
<PaperProvider>
<View style={{flex: 1}}>
<DrawerContentScrollView {...props}>
<View style={Styles.drawerContent}>
<View style={Styles.userInfoSection}>
<View style={{flexDirection: 'row', marginTop: 19}}>
<Avatar.Image
source={{
uri:
'https://api.adorable.io/avatars/50/abott@adorable.png',
}}
size={70}
/>
<View style={{marginLeft: 19, flexDirection: 'column'}}>
<Title style={Styles.title}>Nick Kubde</Title>
<Caption style={Styles.caption}>@officialnick</Caption>
</View>
</View>
<View style={Styles.row}>
<View style={Styles.section}>
<Text
style={{
fontWeight: 'bold',
marginLeft: 25,
marginTop: -20,
}}>
Edit
</Text>
</View>
</View>
</View>
<Drawer.Section title="Main Section" style={Styles.drawerSection}>
<DrawerItem
icon={({color, size}) => (
<Icon name="home-outline" color={color} size={size} />
)}
label="Home"
onPress={() => {
props.navigation.navigate('Home');
}}
/>
<DrawerItem
icon={({color, size}) => (
<Icon name="account-outline" color={color} size={size} />
)}
label="Profile"
onPress={() => {
props.navigation.navigate('Profile');
}}
/>
<DrawerItem
icon={({color, size}) => (
<Icon name="bookmark-outline" color={color} size={size} />
)}
label="Cart"
onPress={() => {
props.navigation.navigate('Details');
}}
/>
<DrawerItem
icon={({color, size}) => (
<Icon name="video-minus" color={color} size={size} />
)}
label="Explore"
onPress={() => {
props.navigation.navigate('Explore');
}}
/>
<DrawerItem
icon={({color, size}) => (
<Icon name="video-minus" color={color} size={size} />
)}
label="Settings"
onPress={() => {
props.navigation.navigate('SettingsScreen');
}}
/>
<DrawerItem
icon={({color, size}) => (
<Icon
name="account-check-outline"
color={color}
size={size}
/>
)}
label="Support"
onPress={() => {
props.navigation.navigate('SupportScreen');
}}
/>
</Drawer.Section>
<Drawer.Section title="Preference">
<TouchableRipple
onPress={() => {
toggleTheme();
}}>
<View style={Styles.preference}>
<Text>Dark Theme</Text>
<View pointerEvents="none">
<Switch value={isDarkTheme} />
</View>
</View>
</TouchableRipple>
</Drawer.Section>
</View>
</DrawerContentScrollView>
<Drawer.Section style={Styles.bottomDrawerSection}>
<DrawerItem
icon={({color, size}) => (
<Icon name="exit-to-app" color={color} size={size} />
)}
label="Sign-Out"
onPress={() => {}}
/>
</Drawer.Section>
</View>
</PaperProvider>
);
}
const Styles = StyleSheet.create({
DrawerContent: {
flex: 1,
},
userInfoSection: {
paddingLeft: 20,
},
title: {
fontSize: 16,
marginTop: 3,
fontWeight: 'bold',
},
caption: {
fontSize: 14,
lineHeight: 14,
},
row: {
marginTop: 20,
flexDirection: 'row',
alignItems: 'center',
},
section: {
flexDirection: 'row',
alignItems: 'center',
marginRight: 15,
},
paragraph: {
fontWeight: 'bold',
marginRight: 3,
},
drawerSection: {
marginTop: 15,
},
bottomDrawerSection: {
marginBottom: 15,
borderTopColor: '#f4f4f4',
borderTopWidth: 1,
},
preference: {
flexDirection: 'row',
justifyContent: 'space-between',
paddingVertical: 12,
paddingHorizontal: 16,
},
});
Index.js
/**
* @format
*/
import 'react-native-gesture-handler';
import {AppRegistry} from 'react-native';
import App from './App';
import {name as appName} from './app.json';
AppRegistry.registerComponent(appName, () => App);
MainTabScreen.js
import React, {Component} from 'react';
import {createMaterialBottomTabNavigator} from '@react-navigation/material-bottom-tabs';
import {createStackNavigator} from '@react-navigation/stack';
import HomeScreen from './HomeScreen';
import CartScreen from './DetailsScreen';
import ExploreScreen from './ExploreScreen';
import ProfileScreen from './ProfileScreen';
import Icon from 'react-native-vector-icons/Ionicons';
const Tab = createMaterialBottomTabNavigator();
const MainTabScreen = () => (
<Tab.Navigator
initialRouteName="Home"
activeColor="#fff"
style={{backgroundColor: 'tomato'}}>
<Tab.Screen
name="Home"
component={HomeScreen}
options={{
tabBarLabel: 'Home',
tabBarColor: '#000',
tabBarIcon: ({color}) => <Icon name="home" color={color} size={26} />,
}}
/>
<Tab.Screen
name="Details"
component={CartScreen}
options={{
tabBarLabel: 'Cart',
tabBarColor: '#6a00ff',
tabBarIcon: ({color}) => (
<Icon name="ios-notifications" color={color} size={26} />
),
}}
/>
<Tab.Screen
name="Explore"
component={ExploreScreen}
options={{
tabBarLabel: 'Explore',
tabBarColor: '#ff005d',
tabBarIcon: ({color}) => (
<Icon name="ios-aperture" color={color} size={26} />
),
}}
/>
<Tab.Screen
name="Profile"
component={ProfileScreen}
options={{
tabBarLabel: 'Profile',
tabBarColor: '#e66b0e',
tabBarIcon: ({color}) => (
<Icon name="ios-person" color={color} size={26} />
),
}}
/>
</Tab.Navigator>
);
export default MainTabScreen;
Comments
Post a Comment