Open vaporvee opened 3 weeks ago
Hi,
What is the return value of the result: GetSimCardsResult
?
export default function PhoneInputBox() {
const [phone, setPhone] = useState("");
const [country, setCountry] = useState("us");
if (simIsAvailable) {
useEffect(() => {
let hasPermission = true;
Sim.requestPermissions().then((permStatus) => {
hasPermission = permStatus.readSimCard === "granted";
})
if (hasPermission) {
Sim.getSimCards().then(async (result: GetSimCardsResult) => {
// log value of the `result: GetSimCardsResult`
console.log('get sim cards result:', result); // π
const simCard: SimCard = await result.simCards[0];
setPhone(simCard.number);
setCountry(simCard.isoCountryCode)
})
}
}, []);
}
return (
<PhoneInput
value={phone}
onChange={(phone) => setPhone(phone)}
/>
);
}
If the plugin works correctly, you should be able get to the data from the sim card. π
If not, there might be a bug in the plugin. I may need more information (e.g., iOS or Android, OS version, etc.) to debug this. π
i do get the information but with this i first have to reload the component after accepting the permission on anroid. but i need something like a Event i can use to directly retry to set the components data after the user presses the Accept button. because for me it doesn't wait after request permission. even inside a then() or with an await.
Maybe putting the hasPermission
check logic inside the Sim.requestPermissions().then(() => {/* ... */})
could help?
"use client";
import { useState, useEffect } from "react";
import PhoneInput from "react-phone-input-2";
import "react-phone-input-2/lib/style.css";
import { GetSimCardsResult, Sim, SimCard } from "@jonz94/capacitor-sim";
import { Capacitor } from "@capacitor/core";
const simIsAvailable = Capacitor.isPluginAvailable('Sim');
export default function PhoneInputBox() {
const [phone, setPhone] = useState('');
const [country, setCountry] = useState('us');
if (simIsAvailable) {
useEffect(() => {
let hasPermission = true;
Sim.requestPermissions().then((permStatus) => {
hasPermission = permStatus.readSimCard === 'granted';
// put `hasPermission` check logic inside the `Sim.requestPermissions().then(() => {/* ... */})`
if (hasPermission) {
Sim.getSimCards().then((result: GetSimCardsResult) => {
const simCard: SimCard = result.simCards[0];
setPhone(simCard.number);
setCountry(simCard.isoCountryCode);
});
}
});
}, []);
}
return (
<PhoneInput
value={phone}
onChange={(phone) => setPhone(phone)}
/>
);
}
nope it fires directly when the Access request window Pops Up instead of the user actually interacting with it. :/
Oh also I'm using the latest next.js and Android 12
Ah, maybe checkPermissions()
is what you need.
"use client";
import { useState, useEffect } from "react";
import PhoneInput from "react-phone-input-2";
import "react-phone-input-2/lib/style.css";
import { GetSimCardsResult, Sim, SimCard } from "@jonz94/capacitor-sim";
import { Capacitor } from "@capacitor/core";
const simIsAvailable = Capacitor.isPluginAvailable('Sim');
export default function PhoneInputBox() {
const [phone, setPhone] = useState('');
const [country, setCountry] = useState('us');
if (simIsAvailable) {
useEffect(() => {
// use `checkPermissions()` instead of `requestPermissions()`
Sim.checkPermissions().then((permStatus) => {
const hasPermission = permStatus.readSimCard === 'granted';
if (hasPermission) {
Sim.getSimCards().then(async (result: GetSimCardsResult) => {
const simCard: SimCard = await result.simCards[0];
setPhone(simCard.number);
setCountry(simCard.isoCountryCode);
});
}
});
}, []);
}
// TODO: add logic to trigger `eventHandler()`
// for example: <button onClick={eventHandler}>request permission</button>
function eventHandler() {
Sim.requestPermissions().then((permStatus) => {
const hasPermission = permStatus.readSimCard === 'granted';
if (hasPermission) {
Sim.getSimCards().then(async (result: GetSimCardsResult) => {
const simCard: SimCard = await result.simCards[0];
setPhone(simCard.number);
setCountry(simCard.isoCountryCode);
});
}
});
}
return (
<PhoneInput
value={phone}
onChange={(phone) => setPhone(phone)}
/>
);
}
Then, you can add your desired logic to trigger the eventHandler()
; this will request permissions and get SIM card data.
no i need to request the permission on android first. i already tried that function but its just checking the Perm directly after it was requestet and doesn't wait for "Allow". after pressing "Allow" it should fire a function actually setting the variable.
Expected behaviour Request permission -> wait for "Allow" => setPhone -> Phone number variable set automatically in Input Box
and all that without the user needing to Press something else then "Allow"
Hey i want to update my phone number component when I'm actaually getting the value of the phone number. I'm using next.js Also the country code overrides the phonenumber value completely