Skip to content

Instantly share code, notes, and snippets.

@asiatact asiatact/smscode
Last active Oct 21, 2017

Embed
What would you like to do?
/**
* 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
You can’t perform that action at this time.