-
-
Save anhtuank7c/b3501cb1ed881a3e55e4bc5d5fbc0764 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/** | |
* Sample React Native App | |
* https://github.com/facebook/react-native | |
* @flow | |
*/ | |
import React, { Component } from 'react'; | |
import { | |
AppRegistry, | |
StyleSheet, | |
AsyncStorage, | |
Text, Image, | |
TextInput, | |
TouchableOpacity, | |
View, | |
Platform, | |
Alert | |
} from 'react-native'; | |
import Frisbee from 'frisbee'; | |
import Spinner from 'react-native-loading-spinner-overlay'; | |
import Form from 'react-native-form'; | |
import CountryPicker from 'react-native-country-picker-modal'; | |
import { global } from './global.js'; | |
const api = new Frisbee({ | |
baseURI: 'https://api.authy.com', | |
headers: { | |
'Accept': 'application/json', | |
'Content-Type': 'application/json' | |
} | |
}); | |
const MAX_LENGTH_CODE = 6; | |
const MAX_LENGTH_NUMBER = 20; | |
// if you want to customize the country picker | |
const countryPickerCustomStyles = {}; | |
// your brand's theme primary color | |
const brandColor = '#744BAC'; | |
const styles = StyleSheet.create({ | |
countryPicker: { | |
alignItems: 'center', | |
justifyContent: 'center' | |
}, | |
container: { | |
flex: 1, | |
width: undefined, | |
height: undefined, | |
backgroundColor: 'transparent', | |
justifyContent: 'center', | |
}, | |
header: { | |
textAlign: 'center', | |
marginTop: 60, | |
fontSize: 22, | |
margin: 20, | |
color: '#4A4A4A', | |
}, | |
form: { | |
margin: 20 | |
}, | |
textInput: { | |
padding: 0, | |
margin: 0, | |
flex: 1, | |
fontSize: 20, | |
color: brandColor | |
}, | |
button: { | |
marginTop: 20, | |
height: 50, | |
backgroundColor: brandColor, | |
alignItems: 'center', | |
justifyContent: 'center', | |
borderRadius: 5, | |
}, | |
buttonText: { | |
color: '#fff', | |
fontFamily: 'Helvetica', | |
fontSize: 16, | |
fontWeight: 'bold' | |
}, | |
wrongNumberText: { | |
margin: 10, | |
fontSize: 14, | |
textAlign: 'center' | |
}, | |
disclaimerText: { | |
marginTop: 30, | |
fontSize: 12, | |
color: 'grey' | |
}, | |
callingCodeView: { | |
alignItems: 'center', | |
justifyContent: 'center' | |
}, | |
callingCodeText: { | |
fontSize: 20, | |
color: brandColor, | |
fontFamily: 'Helvetica', | |
fontWeight: 'bold', | |
paddingRight: 10 | |
} | |
}); | |
const tabs = [ | |
{ | |
label: 'Search', | |
screen: 'example.jobslist', | |
icon: require('../../img/search.png'), | |
title: 'Navigation Types', | |
}, { | |
label: 'Inbox', | |
screen: 'example.chatlist', | |
icon: require('../../img/chat.png'), | |
title: 'Navigation Actions', | |
}, { | |
label: 'Saved', | |
screen: 'example.newjob', | |
icon: require('../../img/search.png'), | |
title: 'Navigation Types', | |
}, { | |
label: 'My Profile', | |
screen: 'example.jobslist', | |
icon: require('../../img/search.png'), | |
title: 'My profile', | |
} | |
]; | |
export default class example extends Component { | |
componentWillMount() { | |
} | |
constructor(props) { | |
super(props); | |
const to = 'hidden'; | |
this.props.navigator.toggleNavBar({ | |
to, | |
animated: false, | |
}); | |
this.state = { | |
enterCode: false, | |
spinner: false, | |
phoneno: '', | |
verificationcode: '', | |
country: { | |
cca2: 'SG', | |
callingCode: '65' | |
} | |
}; | |
} | |
_getCode = () => { | |
this.setState({ spinner: true }); | |
setTimeout(async () => { | |
try { | |
const res = await api.post('/protected/json/phones/verification/start', { | |
body: { | |
api_key: '', | |
country_code: '', | |
phone_number: this.state.phoneno, | |
via: 'sms', | |
code_length: '6' | |
} | |
}); | |
if (res.err) throw res.err; | |
this.setState({ | |
spinner: false, | |
enterCode: true, | |
verification: res.body | |
}); | |
this.refs.form.refs.textInput.setNativeProps({ text: '' }); | |
setTimeout(() => { | |
Alert.alert('Sent!', "We've sent you a verification code", [{ | |
text: 'OK', | |
onPress: () => this.refs.form.refs.textInput.focus() | |
}]); | |
}, 100); | |
} catch (err) { | |
// <https://github.com/niftylettuce/react-native-loading-spinner-overlay/issues/30#issuecomment-276845098> | |
this.setState({ spinner: false }); | |
setTimeout(() => { | |
Alert.alert('Oops!', err.message); | |
}, 100); | |
} | |
}, 100); | |
} | |
_verifyCode = () => { | |
this.setState({ spinner: true }); | |
setTimeout(async () => { | |
try { | |
const res = await api.get('/protected/json/phones/verification/check', { | |
body: { | |
api_key: '', | |
country_code: '', | |
phone_number: this.state.phoneno, | |
verification_code: this.state.verificationcode | |
} | |
}); | |
if (res.err) throw res.err; | |
this.refs.form.refs.textInput.blur(); | |
// <https://github.com/niftylettuce/react-native-loading-spinner-overlay/issues/30#issuecomment-276845098> | |
this.setState({ spinner: false }); | |
setTimeout(() => { | |
this.props.navigator.push({ | |
screen: 'example.newuser', | |
passProps: { | |
phonenumber: this.state.phoneno, | |
}, | |
title: 'Signup', | |
}); | |
}, 100); | |
} catch (err) { | |
// <https://github.com/niftylettuce/react-native-loading-spinner-overlay/issues/30#issuecomment-276845098> | |
this.setState({ spinner: false }); | |
setTimeout(() => { | |
Alert.alert('Oops!', err.message); | |
}, 100); | |
} | |
}, 100); | |
} | |
_onChangeText = (val) => { | |
if (this.state.enterCode) { | |
this.setState({ verificationcode: val }); | |
if (val.length == MAX_LENGTH_CODE) { | |
this._verifyCode(); | |
} | |
} else { | |
this.setState({ phoneno: val }); | |
} | |
} | |
_tryAgain = () => { | |
this.refs.form.refs.textInput.setNativeProps({ text: '' }) | |
this.refs.form.refs.textInput.focus(); | |
this.setState({ enterCode: false }); | |
} | |
_getSubmitAction = () => { | |
this.state.enterCode ? this._verifyCode() : this._getCode(); | |
} | |
_changeCountry = (country) => { | |
this.setState({ country }); | |
this.refs.form.refs.textInput.focus(); | |
} | |
_renderCountryPicker = () => { | |
if (this.state.enterCode) | |
return ( | |
<View /> | |
); | |
return ( | |
<CountryPicker | |
ref={'countryPicker'} | |
closeable | |
style={styles.countryPicker} | |
onChange={this._changeCountry} | |
cca2={this.state.country.cca2} | |
styles={countryPickerCustomStyles} | |
translation='eng' /> | |
); | |
} | |
_renderCallingCode = () => { | |
if (this.state.enterCode) | |
return ( | |
<View /> | |
); | |
return ( | |
<View style={styles.callingCodeView}> | |
<Text style={styles.callingCodeText}>+{this.state.country.callingCode}</Text> | |
</View> | |
); | |
} | |
render() { | |
let headerText = `What's your ${this.state.enterCode ? 'verification code' : 'phone number'}?` | |
let buttonText = this.state.enterCode ? 'Verify confirmation code' : 'Send confirmation code'; | |
let textStyle = this.state.enterCode ? { | |
height: 50, | |
textAlign: 'center', | |
fontSize: 40, | |
fontWeight: 'bold', | |
fontFamily: 'Courier' | |
} : {}; | |
return ( | |
<View style={styles.container}> | |
<Image | |
source={require('../../img/masonry/a848dHxA4e.jpeg')} | |
style={styles.container}> | |
<Form ref={'form'} style={styles.form}> | |
<View style={{ flexDirection: 'row' }}> | |
{this._renderCountryPicker()} | |
{this._renderCallingCode()} | |
<TextInput | |
ref={'textInput'} | |
name={this.state.enterCode ? 'code' : 'phoneNumber'} | |
type={'TextInput'} | |
underlineColorAndroid={'transparent'} | |
autoCapitalize={'none'} | |
autoCorrect={false} | |
onChangeText={this._onChangeText} | |
placeholder={this.state.enterCode ? '_ _ _ _ _ _' : 'Phone Number'} | |
keyboardType={Platform.OS === 'ios' ? 'number-pad' : 'numeric'} | |
style={[styles.textInput, textStyle]} | |
returnKeyType='go' | |
autoFocus | |
placeholderTextColor={brandColor} | |
selectionColor={brandColor} | |
maxLength={this.state.enterCode ? 6 : 20} | |
onSubmitEditing={this._getSubmitAction} /> | |
</View> | |
<TouchableOpacity style={styles.button} onPress={this._getSubmitAction}> | |
<Text style={styles.buttonText}>{buttonText}</Text> | |
</TouchableOpacity> | |
</Form> | |
</Image> | |
<Spinner | |
visible={this.state.spinner} | |
textContent={'One moment...'} | |
textStyle={{ color: '#fff' }} /> | |
</View> | |
); | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment