react-native-phone-auth-component
A simple, elegant component that integrates with a phone authentication setup, styling and transitions included
Installation
npm i --save react-native-phone-auth-component
Usage
Default Props
;...<PhoneAuth signInWithPhone= console redeemCode= console codeLength=4 buttonTextColor='black' spinnerColor='black' color='#ff8203' androidFont='monospace' iOSFont='Menlo' containerStyle=flex: 1 verifyButtonMessage='Verify Phone Number*' disclaimerMessage='*Message & data rates may apply.' cca2='US' callingCode='1'/>
Props
Prop Name | Data Type | Required? | Default Value | Description |
---|---|---|---|---|
signInWithPhone | Function | Yes | console.log | Event handler when user enters phone number. Phone number as a String as first argument. Must return a Promise to proceed |
redeemCode | Function | Yes | console.log | Event handler when user enters code. Code as a String as first argument. Must return a Promise to proceed |
color | String | No | '#ff8203' | Color of text underline and buttons |
buttonTextColor | String | No | 'white' | Color of button text |
spinnerColor | String | No | 'white' | Color of the spinner when loading |
androidFont | String | No | 'monospace' | Android font type |
iOSFont | String | No | 'Menlo' | iOS font type |
containerStyle | Object | No | {flex: 1} | Style of the container of the component |
verifyButtonMessage | String | No | 'Verify Phone Number*' | The message on the first button |
disclaimerMessage | String | No | 'Message & data rates may apply.' | The disclaimer message |
enterCodeMessage | String | No | 'Enter Code' | The message on the second button |
codeLength | Number | No | 4 | The length of the code the user will enter |
cca2 | String | No | 'US' | The default country code |
callingCode | String | No | '1' | The default calling code accompanied by cca2 |
Returning a Promise
In order for the component to know when you go to the server and send off the text message, you must return a promise in your helper method. Here's an example to illustrate how this would happen
Example
Component state = phone: '' code: '' ; // here is where you connect to your api to redeem a user's code // I'm using Firebase in this example but of course you don't have to // To avoid confusion, I'm storing the API address in process.env.URL. You don't have to do this { this; return axios; } { return axios; } { return <View style=flex: 1> /* ^^^^^^^^ */ /* Make sure to have flex: 1 on parent! */ <PhoneAuth signInWithPhone= this redeemCode= this codeLength=4 buttonTextColor='black' spinnerColor='black' /> </View> ; }