Почему не роботают Permissions в Expo Rect Native?
Столкнулся с такой проблемой - не удается вызвать модальное окно с правами. Но, особенность в том, что эта проблема проявляеться только в готовом билде ... То есть при проверке с expo все работает прекрасно, нужныe права выдаются и приложение работает корректно, но при попытке собрать проект и запустить готовую прогаму получаю такую ситуацию - вызываю модальное окно "предоставления разрешения на ..." и! Приложение просто крашиться и перестает реагировать на любые действия. Даже не могу ввести что-то в соседние к кнопке текстовые поля.
То что я уже попробовал: пересобрать приложение, редактировать поле Permissions в app.json
Вот код где и происходит вся магия
import React, { useEffect, useRef, useState } from "react";
import { View, Text, StyleSheet, AsyncStorage } from "react-native";
import { AppTextInput } from "../components/AppTextInput";
import { MainButton } from "../components/MainButton";
import { THEME } from "../theme";
import { BarCodeScanner } from "expo-barcode-scanner";
import { DB } from "../DB";
import * as Premissions from "expo-permissions";
export const LoginScreen = ({ onSubmit }) => {
const [isDisabled, setIsDisabled] = useState(true);
const [login, setLogin] = useState("");
const [password, setPassword] = useState("");
const [hasPermission, setHasPermission] = useState(null);
const [scanned, setScanned] = useState(false);
const [showScaner, setShowScaner] = useState(false);
const scanedData = useRef("");
async function askPremissions() {
const { statusBarCode } = await BarCodeScanner.requestPermissionsAsync();
const { status } = await Premissions.askAsync(
Premissions.CAMERA,
Premissions.CAMERA_ROLL
);
if (status !== "granted" && statusBarCode !== "granted") {
alert("Помилка", "Ви не надали необхідних для роботи програми прав");
return false;
}
return true;
}
const sginInHandler = async () => {
const reqData = {
login,
password,
serverUrl: scanedData.current,
};
try {
const response = await DB.getAPIKey(reqData);
if (!response.data) {
alert(
"Дані введені у поля не вірні, сервер не дав відповіді. Спробуйте інші пароль чи логін, або ж ще раз відскануйте QR код"
);
} else {
try {
await AsyncStorage.setItem("API_KEY", response.data.apikey);
await AsyncStorage.setItem("SERVER_URL", scanedData.current);
console.log(scanedData.current, "qr");
onSubmit();
} catch (error) {
console.log("error wihile setuping local storage");
}
}
} catch (error) {
alert(
"Дані введені у поля не вірні, сервер не дав відповіді. Спробуйте інші пароль чи логін, або ж ще раз відскануйте QR код"
);
}
};
useEffect(() => {
(async () => {
const { status } = await BarCodeScanner.requestPermissionsAsync();
setHasPermission(status === "granted");
})();
}, []);
const handleBarCodeScanned = ({ type, data }) => {
scanedData.current = data;
setScanned(true);
setShowScaner(false);
console.log(scanedData.current);
};
useEffect(() => {
if (login && login.length > 4 && password && scanned) {
setIsDisabled(false);
} else {
setIsDisabled(true);
}
}, [login, password, scanned]);
return (
<View style={styles.wrapper}>
<View style={styles.form}>
<Text style={styles.title}>F5 Remont</Text>
<View style={styles.inputWrapper}>
<AppTextInput
placeholder="Логін..."
onInput={setLogin}
value={login}
/>
<AppTextInput
placeholder="Пароль..."
onInput={setPassword}
value={password}
secureTextEntry={true}
/>
<MainButton
style={{
...styles.qrButton,
backgroundColor: !hasPermission
? THEME.DANGER_COLOR
: THEME.MAIN_COLOR,
}}
onPress={async () => {
setScanned(false);
setShowScaner(true);
if (!hasPermission) {
setHasPermission(askPremissions());
}
}}
>
<Text style={{ ...styles.signInText, fontSize: 18 }}>
{hasPermission
? scanned
? "Просканувати ще раз"
: "Просканувати QR-код"
: "Права не надані"}
</Text>
</MainButton>
<MainButton onPress={sginInHandler} disabled={isDisabled}>
<Text style={styles.signInText}>Ввійти</Text>
</MainButton>
</View>
</View>
{showScaner ? (
<BarCodeScanner
onBarCodeScanned={scanned ? undefined : handleBarCodeScanned}
style={StyleSheet.absoluteFillObject}
/>
) : (
<View></View>
)}
</View>
);
};
const styles = StyleSheet.create({
wrapper: {
justifyContent: "center",
alignItems: "center",
flex: 1,
},
form: {
backgroundColor: THEME.GREY_LIGHT,
width: "80%",
height: "80%",
},
title: {
fontSize: 24,
fontFamily: "open-bold",
backgroundColor: THEME.MAIN_COLOR,
color: "#fff",
height: 49,
width: "100%",
textAlign: "center",
padding: 6,
},
inputWrapper: {
paddingVertical: 20,
paddingHorizontal: 20,
},
signInText: {
fontSize: 24,
fontFamily: "open-bold",
color: "#fff",
},
qrButton: {
marginBottom: 10,
},
});
Кнопка которая вызывает запрос прав доступа
<MainButton
style={{
...styles.qrButton,
backgroundColor: !hasPermission
? THEME.DANGER_COLOR
: THEME.MAIN_COLOR,
}}
onPress={async () => {
setScanned(false);
setShowScaner(true);
if (!hasPermission) {
setHasPermission(askPremissions());
}
}}
>
<Text style={{ ...styles.signInText, fontSize: 18 }}>
{hasPermission
? scanned
? "Просканувати ще раз"
: "Просканувати QR-код"
: "Права не надані"}
</Text>
</MainButton>
И, чтобы вы не искали, функцией askPermissions отдельно
async function askPremissions() {
const { statusBarCode } = await BarCodeScanner.requestPermissionsAsync();
const { status } = await Premissions.askAsync(
Premissions.CAMERA,
Premissions.CAMERA_ROLL
);
if (status !== "granted" && statusBarCode !== "granted") {
alert("Помилка", "Ви не надали необхідних для роботи програми прав");
return false;
}
return true;
}
Ну и сам app.json может проблема в нем (кстати я так и немог понять как настроить и как пользоваться OTA update, буду благодарен за хорошуя статю :D )
{
"expo": {
"name": "F5 Remont",
"slug": "f5_remont",
"version": "1.0.1",
"orientation": "portrait",
"icon": "./assets/logo.png",
"splash": {
"image": "./assets/splash.png",
"resizeMode": "contain",
"backgroundColor": "#ffffff"
},
"updates": {
"fallbackToCacheTimeout": 0
},
"assetBundlePatterns": [
"**/*"
],
"ios": {
"supportsTablet": true,
"buildNumber": "1.0.1"
},
"android": {
"permissions": ["VIBRATE", "CAMERA", "CAMERA_ROLL"],
"versionCode": 2,
"package": "com.sawingjeracsus.f5remonts"
},
"web": {
"favicon": "./assets/favicon.png"
}
}
}