Monday, August 12, 2019

React Native Implement Custom reCaptcha in Android iOS Example

This tutorial explains how to implement custom reCaptcha in Android or IOS device in react native application. This technology is used mostly to block spammers and bots that try to automatically harvest email addresses or try to automatically sign up for or make use of Web sites, blogs or forums. CAPTCHA, whose users include Yahoo and Google, blocks automated systems, which can't read the distorted letters in the graphic. We have decided to create a new library that will give more freedom, be more flexible, and be easy to use simultaneously.

React Native Implement Custom reCaptcha in Android iOS Example
           Download Now  Demo

React Native Captcha Example


Lets see the complete source code that helps to create customized captcha in android or ios device  in react native application.

Step 1: Create a new react native project, if you don’t know how to create a new project in react native just follow this tutorial.

Step 2: Open App.js File in your favorite code editor and erase all code and follow this tutorial.

Step 3: Through react , react-native packages import all required components.
import React, { Component } from 'react';
import { StyleSheet, Text, View, TouchableOpacity, Alert, Image, TextInput } from 'react-native';

Step 4: Lets create constructor block inside your App component. In the constructor block we have created state variables named as textInputHolder, captchaHolder & randomNumberOne. This state variable helps to validate the captcha code,
constructor() {
    super()
    this.state = {
      textInputHolder: 0,
      captchaHolder: 0,
      randomNumberOne: 0,      
    }
  }

Step 5: Create the componentDidMount() method inside the App component. This method will call generateCaptcha() method and helps to generate captcha code.
  componentDidMount() {
    this.generateCaptcha();
  }

Step 6: Create a function named as generateCaptcha(). This function helps to generate random captcha code.
 generateCaptcha = () => {
    var numberOne = Math.floor(Math.random() * 1000000) + 1;   
    var captchaCode = numberOne ;
    this.setState({ randomNumberOne: numberOne });
    this.setState({ captchaHolder: captchaCode });
  }

Step 7: Create a function named as validateCaptchaCode(). This function helps to validate the captcha code.
 validateCaptchaCode = () => {
    var temp = this.state.randomNumberOne ;
    if (this.state.textInputHolder == temp) {
      //Captcha match
      Alert.alert("Captcha Matched");
    }
    else {
      //Captcha not match
      Alert.alert("Captcha NOT Matched");
    }
    // Calling captcha function, to generate captcha code
    this.generateCaptcha();
  }

Step 8: Implement render method inside the App class and wrapped the below layout design inside the root View component.  
 render() {
    return (
      <View style={styles.Container}>

        <View style={styles.captchaContainerView}>

          <View style={ styles.captchaChildContainer}>
            <Image
              style={{ width: 180, height: 60, resizeMode: 'contain' }}
              source={{ uri: 'https://dummyimage.com/150x40/0091ea/fafafa.png&text=' + this.state.randomNumberOne }}
            />
            <TouchableOpacity onPress={this.generateCaptcha} >
              <Image source={{ uri: "asset:/images/refresh.png" }}
                style={{ width: 40, height: 35, resizeMode: 'contain', margin: 20 }} />
            </TouchableOpacity>
          </View>


          <View  style={ styles.captchaChildContainer}>
            <TextInput
              placeholder="Enter Captcha"
              onChangeText={data => this.setState({ textInputHolder: data })}
              style={styles.textInputStyle}
              underlineColorAndroid='transparent'
            />
          </View>
        </View>

        <TouchableOpacity style={styles.button} onPress={this.validateCaptchaCode} >
          <Text style={styles.text}>Submit</Text>
        </TouchableOpacity>

      </View>
    );
  }

Step 9 : Apply the below style sheet design. 
const styles = StyleSheet.create({
  Container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  text: {
    color: '#FFF',
    fontSize: 24,
    textAlign: 'center',
    padding: 5,
  },
  captchaContainerView: {
    flexDirection: 'column',
    justifyContent: 'center',
    alignItems: 'center',
    margin: 5,
    borderColor: '#01579b',
    width: '90%',
    height: 200,
    borderWidth: 1,
    padding: 5,
    backgroundColor: '#e1f5fe'
  },
  captchaChildContainer: {
    flex: 1,
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center'
  },
  textInputStyle: {
    textAlign: 'center',
    height: 40,
    width: '80%',
    borderWidth: 1,
    borderColor: '#4CAF50',
    borderRadius: 7,
  },
  button: {
    width: '80%',
    paddingTop: 2,
    paddingBottom: 2,
    backgroundColor: '#ec407a',
    borderRadius: 3,
    marginTop: 20
  },
});

Complete Source Code for App.js 

Lets see the complete source code that helps to create customized captcha in android or ios device  in react native application.

import React, { Component } from 'react';
import { StyleSheet, Text, View, TouchableOpacity, Alert, Image, TextInput } from 'react-native';

export default class App extends Component {

  constructor() {
    super()
    this.state = {
      textInputHolder: 0,
      captchaHolder: 0,
      randomNumberOne: 0,      
    }
  }

  componentDidMount() {
    this.generateCaptcha();
  }

  generateCaptcha = () => {
    var numberOne = Math.floor(Math.random() * 1000000) + 1;   
    var captchaCode = numberOne ;
    this.setState({ randomNumberOne: numberOne });
    this.setState({ captchaHolder: captchaCode });
  }

  validateCaptchaCode = () => {
    var temp = this.state.randomNumberOne ;
    if (this.state.textInputHolder == temp) {
      //Captcha match
      Alert.alert("Captcha Matched");
    }
    else {
      //Captcha not match
      Alert.alert("Captcha NOT Matched");
    }
    // Calling captcha function, to generate captcha code
    this.generateCaptcha();
  }


  render() {
    return (
      <View style={styles.Container}>

        <View style={styles.captchaContainerView}>

          <View style={ styles.captchaChildContainer}>
            <Image
              style={{ width: 180, height: 60, resizeMode: 'contain' }}
              source={{ uri: 'https://dummyimage.com/150x40/0091ea/fafafa.png&text=' + this.state.randomNumberOne }}
            />
            <TouchableOpacity onPress={this.generateCaptcha} >
              <Image source={{ uri: "asset:/images/refresh.png" }}
                style={{ width: 40, height: 35, resizeMode: 'contain', margin: 20 }} />
            </TouchableOpacity>
          </View>


          <View  style={ styles.captchaChildContainer}>
            <TextInput
              placeholder="Enter Captcha"
              onChangeText={data => this.setState({ textInputHolder: data })}
              style={styles.textInputStyle}
              underlineColorAndroid='transparent'
            />
          </View>
        </View>

        <TouchableOpacity style={styles.button} onPress={this.validateCaptchaCode} >
          <Text style={styles.text}>Submit</Text>
        </TouchableOpacity>

      </View>
    );
  }
}

const styles = StyleSheet.create({
  Container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  text: {
    color: '#FFF',
    fontSize: 24,
    textAlign: 'center',
    padding: 5,
  },
  captchaContainerView: {
    flexDirection: 'column',
    justifyContent: 'center',
    alignItems: 'center',
    margin: 5,
    borderColor: '#01579b',
    width: '90%',
    height: 200,
    borderWidth: 1,
    padding: 5,
    backgroundColor: '#e1f5fe'
  },
  captchaChildContainer: {
    flex: 1,
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center'
  },
  textInputStyle: {
    textAlign: 'center',
    height: 40,
    width: '80%',
    borderWidth: 1,
    borderColor: '#4CAF50',
    borderRadius: 7,
  },
  button: {
    width: '80%',
    paddingTop: 2,
    paddingBottom: 2,
    backgroundColor: '#ec407a',
    borderRadius: 3,
    marginTop: 20
  },
});

Screenshot:

React Native Implement Custom reCaptcha in Android iOS Example

React Native Implement Custom reCaptcha in Android iOS Example

React Native Implement Custom reCaptcha in Android iOS Example

React Native Implement Custom reCaptcha in Android iOS Example

React Native Implement Custom reCaptcha in Android iOS Example

This is all about React Native Implement Custom reCaptcha in Android iOS Example. Thank you for reading this article, and if you have any problem, have a another better useful solution about this article, please write message in the comment section.


1 comment: