related-ui-components 2.5.3 → 2.5.5
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.
- package/lib/module/components/Input/CountryPickerView.js +68 -46
- package/lib/module/components/Input/CountryPickerView.js.map +1 -1
- package/lib/module/components/Input/PhoneInput.js +16 -14
- package/lib/module/components/Input/PhoneInput.js.map +1 -1
- package/lib/module/contexts/BottomSheetStackProvider.js +0 -1
- package/lib/module/contexts/BottomSheetStackProvider.js.map +1 -1
- package/lib/module/index.js +4 -7
- package/lib/module/index.js.map +1 -1
- package/lib/typescript/src/components/Input/CountryPickerView.d.ts.map +1 -1
- package/lib/typescript/src/components/Input/PhoneInput.d.ts.map +1 -1
- package/lib/typescript/src/contexts/BottomSheetStackProvider.d.ts.map +1 -1
- package/lib/typescript/src/index.d.ts +1 -0
- package/lib/typescript/src/index.d.ts.map +1 -1
- package/package.json +5 -2
- package/src/components/Input/CountryPickerView.tsx +67 -30
- package/src/components/Input/PhoneInput.tsx +39 -29
- package/src/contexts/BottomSheetStackProvider.tsx +0 -2
- package/src/index.ts +4 -4
|
@@ -1,12 +1,38 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
|
-
import React, { useState, useEffect } from "react";
|
|
3
|
+
import React, { useState, useEffect, useCallback, useMemo } from "react";
|
|
4
4
|
import { Text, View, TouchableOpacity, StyleSheet, InteractionManager, ActivityIndicator } from "react-native";
|
|
5
|
-
import {
|
|
5
|
+
import { BottomSheetFlashList } from "@gorhom/bottom-sheet";
|
|
6
6
|
import { useTheme } from "../../theme/index.js";
|
|
7
7
|
import { iso2ToFlagEmoji } from "../../utils/flags.js";
|
|
8
|
-
// Assuming you export this type
|
|
9
8
|
import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
|
|
9
|
+
// ADDED: A memoized row component to ensure stability
|
|
10
|
+
const CountryRow = /*#__PURE__*/React.memo(({
|
|
11
|
+
item,
|
|
12
|
+
onSelectCountry,
|
|
13
|
+
nameStyle,
|
|
14
|
+
codeStyle
|
|
15
|
+
}) => {
|
|
16
|
+
// This handler is now stable because onSelectCountry is stable
|
|
17
|
+
const handlePress = () => onSelectCountry(item);
|
|
18
|
+
return /*#__PURE__*/_jsxs(TouchableOpacity, {
|
|
19
|
+
style: styles.countryRow,
|
|
20
|
+
onPress: handlePress,
|
|
21
|
+
children: [/*#__PURE__*/_jsxs(Text, {
|
|
22
|
+
style: styles.flag,
|
|
23
|
+
children: [" ", iso2ToFlagEmoji(item.iso2)]
|
|
24
|
+
}), /*#__PURE__*/_jsxs(View, {
|
|
25
|
+
style: styles.countryText,
|
|
26
|
+
children: [/*#__PURE__*/_jsx(Text, {
|
|
27
|
+
style: nameStyle,
|
|
28
|
+
children: item.name
|
|
29
|
+
}), /*#__PURE__*/_jsx(Text, {
|
|
30
|
+
style: codeStyle,
|
|
31
|
+
children: item.code
|
|
32
|
+
})]
|
|
33
|
+
})]
|
|
34
|
+
});
|
|
35
|
+
});
|
|
10
36
|
export const CountryPickerView = ({
|
|
11
37
|
countries,
|
|
12
38
|
onSelectCountry,
|
|
@@ -19,56 +45,50 @@ export const CountryPickerView = ({
|
|
|
19
45
|
theme
|
|
20
46
|
} = useTheme();
|
|
21
47
|
const [isReady, setIsReady] = useState(false);
|
|
22
|
-
|
|
23
|
-
// Defer rendering of the list until after the bottom sheet has animated in
|
|
24
48
|
useEffect(() => {
|
|
25
|
-
InteractionManager.runAfterInteractions(() => {
|
|
49
|
+
const task = InteractionManager.runAfterInteractions(() => {
|
|
26
50
|
setIsReady(true);
|
|
27
51
|
});
|
|
52
|
+
return () => task.cancel(); // Cleanup interaction
|
|
28
53
|
}, []);
|
|
29
|
-
|
|
54
|
+
|
|
55
|
+
// ADDED: Memoize styles to pass them stably to the memoized row component
|
|
56
|
+
const memoizedNameStyle = useMemo(() => [styles.countryName, {
|
|
57
|
+
color: theme.text
|
|
58
|
+
}, countryNameStyle], [theme.text, countryNameStyle]);
|
|
59
|
+
const memoizedCodeStyle = useMemo(() => [styles.countryCode, {
|
|
60
|
+
color: theme.helper
|
|
61
|
+
}, countryCodeStyle],
|
|
62
|
+
// Use a different theme color for contrast
|
|
63
|
+
[theme.helper, countryCodeStyle]);
|
|
64
|
+
|
|
65
|
+
// CHANGED: renderCountry is now wrapped in useCallback
|
|
66
|
+
const renderCountry = useCallback(({
|
|
30
67
|
item
|
|
31
|
-
}) => /*#__PURE__*/
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
style: styles.countryText,
|
|
39
|
-
children: [/*#__PURE__*/_jsx(Text, {
|
|
40
|
-
style: [styles.countryName, {
|
|
41
|
-
color: theme.text
|
|
42
|
-
}, countryNameStyle],
|
|
43
|
-
children: item.name
|
|
44
|
-
}), /*#__PURE__*/_jsx(Text, {
|
|
45
|
-
style: [styles.countryCode, countryCodeStyle],
|
|
46
|
-
children: item.code
|
|
47
|
-
})]
|
|
48
|
-
})]
|
|
49
|
-
});
|
|
68
|
+
}) => /*#__PURE__*/_jsx(CountryRow, {
|
|
69
|
+
item: item,
|
|
70
|
+
onSelectCountry: onSelectCountry,
|
|
71
|
+
nameStyle: memoizedNameStyle,
|
|
72
|
+
codeStyle: memoizedCodeStyle
|
|
73
|
+
}), [onSelectCountry, memoizedNameStyle, memoizedCodeStyle] // Dependencies are now stable
|
|
74
|
+
);
|
|
50
75
|
return /*#__PURE__*/_jsxs(View, {
|
|
51
76
|
style: styles.popup,
|
|
52
77
|
children: [/*#__PURE__*/_jsx(Text, {
|
|
53
|
-
style: [styles.popupTitle,
|
|
78
|
+
style: [styles.popupTitle, {
|
|
54
79
|
color: theme.text
|
|
55
|
-
}],
|
|
80
|
+
}, listTitleStyle],
|
|
56
81
|
children: listTitle
|
|
57
|
-
}), isReady ? /*#__PURE__*/_jsx(
|
|
82
|
+
}), isReady ? /*#__PURE__*/_jsx(BottomSheetFlashList, {
|
|
58
83
|
data: countries,
|
|
59
|
-
keyExtractor: c => c.iso2
|
|
84
|
+
keyExtractor: c => c.iso2,
|
|
85
|
+
renderItem: renderCountry // This is now a stable function
|
|
60
86
|
,
|
|
61
|
-
renderItem: renderCountry,
|
|
62
87
|
contentContainerStyle: {
|
|
63
88
|
paddingBottom: 16
|
|
64
89
|
},
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
maxToRenderPerBatch: 15 // Performance tuning
|
|
68
|
-
}) :
|
|
69
|
-
/*#__PURE__*/
|
|
70
|
-
// Show a loading spinner while interactions are completing
|
|
71
|
-
_jsx(View, {
|
|
90
|
+
estimatedItemSize: 56 // Provide a more accurate estimate
|
|
91
|
+
}) : /*#__PURE__*/_jsx(View, {
|
|
72
92
|
style: styles.loaderContainer,
|
|
73
93
|
children: /*#__PURE__*/_jsx(ActivityIndicator, {
|
|
74
94
|
size: "large",
|
|
@@ -80,9 +100,8 @@ export const CountryPickerView = ({
|
|
|
80
100
|
const styles = StyleSheet.create({
|
|
81
101
|
popup: {
|
|
82
102
|
flex: 1,
|
|
83
|
-
// Ensure the view takes full height
|
|
84
103
|
width: "100%",
|
|
85
|
-
|
|
104
|
+
paddingHorizontal: 16
|
|
86
105
|
},
|
|
87
106
|
loaderContainer: {
|
|
88
107
|
flex: 1,
|
|
@@ -92,25 +111,28 @@ const styles = StyleSheet.create({
|
|
|
92
111
|
popupTitle: {
|
|
93
112
|
fontSize: 18,
|
|
94
113
|
fontWeight: "600",
|
|
95
|
-
marginBottom: 12
|
|
114
|
+
marginBottom: 12,
|
|
115
|
+
paddingTop: 16
|
|
96
116
|
},
|
|
97
117
|
countryRow: {
|
|
98
118
|
flexDirection: "row",
|
|
99
119
|
alignItems: "center",
|
|
100
|
-
paddingVertical:
|
|
120
|
+
paddingVertical: 12,
|
|
121
|
+
// Adjusted padding
|
|
122
|
+
height: 56 // Set a fixed height
|
|
101
123
|
},
|
|
102
124
|
flag: {
|
|
103
|
-
fontSize:
|
|
125
|
+
fontSize: 22
|
|
104
126
|
},
|
|
105
127
|
countryText: {
|
|
106
|
-
marginLeft: 12
|
|
128
|
+
marginLeft: 12,
|
|
129
|
+
flex: 1 // Allow text to take remaining space
|
|
107
130
|
},
|
|
108
131
|
countryName: {
|
|
109
132
|
fontSize: 16
|
|
110
133
|
},
|
|
111
134
|
countryCode: {
|
|
112
|
-
fontSize: 14
|
|
113
|
-
color: "#666"
|
|
135
|
+
fontSize: 14
|
|
114
136
|
}
|
|
115
137
|
});
|
|
116
138
|
//# sourceMappingURL=CountryPickerView.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["React","useState","useEffect","Text","View","TouchableOpacity","StyleSheet","InteractionManager","ActivityIndicator","
|
|
1
|
+
{"version":3,"names":["React","useState","useEffect","useCallback","useMemo","Text","View","TouchableOpacity","StyleSheet","InteractionManager","ActivityIndicator","BottomSheetFlashList","useTheme","iso2ToFlagEmoji","jsxs","_jsxs","jsx","_jsx","CountryRow","memo","item","onSelectCountry","nameStyle","codeStyle","handlePress","style","styles","countryRow","onPress","children","flag","iso2","countryText","name","code","CountryPickerView","countries","listTitle","listTitleStyle","countryNameStyle","countryCodeStyle","theme","isReady","setIsReady","task","runAfterInteractions","cancel","memoizedNameStyle","countryName","color","text","memoizedCodeStyle","countryCode","helper","renderCountry","popup","popupTitle","data","keyExtractor","c","renderItem","contentContainerStyle","paddingBottom","estimatedItemSize","loaderContainer","size","primary","create","flex","width","paddingHorizontal","alignItems","justifyContent","fontSize","fontWeight","marginBottom","paddingTop","flexDirection","paddingVertical","height","marginLeft"],"sourceRoot":"..\\..\\..\\..\\src","sources":["components/Input/CountryPickerView.tsx"],"mappings":"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","ignoreList":[]}
|
|
@@ -45,12 +45,9 @@ const PhoneInput = /*#__PURE__*/forwardRef(({
|
|
|
45
45
|
} = useBottomSheetStack();
|
|
46
46
|
const sel = useMemo(() => selectedCountry || countries.find(c => c.code === "+1") || countries[0], [selectedCountry, countries]);
|
|
47
47
|
const handleCountryPress = useCallback(c => {
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
}
|
|
52
|
-
}, [onSelectCountry, clear] // Add clear to dependency array
|
|
53
|
-
);
|
|
48
|
+
onSelectCountry?.(c);
|
|
49
|
+
clear();
|
|
50
|
+
}, [onSelectCountry, clear]);
|
|
54
51
|
const openCountryPicker = useCallback(() => {
|
|
55
52
|
push({
|
|
56
53
|
component: /*#__PURE__*/_jsx(CountryPickerView, {
|
|
@@ -61,12 +58,15 @@ const PhoneInput = /*#__PURE__*/forwardRef(({
|
|
|
61
58
|
countryNameStyle: countryNameStyle,
|
|
62
59
|
countryCodeStyle: countryCodeStyle
|
|
63
60
|
}),
|
|
64
|
-
snapPoints: ["
|
|
61
|
+
snapPoints: ["80%"]
|
|
65
62
|
});
|
|
66
63
|
}, [push, countries, handleCountryPress, listTitle, listTitleStyle, countryNameStyle, countryCodeStyle]);
|
|
67
|
-
|
|
64
|
+
|
|
65
|
+
// ADDED: Memoize the leftIcon element to prevent re-renders
|
|
66
|
+
const leftIcon = useMemo(() => /*#__PURE__*/_jsxs(TouchableOpacity, {
|
|
68
67
|
style: [styles.selector, {
|
|
69
|
-
backgroundColor: theme.inputBackground
|
|
68
|
+
backgroundColor: theme.inputBackground,
|
|
69
|
+
borderRightColor: theme.border // Use theme color
|
|
70
70
|
}],
|
|
71
71
|
hitSlop: {
|
|
72
72
|
left: 30,
|
|
@@ -90,10 +90,12 @@ const PhoneInput = /*#__PURE__*/forwardRef(({
|
|
|
90
90
|
name: "chevron-down",
|
|
91
91
|
size: 16,
|
|
92
92
|
style: {
|
|
93
|
-
marginHorizontal: 4
|
|
93
|
+
marginHorizontal: 4,
|
|
94
|
+
color: theme.inputText
|
|
94
95
|
}
|
|
95
96
|
})]
|
|
96
|
-
})
|
|
97
|
+
}), [theme, sel, openCountryPicker] // Dependencies for the memo
|
|
98
|
+
);
|
|
97
99
|
return /*#__PURE__*/_jsx(CustomInput, {
|
|
98
100
|
ref: ref,
|
|
99
101
|
label: label,
|
|
@@ -118,14 +120,14 @@ const styles = StyleSheet.create({
|
|
|
118
120
|
flexDirection: "row",
|
|
119
121
|
alignItems: "center",
|
|
120
122
|
borderRightWidth: 1,
|
|
121
|
-
|
|
123
|
+
paddingHorizontal: 8 // Add some padding
|
|
122
124
|
},
|
|
123
125
|
flag: {
|
|
124
|
-
fontSize:
|
|
126
|
+
fontSize: 22 // Slightly larger for better visibility
|
|
125
127
|
},
|
|
126
128
|
code: {
|
|
127
129
|
fontSize: 14,
|
|
128
|
-
marginLeft:
|
|
130
|
+
marginLeft: 6
|
|
129
131
|
}
|
|
130
132
|
});
|
|
131
133
|
export default PhoneInput;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["React","forwardRef","useMemo","useCallback","Text","TouchableOpacity","StyleSheet","CustomInput","useTheme","Ionicons","useBottomSheetStack","allCountries","iso2ToFlagEmoji","CountryPickerView","jsx","_jsx","jsxs","_jsxs","DEFAULT_COUNTRIES","map","c","code","dialCode","iso2","name","PhoneInput","value","onChangeText","selectedCountry","onSelectCountry","countries","containerStyle","inputContainerStyle","inputStyle","label","labelStyle","error","errorStyle","helper","helperStyle","listTitle","listTitleStyle","countryCodeStyle","countryNameStyle","rest","ref","theme","push","clear","sel","find","handleCountryPress","openCountryPicker","component","snapPoints","leftIcon","style","styles","selector","backgroundColor","inputBackground","hitSlop","left","top","right","bottom","onPress","activeOpacity","children","flag","color","inputText","size","marginHorizontal","keyboardType","placeholder","create","flexDirection","alignItems","borderRightWidth","
|
|
1
|
+
{"version":3,"names":["React","forwardRef","useMemo","useCallback","Text","TouchableOpacity","StyleSheet","CustomInput","useTheme","Ionicons","useBottomSheetStack","allCountries","iso2ToFlagEmoji","CountryPickerView","jsx","_jsx","jsxs","_jsxs","DEFAULT_COUNTRIES","map","c","code","dialCode","iso2","name","PhoneInput","value","onChangeText","selectedCountry","onSelectCountry","countries","containerStyle","inputContainerStyle","inputStyle","label","labelStyle","error","errorStyle","helper","helperStyle","listTitle","listTitleStyle","countryCodeStyle","countryNameStyle","rest","ref","theme","push","clear","sel","find","handleCountryPress","openCountryPicker","component","snapPoints","leftIcon","style","styles","selector","backgroundColor","inputBackground","borderRightColor","border","hitSlop","left","top","right","bottom","onPress","activeOpacity","children","flag","color","inputText","size","marginHorizontal","keyboardType","placeholder","create","flexDirection","alignItems","borderRightWidth","paddingHorizontal","fontSize","marginLeft"],"sourceRoot":"..\\..\\..\\..\\src","sources":["components/Input/PhoneInput.tsx"],"mappings":"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","ignoreList":[]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["BottomSheet","BottomSheetBackdrop","React","useCallback","useEffect","useMemo","useRef","useState","BackHandler","StyleSheet","Animated","FadeIn","FadeOut","useSafeAreaInsets","BottomSheetStackContext","jsx","_jsx","jsxs","_jsxs","BottomSheetStackProvider","children","stack","setStack","sheetRef","top","push","item","prev","clear","current","close","pop","length","slice","replace","currentItem","canGoBack","isOpen","snapToIndex","backHandlerSubscription","addEventListener","remove","AnimatedView","View","enteringAnimation","duration","exitingAnimation","renderBackdrop","props","disappearsOnIndex","style","backgroundColor","appearsOnIndex","pressBehavior","
|
|
1
|
+
{"version":3,"names":["BottomSheet","BottomSheetBackdrop","React","useCallback","useEffect","useMemo","useRef","useState","BackHandler","StyleSheet","Animated","FadeIn","FadeOut","useSafeAreaInsets","BottomSheetStackContext","jsx","_jsx","jsxs","_jsxs","BottomSheetStackProvider","children","stack","setStack","sheetRef","top","push","item","prev","clear","current","close","pop","length","slice","replace","currentItem","canGoBack","isOpen","snapToIndex","backHandlerSubscription","addEventListener","remove","AnimatedView","View","enteringAnimation","duration","exitingAnimation","renderBackdrop","props","disappearsOnIndex","style","backgroundColor","appearsOnIndex","pressBehavior","Provider","value","ref","index","snapPoints","enableDynamicSizing","undefined","enablePanDownToClose","android_keyboardInputMode","enableBlurKeyboardOnGesture","keyboardBlurBehavior","keyboardBehavior","onClose","backdropComponent","topInset","handleIndicatorStyle","styles","sheetContainer","entering","exiting","animatedView","component","create","flex"],"sourceRoot":"..\\..\\..\\src","sources":["contexts/BottomSheetStackProvider.tsx"],"mappings":";;AAAA,OAAOA,WAAW,IAChBC,mBAAmB,QAEd,sBAAsB;AAC7B,OAAOC,KAAK,IAEVC,WAAW,EACXC,SAAS,EACTC,OAAO,EACPC,MAAM,EACNC,QAAQ,QACH,OAAO;AACd,SAASC,WAAW,EAAEC,UAAU,QAAQ,cAAc;AACtD,OAAOC,QAAQ,IAAIC,MAAM,EAAEC,OAAO,QAAQ,yBAAyB;AACnE,SAASC,iBAAiB,QAAQ,gCAAgC;AAClE,SACEC,uBAAuB,QAElB,8BAA2B;AAAC,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAEnC,OAAO,MAAMC,wBAA2D,GAAGA,CAAC;EAC1EC;AACF,CAAC,KAAK;EACJ,MAAM,CAACC,KAAK,EAAEC,QAAQ,CAAC,GAAGf,QAAQ,CAAyB,EAAE,CAAC;EAC9D,MAAMgB,QAAQ,GAAGjB,MAAM,CAAc,IAAI,CAAC;EAC1C,MAAM;IAAEkB;EAAI,CAAC,GAAGX,iBAAiB,CAAC,CAAC;EAEnC,MAAMY,IAAI,GAAGtB,WAAW,CAAEuB,IAA0B,IAAK;IACvDJ,QAAQ,CAAEK,IAAI,IAAK,CAAC,GAAGA,IAAI,EAAED,IAAI,CAAC,CAAC;EACrC,CAAC,EAAE,EAAE,CAAC;EAEN,MAAME,KAAK,GAAGzB,WAAW,CAAC,MAAM;IAC9BoB,QAAQ,CAACM,OAAO,EAAEC,KAAK,CAAC,CAAC;IACzBR,QAAQ,CAAC,EAAE,CAAC;EACd,CAAC,EAAE,EAAE,CAAC;EAEN,MAAMS,GAAG,GAAG5B,WAAW,CAAC,MAAM;IAC5B,IAAIkB,KAAK,CAACW,MAAM,IAAI,CAAC,EAAE;MACrBJ,KAAK,CAAC,CAAC;MACP;IACF;IACAN,QAAQ,CAAEK,IAAI,IAAKA,IAAI,CAACM,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC;EACvC,CAAC,EAAE,CAACZ,KAAK,CAACW,MAAM,EAAEJ,KAAK,CAAC,CAAC;EAEzB,MAAMM,OAAO,GAAG/B,WAAW,CAAEuB,IAA0B,IAAK;IAC1DJ,QAAQ,CAAEK,IAAI,IAAK,CAAC,GAAGA,IAAI,CAACM,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAAEP,IAAI,CAAC,CAAC;EAClD,CAAC,EAAE,EAAE,CAAC;EAEN,MAAMS,WAAW,GAAG9B,OAAO,CAAC,MAAMgB,KAAK,CAACA,KAAK,CAACW,MAAM,GAAG,CAAC,CAAC,EAAE,CAACX,KAAK,CAAC,CAAC;EACnE,MAAMe,SAAS,GAAGf,KAAK,CAACW,MAAM,GAAG,CAAC;EAClC,MAAMK,MAAM,GAAGhB,KAAK,CAACW,MAAM,GAAG,CAAC;EAE/B5B,SAAS,CAAC,MAAM;IACd,IAAIiC,MAAM,IAAIF,WAAW,EAAE;MACzBZ,QAAQ,CAACM,OAAO,EAAES,WAAW,CAAC,CAAC,CAAC;IAClC;IAEA,MAAMC,uBAAuB,GAAG/B,WAAW,CAACgC,gBAAgB,CAC1D,mBAAmB,EACnB,MAAM;MACJ,IAAIJ,SAAS,EAAE;QACbL,GAAG,CAAC,CAAC;QACL,OAAO,IAAI;MACb;MACA,IAAI,CAACK,SAAS,IAAIf,KAAK,CAACW,MAAM,KAAK,CAAC,EAAE;QACpCT,QAAQ,CAACM,OAAO,EAAEC,KAAK,CAAC,CAAC;QACzB,OAAO,IAAI;MACb;MACA,OAAO,KAAK;IACd,CACF,CAAC;IAED,OAAO,MAAMS,uBAAuB,CAACE,MAAM,CAAC,CAAC;EAC/C,CAAC,EAAE,CAACJ,MAAM,EAAED,SAAS,EAAED,WAAW,EAAEJ,GAAG,EAAEV,KAAK,CAAC,CAAC;EAEhD,MAAMqB,YAAY,GAAGhC,QAAQ,CAACiC,IAAI;EAClC,MAAMC,iBAAiB,GAAGjC,MAAM,CAACkC,QAAQ,CAAC,GAAG,CAAC;EAC9C,MAAMC,gBAAgB,GAAGlC,OAAO,CAACiC,QAAQ,CAAC,GAAG,CAAC;EAE9C,MAAME,cAAc,GAAG5C,WAAW,CAC/B6C,KAA+B,iBAC9BhC,IAAA,CAACf,mBAAmB;IAAA,GACd+C,KAAK;IACTC,iBAAiB,EAAE,CAAC,CAAE;IACtBC,KAAK,EAAE,CAACF,KAAK,CAACE,KAAK,EAAE;MAAEC,eAAe,EAAE;IAAkB,CAAC,CAAE;IAC7DC,cAAc,EAAE,CAAE;IAClBC,aAAa,EAAE;EAAQ,CACxB,CACF,EACD,EACF,CAAC;EAED,oBACEnC,KAAA,CAACJ,uBAAuB,CAACwC,QAAQ;IAC/BC,KAAK,EAAE;MAAE9B,IAAI;MAAEM,GAAG;MAAEG,OAAO;MAAEN,KAAK;MAAEQ;IAAU,CAAE;IAAAhB,QAAA,GAE/CA,QAAQ,eACTJ,IAAA,CAAChB,WAAW;MACVwD,GAAG,EAAEjC,QAAS;MACdkC,KAAK,EAAE,CAAE;MACTC,UAAU,EAAEvB,WAAW,EAAEuB,UAAU,IAAI,CAAC,MAAM,CAAE;MAChDC,mBAAmB,EAAExB,WAAW,EAAEuB,UAAU,KAAKE,SAAU;MAC3DC,oBAAoB;MACpBC,yBAAyB,EAAC,cAAc;MACxCC,2BAA2B;MAC3BC,oBAAoB,EAAC,SAAS;MAC9BC,gBAAgB,EAAC,YAAY;MAC7BC,OAAO,EAAEtC,KAAM;MACfuC,iBAAiB,EAAEpB,cAAe;MAClCqB,QAAQ,EAAE5C,GAAI;MACd6C,oBAAoB,EAAE;QAAElB,eAAe,EAAE;MAAU,CAAE;MACrDD,KAAK,EAAEoB,MAAM,CAACC,cAAe;MAAAnD,QAAA,EAE5Be,WAAW,iBACVnB,IAAA,CAAC0B,YAAY;QAEX8B,QAAQ,EAAE5B,iBAAkB;QAC5B6B,OAAO,EAAE3B,gBAAiB;QAC1BI,KAAK,EAAEoB,MAAM,CAACI,YAAa;QAAAtD,QAAA,EAE1Be,WAAW,CAACwC;MAAS,GALjBtD,KAAK,CAACW,MAMC;IACf,CACU,CAAC;EAAA,CACkB,CAAC;AAEvC,CAAC;AAED,MAAMsC,MAAM,GAAG7D,UAAU,CAACmE,MAAM,CAAC;EAC/BL,cAAc,EAAE;IACd;IACA;IACA;EAAA,CACD;EACDG,YAAY,EAAE;IACZG,IAAI,EAAE;EACR;AACF,CAAC,CAAC","ignoreList":[]}
|
package/lib/module/index.js
CHANGED
|
@@ -1,12 +1,9 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
// registerRootComponent(App);
|
|
9
|
-
|
|
3
|
+
import { registerRootComponent } from 'expo';
|
|
4
|
+
import "react-native-reanimated";
|
|
5
|
+
import App from "./app.js";
|
|
6
|
+
registerRootComponent(App);
|
|
10
7
|
export * from "./theme/index.js";
|
|
11
8
|
export * from "./components/index.js";
|
|
12
9
|
export * from "./contexts/index.js";
|
package/lib/module/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":[],"sourceRoot":"..\\..\\src","sources":["index.ts"],"mappings":";;AAAA;
|
|
1
|
+
{"version":3,"names":["registerRootComponent","App"],"sourceRoot":"..\\..\\src","sources":["index.ts"],"mappings":";;AAAA,SAASA,qBAAqB,QAAQ,MAAM;AAC5C,OAAO,yBAAyB;AAGhC,OAAOC,GAAG,MAAM,UAAO;AAEvBD,qBAAqB,CAACC,GAAG,CAAC;AAE1B,cAAc,kBAAS;AACvB,cAAc,uBAAc;AAC5B,cAAc,qBAAY","ignoreList":[]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CountryPickerView.d.ts","sourceRoot":"","sources":["../../../../../src/components/Input/CountryPickerView.tsx"],"names":[],"mappings":"AAAA,OAAO,
|
|
1
|
+
{"version":3,"file":"CountryPickerView.d.ts","sourceRoot":"","sources":["../../../../../src/components/Input/CountryPickerView.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoD,MAAM,OAAO,CAAC;AACzE,OAAO,EAOL,SAAS,EACT,SAAS,EACV,MAAM,cAAc,CAAC;AAItB,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AAEvC,UAAU,sBAAsB;IAC9B,SAAS,EAAE,OAAO,EAAE,CAAC;IACrB,eAAe,EAAE,CAAC,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC;IACtC,SAAS,EAAE,MAAM,CAAC;IAClB,cAAc,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACtC,gBAAgB,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACxC,gBAAgB,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CACzC;AA8BD,eAAO,MAAM,iBAAiB,GAAI,gGAO/B,sBAAsB,sBAuDxB,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PhoneInput.d.ts","sourceRoot":"","sources":["../../../../../src/components/Input/PhoneInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA2C,MAAM,OAAO,CAAC;AAChE,OAAO,EACL,SAAS,
|
|
1
|
+
{"version":3,"file":"PhoneInput.d.ts","sourceRoot":"","sources":["../../../../../src/components/Input/PhoneInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA2C,MAAM,OAAO,CAAC;AAChE,OAAO,EACL,SAAS,EAMT,SAAS,EACT,SAAS,EACV,MAAM,cAAc,CAAC;AACtB,OAAoB,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAQxD,MAAM,MAAM,OAAO,GAAG;IACpB,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;CACd,CAAC;AAEF,MAAM,WAAW,eACf,SAAQ,IAAI,CACV,gBAAgB,EACd,UAAU,GACV,WAAW,GACX,kBAAkB,GAClB,cAAc,GACd,OAAO,GACP,sBAAsB,CACzB;IACD,KAAK,EAAE,MAAM,CAAC;IACd,YAAY,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,eAAe,CAAC,EAAE,CAAC,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC,SAAS,CAAC,EAAE,OAAO,EAAE,CAAC;IAGtB,gBAAgB,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACxC,gBAAgB,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACxC,cAAc,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAEtC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAQD,QAAA,MAAM,UAAU,mFAwHf,CAAC;AAkBF,eAAe,UAAU,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BottomSheetStackProvider.d.ts","sourceRoot":"","sources":["../../../../src/contexts/BottomSheetStackProvider.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,EACZ,SAAS,EAMV,MAAM,OAAO,CAAC;AASf,eAAO,MAAM,wBAAwB,EAAE,KAAK,CAAC,EAAE,CAAC;IAAE,QAAQ,EAAE,SAAS,CAAA;CAAE,
|
|
1
|
+
{"version":3,"file":"BottomSheetStackProvider.d.ts","sourceRoot":"","sources":["../../../../src/contexts/BottomSheetStackProvider.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,EACZ,SAAS,EAMV,MAAM,OAAO,CAAC;AASf,eAAO,MAAM,wBAAwB,EAAE,KAAK,CAAC,EAAE,CAAC;IAAE,QAAQ,EAAE,SAAS,CAAA;CAAE,CA0GtE,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.ts"],"names":[],"mappings":"AACA,OAAO,yBAAyB,CAAC;AAOjC,cAAc,SAAS,CAAA;AACvB,cAAc,cAAc,CAAC;AAC7B,cAAc,YAAY,CAAC"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "related-ui-components",
|
|
3
|
-
"version": "2.5.
|
|
3
|
+
"version": "2.5.5",
|
|
4
4
|
"main": "./src/index.ts",
|
|
5
5
|
"scripts": {
|
|
6
6
|
"start": "expo start",
|
|
@@ -75,5 +75,8 @@
|
|
|
75
75
|
"eslintIgnore": [
|
|
76
76
|
"node_modules/",
|
|
77
77
|
"lib/"
|
|
78
|
-
]
|
|
78
|
+
],
|
|
79
|
+
"dependencies": {
|
|
80
|
+
"@shopify/flash-list": "^1.8.3"
|
|
81
|
+
}
|
|
79
82
|
}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import React, { useState, useEffect } from "react";
|
|
1
|
+
import React, { useState, useEffect, useCallback, useMemo } from "react";
|
|
2
2
|
import {
|
|
3
3
|
Text,
|
|
4
4
|
View,
|
|
@@ -9,10 +9,10 @@ import {
|
|
|
9
9
|
StyleProp,
|
|
10
10
|
TextStyle,
|
|
11
11
|
} from "react-native";
|
|
12
|
-
import {
|
|
12
|
+
import { BottomSheetFlashList } from "@gorhom/bottom-sheet";
|
|
13
13
|
import { useTheme } from "../../theme";
|
|
14
14
|
import { iso2ToFlagEmoji } from "../../utils/flags";
|
|
15
|
-
import { Country } from "./PhoneInput";
|
|
15
|
+
import { Country } from "./PhoneInput";
|
|
16
16
|
|
|
17
17
|
interface CountryPickerViewProps {
|
|
18
18
|
countries: Country[];
|
|
@@ -23,6 +23,34 @@ interface CountryPickerViewProps {
|
|
|
23
23
|
countryCodeStyle?: StyleProp<TextStyle>;
|
|
24
24
|
}
|
|
25
25
|
|
|
26
|
+
// ADDED: A memoized row component to ensure stability
|
|
27
|
+
const CountryRow = React.memo(
|
|
28
|
+
({
|
|
29
|
+
item,
|
|
30
|
+
onSelectCountry,
|
|
31
|
+
nameStyle,
|
|
32
|
+
codeStyle,
|
|
33
|
+
}: {
|
|
34
|
+
item: Country;
|
|
35
|
+
onSelectCountry: (c: Country) => void;
|
|
36
|
+
nameStyle: StyleProp<TextStyle>;
|
|
37
|
+
codeStyle: StyleProp<TextStyle>;
|
|
38
|
+
}) => {
|
|
39
|
+
// This handler is now stable because onSelectCountry is stable
|
|
40
|
+
const handlePress = () => onSelectCountry(item);
|
|
41
|
+
|
|
42
|
+
return (
|
|
43
|
+
<TouchableOpacity style={styles.countryRow} onPress={handlePress}>
|
|
44
|
+
<Text style={styles.flag}> {iso2ToFlagEmoji(item.iso2)}</Text>
|
|
45
|
+
<View style={styles.countryText}>
|
|
46
|
+
<Text style={nameStyle}>{item.name}</Text>
|
|
47
|
+
<Text style={codeStyle}>{item.code}</Text>
|
|
48
|
+
</View>
|
|
49
|
+
</TouchableOpacity>
|
|
50
|
+
);
|
|
51
|
+
}
|
|
52
|
+
);
|
|
53
|
+
|
|
26
54
|
export const CountryPickerView = ({
|
|
27
55
|
countries,
|
|
28
56
|
onSelectCountry,
|
|
@@ -34,44 +62,51 @@ export const CountryPickerView = ({
|
|
|
34
62
|
const { theme } = useTheme();
|
|
35
63
|
const [isReady, setIsReady] = useState(false);
|
|
36
64
|
|
|
37
|
-
// Defer rendering of the list until after the bottom sheet has animated in
|
|
38
65
|
useEffect(() => {
|
|
39
|
-
InteractionManager.runAfterInteractions(() => {
|
|
66
|
+
const task = InteractionManager.runAfterInteractions(() => {
|
|
40
67
|
setIsReady(true);
|
|
41
68
|
});
|
|
69
|
+
return () => task.cancel(); // Cleanup interaction
|
|
42
70
|
}, []);
|
|
43
71
|
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
72
|
+
// ADDED: Memoize styles to pass them stably to the memoized row component
|
|
73
|
+
const memoizedNameStyle = useMemo(
|
|
74
|
+
() => [styles.countryName, { color: theme.text }, countryNameStyle],
|
|
75
|
+
[theme.text, countryNameStyle]
|
|
76
|
+
);
|
|
77
|
+
|
|
78
|
+
const memoizedCodeStyle = useMemo(
|
|
79
|
+
() => [styles.countryCode, { color: theme.helper }, countryCodeStyle], // Use a different theme color for contrast
|
|
80
|
+
[theme.helper, countryCodeStyle]
|
|
81
|
+
);
|
|
82
|
+
|
|
83
|
+
// CHANGED: renderCountry is now wrapped in useCallback
|
|
84
|
+
const renderCountry = useCallback(
|
|
85
|
+
({ item }: { item: Country }) => (
|
|
86
|
+
<CountryRow
|
|
87
|
+
item={item}
|
|
88
|
+
onSelectCountry={onSelectCountry}
|
|
89
|
+
nameStyle={memoizedNameStyle}
|
|
90
|
+
codeStyle={memoizedCodeStyle}
|
|
91
|
+
/>
|
|
92
|
+
),
|
|
93
|
+
[onSelectCountry, memoizedNameStyle, memoizedCodeStyle] // Dependencies are now stable
|
|
57
94
|
);
|
|
58
95
|
|
|
59
96
|
return (
|
|
60
97
|
<View style={styles.popup}>
|
|
61
|
-
<Text style={[styles.popupTitle,
|
|
98
|
+
<Text style={[styles.popupTitle, { color: theme.text }, listTitleStyle]}>
|
|
62
99
|
{listTitle}
|
|
63
100
|
</Text>
|
|
64
101
|
{isReady ? (
|
|
65
|
-
<
|
|
102
|
+
<BottomSheetFlashList
|
|
66
103
|
data={countries}
|
|
67
|
-
keyExtractor={(c) => c.iso2}
|
|
68
|
-
renderItem={renderCountry}
|
|
104
|
+
keyExtractor={(c: Country) => c.iso2}
|
|
105
|
+
renderItem={renderCountry} // This is now a stable function
|
|
69
106
|
contentContainerStyle={{ paddingBottom: 16 }}
|
|
70
|
-
|
|
71
|
-
maxToRenderPerBatch={15} // Performance tuning
|
|
107
|
+
estimatedItemSize={56} // Provide a more accurate estimate
|
|
72
108
|
/>
|
|
73
109
|
) : (
|
|
74
|
-
// Show a loading spinner while interactions are completing
|
|
75
110
|
<View style={styles.loaderContainer}>
|
|
76
111
|
<ActivityIndicator size="large" color={theme.primary} />
|
|
77
112
|
</View>
|
|
@@ -82,9 +117,9 @@ export const CountryPickerView = ({
|
|
|
82
117
|
|
|
83
118
|
const styles = StyleSheet.create({
|
|
84
119
|
popup: {
|
|
85
|
-
flex: 1,
|
|
120
|
+
flex: 1,
|
|
86
121
|
width: "100%",
|
|
87
|
-
|
|
122
|
+
paddingHorizontal: 16,
|
|
88
123
|
},
|
|
89
124
|
loaderContainer: {
|
|
90
125
|
flex: 1,
|
|
@@ -95,23 +130,25 @@ const styles = StyleSheet.create({
|
|
|
95
130
|
fontSize: 18,
|
|
96
131
|
fontWeight: "600",
|
|
97
132
|
marginBottom: 12,
|
|
133
|
+
paddingTop: 16,
|
|
98
134
|
},
|
|
99
135
|
countryRow: {
|
|
100
136
|
flexDirection: "row",
|
|
101
137
|
alignItems: "center",
|
|
102
|
-
paddingVertical:
|
|
138
|
+
paddingVertical: 12, // Adjusted padding
|
|
139
|
+
height: 56, // Set a fixed height
|
|
103
140
|
},
|
|
104
141
|
flag: {
|
|
105
|
-
fontSize:
|
|
142
|
+
fontSize: 22,
|
|
106
143
|
},
|
|
107
144
|
countryText: {
|
|
108
145
|
marginLeft: 12,
|
|
146
|
+
flex: 1, // Allow text to take remaining space
|
|
109
147
|
},
|
|
110
148
|
countryName: {
|
|
111
149
|
fontSize: 16,
|
|
112
150
|
},
|
|
113
151
|
countryCode: {
|
|
114
152
|
fontSize: 14,
|
|
115
|
-
color: "#666",
|
|
116
153
|
},
|
|
117
154
|
});
|
|
@@ -2,8 +2,10 @@ import React, { forwardRef, useMemo, useCallback } from "react";
|
|
|
2
2
|
import {
|
|
3
3
|
TextInput,
|
|
4
4
|
Text,
|
|
5
|
+
View,
|
|
5
6
|
TouchableOpacity,
|
|
6
7
|
StyleSheet,
|
|
8
|
+
TextInputProps,
|
|
7
9
|
StyleProp,
|
|
8
10
|
TextStyle,
|
|
9
11
|
} from "react-native";
|
|
@@ -13,7 +15,7 @@ import { Ionicons } from "@expo/vector-icons";
|
|
|
13
15
|
import { useBottomSheetStack } from "../../contexts";
|
|
14
16
|
import { allCountries } from "country-telephone-data";
|
|
15
17
|
import { iso2ToFlagEmoji } from "../../utils/flags";
|
|
16
|
-
import { CountryPickerView } from "./CountryPickerView";
|
|
18
|
+
import { CountryPickerView } from "./CountryPickerView";
|
|
17
19
|
|
|
18
20
|
export type Country = {
|
|
19
21
|
code: string;
|
|
@@ -89,12 +91,10 @@ const PhoneInput = forwardRef<TextInput, PhoneInputProps>(
|
|
|
89
91
|
|
|
90
92
|
const handleCountryPress = useCallback(
|
|
91
93
|
(c: Country) => {
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
clear();
|
|
95
|
-
}
|
|
94
|
+
onSelectCountry?.(c);
|
|
95
|
+
clear();
|
|
96
96
|
},
|
|
97
|
-
[onSelectCountry, clear]
|
|
97
|
+
[onSelectCountry, clear]
|
|
98
98
|
);
|
|
99
99
|
|
|
100
100
|
const openCountryPicker = useCallback(() => {
|
|
@@ -109,7 +109,7 @@ const PhoneInput = forwardRef<TextInput, PhoneInputProps>(
|
|
|
109
109
|
countryCodeStyle={countryCodeStyle}
|
|
110
110
|
/>
|
|
111
111
|
),
|
|
112
|
-
snapPoints: ["
|
|
112
|
+
snapPoints: ["80%"],
|
|
113
113
|
});
|
|
114
114
|
}, [
|
|
115
115
|
push,
|
|
@@ -121,25 +121,35 @@ const PhoneInput = forwardRef<TextInput, PhoneInputProps>(
|
|
|
121
121
|
countryCodeStyle,
|
|
122
122
|
]);
|
|
123
123
|
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
{
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
124
|
+
// ADDED: Memoize the leftIcon element to prevent re-renders
|
|
125
|
+
const leftIcon = useMemo(
|
|
126
|
+
() => (
|
|
127
|
+
<TouchableOpacity
|
|
128
|
+
style={[
|
|
129
|
+
styles.selector,
|
|
130
|
+
{
|
|
131
|
+
backgroundColor: theme.inputBackground,
|
|
132
|
+
borderRightColor: theme.border, // Use theme color
|
|
133
|
+
},
|
|
134
|
+
]}
|
|
135
|
+
hitSlop={{ left: 30, top: 30, right: 30, bottom: 30 }}
|
|
136
|
+
onPress={openCountryPicker}
|
|
137
|
+
activeOpacity={0.8}
|
|
138
|
+
>
|
|
139
|
+
<Text style={[styles.flag, { color: theme.inputText }]}>
|
|
140
|
+
{iso2ToFlagEmoji(sel.iso2)}
|
|
141
|
+
</Text>
|
|
142
|
+
<Text style={[styles.code, { color: theme.inputText }]}>
|
|
143
|
+
{sel.code}
|
|
144
|
+
</Text>
|
|
145
|
+
<Ionicons
|
|
146
|
+
name="chevron-down"
|
|
147
|
+
size={16}
|
|
148
|
+
style={{ marginHorizontal: 4, color: theme.inputText }}
|
|
149
|
+
/>
|
|
150
|
+
</TouchableOpacity>
|
|
151
|
+
),
|
|
152
|
+
[theme, sel, openCountryPicker] // Dependencies for the memo
|
|
143
153
|
);
|
|
144
154
|
|
|
145
155
|
return (
|
|
@@ -170,14 +180,14 @@ const styles = StyleSheet.create({
|
|
|
170
180
|
flexDirection: "row",
|
|
171
181
|
alignItems: "center",
|
|
172
182
|
borderRightWidth: 1,
|
|
173
|
-
|
|
183
|
+
paddingHorizontal: 8, // Add some padding
|
|
174
184
|
},
|
|
175
185
|
flag: {
|
|
176
|
-
fontSize:
|
|
186
|
+
fontSize: 22, // Slightly larger for better visibility
|
|
177
187
|
},
|
|
178
188
|
code: {
|
|
179
189
|
fontSize: 14,
|
|
180
|
-
marginLeft:
|
|
190
|
+
marginLeft: 6,
|
|
181
191
|
},
|
|
182
192
|
});
|
|
183
193
|
|
package/src/index.ts
CHANGED
|
@@ -1,10 +1,10 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
1
|
+
import { registerRootComponent } from 'expo';
|
|
2
|
+
import "react-native-reanimated";
|
|
3
3
|
|
|
4
4
|
|
|
5
|
-
|
|
5
|
+
import App from "./app";
|
|
6
6
|
|
|
7
|
-
|
|
7
|
+
registerRootComponent(App);
|
|
8
8
|
|
|
9
9
|
export * from "./theme"
|
|
10
10
|
export * from "./components";
|