react-native-android-sms-retriever-api

React Native implementation of Android SMS Retriever API. No READ_SMS permission is required.

For bare react-native projects only. Not applicable for expo projects.

For better understanding, please refer this article.

Installation

``sh
yarn add react-native-android-sms-retriever-api
`

Usage

Which API to use ? : https://developers.google.com/identity/sms-retriever/choose-an-api

$3

See https://developers.google.com/identity/sms-retriever/overview

`js
import SmsRetriever from 'react-native-android-sms-retriever-api';

export default function App() {
const [result, setResult] = React.useState();

React.useEffect(() => {
let smsListener: undefined | EmitterSubscription;
async function smsListenAsync() {
try {
// set Up SMS Listener
smsListener = DeviceEventEmitter.addListener(
SmsRetriever.getConstants().SMS_EVENT,
(event) => {
console.log("sms_event", event);
if ("message" in event) {
// sub?.remove(); // optional for processing once
const smsOtp = parseOneTimeCode(event.message);
if (smsOtp) {
setOtp(smsOtp);
} else {
console.warn("No OTP found in SMS");
}
} else {
// handle timeout / error
}
}
);
// start sms retriever
await SmsRetriever.startSmsRetriever();
} catch (e) {
console.warn('sms retriever error', e);
}
}
// only to be used with Android
if (Platform.OS === 'android') smsListenAsync();
return () => {
// remove the listener on unmount
smsListener?.remove();
};
}, []);

return (

Result: {result}

);
}

const parseOneTimeCode = (message?: string) => {
if (!message) {
return null;
}
const matcher = message.match(/your code is (\w+)/im);
return matcher?.[1] ?? null;
};
`

$3

See https://developers.google.com/identity/sms-retriever/user-consent/overview

`js
import SmsRetriever from 'react-native-android-sms-retriever-api';

export default function App() {
const [result, setResult] = React.useState();

React.useEffect(() => {
let smsListener: undefined | EmitterSubscription;
async function smsListenAsync() {
try {
// set Up SMS Listener
smsListener = DeviceEventEmitter.addListener(
SmsRetriever.getConstants().SMS_EVENT,
(event) => {
// handle event / parse OTP as you want
setResult(JSON.stringify(event));
}
);
// start sms user consent
await SmsRetriever.startSmsUserConsent();
} catch (e) {
console.warn('sms retriever error', e);
}
}
// only to be used with Android
if (Platform.OS === 'android') smsListenAsync();
return () => {
// remove the listener on unmount
smsListener?.remove();
};
}, []);

return (

Result: {result}

);
}
`

$3

`js
import SmsRetriever from 'react-native-android-sms-retriever-api';

export default function App() {
const [phoneNumber, setPhoneNumber] = React.useState();

const requestPhoneNumber = async () => {
// get list of available phone numbers
try {
const selectedPhone = await SmsRetriever.requestPhoneNumber();
console.log('Selected Phone is : ' + selectedPhone);
setPhoneNumber(selectedPhone);
} catch (e) {
console.warn('Get Phone error', e);
}
};

return (


{phoneNumber && (
Phone Number: {phoneNumber}
)}

);
}
`

$3

Each build type (debug, release) can use a different signing config, so your hash can differ depending on your sign key & applicationId.

Follow these steps to generate your app hash string for each variant

or you can use helper at runtime (on each variant):

`js
import SmsRetriever from 'react-native-android-sms-retriever-api';

export default function App() {
const [result, setResult] = React.useState();

React.useEffect(() => {
async function getAppHashAsync() {
// get App Hash
const hash = await SmsRetriever.getAppHash();
setResult(hash);
console.log('Your App Hash is : ' + hash);
}
// only to be used with Android
if (Platform.OS === 'android') getAppHashAsync();
}, []);

return (

Hash: {result}

);
}
``

Contributing

See the contributing guide to learn how to contribute to the repository and the development workflow.

License

MIT