From 4a3a01f7a1a7f90d664bee4e3cc0a4456e322de3 Mon Sep 17 00:00:00 2001 From: haniyya ulfah Date: Mon, 28 Aug 2023 10:51:44 +0700 Subject: [PATCH] 28/7, navigasi yang masih pr, kenapa menu gabisa muncul animasi modal. --- apps/navigation/MainStack.js | 79 +++++- apps/navigation/components/TabBg.js | 17 ++ .../navigation/components/backup navigator.js | 90 +++++++ apps/navigation/components/index.js | 240 ++++++++++++++++++ apps/navigation/index.js | 7 + apps/screens/CustomModal/index.js | 47 ++++ apps/screens/Home/index.js | 43 +++- apps/screens/Profile/index.js | 6 + apps/screens/ProjectScreen/index.js | 6 + ios/Podfile.lock | 6 + package.json | 4 + yarn.lock | 107 +++++++- 12 files changed, 644 insertions(+), 8 deletions(-) create mode 100644 apps/navigation/components/TabBg.js create mode 100644 apps/navigation/components/backup navigator.js create mode 100644 apps/navigation/components/index.js create mode 100644 apps/screens/CustomModal/index.js create mode 100644 apps/screens/Profile/index.js create mode 100644 apps/screens/ProjectScreen/index.js diff --git a/apps/navigation/MainStack.js b/apps/navigation/MainStack.js index b41ad58..26adf7d 100644 --- a/apps/navigation/MainStack.js +++ b/apps/navigation/MainStack.js @@ -5,24 +5,99 @@ import { DrawerItemList, DrawerItem, } from '@react-navigation/drawer'; +import {BaseColor} from '@config'; + +import { + BottomTabNavigatorMazi, + tabBarFloat, + tabBarIcon, + CustomTabBarButton, +} from './components'; import {useWindowDimensions, View, Text, TouchableOpacity} from 'react-native'; import ForgotPassword from '../screens/ForgotPassword'; import HomeScreen from '../screens/Home'; import Register from '../screens/Register'; +import ProfileScreen from '../screens/Profile'; +import ProjectScreen from '../screens/ProjectScreen'; +import CustomModal from '../screens/CustomModal'; +import IconFontAwesome5 from 'react-native-vector-icons/FontAwesome5'; const Stack = createStackNavigator(); const Drawer = createDrawerNavigator(); // import ForgotPassword from '../screens/ForgotPassword'; +export const WalletMenu = () => ( + +); + +const ModalScreen = () => ( + +); + +const CreateNewPlaceholder = () => ( + +); + +export const WalletTabScreens = { + HomeScreen: { + component: HomeScreen, + options: { + title: 'Home', + headerShown: false, + tabBarIcon: ({focused, color}) => + tabBarIcon({focused, color, name: 'home'}), + }, + }, + CustomModal: { + // component: CustomModal, + component: CreateNewPlaceholder, + options: { + title: 'Menu', + headerShown: false, + animationEnabled: true, + // mode: 'modal', + tabBarButton: ({focused, onPress, props, color}) => + CustomTabBarButton({ + onPress, + props, + color, + focused, + // color: '#58D68D', + bgColor: BaseColor.corn10, //inni background belakang bawah button bulet + nameIcon: 'align-justify', + nameTitle: 'Menu', + }), + // tabBarFloat: ({focused, color}) => + // tabBarFloat({focused, color, name: 'history'}), + // tabBarIcon: ({focused, color}) => + // tabBarIcon({focused, color, name: 'history'}), + }, + }, + ProfileScreen: { + component: ProfileScreen, + options: { + title: 'Profile', + headerShown: false, + + tabBarIcon: ({focused, color}) => + tabBarIcon({focused, color, name: 'user'}), + }, + }, +}; const MainStack = ({navigation}) => { return ( - + + { + return ( + + + + ); +}; diff --git a/apps/navigation/components/backup navigator.js b/apps/navigation/components/backup navigator.js new file mode 100644 index 0000000..1f57115 --- /dev/null +++ b/apps/navigation/components/backup navigator.js @@ -0,0 +1,90 @@ + + {Object.keys(tabScreens).map((name, index) => { + const {options, component} = tabScreens[name]; + console.log('name tab', name); + console.log('index tab', index); + return name == 'CustomModal' ? ( + ({ + // tabPress: event => { + // event.preventDefault(); + // navigation.navigate('CustomModal'); + // }, + // })} + listeners={({navigation, route}) => ({ + tabPress: e => { + console.log('ini yg diklik', e), + // Prevent default action + e.preventDefault(); + + // Do something with the `navigation` object + navigation.navigate('CustomModal'); + }, + })} + options={{ + tabBarIconStyle: {paddingVertical: 0, marginVertical: 0}, + ...options, + title: t(options.title), + animationEnabled: true, + }} + /> + ) : ( + + ); + })} + {/* */} + {/* + + */} +; diff --git a/apps/navigation/components/index.js b/apps/navigation/components/index.js new file mode 100644 index 0000000..810ae65 --- /dev/null +++ b/apps/navigation/components/index.js @@ -0,0 +1,240 @@ +/** @format */ + +import React from 'react'; +import {Icon, Text} from '@components'; +import {View, TouchableOpacity, StyleSheet} from 'react-native'; +import { + createBottomTabNavigator, + BottomTabBar, +} from '@react-navigation/bottom-tabs'; +import {useTranslation} from 'react-i18next'; +import {BaseColor, BaseStyle} from '@config'; +// import FontAwesome5 from 'react-native-vector-icons/FontAwesome5'; +import {useSelector} from 'react-redux'; +import {useTheme} from '@react-navigation/native'; +// import styles from '../../screens/SignIn/styles'; +import {TabBg} from './TabBg'; +import {Button} from '../../components'; +import IconFontAwesome5 from 'react-native-vector-icons/FontAwesome5'; +import CustomModal from '../../screens/CustomModal'; +import {Fonts} from '../../config'; +import {CardStyleInterpolators} from '@react-navigation/stack'; + +export const tabBarIcon = ({focused, color, name}) => ( + // console.log('colorrr', color); + // console.log('name icon', name), + // ( + // () + +); + +export const tabBarFloat = ({focused, color, nameIcon, nameTitle}) => ( + + + + {nameTitle} + + +); + +// ) +// tesicon + +export const CustomTabBarButton = ({ + children, + onPress, + color, + nameTitle, + nameIcon, + bgColor, + focused, + // component, + navigation, + props, +}) => { + console.log('onpress', onPress); + console.log('color', color); + console.log('navigation', props); + return ( + + + + console.log('first')} + > + {/* {tabBarIcon({color, name})} */} + {tabBarFloat({color, nameIcon, nameTitle})} + + + // + // + // halo + // + ); +}; + +export const tabBarIconHaveNoty = ({color, name}) => { + const {colors} = useTheme(); + const data = useSelector(state => state.apiReducer.data); + let sum = 0; + data.map((item, index) => { + sum += parseInt(item.IsRead); + }); + + const counter = useSelector(state => state.counter); + console.log('counter badge di tabbar', counter); + const total = data.length; + const finalCount = total - sum; + + return ( + + {/* {tabBarIcon({color, name})} */} + {tabBarFloat({color, name})} + + + {/* {notifData_FromRed} */} + {finalCount < 0 ? 0 : finalCount} + + + + ); +}; + +const CreateNew = () => { + ; +}; +const placeholder = () => ; +const BottomTab = createBottomTabNavigator(); + +export const BottomTabNavigatorMazi = ({tabScreens = {}}) => { + const {t} = useTranslation(); + const {colors} = useTheme(); + return ( + + {Object.keys(tabScreens).map((name, index) => { + const {options, component} = tabScreens[name]; + console.log('name tab', name); + console.log('index tab', index); + return name == 'CustomModal' ? ( + ({ + tabPress: e => { + console.log('ini yg diklik', e), + // Prevent default action + e.preventDefault(); + + // Do something with the `navigation` object + navigation.navigate('CustomModal'); + }, + })} + options={{ + tabBarIconStyle: {paddingVertical: 0, marginVertical: 0}, + ...options, + title: t(options.title), + animationEnabled: true, + }} + /> + ) : ( + + ); + })} + + ); +}; + +const styles = StyleSheet.create({ + shadow: { + shadowColor: 'black', + shadowOffset: { + width: 0, + height: 10, + }, + shadowOpacity: 0.25, + shadowRadius: 3.5, + elevation: 5, + }, +}); diff --git a/apps/navigation/index.js b/apps/navigation/index.js index aa3786c..54a6546 100644 --- a/apps/navigation/index.js +++ b/apps/navigation/index.js @@ -42,6 +42,7 @@ import { import SplashScreen from 'react-native-splash-screen'; import ForgotPassword from '../screens/ForgotPassword'; import Register from '../screens/Register'; +import CustomModal from '../screens/CustomModal'; const Navigator = props => { const navigationRef = useRef(null); @@ -86,6 +87,7 @@ const Navigator = props => { { component={MainStack} options={{headerShown: false}}> )} + {/* */} { +// return ( +// +// {children} +// +// ); +// }; + +const CustomModal = props => { + const {navigation} = props; + return ( + + This is a modal! +