Quantcast
Channel: Active questions tagged react-native+android - Stack Overflow
Viewing all articles
Browse latest Browse all 28468

Android and CouchDB with react native

$
0
0

I'm learning to use react native for an Android application. I had install in my folder project PouchDB and also I have CouchDB.

I'm trying to understand how the connection with the db works using simple login and registration forms.

For example, i had create a js page called DB.js like this:

import PouchDB from 'pouchdb-react-native';
PouchDB.plugin(require('pouchdb-find'));
PouchDB.plugin(require('pouchdb-adapter-asyncstorage').default);
PouchDB.plugin(require('pouchdb-authentication'));

class DB {
    constructor(dbName, username, password, protocol, host, port){
        this.remoteDB = null;
        this.localDB = new PouchDB(dbName);
        this.replication(
          'dbName' = ‘myDBName’, 
          'username' = ‘myUsername’, 
          'password' = ‘myPassword’, 
          'protocol' = 'https', 
          'host' = ‘myHost’, 
          'port' = myPortNumber

          );}

      localdb(){
        return this.localDB;
      }

      syncDB(){
        this.localdb().sync(this.remoteDB, {
          live: true,
          retry: true,
          attachments:true,
        }).on('change', function (change) {
        // 
        }).on('paused', function (paused) {
        //  console.log('paused:' + paused)
        }).on('active', function (active) {
        //  console.log('active:' + active)
        }).on('error', function (error) {
        //  console.log('error:' + error)
        });
      }



      replication(dbName, username, password, protocol, host, port){
        this.createDB(dbName, username, password, protocol, host, port);
        this.loginDB(username, password);
      }

In the constructor, I initialized the database and then synchronized it.

Now, for example, I should create a form to sign up.

Register.js

    import React, { Component } from 'react';
import {
  StyleSheet,
  Text,
  View,
  TextInput,
  Button,
  TouchableHighlight,
  Image,
  Alert
} from 'react-native';
import { Actions } from 'react-native-router-flux';


export default class SignUpView extends Component {

  constructor(props) {
    super(props);
    state = {
      fullName: '',
      email   : '',
      password: '',
    }
  }

  // 
  SignInUser(User){
    this.user = {
      _id:id,
      fullName: fullName,
      email: email,
      password: password 
    }

    return new Promise((resolve, reject) => {
      user.localdb().post(this.user)
      .then((response) => {this.user._rev = response.rev; resolve(response)})
      .catch((error) => {reject(error)})
    })
  }


  //

   render() {
    return (
      <View style={styles.container}>
        <View style={styles.inputContainer}>
          <Image style={styles.inputIcon} source={{uri: 'https://png.icons8.com/male-user/ultraviolet/50/3498db'}}/>
          <TextInput style={styles.inputs}
              placeholder="Full name"
              keyboardType="email-address"
              underlineColorAndroid='transparent'
              onChangeText={(fullName) => this.setState({fullName})}/>
        </View>

        <View style={styles.inputContainer}>
          <Image style={styles.inputIcon} source={{uri: 'https://png.icons8.com/message/ultraviolet/50/3498db'}}/>
          <TextInput style={styles.inputs}
              placeholder="Email"
              keyboardType="email-address"
              underlineColorAndroid='transparent'
              onChangeText={(email) => this.setState({email})}/>
        </View>

        <View style={styles.inputContainer}>
          <Image style={styles.inputIcon} source={{uri: 'https://png.icons8.com/key-2/ultraviolet/50/3498db'}}/>
          <TextInput style={styles.inputs}
              placeholder="Password"
              secureTextEntry={true}
              underlineColorAndroid='transparent'
              onChangeText={(password) => this.setState({password})}/>
        </View>

        <TouchableHighlight style={[styles.buttonContainer, styles.signupButton]} 
        onPress={ () =>  SignInUser(this.state) }>
          <Text style={styles.signUpText}>Sign up</Text>
        </TouchableHighlight>

        <TouchableHighlight style={[styles.buttonContainer, styles.signupButton]} onPress={() => Actions.scarlet()}>
            <Text style={styles.signUpText}>GoTo Scarlet</Text>
        </TouchableHighlight>
      </View>


    );
  }
}

And at the end, the js file to post in the database the information

SignInUser.js

export default class SignInUser {


    SignInUser(User){
    this.user = {
      _id:id,
      fullName: fullName,
      email: email,
      password: password 
    }

    return new Promise((resolve, reject) => {
      user.localdb().post(this.user)
      .then((response) => {this.user._rev = response.rev; resolve(response)})
      .catch((error) => {reject(error)})
    })
  }

}

When I start the emulator, I get an error in the function:

onPress={() => this.onClickListener('SignInUser')}>

I don't know if the error is due to the function or the code that was badly structured. Since I'm trying to understand as much as possible could you give me a hand? thanks a lot


Viewing all articles
Browse latest Browse all 28468

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>