React Native Forms Handling on Submit Button - react-native

I am new to React Native. I am building an app where there is a contact form in it. I want to collect all the forms field data and want to send these details entered by the users to a specific email on clicking Submit button.
How can I achieve this?
Thanks In advance

Am not sure if you can send email directly from react native app directly.
You can try using react-native-email package. Its quite easy to integrate. The package uses Linking API
import email from 'react-native-email'//imports the package
handleEmail = () => {//function to send email
const to = ['tiaan#email.com', 'foo#bar.com'] // string or array of email addresses
email(to, {
// Optional additional arguments
cc: ['bazzy#moo.com', 'doooo#daaa.com'], // string or array of email addresses
bcc: 'mee#mee.com', // string or array of email addresses
subject: 'Show how to use',
body: 'Some body right here'
}).catch(console.error)
}
}

Related

Is it possible open mail or phone call with Linking.openURL in react native?

I need to make a call when I click on the button, or open mail in order to send a message, we usually use the a tag with the necessary mail: or tel: attributes for these purposes, but is it possible to do this using Linking.openURL like this?
onPress={() => Linking.openURL('+380775454545455')
If it possible, what should we add in order to do it?
Mail:
const subject = "Mail Subject";
const message = "Message Body";
Linking.openURL(`mailto:support#domain.com?subject=${subject}&body=${message}`)
Phone call:
const phone = "+380775454545455";
Linking.openURL(`tel:${phone}`)
As referred to in the react-native's documentation you can open your mail or make a phone call using the Linking component.
Phone call:
const phoneNumber = "+123456789";
Linking.openURL(`tel:${phoneNumber}`);
Email:
const email = "support#expo.io";
// if you want to just open the mail app
Linking.openURL(`mailto:${email}`);
// if you want to open the mail app with subject and body
const subject = "Subject";
const body = "Body";
Linking.openURL(`mailto:${email}?subject=${subject}&body=${body}`);
You can also use the component to open a website, send an SMS, or even open other apps through Deep Linking. For further explanation please see the documentation

appleAuthRequestResponse returning null for fullName and email

I am confused why me below snippet of code is showing null for email and fullName in console after user is authenticated successfully. I have read the documentation carefully and tried every possible thing I could. Any help would be highly appreciated.
async function onAppleButtonPress() {
// performs login request
const appleAuthRequestResponse = await appleAuth.performRequest({
requestedOperation: AppleAuthRequestOperation.LOGIN,
requestedScopes: [AppleAuthRequestScope.EMAIL, AppleAuthRequestScope.FULL_NAME],
});
//api getting current state of the user
const credentialState = await appleAuth.getCredentialStateForUser(appleAuthRequestResponse.user);
if (credentialState === AppleAuthCredentialState.AUTHORIZED) {
// user is authenticated
console.log("email is",appleAuthRequestResponse.email);
console.log("full name is",appleAuthRequestResponse.fullName);
}
}
You can still retrieve the e-mail from the identityToken provided by appleAuthrequestResponse with any jwt decoder like jwt-decode
const {identityToken, nonce, email} = appleAuthRequestResponse
const {email} = jwt_decode(identityToken)
console.log(email)
Apple only returns the full name and email on the first login, it will return null on the succeeding login so you need to save those data.
To receive these again, go to your device settings; Settings > Apple ID, iCloud, iTunes & App Store > Password & Security > Apps Using Your Apple ID, tap on your app and tap Stop Using Apple ID. You can now sign-in again and you'll receive the full name and `email.
Source here.

Get the contact of the owner in react native Expo contacts

I want to figure out how I can get the contact of the current user with expo contacts for iOS devices. In the iPhone contact book, my contact is indicated with a little "me" on the side. I want to figure out if I can identify this contact with expo contacts.
You can do it with this async function:
const contacts = await Expo.Contacts.getContactsAsync({
fields: [Expo.Contacts.PHONE_NUMBERS, Expo.Contacts.EMAILS],
pageSize: 0,
pageOffset: 0,
sort: sortType
});
sortType can be what you want - for example:
const sortType = Expo.Contacts.SortTypes.LastName

How to pass in custom data to branch.io SDK banner init() call

I have a branch smart banner running on my web app using the branch SDK, and I would like to pass in some custom data that will be able to be retrieved when the user downloads our app via the smart banner.
Is there a way to pass in this custom data into the branch.init call?
maybe something like this?
const data = {
custom: 'foo'
}
branch.init(BRANCH_KEY, data)
You can set deep link data, like so:
branch.setBranchViewData({
data: {
'$deeplink_path': 'picture/12345',
'picture_id': '12345',
'user_id': '45123'
}
});
This is only required if custom key-value pairs are used. With Canonical URL, Branch handles this at its end.
For more information, please reference our documentation here: https://docs.branch.io/pages/web/journeys/#deep-linking-from-the-banner-or-interstitial

Filling form fields of a webpage opened in a web view with React Native

I'm working on a project that includes a module that helps with electricity recharge, so what happens is that the user's data is already saved in the app and when they choose to recharge, the app opens up this webpage in a web view.
Currently, I'm using WebBridgeView for opening the webpage as:-
render() {
return (
<WebViewBridge
ref="webviewbridge"
onBridgeMessage={this.onBridgeMessage.bind(this)}
source={{uri: "https://currencypin.com/PrepaidMeterPaymentsV2.0/cartwiz?c=IN&p=5&pm=tm"}}/>
);
}
}
Now, what I want is that when the webpage opens, the form fields come prefilled with the custom data that I have. So that the only field that the user needs to fill on the page is the CAPTCHA.
I was following this article for achieving the same, but it actually assumes that the website is customizable. Which is not possible in my case because it belongs to a 3rd party vendor.
What are the ways to achieve this?
You have to use the injectedJavaScript prop from WebView.
First declare a jsCode variable:
const amount = 2
const jscode = `
if (document.getElementById('txtAmount') == null) {
// field not existing, deal with the error
} else {
document.getElementById('txtAmount').value = '${amount}';
}
`
Please notice the " ` " character. Used to put variables in strings.
Then use it like so:
<WebViewBridge
ref="webviewbridge"
onBridgeMessage={this.onBridgeMessage.bind(this)}
injectedJavaScript={jsCode}