From dd6793933bd7cac1ab3083d01028be6c21409767 Mon Sep 17 00:00:00 2001 From: Mustafa Buyukcelebi Date: Mon, 7 Oct 2019 19:31:15 +0300 Subject: [PATCH] redux upgrade --- package.json | 4 +- .../bottomTabBar/view/bottomTabBarStyles.js | 20 +++ .../bottomTabBar/view/bottomTabBarView.js | 141 +++++++----------- src/components/bottomTabBar/view/tabbar.js | 24 +-- yarn.lock | 29 ++-- 5 files changed, 95 insertions(+), 123 deletions(-) diff --git a/package.json b/package.json index 770912593..03f383896 100644 --- a/package.json +++ b/package.json @@ -77,9 +77,9 @@ "react-navigation-redux-helpers": "^2.0.8", "react-navigation-stack": "^1.9.3", "react-navigation-tabs": "^2.5.5", - "react-redux": "^5.0.7", + "react-redux": "^7.1.1", "realm": "^3.0.0", - "redux": "^4.0.0", + "redux": "^4.0.4", "redux-persist": "^6.0.0", "redux-promise": "^0.6.0", "redux-thunk": "^2.3.0", diff --git a/src/components/bottomTabBar/view/bottomTabBarStyles.js b/src/components/bottomTabBar/view/bottomTabBarStyles.js index f43ce9a1e..39721efac 100644 --- a/src/components/bottomTabBar/view/bottomTabBarStyles.js +++ b/src/components/bottomTabBar/view/bottomTabBarStyles.js @@ -1,4 +1,7 @@ import EStyleSheet from 'react-native-extended-stylesheet'; +import { Dimensions } from 'react-native'; + +const deviceWidth = Dimensions.get('window').width; export default EStyleSheet.create({ wrapper: { @@ -8,4 +11,21 @@ export default EStyleSheet.create({ left: 0, zIndex: 99999, }, + subContent: { + flexDirection: 'row', + zIndex: 1, + position: 'absolute', + bottom: 0, + marginHorizontal: 19, + justifyContent: 'space-between', + }, + navItem: { + alignItems: 'center', + zIndex: 0, + padding: 20, + width: (deviceWidth - 38) / 5, + }, + circle: { + bottom: 25, + }, }); diff --git a/src/components/bottomTabBar/view/bottomTabBarView.js b/src/components/bottomTabBar/view/bottomTabBarView.js index 0d77d5e00..963a5a8b9 100644 --- a/src/components/bottomTabBar/view/bottomTabBarView.js +++ b/src/components/bottomTabBar/view/bottomTabBarView.js @@ -1,6 +1,6 @@ -import React, { PureComponent } from 'react'; +import React, { useEffect } from 'react'; import { TouchableOpacity, SafeAreaView, View, Dimensions } from 'react-native'; -import { connect } from 'react-redux'; +import { useDispatch } from 'react-redux'; // Services and Actions import { updateActiveBottomTab } from '../../../redux/actions/uiAction'; @@ -14,92 +14,65 @@ import TabBar from './tabbar'; // Styles import styles from './bottomTabBarStyles'; -class BottomTabBarView extends PureComponent { - /* Props - * ------------------------------------------------ - * @prop { type } name - Description.... - */ +const _jumpTo = (route, index, routes, jumpTo) => { + const _routeName = routes[index].routeName; - constructor(props) { - super(props); - this.state = {}; + if ( + !!route && + !!route.params && + !!route.params.scrollToTop && + _routeName === ROUTES.TABBAR.HOME + ) { + route.params.scrollToTop(); } - // Component Life Cycles - UNSAFE_componentWillUpdate(nextProps) { - const { - navigation: { - state: { index, routes }, - }, - dispatch, - } = nextProps; + jumpTo(route.key); +}; +const BottomTabBarView = ({ + navigation: { + state: { index, routes }, + }, + activeTintColor, + inactiveTintColor, + renderIcon, + jumpTo, +}) => { + const dispatch = useDispatch(); + + useEffect(() => { dispatch(updateActiveBottomTab(routes[index].routeName)); - } + }, [dispatch, routes, index]); - // Component Functions - _jumpTo = route => { - const { - jumpTo, - navigation: { - state: { index, routes }, - }, - } = this.props; + return ( + + _jumpTo(routes[i], index, routes, jumpTo)} + activeTintColor={activeTintColor} + inactiveTintColor={inactiveTintColor} + > + {routes.map(route => ( + + ))} + + + ); +}; - const _routeName = routes[index].routeName; - - if ( - !!route && - !!route.params && - !!route.params.scrollToTop && - _routeName === ROUTES.TABBAR.HOME - ) { - route.params.scrollToTop(); - } - - jumpTo(route.key); - }; - - render() { - const { - navigation: { - state: { index, routes }, - }, - activeTintColor, - inactiveTintColor, - renderIcon, - } = this.props; - - return ( - - this._jumpTo(routes[i])} - activeTintColor={activeTintColor} - inactiveTintColor={inactiveTintColor} - > - {routes.map(route => ( - - ))} - - - ); - } -} - -export default connect()(BottomTabBarView); +export default BottomTabBarView; diff --git a/src/components/bottomTabBar/view/tabbar.js b/src/components/bottomTabBar/view/tabbar.js index 8e4325b16..721e0f7b6 100644 --- a/src/components/bottomTabBar/view/tabbar.js +++ b/src/components/bottomTabBar/view/tabbar.js @@ -1,11 +1,11 @@ -import { StyleSheet, View, TouchableHighlight, Animated, Dimensions } from 'react-native'; +import { View, TouchableHighlight, Animated } from 'react-native'; import React, { Component } from 'react'; import Svg, { Circle, Path } from 'react-native-svg'; const AnimatedCircle = Animated.createAnimatedComponent(Circle); const AnimatedPath = Animated.createAnimatedComponent(Path); -const deviceWidth = Dimensions.get('window').width; +import styles from './bottomTabBarStyles'; export default class TabBar extends Component { constructor(props) { @@ -162,23 +162,3 @@ const TabBarItem = ({ icon, selectedIcon, index, selected, onPress, showIcon, di }; TabBar.Item = TabBarItem; - -const styles = StyleSheet.create({ - subContent: { - flexDirection: 'row', - zIndex: 1, - position: 'absolute', - bottom: 0, - marginHorizontal: 19, - justifyContent: 'space-between', - }, - navItem: { - alignItems: 'center', - zIndex: 0, - padding: 20, - width: (deviceWidth - 38) / 5, - }, - circle: { - bottom: 25, - }, -}); diff --git a/yarn.lock b/yarn.lock index 0d790b447..f9e0b2c0b 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1015,7 +1015,7 @@ pirates "^4.0.0" source-map-support "^0.5.9" -"@babel/runtime@^7.0.0", "@babel/runtime@^7.1.2", "@babel/runtime@^7.4.5", "@babel/runtime@^7.5.5": +"@babel/runtime@^7.0.0", "@babel/runtime@^7.4.5", "@babel/runtime@^7.5.5": version "7.6.2" resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.6.2.tgz#c3d6e41b304ef10dcf13777a33e7694ec4a9a6dd" integrity sha512-EXxN64agfUqqIGeEjI5dL5z0Sw0ZwWo1mLTi4mQowCZ42O59b7DRpZAnTC6OqdF28wMBMFKNb/4uFGrVaigSpg== @@ -4619,7 +4619,7 @@ hoist-non-react-statics@^2.3.1: resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-2.5.5.tgz#c5903cf409c0dfd908f388e619d86b9c1174cb47" integrity sha512-rqcy4pJo55FTTLWt+bU8ukscqHeE/e9KWvsOW2b/a3afxQZhwkQdT1rPPCJ0rYXdj4vNcasY8zHTH+jF/qStxw== -hoist-non-react-statics@^3.0.1, hoist-non-react-statics@^3.1.0, hoist-non-react-statics@^3.3.0: +hoist-non-react-statics@^3.0.1, hoist-non-react-statics@^3.3.0: version "3.3.0" resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-3.3.0.tgz#b09178f0122184fb95acf525daaecb4d8f45958b" integrity sha512-0XsbTXxgiaCDYDIWFcwkmerZPSwywfUqYmwT4jzewKTQSWoE6FCMoUVOeBJWK3E/CrWbxRG3m5GzY4lnIwGRBA== @@ -7665,12 +7665,12 @@ react-intl@^3.3.1: invariant "^2.1.1" shallow-equal "^1.1.0" -react-is@^16.6.0, react-is@^16.7.0, react-is@^16.8.1, react-is@^16.8.4, react-is@^16.8.6: +react-is@^16.7.0, react-is@^16.8.1, react-is@^16.8.4, react-is@^16.8.6, react-is@^16.9.0: version "16.10.2" resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.10.2.tgz#984120fd4d16800e9a738208ab1fba422d23b5ab" integrity sha512-INBT1QEgtcCCgvccr5/86CfD71fw9EPmDxgiJX4I2Ddr6ZsV6iFXsuby+qWJPtmNuMY0zByTsG4468P7nHuNWA== -react-lifecycles-compat@^3.0.0, react-lifecycles-compat@^3.0.4: +react-lifecycles-compat@^3.0.4: version "3.0.4" resolved "https://registry.yarnpkg.com/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz#4f1a273afdfc8f3488a8c516bfda78f872352362" integrity sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA== @@ -7969,18 +7969,17 @@ react-proxy@^1.1.7: lodash "^4.6.1" react-deep-force-update "^1.0.0" -react-redux@^5.0.7: - version "5.1.1" - resolved "https://registry.yarnpkg.com/react-redux/-/react-redux-5.1.1.tgz#88e368682c7fa80e34e055cd7ac56f5936b0f52f" - integrity sha512-LE7Ned+cv5qe7tMV5BPYkGQ5Lpg8gzgItK07c67yHvJ8t0iaD9kPFPAli/mYkiyJYrs2pJgExR2ZgsGqlrOApg== +react-redux@^7.1.1: + version "7.1.1" + resolved "https://registry.yarnpkg.com/react-redux/-/react-redux-7.1.1.tgz#ce6eee1b734a7a76e0788b3309bf78ff6b34fa0a" + integrity sha512-QsW0vcmVVdNQzEkrgzh2W3Ksvr8cqpAv5FhEk7tNEft+5pp7rXxAudTz3VOPawRkLIepItpkEIyLcN/VVXzjTg== dependencies: - "@babel/runtime" "^7.1.2" - hoist-non-react-statics "^3.1.0" + "@babel/runtime" "^7.5.5" + hoist-non-react-statics "^3.3.0" invariant "^2.2.4" - loose-envify "^1.1.0" - prop-types "^15.6.1" - react-is "^16.6.0" - react-lifecycles-compat "^3.0.0" + loose-envify "^1.4.0" + prop-types "^15.7.2" + react-is "^16.9.0" react-refresh@^0.4.0: version "0.4.2" @@ -8150,7 +8149,7 @@ redux-thunk@^2.3.0: resolved "https://registry.yarnpkg.com/redux-thunk/-/redux-thunk-2.3.0.tgz#51c2c19a185ed5187aaa9a2d08b666d0d6467622" integrity sha512-km6dclyFnmcvxhAcrQV2AkZmPQjzPDjgVlQtR0EQjxZPyJ0BnMf3in1ryuR8A2qU0HldVRfxYXbFSKlI3N7Slw== -redux@^4.0.0: +redux@^4.0.4: version "4.0.4" resolved "https://registry.yarnpkg.com/redux/-/redux-4.0.4.tgz#4ee1aeb164b63d6a1bcc57ae4aa0b6e6fa7a3796" integrity sha512-vKv4WdiJxOWKxK0yRoaK3Y4pxxB0ilzVx6dszU2W8wLxlb2yikRph4iV/ymtdJ6ZxpBLFbyrxklnT5yBbQSl3Q==