created custom bottomTabBarComponent and themmed

This commit is contained in:
ue 2018-11-22 17:20:25 +03:00
parent 1308efeefe
commit 076f48d273
9 changed files with 185 additions and 37 deletions

View File

@ -5,7 +5,6 @@
};
objectVersion = 46;
objects = {
/* Begin PBXBuildFile section */
00C302E51ABCBA2D00DB3ED1 /* libRCTActionSheet.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 00C302AC1ABCB8CE00DB3ED1 /* libRCTActionSheet.a */; };
00C302E71ABCBA2D00DB3ED1 /* libRCTGeolocation.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 00C302BA1ABCB90400DB3ED1 /* libRCTGeolocation.a */; };
@ -76,6 +75,7 @@
EBFE65CB1EB545CF9D9AC651 /* libz.tbd in Frameworks */ = {isa = PBXBuildFile; fileRef = E5D4B1B688E94EE0A140CEC2 /* libz.tbd */; };
EEB03792FF08AE3CEE776052 /* libPods-eSteem.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 70B117F9F2927459CA5BDA3C /* libPods-eSteem.a */; };
FA64A93BC95743E58F77F404 /* FontAwesome5_Solid.ttf in Resources */ = {isa = PBXBuildFile; fileRef = 2DEB48DE97FD4A7585118CB4 /* FontAwesome5_Solid.ttf */; };
6E4C52029EBF42989F818B8A /* libRNViewOverflow.a in Frameworks */ = {isa = PBXBuildFile; fileRef = BBFAB592DFA5475CBA7E7567 /* libRNViewOverflow.a */; };
/* End PBXBuildFile section */
/* Begin PBXContainerItemProxy section */
@ -513,6 +513,8 @@
F0500976E24B42A4A079A051 /* libAppCenterReactNative.a */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 9; includeInIndex = 0; lastKnownFileType = archive.ar; path = libAppCenterReactNative.a; sourceTree = "<group>"; };
F81DF68DDD5447119FDA7F5F /* EvilIcons.ttf */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 9; includeInIndex = 0; lastKnownFileType = unknown; name = EvilIcons.ttf; path = ../src/assets/Fonts/EvilIcons.ttf; sourceTree = "<group>"; };
F9AC0BCB8EA228F4C2157FBA /* Pods-eSteemTests.debug.xcconfig */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xcconfig; name = "Pods-eSteemTests.debug.xcconfig"; path = "Pods/Target Support Files/Pods-eSteemTests/Pods-eSteemTests.debug.xcconfig"; sourceTree = "<group>"; };
C1AC2A99CB0143E580183824 /* RNViewOverflow.xcodeproj */ = {isa = PBXFileReference; name = "RNViewOverflow.xcodeproj"; path = "../node_modules/react-native-view-overflow/ios/RNViewOverflow.xcodeproj"; sourceTree = "<group>"; fileEncoding = undefined; lastKnownFileType = wrapper.pb-project; explicitFileType = undefined; includeInIndex = 0; };
BBFAB592DFA5475CBA7E7567 /* libRNViewOverflow.a */ = {isa = PBXFileReference; name = "libRNViewOverflow.a"; path = "libRNViewOverflow.a"; sourceTree = "<group>"; fileEncoding = undefined; lastKnownFileType = archive.ar; explicitFileType = undefined; includeInIndex = 0; };
/* End PBXFileReference section */
/* Begin PBXFrameworksBuildPhase section */
@ -553,6 +555,7 @@
7F1D55EAEBB44D7BA6C5D7C9 /* libRealmReact.a in Frameworks */,
0F218E27F54644449F68C410 /* libc++.tbd in Frameworks */,
EBFE65CB1EB545CF9D9AC651 /* libz.tbd in Frameworks */,
6E4C52029EBF42989F818B8A /* libRNViewOverflow.a in Frameworks */,
);
runOnlyForDeploymentPostprocessing = 0;
};
@ -863,6 +866,7 @@
4F0E333891D7447FA9E4622F /* RCTRestart.xcodeproj */,
D480651D3E18476D9F220D2A /* RNVectorIcons.xcodeproj */,
98953283F3F5423EB63E34E4 /* RealmReact.xcodeproj */,
C1AC2A99CB0143E580183824 /* RNViewOverflow.xcodeproj */,
);
name = Libraries;
sourceTree = "<group>";
@ -1736,6 +1740,7 @@
"$(SRCROOT)/../node_modules/react-native-restart/ios/RCTRestart/**",
"$(SRCROOT)/../node_modules/react-native-vector-icons/RNVectorIconsManager",
"$(SRCROOT)/../node_modules/realm/src/**",
"$(SRCROOT)/../node_modules/react-native-view-overflow/ios",
);
INFOPLIST_FILE = eSteemTests/Info.plist;
IPHONEOS_DEPLOYMENT_TARGET = 9.0;
@ -1752,6 +1757,7 @@
"\"$(SRCROOT)/$(TARGET_NAME)\"",
"\"$(SRCROOT)/$(TARGET_NAME)\"",
"\"$(SRCROOT)/$(TARGET_NAME)\"",
"\"$(SRCROOT)/$(TARGET_NAME)\"",
);
OTHER_LDFLAGS = (
"-ObjC",
@ -1780,6 +1786,7 @@
"$(SRCROOT)/../node_modules/react-native-restart/ios/RCTRestart/**",
"$(SRCROOT)/../node_modules/react-native-vector-icons/RNVectorIconsManager",
"$(SRCROOT)/../node_modules/realm/src/**",
"$(SRCROOT)/../node_modules/react-native-view-overflow/ios",
);
INFOPLIST_FILE = eSteemTests/Info.plist;
IPHONEOS_DEPLOYMENT_TARGET = 9.0;
@ -1796,6 +1803,7 @@
"\"$(SRCROOT)/$(TARGET_NAME)\"",
"\"$(SRCROOT)/$(TARGET_NAME)\"",
"\"$(SRCROOT)/$(TARGET_NAME)\"",
"\"$(SRCROOT)/$(TARGET_NAME)\"",
);
OTHER_LDFLAGS = (
"-ObjC",
@ -1827,6 +1835,7 @@
"$(SRCROOT)/../node_modules/react-native-restart/ios/RCTRestart/**",
"$(SRCROOT)/../node_modules/react-native-vector-icons/RNVectorIconsManager",
"$(SRCROOT)/../node_modules/realm/src/**",
"$(SRCROOT)/../node_modules/react-native-view-overflow/ios",
);
INFOPLIST_FILE = eSteem/Info.plist;
LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks";
@ -1860,6 +1869,7 @@
"$(SRCROOT)/../node_modules/react-native-restart/ios/RCTRestart/**",
"$(SRCROOT)/../node_modules/react-native-vector-icons/RNVectorIconsManager",
"$(SRCROOT)/../node_modules/realm/src/**",
"$(SRCROOT)/../node_modules/react-native-view-overflow/ios",
);
INFOPLIST_FILE = eSteem/Info.plist;
LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks";
@ -1898,6 +1908,7 @@
"$(SRCROOT)/../node_modules/react-native-restart/ios/RCTRestart/**",
"$(SRCROOT)/../node_modules/react-native-vector-icons/RNVectorIconsManager",
"$(SRCROOT)/../node_modules/realm/src/**",
"$(SRCROOT)/../node_modules/react-native-view-overflow/ios",
);
INFOPLIST_FILE = "eSteem-tvOS/Info.plist";
LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks";
@ -1913,6 +1924,7 @@
"\"$(SRCROOT)/$(TARGET_NAME)\"",
"\"$(SRCROOT)/$(TARGET_NAME)\"",
"\"$(SRCROOT)/$(TARGET_NAME)\"",
"\"$(SRCROOT)/$(TARGET_NAME)\"",
);
OTHER_LDFLAGS = (
"-ObjC",
@ -1950,6 +1962,7 @@
"$(SRCROOT)/../node_modules/react-native-restart/ios/RCTRestart/**",
"$(SRCROOT)/../node_modules/react-native-vector-icons/RNVectorIconsManager",
"$(SRCROOT)/../node_modules/realm/src/**",
"$(SRCROOT)/../node_modules/react-native-view-overflow/ios",
);
INFOPLIST_FILE = "eSteem-tvOS/Info.plist";
LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks";
@ -1965,6 +1978,7 @@
"\"$(SRCROOT)/$(TARGET_NAME)\"",
"\"$(SRCROOT)/$(TARGET_NAME)\"",
"\"$(SRCROOT)/$(TARGET_NAME)\"",
"\"$(SRCROOT)/$(TARGET_NAME)\"",
);
OTHER_LDFLAGS = (
"-ObjC",
@ -2001,6 +2015,7 @@
"$(SRCROOT)/../node_modules/react-native-restart/ios/RCTRestart/**",
"$(SRCROOT)/../node_modules/react-native-vector-icons/RNVectorIconsManager",
"$(SRCROOT)/../node_modules/realm/src/**",
"$(SRCROOT)/../node_modules/react-native-view-overflow/ios",
);
INFOPLIST_FILE = "eSteem-tvOSTests/Info.plist";
LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks @loader_path/Frameworks";
@ -2016,6 +2031,7 @@
"\"$(SRCROOT)/$(TARGET_NAME)\"",
"\"$(SRCROOT)/$(TARGET_NAME)\"",
"\"$(SRCROOT)/$(TARGET_NAME)\"",
"\"$(SRCROOT)/$(TARGET_NAME)\"",
);
OTHER_LDFLAGS = (
"-ObjC",
@ -2052,6 +2068,7 @@
"$(SRCROOT)/../node_modules/react-native-restart/ios/RCTRestart/**",
"$(SRCROOT)/../node_modules/react-native-vector-icons/RNVectorIconsManager",
"$(SRCROOT)/../node_modules/realm/src/**",
"$(SRCROOT)/../node_modules/react-native-view-overflow/ios",
);
INFOPLIST_FILE = "eSteem-tvOSTests/Info.plist";
LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks @loader_path/Frameworks";
@ -2067,6 +2084,7 @@
"\"$(SRCROOT)/$(TARGET_NAME)\"",
"\"$(SRCROOT)/$(TARGET_NAME)\"",
"\"$(SRCROOT)/$(TARGET_NAME)\"",
"\"$(SRCROOT)/$(TARGET_NAME)\"",
);
OTHER_LDFLAGS = (
"-ObjC",

50
package-lock.json generated
View File

@ -10462,6 +10462,11 @@
"yargs": "^8.0.2"
}
},
"react-native-view-overflow": {
"version": "0.0.3",
"resolved": "https://registry.npmjs.org/react-native-view-overflow/-/react-native-view-overflow-0.0.3.tgz",
"integrity": "sha512-CcX61kqFyO41WAmqARr/1A7YgTkd1GoQGJl0LYrzl+4CL5uw2CAu68T+1DPapt7RdgvSMLZIPlNvj4TzdJY/hw=="
},
"react-navigation": {
"version": "2.17.0",
"resolved": "https://registry.npmjs.org/react-navigation/-/react-navigation-2.17.0.tgz",
@ -10485,6 +10490,25 @@
"version": "2.5.5",
"resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-2.5.5.tgz",
"integrity": "sha512-rqcy4pJo55FTTLWt+bU8ukscqHeE/e9KWvsOW2b/a3afxQZhwkQdT1rPPCJ0rYXdj4vNcasY8zHTH+jF/qStxw=="
},
"react-native-tab-view": {
"version": "1.3.1",
"resolved": "https://registry.npmjs.org/react-native-tab-view/-/react-native-tab-view-1.3.1.tgz",
"integrity": "sha512-QNt6VkEW8SP1UJ7yjD5P4bOTWwHQfoIMD5CqnA06pcubdNwHR1NmjiNZsVnIvp5wAEVbW6yTHjLXOh1fzab4xg==",
"requires": {
"prop-types": "^15.6.1"
}
},
"react-navigation-tabs": {
"version": "0.8.2",
"resolved": "https://registry.npmjs.org/react-navigation-tabs/-/react-navigation-tabs-0.8.2.tgz",
"integrity": "sha512-q2xfY79ERj4XJek3rceveifUny3Qcg7y6bNlN6wQg6c7D/pMFOGZsSALGenF7CuNDhYyEkijlnGTHl1laZgbDw==",
"requires": {
"hoist-non-react-statics": "^2.5.0",
"prop-types": "^15.6.1",
"react-lifecycles-compat": "^3.0.4",
"react-native-tab-view": "^1.0.0"
}
}
}
},
@ -10517,32 +10541,6 @@
"resolved": "https://registry.npmjs.org/react-navigation-stack/-/react-navigation-stack-0.7.0.tgz",
"integrity": "sha512-3Tbb/SsustBrM9R/qaI6XuOfyqYMVbwkeHFC8NbU890vB0aKZvjAtioWLZ18e/4LgbiOCmoTdp37z3gkGDyNDQ=="
},
"react-navigation-tabs": {
"version": "0.8.2",
"resolved": "https://registry.npmjs.org/react-navigation-tabs/-/react-navigation-tabs-0.8.2.tgz",
"integrity": "sha512-q2xfY79ERj4XJek3rceveifUny3Qcg7y6bNlN6wQg6c7D/pMFOGZsSALGenF7CuNDhYyEkijlnGTHl1laZgbDw==",
"requires": {
"hoist-non-react-statics": "^2.5.0",
"prop-types": "^15.6.1",
"react-lifecycles-compat": "^3.0.4",
"react-native-tab-view": "^1.0.0"
},
"dependencies": {
"hoist-non-react-statics": {
"version": "2.5.5",
"resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-2.5.5.tgz",
"integrity": "sha512-rqcy4pJo55FTTLWt+bU8ukscqHeE/e9KWvsOW2b/a3afxQZhwkQdT1rPPCJ0rYXdj4vNcasY8zHTH+jF/qStxw=="
},
"react-native-tab-view": {
"version": "1.2.0",
"resolved": "https://registry.npmjs.org/react-native-tab-view/-/react-native-tab-view-1.2.0.tgz",
"integrity": "sha512-lpiWi3dog86Fu/W60DU12RKrFv3XuTv0lHMC56t2jlDqxLfVzG9ufV7li6Afl2S2ZicNU1Bob8WPgxVZc8egAA==",
"requires": {
"prop-types": "^15.6.1"
}
}
}
},
"react-proxy": {
"version": "1.1.8",
"resolved": "https://registry.npmjs.org/react-proxy/-/react-proxy-1.1.8.tgz",

View File

@ -49,6 +49,7 @@
"react-native-restart": "0.0.6",
"react-native-slider": "^0.11.0",
"react-native-vector-icons": "^6.0.2",
"react-native-view-overflow": "0.0.3",
"react-navigation": "^2.17.0",
"react-navigation-redux-helpers": "^2.0.6",
"react-redux": "^5.0.7",

View File

@ -0,0 +1,4 @@
import BottomTabBar from './view/bottomTabBarView';
export { BottomTabBar };
export default BottomTabBar;

View File

@ -0,0 +1,10 @@
import EStyleSheet from 'react-native-extended-stylesheet';
export default EStyleSheet.create({
wrapper: {
flexDirection: 'row',
height: 56,
width: '100%',
backgroundColor: '$primaryBackgroundColor',
},
});

View File

@ -0,0 +1,64 @@
import React, { Component } from 'react';
import { TouchableWithoutFeedback } from 'react-native';
import ViewOverflow from 'react-native-view-overflow';
// Constants
// Components
// Styles
import styles from './bottomTabBarStyles';
class BottomTabBarView extends Component {
/* Props
* ------------------------------------------------
* @prop { type } name - Description....
*/
constructor(props) {
super(props);
this.state = {};
}
// Component Life Cycles
// Component Functions
render() {
const {
navigation: {
state: { index, routes },
},
activeTintColor,
inactiveTintColor,
renderIcon,
jumpTo,
} = this.props;
return (
<ViewOverflow style={styles.wrapper}>
{routes.map((route, idx) => (
<ViewOverflow
key={route.key}
style={{
flex: 1,
alignItems: 'center',
justifyContent: 'center',
}}
>
<TouchableWithoutFeedback onPress={() => jumpTo(route.key)}>
{renderIcon({
route,
focused: index === idx,
tintColor: index === idx ? activeTintColor : inactiveTintColor,
})}
</TouchableWithoutFeedback>
</ViewOverflow>
))}
</ViewOverflow>
);
}
}
export default BottomTabBarView;

View File

@ -1,12 +1,15 @@
import React from 'react';
import { createBottomTabNavigator } from 'react-navigation';
import Icon from 'react-native-vector-icons/FontAwesome';
import ViewOverflow from 'react-native-view-overflow';
import { TouchableWithoutFeedback } from 'react-native';
import {
Home, Notification, Profile, RootComponent, Messages,
} from '../screens';
import { PostButton } from '../components/postButton';
import NotificationButton from '../components/notificationButton';
import { BottomTabBar } from '../components/bottomTabBar';
// import style from './baseNavigatorStyles';
const BaseNavigator = createBottomTabNavigator(
{
@ -42,24 +45,61 @@ const BaseNavigator = createBottomTabNavigator(
},
},
{
tabBarComponent: props => <BottomTabBar {...props} />,
// tabBarComponent: (props) => {
// const {
// navigation: {
// state: { index, routes },
// },
// style,
// activeTintColor,
// inactiveTintColor,
// renderIcon,
// jumpTo,
// } = props;
// return (
// <ViewOverflow
// style={{
// flexDirection: 'row',
// height: 56,
// width: '100%',
// backgroundColor: 'red',
// ...style,
// }}
// >
// {routes.map((route, idx) => (
// <ViewOverflow
// key={route.key}
// style={{
// flex: 1,
// alignItems: 'center',
// justifyContent: 'center',
// }}
// >
// <TouchableWithoutFeedback onPress={() => jumpTo(route.key)}>
// {renderIcon({
// route,
// focused: index === idx,
// tintColor: index === idx ? activeTintColor : inactiveTintColor,
// })}
// </TouchableWithoutFeedback>
// </ViewOverflow>
// ))}
// </ViewOverflow>
// );
// },
tabBarOptions: {
showLabel: false,
activeTintColor: '#357ce6',
inactiveTintColor: '#c1c5c7',
style: {
backgroundColor: '#fff',
height: 56,
borderWidth: 0.1,
shadowColor: '#b0b0b0',
shadowOffset: { height: 0 },
shadowOpacity: 0.5,
},
style: {},
tabStyle: {},
},
},
);
// const defaultGetStateForAction = BaseNavigator.router.getStateForAction;
const defaultGetStateForAction = BaseNavigator.router.getStateForAction;
// BaseNavigator.router.getStateForAction = (action, state) => {
// if (action.type === NavigationActions.NAVIGATE && action.routeName === 'Adding') {
@ -68,4 +108,5 @@ const BaseNavigator = createBottomTabNavigator(
//
// return defaultGetStateForAction(action, state);
// };
export { BaseNavigator };

View File

@ -0,0 +1,11 @@
import EStyleSheet from 'react-native-extended-stylesheet';
export default EStyleSheet.create({
backgroundColor: '$primaryBackgroundColor',
$theme: 'lightTheme',
height: 56,
borderWidth: 0.1,
shadowColor: '#b0b0b0',
shadowOffset: { height: 0 },
shadowOpacity: 0.5,
});

View File

@ -1 +1,2 @@
export * from './baseNavigator';