rn-vs-lb 1.0.26 → 1.0.27
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -0,0 +1,114 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
// import React, { useState, useRef, useEffect } from 'react';
|
|
3
|
+
// import { View, TouchableOpacity, Image, Animated, StyleSheet } from 'react-native';
|
|
4
|
+
// import { COLORS, SIZES } from '../../constants/theme';
|
|
5
|
+
// import IconOcticons from 'react-native-vector-icons/Octicons';
|
|
6
|
+
// import IconIonicons from 'react-native-vector-icons/Ionicons';
|
|
7
|
+
// import MaterialIcons from 'react-native-vector-icons/MaterialIcons';
|
|
8
|
+
// enum LbTypes {
|
|
9
|
+
// OCTICONS = "Octicons",
|
|
10
|
+
// IONICONS = "Ionicons",
|
|
11
|
+
// MATERIALICONS = "MaterialIcons",
|
|
12
|
+
// }
|
|
13
|
+
// interface Tab {
|
|
14
|
+
// name: string;
|
|
15
|
+
// iconName: string;
|
|
16
|
+
// size: number;
|
|
17
|
+
// lb: LbTypes;
|
|
18
|
+
// }
|
|
19
|
+
// const tabs: Tab[] = [
|
|
20
|
+
// { name: 'Search', iconName: "search", size: 22, lb: LbTypes.OCTICONS },
|
|
21
|
+
// { name: 'Organizations', iconName: "organization", size: 22, lb: LbTypes.OCTICONS },
|
|
22
|
+
// { name: 'Persons', iconName: "person-search", size: 29, lb: LbTypes.MATERIALICONS },
|
|
23
|
+
// { name: 'Chat', iconName: "chatbubbles-sharp", size: 24, lb: LbTypes.IONICONS },
|
|
24
|
+
// { name: 'Profile', iconName: "person", size: 23, lb: LbTypes.OCTICONS },
|
|
25
|
+
// ];
|
|
26
|
+
// const renderIcon = (tab: Tab) => {
|
|
27
|
+
// switch (tab.lb) {
|
|
28
|
+
// case LbTypes.OCTICONS:
|
|
29
|
+
// return <IconOcticons name={tab.iconName} size={tab.size} color="#475A77" />;
|
|
30
|
+
// case LbTypes.IONICONS:
|
|
31
|
+
// return <IconIonicons name={tab.iconName} size={tab.size} color="#475A77" />;
|
|
32
|
+
// case LbTypes.MATERIALICONS:
|
|
33
|
+
// return <MaterialIcons name={tab.iconName} size={tab.size} color="#475A77" />;
|
|
34
|
+
// default:
|
|
35
|
+
// return null;
|
|
36
|
+
// }
|
|
37
|
+
// };
|
|
38
|
+
// export const BottomTab: React.FC = () => {
|
|
39
|
+
// const [activeTab, setActiveTab] = useState(0);
|
|
40
|
+
// const tabWidth = SIZES.width;
|
|
41
|
+
// const tabW = tabWidth < SIZES.container ? tabWidth / 5 : SIZES.container / 5;
|
|
42
|
+
// const circlePosition = useRef(
|
|
43
|
+
// new Animated.Value(tabWidth < SIZES.container ? tabWidth / 2.5 : SIZES.container / 2.5)
|
|
44
|
+
// ).current;
|
|
45
|
+
// useEffect(() => {
|
|
46
|
+
// Animated.spring(circlePosition, {
|
|
47
|
+
// toValue: activeTab * tabW,
|
|
48
|
+
// useNativeDriver: true,
|
|
49
|
+
// }).start();
|
|
50
|
+
// }, [activeTab]);
|
|
51
|
+
// const handleTabPress = (index: number) => {
|
|
52
|
+
// setActiveTab(index);
|
|
53
|
+
// };
|
|
54
|
+
// return (
|
|
55
|
+
// <View style={styles.tabContainer}>
|
|
56
|
+
// <Animated.View
|
|
57
|
+
// style={[
|
|
58
|
+
// styles.circle,
|
|
59
|
+
// {
|
|
60
|
+
// width: tabW,
|
|
61
|
+
// transform: [{ translateX: circlePosition }],
|
|
62
|
+
// },
|
|
63
|
+
// ]}
|
|
64
|
+
// >
|
|
65
|
+
// <View style={styles.circleInner} />
|
|
66
|
+
// </Animated.View>
|
|
67
|
+
// {tabs.map((tab, index) => (
|
|
68
|
+
// <TouchableOpacity
|
|
69
|
+
// key={index}
|
|
70
|
+
// activeOpacity={0.8}
|
|
71
|
+
// onPress={() => handleTabPress(index)}
|
|
72
|
+
// style={styles.tabButton}
|
|
73
|
+
// >
|
|
74
|
+
// {renderIcon(tab)}
|
|
75
|
+
// </TouchableOpacity>
|
|
76
|
+
// ))}
|
|
77
|
+
// </View>
|
|
78
|
+
// );
|
|
79
|
+
// };
|
|
80
|
+
// const styles = StyleSheet.create({
|
|
81
|
+
// tabContainer: {
|
|
82
|
+
// flexDirection: 'row',
|
|
83
|
+
// height: 60,
|
|
84
|
+
// backgroundColor: COLORS.card,
|
|
85
|
+
// alignItems: 'center',
|
|
86
|
+
// },
|
|
87
|
+
// tabButton: {
|
|
88
|
+
// flex: 1,
|
|
89
|
+
// alignItems: 'center',
|
|
90
|
+
// justifyContent: 'center',
|
|
91
|
+
// },
|
|
92
|
+
// circle: {
|
|
93
|
+
// position: 'absolute',
|
|
94
|
+
// height: '100%',
|
|
95
|
+
// alignItems: 'center',
|
|
96
|
+
// justifyContent: 'center',
|
|
97
|
+
// },
|
|
98
|
+
// circleInner: {
|
|
99
|
+
// height: 40,
|
|
100
|
+
// width: 40,
|
|
101
|
+
// borderRadius: 20,
|
|
102
|
+
// backgroundColor: COLORS.primary,
|
|
103
|
+
// opacity: 0.15,
|
|
104
|
+
// },
|
|
105
|
+
// iconImage: {
|
|
106
|
+
// width: 20,
|
|
107
|
+
// height: 20,
|
|
108
|
+
// },
|
|
109
|
+
// profileImage: {
|
|
110
|
+
// width: 34,
|
|
111
|
+
// height: 34,
|
|
112
|
+
// borderRadius: 50,
|
|
113
|
+
// },
|
|
114
|
+
// });
|
|
@@ -40,11 +40,11 @@ var LbTypes;
|
|
|
40
40
|
LbTypes["MATERIALICONS"] = "MaterialIcons";
|
|
41
41
|
})(LbTypes || (LbTypes = {}));
|
|
42
42
|
var tabs = [
|
|
43
|
-
{ name: 'Search', iconName: "search", size: 22, lb: LbTypes.OCTICONS },
|
|
44
|
-
{ name: '
|
|
45
|
-
{ name: 'Persons', iconName: "person-search", size: 29, lb: LbTypes.MATERIALICONS },
|
|
46
|
-
{ name: 'Chat', iconName: "chatbubbles-sharp", size: 24, lb: LbTypes.IONICONS },
|
|
47
|
-
{ name: 'Profile', iconName: "person", size: 23, lb: LbTypes.OCTICONS },
|
|
43
|
+
{ name: 'Search', iconName: "search", size: 22, lb: LbTypes.OCTICONS, route: 'SearchScreen' },
|
|
44
|
+
{ name: 'Organizations', iconName: "organization", size: 22, lb: LbTypes.OCTICONS, route: 'OrganizationScreen' },
|
|
45
|
+
{ name: 'Persons', iconName: "person-search", size: 29, lb: LbTypes.MATERIALICONS, route: 'ProfilesScreen' },
|
|
46
|
+
{ name: 'Chat', iconName: "chatbubbles-sharp", size: 24, lb: LbTypes.IONICONS, route: 'ChatScreen' },
|
|
47
|
+
{ name: 'Profile', iconName: "person", size: 23, lb: LbTypes.OCTICONS, route: 'ProfileScreen' },
|
|
48
48
|
];
|
|
49
49
|
var renderIcon = function (tab) {
|
|
50
50
|
switch (tab.lb) {
|
|
@@ -58,8 +58,9 @@ var renderIcon = function (tab) {
|
|
|
58
58
|
return null;
|
|
59
59
|
}
|
|
60
60
|
};
|
|
61
|
-
var BottomTab = function () {
|
|
62
|
-
var
|
|
61
|
+
var BottomTab = function (_a) {
|
|
62
|
+
var onTabPress = _a.onTabPress;
|
|
63
|
+
var _b = (0, react_1.useState)(0), activeTab = _b[0], setActiveTab = _b[1];
|
|
63
64
|
var tabWidth = theme_1.SIZES.width;
|
|
64
65
|
var tabW = tabWidth < theme_1.SIZES.container ? tabWidth / 5 : theme_1.SIZES.container / 5;
|
|
65
66
|
var circlePosition = (0, react_1.useRef)(new react_native_1.Animated.Value(tabWidth < theme_1.SIZES.container ? tabWidth / 2.5 : theme_1.SIZES.container / 2.5)).current;
|
|
@@ -69,8 +70,9 @@ var BottomTab = function () {
|
|
|
69
70
|
useNativeDriver: true,
|
|
70
71
|
}).start();
|
|
71
72
|
}, [activeTab]);
|
|
72
|
-
var handleTabPress = function (index) {
|
|
73
|
+
var handleTabPress = function (index, route) {
|
|
73
74
|
setActiveTab(index);
|
|
75
|
+
onTabPress(route); // Вызов коллбека при нажатии
|
|
74
76
|
};
|
|
75
77
|
return (react_1.default.createElement(react_native_1.View, { style: styles.tabContainer },
|
|
76
78
|
react_1.default.createElement(react_native_1.Animated.View, { style: [
|
|
@@ -81,7 +83,7 @@ var BottomTab = function () {
|
|
|
81
83
|
},
|
|
82
84
|
] },
|
|
83
85
|
react_1.default.createElement(react_native_1.View, { style: styles.circleInner })),
|
|
84
|
-
tabs.map(function (tab, index) { return (react_1.default.createElement(react_native_1.TouchableOpacity, { key: index, activeOpacity: 0.8, onPress: function () { return handleTabPress(index); }, style: styles.tabButton }, renderIcon(tab))); })));
|
|
86
|
+
tabs.map(function (tab, index) { return (react_1.default.createElement(react_native_1.TouchableOpacity, { key: index, activeOpacity: 0.8, onPress: function () { return handleTabPress(index, tab.route); }, style: styles.tabButton }, renderIcon(tab))); })));
|
|
85
87
|
};
|
|
86
88
|
exports.BottomTab = BottomTab;
|
|
87
89
|
var styles = react_native_1.StyleSheet.create({
|
|
@@ -109,13 +111,4 @@ var styles = react_native_1.StyleSheet.create({
|
|
|
109
111
|
backgroundColor: theme_1.COLORS.primary,
|
|
110
112
|
opacity: 0.15,
|
|
111
113
|
},
|
|
112
|
-
iconImage: {
|
|
113
|
-
width: 20,
|
|
114
|
-
height: 20,
|
|
115
|
-
},
|
|
116
|
-
profileImage: {
|
|
117
|
-
width: 34,
|
|
118
|
-
height: 34,
|
|
119
|
-
borderRadius: 50,
|
|
120
|
-
},
|
|
121
114
|
});
|
|
File without changes
|
|
@@ -1,2 +1,19 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
|
|
2
|
+
declare enum LbTypes {
|
|
3
|
+
OCTICONS = "Octicons",
|
|
4
|
+
IONICONS = "Ionicons",
|
|
5
|
+
MATERIALICONS = "MaterialIcons"
|
|
6
|
+
}
|
|
7
|
+
interface Tab {
|
|
8
|
+
name: string;
|
|
9
|
+
iconName: string;
|
|
10
|
+
size: number;
|
|
11
|
+
lb: LbTypes;
|
|
12
|
+
route: string;
|
|
13
|
+
}
|
|
14
|
+
interface BottomTabProps {
|
|
15
|
+
tabs: Tab[];
|
|
16
|
+
onTabPress: (route: string) => void;
|
|
17
|
+
}
|
|
18
|
+
export declare const BottomTab: React.FC<BottomTabProps>;
|
|
19
|
+
export {};
|