Captcha is a type of unpredictable challenge text code written in alphanumeric characters used to make difference between Virus(SPAM) and real humans. Captcha can only be readable by human eyes and only humans can answer the right captcha. It’ll stop spam attacks on Log-In, Sing-Up and Comment pages in web applications. Right now the Captcha is also used in mobile applications to make them secure against SPAM bots. So in this tutorial we would Implement Custom reCaptcha in Android iOS React Native Application Example Tutorial.
Contents in this project Implement Custom reCaptcha in React Native Android iOS App Example Tutorial:
1. Import StyleSheet, Text, View, TouchableOpacity, TextInput, Image and Alert components in your project’s App.js file.
|
1 2 3 |
import React, { Component } from 'react'; import { StyleSheet, Text, View, TouchableOpacity, TextInput, Image, Alert } from 'react-native'; |
2. Create constructor() function in your app’s main export default class and inside the constructor() we would make 4 States named as textInput_text_holder, sum_holder, random_number_1 and random_number_2.
- textInput_text_holder : Holds the Text Input entered text.
- random_number_1 : Holds the generated random number 1.
- random_number_2 : Holds the generated random number 2.
- sum_holder : Holds the Sum total of both 2 random numbers.
|
1 2 3 4 5 6 7 8 9 10 11 12 |
constructor() { super() this.state = { textInput_text_holder: 0, sum_holder: 0, random_number_1: 0, random_number_2: 0, } } |
3. Create inbuilt componentDidMount() method in your main class and call the generate_captcha() function which we would create in next step.
|
1 2 3 4 |
componentDidMount() { this.generate_captcha(); } |
4. Create a function named as generate_captcha(). Inside this function we would generate 2 random numbers between 1 to 100. This function is our main function which generates captcha.
|
1 2 3 4 5 6 7 8 9 10 11 12 |
generate_captcha = () => { var number_1 = Math.floor(Math.random() * 100) + 1; var number_2 = Math.floor(Math.random() * 100) + 1; var sum = number_1 + number_2; this.setState({ random_number_1: number_1, random_number_2: number_2 }); this.setState({ sum_holder: sum }); } |
5. Create a function named as run_captcha_function(). Inside this function we would match the user entered captcha with auto generated captcha text. In this function you can put your own code which you want to execute on right captcha entered.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
run_captcha_function =()=>{ var temp = this.state.random_number_1 + this.state.random_number_2 ; if(this.state.textInput_text_holder == temp) { //Write Your Code Here Which you want to execute on RIGHT Captcha Entered. Alert.alert("Captcha Metched"); } else{ //Write Your Code Here Which you want to execute on WRONG Captcha Entered. Alert.alert("Captcha NOT Matched"); } // Calling captcha function, So each time new captcha number generates on button clicks. this.generate_captcha(); } |
6. Creating the Captcha view in render’s return block.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
render() { return ( <View style={styles.MainContainer}> <View style={styles.captcha_view}> <Text style={{ fontSize: 22, textAlign: 'center', color: '#000' }}> {this.state.random_number_1} {"+"} {this.state.random_number_2} {"= "} </Text> <TextInput placeholder="Enter Sum of Numbers Here" onChangeText={data => this.setState({ textInput_text_holder: data })} style={styles.textInputStyle} underlineColorAndroid='transparent' /> <TouchableOpacity onPress={this.generate_captcha} > <Image source={{ uri: 'https://reactnativecode.com/wp-content/uploads/2019/08/reload_image.jpg' }} style={{ width: 42, height: 42, resizeMode: 'contain', margin: 5 }} /> </TouchableOpacity> </View> <TouchableOpacity style={styles.button} onPress={this.run_captcha_function} > <Text style={styles.text}>Check Captcha Result</Text> </TouchableOpacity> </View> ); } |
7. Creating style.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 |
const styles = StyleSheet.create({ MainContainer: { flex: 1, justifyContent: 'center', alignItems: 'center', }, captcha_view: { flexDirection: 'row', justifyContent: 'center', alignItems: 'center', margin: 10, borderColor: '#000', width: '90%', height: 100, borderWidth: 1, borderRadius: 7, padding: 5, backgroundColor: '#fff' }, textInputStyle: { textAlign: 'center', height: 40, width: 200, borderWidth: 1, borderColor: '#4CAF50', borderRadius: 7, }, button: { width: '80%', paddingTop: 2, paddingBottom: 2, backgroundColor: '#BF360C', borderRadius: 3, marginTop: 20 }, text: { color: '#fff', fontSize: 20, textAlign: 'center', padding: 5 } }); |
8. Complete source code for App.js File :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 |
import React, { Component } from 'react'; import { StyleSheet, Text, View, TouchableOpacity, TextInput, Image, Alert } from 'react-native'; export default class App extends Component { constructor() { super() this.state = { textInput_text_holder: 0, sum_holder: 0, random_number_1: 0, random_number_2: 0, } } componentDidMount() { this.generate_captcha(); } generate_captcha = () => { var number_1 = Math.floor(Math.random() * 100) + 1; var number_2 = Math.floor(Math.random() * 100) + 1; var sum = number_1 + number_2; this.setState({ random_number_1: number_1, random_number_2: number_2 }); this.setState({ sum_holder: sum }); } run_captcha_function =()=>{ var temp = this.state.random_number_1 + this.state.random_number_2 ; if(this.state.textInput_text_holder == temp) { //Write Your Code Here Which you want to execute on RIGHT Captcha Entered. Alert.alert("Captcha Metched"); } else{ //Write Your Code Here Which you want to execute on WRONG Captcha Entered. Alert.alert("Captcha NOT Matched"); } // Calling captcha function, So each time new captcha number generates on button clicks. this.generate_captcha(); } render() { return ( <View style={styles.MainContainer}> <View style={styles.captcha_view}> <Text style={{ fontSize: 22, textAlign: 'center', color: '#000' }}> {this.state.random_number_1} {"+"} {this.state.random_number_2} {"= "} </Text> <TextInput placeholder="Enter Sum of Numbers Here" onChangeText={data => this.setState({ textInput_text_holder: data })} style={styles.textInputStyle} underlineColorAndroid='transparent' /> <TouchableOpacity onPress={this.generate_captcha} > <Image source={{ uri: 'https://reactnativecode.com/wp-content/uploads/2019/08/reload_image.jpg' }} style={{ width: 42, height: 42, resizeMode: 'contain', margin: 5 }} /> </TouchableOpacity> </View> <TouchableOpacity style={styles.button} onPress={this.run_captcha_function} > <Text style={styles.text}>Check Captcha Result</Text> </TouchableOpacity> </View> ); } } const styles = StyleSheet.create({ MainContainer: { flex: 1, justifyContent: 'center', alignItems: 'center', }, captcha_view: { flexDirection: 'row', justifyContent: 'center', alignItems: 'center', margin: 10, borderColor: '#000', width: '90%', height: 100, borderWidth: 1, borderRadius: 7, padding: 5, backgroundColor: '#fff' }, textInputStyle: { textAlign: 'center', height: 40, width: 200, borderWidth: 1, borderColor: '#4CAF50', borderRadius: 7, }, button: { width: '80%', paddingTop: 2, paddingBottom: 2, backgroundColor: '#BF360C', borderRadius: 3, marginTop: 20 }, text: { color: '#fff', fontSize: 20, textAlign: 'center', padding: 5 } }); |
Screenshots:
can you please give me the code for react native counter of increment and decrement component in single button on click it should increment once again we click it should decrement please
Shivakumar i have already uploaded tutorial on these topics you can search it and here is the link : https://reactnativecode.com/dynamically-add-render-view-component/ & https://reactnativecode.com/dynamically-add-remove-component-using-animation/ .