Compare commits
3 Commits
a41851dfcc
...
39f63d12aa
| Author | SHA1 | Date | |
|---|---|---|---|
| 39f63d12aa | |||
| 388d5e9a82 | |||
| 99bdb01644 |
32
app.json
32
app.json
@@ -1,54 +1,30 @@
|
||||
{
|
||||
"expo": {
|
||||
"name": "TBBANK ONLINE",
|
||||
"slug": "tbbank-online",
|
||||
"name": "temp-expo",
|
||||
"slug": "temp-expo",
|
||||
"version": "1.0.0",
|
||||
"orientation": "portrait",
|
||||
"icon": "./assets/icon.png",
|
||||
"userInterfaceStyle": "light",
|
||||
"newArchEnabled": true,
|
||||
"splash": {
|
||||
"image": "./assets/splash-icon.png",
|
||||
"resizeMode": "contain",
|
||||
"backgroundColor": "#ffffff"
|
||||
},
|
||||
"ios": {
|
||||
"supportsTablet": true,
|
||||
"statusBar": {
|
||||
"barStyle": "dark-content"
|
||||
}
|
||||
"supportsTablet": true
|
||||
},
|
||||
"android": {
|
||||
"adaptiveIcon": {
|
||||
"foregroundImage": "./assets/adaptive-icon.png",
|
||||
"backgroundColor": "#17b69b"
|
||||
},
|
||||
"edgeToEdgeEnabled": true,
|
||||
"package": "com.nurmuhammet.ali.tbbankonline",
|
||||
"statusBar": {
|
||||
"barStyle": "dark-content",
|
||||
"backgroundColor": "#ffffff"
|
||||
}
|
||||
},
|
||||
"web": {
|
||||
"favicon": "./assets/favicon.png"
|
||||
},
|
||||
"extra": {
|
||||
"eas": {
|
||||
"projectId": "280bed78-9335-4b73-a686-15a9f726a7ad"
|
||||
}
|
||||
},
|
||||
"plugins": [
|
||||
"expo-font",
|
||||
[
|
||||
"expo-splash-screen",
|
||||
{
|
||||
"backgroundColor": "#ffffff",
|
||||
"image": "./assets/splash-icon.png",
|
||||
"imageWidth": 200
|
||||
}
|
||||
],
|
||||
"expo-system-ui"
|
||||
"@config-plugins/react-native-pdf"
|
||||
]
|
||||
}
|
||||
}
|
||||
|
||||
141
package-lock.json
generated
141
package-lock.json
generated
@@ -8,6 +8,7 @@
|
||||
"name": "temp-expo",
|
||||
"version": "1.0.0",
|
||||
"dependencies": {
|
||||
"@config-plugins/react-native-pdf": "^11.0.0",
|
||||
"@expo/vector-icons": "^14.1.0",
|
||||
"@react-native-async-storage/async-storage": "2.1.2",
|
||||
"@react-native-community/datetimepicker": "8.4.1",
|
||||
@@ -16,19 +17,24 @@
|
||||
"@react-navigation/native": "^7.1.14",
|
||||
"@react-navigation/stack": "^7.4.2",
|
||||
"expo": "53.0.22",
|
||||
"expo-file-system": "~18.1.11",
|
||||
"expo-font": "~13.3.2",
|
||||
"expo-image-picker": "~16.1.4",
|
||||
"expo-media-library": "~17.1.7",
|
||||
"expo-splash-screen": "^31.0.8",
|
||||
"expo-status-bar": "~2.2.3",
|
||||
"expo-system-ui": "~5.0.11",
|
||||
"react": "19.0.0",
|
||||
"react-native": "0.79.5",
|
||||
"react-native-confirmation-code-field": "^8.0.1",
|
||||
"react-native-gesture-handler": "~2.24.0",
|
||||
"react-native-modal-datetime-picker": "^15.0.1",
|
||||
"react-native-pdf": "^6.7.7",
|
||||
"react-native-safe-area-context": "5.4.0",
|
||||
"react-native-screens": "^4.11.1",
|
||||
"react-native-svg": "15.11.2",
|
||||
"react-native-webview": "13.13.5"
|
||||
"react-native-webview": "13.13.5",
|
||||
"rn-fetch-blob": "^0.12.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@babel/core": "^7.20.0"
|
||||
@@ -1406,6 +1412,14 @@
|
||||
"node": ">=6.9.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@config-plugins/react-native-pdf": {
|
||||
"version": "11.0.0",
|
||||
"resolved": "https://registry.npmjs.org/@config-plugins/react-native-pdf/-/react-native-pdf-11.0.0.tgz",
|
||||
"integrity": "sha512-zpGsZ2wMly37WgIJ0CVWOZHmdtM98j33VUeHAFQMM9hzxANZsG/BmoPLp0AOqIENmucxif//pESUgF8aMiiqmA==",
|
||||
"peerDependencies": {
|
||||
"expo": "^53"
|
||||
}
|
||||
},
|
||||
"node_modules/@egjs/hammerjs": {
|
||||
"version": "2.0.17",
|
||||
"resolved": "https://registry.npmjs.org/@egjs/hammerjs/-/hammerjs-2.0.17.tgz",
|
||||
@@ -2568,6 +2582,11 @@
|
||||
"node": ">=18"
|
||||
}
|
||||
},
|
||||
"node_modules/@react-native/normalize-color": {
|
||||
"version": "2.1.0",
|
||||
"resolved": "https://registry.npmjs.org/@react-native/normalize-color/-/normalize-color-2.1.0.tgz",
|
||||
"integrity": "sha512-Z1jQI2NpdFJCVgpY+8Dq/Bt3d+YUi1928Q+/CZm/oh66fzM0RUl54vvuXlPJKybH4pdCZey1eDTPaLHkMPNgWA=="
|
||||
},
|
||||
"node_modules/@react-native/normalize-colors": {
|
||||
"version": "0.79.5",
|
||||
"resolved": "https://registry.npmjs.org/@react-native/normalize-colors/-/normalize-colors-0.79.5.tgz",
|
||||
@@ -3150,6 +3169,11 @@
|
||||
"resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
|
||||
"integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw=="
|
||||
},
|
||||
"node_modules/base-64": {
|
||||
"version": "0.1.0",
|
||||
"resolved": "https://registry.npmjs.org/base-64/-/base-64-0.1.0.tgz",
|
||||
"integrity": "sha512-Y5gU45svrR5tI2Vt/X9GPd3L0HNIKzGu202EjxrXMpuc2V2CiKgemAbUUsqYmZJvPtCXoUKjNZwBJzsNScUbXA=="
|
||||
},
|
||||
"node_modules/base64-js": {
|
||||
"version": "1.5.1",
|
||||
"resolved": "https://registry.npmjs.org/base64-js/-/base64-js-1.5.1.tgz",
|
||||
@@ -3708,6 +3732,11 @@
|
||||
"node": ">= 8"
|
||||
}
|
||||
},
|
||||
"node_modules/crypto-js": {
|
||||
"version": "4.2.0",
|
||||
"resolved": "https://registry.npmjs.org/crypto-js/-/crypto-js-4.2.0.tgz",
|
||||
"integrity": "sha512-KALDyEYgpY+Rlob/iriUtjV6d5Eq+Y191A5g4UqLAi8CyGP9N1+FdVbkc1SxKc2r4YAYqG8JzO2KGL+AizD70Q=="
|
||||
},
|
||||
"node_modules/crypto-random-string": {
|
||||
"version": "2.0.0",
|
||||
"resolved": "https://registry.npmjs.org/crypto-random-string/-/crypto-random-string-2.0.0.tgz",
|
||||
@@ -3829,6 +3858,16 @@
|
||||
"node": ">= 0.8"
|
||||
}
|
||||
},
|
||||
"node_modules/deprecated-react-native-prop-types": {
|
||||
"version": "2.3.0",
|
||||
"resolved": "https://registry.npmjs.org/deprecated-react-native-prop-types/-/deprecated-react-native-prop-types-2.3.0.tgz",
|
||||
"integrity": "sha512-pWD0voFtNYxrVqvBMYf5gq3NA2GCpfodS1yNynTPc93AYA/KEMGeWDqqeUB6R2Z9ZofVhks2aeJXiuQqKNpesA==",
|
||||
"dependencies": {
|
||||
"@react-native/normalize-color": "*",
|
||||
"invariant": "*",
|
||||
"prop-types": "*"
|
||||
}
|
||||
},
|
||||
"node_modules/destroy": {
|
||||
"version": "1.2.0",
|
||||
"resolved": "https://registry.npmjs.org/destroy/-/destroy-1.2.0.tgz",
|
||||
@@ -4168,6 +4207,15 @@
|
||||
"react": "*"
|
||||
}
|
||||
},
|
||||
"node_modules/expo-media-library": {
|
||||
"version": "17.1.7",
|
||||
"resolved": "https://registry.npmjs.org/expo-media-library/-/expo-media-library-17.1.7.tgz",
|
||||
"integrity": "sha512-hLCoMvlhjtt+iYxPe71P1F6t06mYGysuNOfjQzDbbf64PCkglCZJYmywPyUSV1V5Hu9DhRj//gEg+Ki+7VWXog==",
|
||||
"peerDependencies": {
|
||||
"expo": "*",
|
||||
"react-native": "*"
|
||||
}
|
||||
},
|
||||
"node_modules/expo-modules-autolinking": {
|
||||
"version": "2.1.14",
|
||||
"resolved": "https://registry.npmjs.org/expo-modules-autolinking/-/expo-modules-autolinking-2.1.14.tgz",
|
||||
@@ -6733,6 +6781,37 @@
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/react-native-blob-util": {
|
||||
"version": "0.22.2",
|
||||
"resolved": "https://registry.npmjs.org/react-native-blob-util/-/react-native-blob-util-0.22.2.tgz",
|
||||
"integrity": "sha512-Czx01QMg7aLsm/4F/7+eqoRAi1q/qjLY2Kao16g+n2SRnTH1+qkD8Qhx2q9okB+VNQvZKB1LbiXhktzYQV52xQ==",
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"base-64": "0.1.0",
|
||||
"glob": "^10.3.10"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": "*",
|
||||
"react-native": "*"
|
||||
}
|
||||
},
|
||||
"node_modules/react-native-confirmation-code-field": {
|
||||
"version": "8.0.1",
|
||||
"resolved": "https://registry.npmjs.org/react-native-confirmation-code-field/-/react-native-confirmation-code-field-8.0.1.tgz",
|
||||
"integrity": "sha512-pwrhQtspFEp0y/gxZRp8hrra+UjAYfwAsW5Sn3yYtdUZVyRjAZPBnUb3rOc+z5L5o2ml03z5P3uvTK0yQwXsmA==",
|
||||
"peerDependencies": {
|
||||
"react": ">=16.4.0",
|
||||
"react-native": ">=0.64.0"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"react": {
|
||||
"optional": true
|
||||
},
|
||||
"react-native": {
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/react-native-edge-to-edge": {
|
||||
"version": "1.6.0",
|
||||
"resolved": "https://registry.npmjs.org/react-native-edge-to-edge/-/react-native-edge-to-edge-1.6.0.tgz",
|
||||
@@ -6777,6 +6856,20 @@
|
||||
"react-native": ">=0.65.0"
|
||||
}
|
||||
},
|
||||
"node_modules/react-native-pdf": {
|
||||
"version": "6.7.7",
|
||||
"resolved": "https://registry.npmjs.org/react-native-pdf/-/react-native-pdf-6.7.7.tgz",
|
||||
"integrity": "sha512-D0ga/eyPsVWSPEBm622sGVZLl3gibxPmfm2cxsLcUrZ4WDSGR5HyGmvvWaR/m9wXEyIbD4J6q9qzuG6yObcSXw==",
|
||||
"dependencies": {
|
||||
"crypto-js": "4.2.0",
|
||||
"deprecated-react-native-prop-types": "^2.3.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": "*",
|
||||
"react-native": "*",
|
||||
"react-native-blob-util": ">=0.13.7"
|
||||
}
|
||||
},
|
||||
"node_modules/react-native-safe-area-context": {
|
||||
"version": "5.4.0",
|
||||
"resolved": "https://registry.npmjs.org/react-native-safe-area-context/-/react-native-safe-area-context-5.4.0.tgz",
|
||||
@@ -7148,6 +7241,52 @@
|
||||
"node": "*"
|
||||
}
|
||||
},
|
||||
"node_modules/rn-fetch-blob": {
|
||||
"version": "0.12.0",
|
||||
"resolved": "https://registry.npmjs.org/rn-fetch-blob/-/rn-fetch-blob-0.12.0.tgz",
|
||||
"integrity": "sha512-+QnR7AsJ14zqpVVUbzbtAjq0iI8c9tCg49tIoKO2ezjzRunN7YL6zFSFSWZm6d+mE/l9r+OeDM3jmb2tBb2WbA==",
|
||||
"dependencies": {
|
||||
"base-64": "0.1.0",
|
||||
"glob": "7.0.6"
|
||||
}
|
||||
},
|
||||
"node_modules/rn-fetch-blob/node_modules/brace-expansion": {
|
||||
"version": "1.1.12",
|
||||
"resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.12.tgz",
|
||||
"integrity": "sha512-9T9UjW3r0UW5c1Q7GTwllptXwhvYmEzFhzMfZ9H7FQWt+uZePjZPjBP/W1ZEyZ1twGWom5/56TF4lPcqjnDHcg==",
|
||||
"dependencies": {
|
||||
"balanced-match": "^1.0.0",
|
||||
"concat-map": "0.0.1"
|
||||
}
|
||||
},
|
||||
"node_modules/rn-fetch-blob/node_modules/glob": {
|
||||
"version": "7.0.6",
|
||||
"resolved": "https://registry.npmjs.org/glob/-/glob-7.0.6.tgz",
|
||||
"integrity": "sha512-f8c0rE8JiCxpa52kWPAOa3ZaYEnzofDzCQLCn3Vdk0Z5OVLq3BsRFJI4S4ykpeVW6QMGBUkMeUpoEgWnMTnw5Q==",
|
||||
"deprecated": "Glob versions prior to v9 are no longer supported",
|
||||
"dependencies": {
|
||||
"fs.realpath": "^1.0.0",
|
||||
"inflight": "^1.0.4",
|
||||
"inherits": "2",
|
||||
"minimatch": "^3.0.2",
|
||||
"once": "^1.3.0",
|
||||
"path-is-absolute": "^1.0.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": "*"
|
||||
}
|
||||
},
|
||||
"node_modules/rn-fetch-blob/node_modules/minimatch": {
|
||||
"version": "3.1.2",
|
||||
"resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
|
||||
"integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
|
||||
"dependencies": {
|
||||
"brace-expansion": "^1.1.7"
|
||||
},
|
||||
"engines": {
|
||||
"node": "*"
|
||||
}
|
||||
},
|
||||
"node_modules/safe-buffer": {
|
||||
"version": "5.2.1",
|
||||
"resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz",
|
||||
|
||||
@@ -9,6 +9,7 @@
|
||||
"web": "expo start --web"
|
||||
},
|
||||
"dependencies": {
|
||||
"@config-plugins/react-native-pdf": "^11.0.0",
|
||||
"@expo/vector-icons": "^14.1.0",
|
||||
"@react-native-async-storage/async-storage": "2.1.2",
|
||||
"@react-native-community/datetimepicker": "8.4.1",
|
||||
@@ -17,19 +18,24 @@
|
||||
"@react-navigation/native": "^7.1.14",
|
||||
"@react-navigation/stack": "^7.4.2",
|
||||
"expo": "53.0.22",
|
||||
"expo-file-system": "~18.1.11",
|
||||
"expo-font": "~13.3.2",
|
||||
"expo-image-picker": "~16.1.4",
|
||||
"expo-media-library": "~17.1.7",
|
||||
"expo-splash-screen": "^31.0.8",
|
||||
"expo-status-bar": "~2.2.3",
|
||||
"expo-system-ui": "~5.0.11",
|
||||
"react": "19.0.0",
|
||||
"react-native": "0.79.5",
|
||||
"react-native-confirmation-code-field": "^8.0.1",
|
||||
"react-native-gesture-handler": "~2.24.0",
|
||||
"react-native-modal-datetime-picker": "^15.0.1",
|
||||
"react-native-pdf": "^6.7.7",
|
||||
"react-native-safe-area-context": "5.4.0",
|
||||
"react-native-screens": "^4.11.1",
|
||||
"react-native-svg": "15.11.2",
|
||||
"react-native-webview": "13.13.5",
|
||||
"expo-system-ui": "~5.0.11"
|
||||
"rn-fetch-blob": "^0.12.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@babel/core": "^7.20.0"
|
||||
|
||||
@@ -104,13 +104,9 @@ const EditProfileModal = ({
|
||||
}
|
||||
|
||||
// Card year validation (optional, 4 digits and reasonable year)
|
||||
if (formData.card_year) {
|
||||
const year = parseInt(formData.card_year.trim(), 10);
|
||||
const currentYear = new Date().getFullYear();
|
||||
if (!/^[0-9]{4}$/.test(formData.card_year.trim()) || year < currentYear - 10 || year > currentYear + 10) {
|
||||
newErrors.card_year = `Ýyl ${currentYear - 10}-den ${currentYear + 10}-e çenli bolmaly`;
|
||||
}
|
||||
}
|
||||
// if (formData.card_year) {
|
||||
|
||||
// }
|
||||
|
||||
setErrors(newErrors);
|
||||
return Object.keys(newErrors).length === 0;
|
||||
|
||||
@@ -25,6 +25,7 @@ import CardPinOrderDetailsScreen from '../screens/Card/CardPinOrderDetailsScreen
|
||||
import CardOrdersScreen from '../screens/Card/CardOrdersScreen';
|
||||
import CreateCardOrderScreen from '../screens/Card/CreateCardOrderScreen';
|
||||
import CardOrderDetailsScreen from '../screens/Card/CardOrderDetailsScreen';
|
||||
import PdfViewerScreen from '../screens/Shared/PdfViewerScreen';
|
||||
|
||||
const Stack = createStackNavigator();
|
||||
|
||||
@@ -54,6 +55,11 @@ const MenuNavigator = () => (
|
||||
<Stack.Screen name="CardOrders" component={CardOrdersScreen} />
|
||||
<Stack.Screen name="CreateCardOrder" component={CreateCardOrderScreen} />
|
||||
<Stack.Screen name="CardOrderDetails" component={CardOrderDetailsScreen} />
|
||||
<Stack.Screen
|
||||
name="PdfViewer"
|
||||
component={PdfViewerScreen}
|
||||
options={{ headerShown: true }}
|
||||
/>
|
||||
</Stack.Navigator>
|
||||
);
|
||||
|
||||
|
||||
@@ -16,15 +16,27 @@ import { StatusBar } from 'expo-status-bar';
|
||||
import { useFocusEffect } from '@react-navigation/native';
|
||||
import { useAuth } from '../../contexts/AuthContext';
|
||||
import Button from '../../components/Button';
|
||||
import Input from '../../components/Input';
|
||||
import {
|
||||
CodeField,
|
||||
Cursor,
|
||||
useBlurOnFulfill,
|
||||
useClearByFocusCell,
|
||||
} from 'react-native-confirmation-code-field';
|
||||
import { COLORS } from '../../constants/colors';
|
||||
|
||||
const CELL_COUNT = 6;
|
||||
|
||||
const VerificationScreen = ({ navigation }) => {
|
||||
const [code, setCode] = useState('');
|
||||
const [countdown, setCountdown] = useState(60);
|
||||
const [canResend, setCanResend] = useState(false);
|
||||
const { verify, isLoading, pendingVerification, clearPendingVerification } = useAuth();
|
||||
const countdownRef = useRef(null);
|
||||
const ref = useBlurOnFulfill({ value: code, cellCount: CELL_COUNT });
|
||||
const [props, getCellOnLayoutHandler] = useClearByFocusCell({
|
||||
value: code,
|
||||
setValue: setCode,
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
if (!pendingVerification) {
|
||||
@@ -74,18 +86,18 @@ const VerificationScreen = ({ navigation }) => {
|
||||
}, 1000);
|
||||
};
|
||||
|
||||
const handleVerify = async () => {
|
||||
if (!code.trim()) {
|
||||
const handleVerify = async (filledCode) => {
|
||||
if (!filledCode.trim()) {
|
||||
Alert.alert('Ýalňyşlyk', 'Tassyklama koduny giriziň');
|
||||
return;
|
||||
}
|
||||
|
||||
if (!/^\d{6}$/.test(code.trim())) {
|
||||
if (!/^\d{6}$/.test(filledCode.trim())) {
|
||||
Alert.alert('Ýalňyşlyk', 'Tassyklama kody 6 sanly bolmaly');
|
||||
return;
|
||||
}
|
||||
|
||||
const result = await verify(code.trim());
|
||||
const result = await verify(filledCode.trim());
|
||||
|
||||
if (result.success) {
|
||||
// Navigation will be handled by AuthContext
|
||||
@@ -94,6 +106,8 @@ const VerificationScreen = ({ navigation }) => {
|
||||
}
|
||||
};
|
||||
|
||||
const handleVerifyWrapper = () => handleVerify(code);
|
||||
|
||||
const handleResendCode = async () => {
|
||||
if (!canResend) return;
|
||||
|
||||
@@ -153,24 +167,29 @@ const VerificationScreen = ({ navigation }) => {
|
||||
</View>
|
||||
|
||||
<View style={styles.formContainer}>
|
||||
<Input
|
||||
label="Tassyklama kody"
|
||||
<CodeField
|
||||
ref={ref}
|
||||
{...props}
|
||||
value={code}
|
||||
onChangeText={setCode}
|
||||
placeholder="123456"
|
||||
keyboardType="numeric"
|
||||
maxLength={6}
|
||||
style={styles.codeInput}
|
||||
textAlign="center"
|
||||
returnKeyType="done"
|
||||
onSubmitEditing={handleVerify}
|
||||
cellCount={CELL_COUNT}
|
||||
rootStyle={styles.otpContainer}
|
||||
keyboardType="number-pad"
|
||||
textContentType="oneTimeCode"
|
||||
autoComplete="sms-otp"
|
||||
renderCell={({ index, symbol, isFocused }) => (
|
||||
<Text
|
||||
key={index}
|
||||
style={[styles.otpInput, isFocused && styles.otpInputHighlight]}
|
||||
onLayout={getCellOnLayoutHandler(index)}>
|
||||
{symbol || (isFocused ? <Cursor/> : null)}
|
||||
</Text>
|
||||
)}
|
||||
onSubmitEditing={handleVerifyWrapper}
|
||||
/>
|
||||
|
||||
<Button
|
||||
title="Tassykla"
|
||||
onPress={handleVerify}
|
||||
onPress={handleVerifyWrapper}
|
||||
loading={isLoading}
|
||||
style={styles.verifyButton}
|
||||
/>
|
||||
@@ -259,10 +278,25 @@ const styles = StyleSheet.create({
|
||||
formContainer: {
|
||||
alignItems: 'center',
|
||||
},
|
||||
codeInput: {
|
||||
width: '100%',
|
||||
otpContainer: {
|
||||
width: '90%',
|
||||
marginBottom: 32,
|
||||
},
|
||||
otpInput: {
|
||||
width: 45,
|
||||
height: 60,
|
||||
lineHeight: 58,
|
||||
borderWidth: 1,
|
||||
borderRadius: 12,
|
||||
borderColor: COLORS.gray[300],
|
||||
color: COLORS.textPrimary,
|
||||
fontSize: 24,
|
||||
fontWeight: 'bold',
|
||||
textAlign: 'center',
|
||||
},
|
||||
otpInputHighlight: {
|
||||
borderColor: COLORS.primary,
|
||||
},
|
||||
verifyButton: {
|
||||
width: '100%',
|
||||
marginBottom: 32,
|
||||
|
||||
@@ -75,7 +75,7 @@ const CardTransactionOrderDetailsScreen = () => {
|
||||
const res = await apiService.downloadCardTransactions(orderId, startDate, endDate);
|
||||
setDownloading(false);
|
||||
if (res.success && res.data?.url) {
|
||||
Linking.openURL(res.data.url);
|
||||
navigation.navigate('PdfViewer', { url: res.data.url, title: 'Card Transactions' });
|
||||
setModalVisible(false);
|
||||
} else {
|
||||
Alert.alert('Ýalňyşlyk', res.data.message || 'Näsazlyk ýüze çykdy');
|
||||
|
||||
103
src/screens/Shared/PdfViewerScreen.js
Normal file
103
src/screens/Shared/PdfViewerScreen.js
Normal file
@@ -0,0 +1,103 @@
|
||||
import React, { useLayoutEffect, useState } from 'react';
|
||||
import { View, TouchableOpacity, Text, StyleSheet, ActivityIndicator, Alert, Dimensions } from 'react-native';
|
||||
import Pdf from 'react-native-pdf';
|
||||
import { useNavigation, useRoute } from '@react-navigation/native';
|
||||
import { Ionicons } from '@expo/vector-icons';
|
||||
import * as MediaLibrary from 'expo-media-library';
|
||||
import { COLORS } from '../../constants/colors';
|
||||
|
||||
const PdfViewerScreen = () => {
|
||||
const navigation = useNavigation();
|
||||
const route = useRoute();
|
||||
const { url: pdfUrl, title = 'Document' } = route.params;
|
||||
|
||||
const [saving, setSaving] = useState(false);
|
||||
const [cachedPdfPath, setCachedPdfPath] = useState(null);
|
||||
|
||||
const source = { uri: pdfUrl, cache: true };
|
||||
|
||||
const handleSavePdf = async () => {
|
||||
if (!cachedPdfPath) {
|
||||
Alert.alert('Error', 'PDF is not loaded yet. Please wait.');
|
||||
return;
|
||||
}
|
||||
|
||||
setSaving(true);
|
||||
try {
|
||||
const { status } = await MediaLibrary.requestPermissionsAsync();
|
||||
if (status !== 'granted') {
|
||||
Alert.alert('Permission required', 'We need permission to save files to your device.');
|
||||
setSaving(false);
|
||||
return;
|
||||
}
|
||||
|
||||
const asset = await MediaLibrary.createAssetAsync(cachedPdfPath);
|
||||
const album = await MediaLibrary.getAlbumAsync('Downloads');
|
||||
if (album == null) {
|
||||
await MediaLibrary.createAlbumAsync('Downloads', asset, false);
|
||||
} else {
|
||||
await MediaLibrary.addAssetsToAlbumAsync([asset], album, false);
|
||||
}
|
||||
Alert.alert('Saved!', 'PDF has been saved to your Downloads folder.');
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
Alert.alert('Error', 'Could not save the PDF.');
|
||||
} finally {
|
||||
setSaving(false);
|
||||
}
|
||||
};
|
||||
|
||||
useLayoutEffect(() => {
|
||||
navigation.setOptions({
|
||||
title: title,
|
||||
headerRight: () => (
|
||||
saving ? (
|
||||
<ActivityIndicator color={COLORS.primary} style={{ marginRight: 15 }}/>
|
||||
) : (
|
||||
<TouchableOpacity onPress={handleSavePdf} style={{ marginRight: 15 }}>
|
||||
<Ionicons name="download-outline" size={24} color={COLORS.primary} />
|
||||
</TouchableOpacity>
|
||||
)
|
||||
),
|
||||
});
|
||||
}, [navigation, saving, pdfUrl, title, cachedPdfPath]);
|
||||
|
||||
return (
|
||||
<View style={styles.container}>
|
||||
<Pdf
|
||||
trustAllCerts={false}
|
||||
source={source}
|
||||
onLoadComplete={(numberOfPages, filePath) => {
|
||||
setCachedPdfPath(filePath);
|
||||
}}
|
||||
onPageChanged={(page, numberOfPages) => {
|
||||
// console.log(`Current page: ${page}`);
|
||||
}}
|
||||
onError={(error) => {
|
||||
console.log(error);
|
||||
Alert.alert('Error', 'Could not load the document.');
|
||||
}}
|
||||
onPressLink={(uri) => {
|
||||
// console.log(`Link pressed: ${uri}`);
|
||||
}}
|
||||
style={styles.pdf}
|
||||
/>
|
||||
</View>
|
||||
);
|
||||
};
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: {
|
||||
flex: 1,
|
||||
justifyContent: 'flex-start',
|
||||
alignItems: 'center',
|
||||
backgroundColor: '#f5f5f5',
|
||||
},
|
||||
pdf: {
|
||||
flex: 1,
|
||||
width: Dimensions.get('window').width,
|
||||
height: Dimensions.get('window').height,
|
||||
},
|
||||
});
|
||||
|
||||
export default PdfViewerScreen;
|
||||
Reference in New Issue
Block a user