Mongodb connection with react native form

Question

I have created User Form in react native and i want to use mongodb to store data. I have established mongodb connection in my mongodb.js, but i am facing issues in connecting it with my registration page. I don't want to go with express as my project is small.

Here is mongodb.js:

var MongoClient = require('mongodb').MongoClient;
var url = "mongodb://localhost:27017/mytest";

MongoClient.connect(url, function(err, db) {
  if (err) throw err;
  db.createCollection("Users", function(err, res) {
    if (err) throw err;
    console.log("Collection created!");
    db.close();
  });

});

Here is Register.js :

import React, {Component} from 'react';
import {
  View,
  Text,
  TouchableOpacity,
  TextInput,
  StyleSheet,
  KeyboardAvoidingView,
  Image,
  ScrollView,
  Alert,
} from 'react-native';
import FitImage from 'react-native-fit-image';
import {
  Container,
  Content,
  Header,
  Footer,
  Body,
  FooterTab,
  Icon,
  Card,
  CardItem
} from 'native-base';
import moment from 'moment';
import {FormLabel, FormInput, Button} from 'react-native-elements';
import { DatePickerDialog } from 'react-native-datepicker-dialog';
import HTMLView from 'react-native-htmlview';

    export default class Register extends Component {

  constructor(props){
    super(props);
    this.state = {
      dobText: '',
      dobDate: null,
      journeyText: '',
      journeyDate: null,

      name:'',
      surname:'',
      email:'',
      mobilenumber:'',
      password:'',
      dateofbirth:'',
    }
  }
  onDOBPress = () => {
    let dobDate = this.state.dobDate;

    if(!dobDate || dobDate == null){
      dobDate = new Date();
      this.setState({
        dobDate: dobDate
      });
    }

    //To open the dialog
    this.refs.dobDialog.open({
      date: dobDate,
      maxDate: new Date() //To restirct future date
    });

  }
  onDOBDatePicked = (date) => {
   this.setState({
     dobDate: date,
     dobText: moment(date).format('DD-MMM-YYYY')
   });
 }





 Signup=()=>{
   Alert.alert("You pressed me");
   Alert.alert(this.state.name);
   Alert.alert(this.state.dobText);

 }

  render() {

    return (

      <View>
        <ScrollView>
          <Card>
            <CardItem>
            <Content>



        <KeyboardAvoidingView behavior="padding" >
          <FormLabel>Name</FormLabel>
          <FormInput onChangeText={name=>this.setState({name})}/>
          <FormLabel>Surname</FormLabel>
          <FormInput onChangeText={surname=>this.setState({surname})}/>
          <FormLabel>Date of Birth</FormLabel>
          <TouchableOpacity onPress={this.onDOBPress.bind(this)} onChangeText=
        {dateofbirth=>this.setState({dateofbirth})}>
            <View style={styles.datePickerBox}>
              <Text style={styles.datePickerText}>{this.state.dobText}</Text>
              <DatePickerDialog ref="dobDialog" onDatePicked={this.onDOBDatePicked.bind(this)} />
            </View>
          </TouchableOpacity>


          <FormLabel>Email</FormLabel>
          <FormInput onChangeText={email=>this.setState({email})}/>
          <FormLabel>Mobile Number</FormLabel>
          <FormInput onChangeText={mobilenumber=>this.setState({mobilenumber})}/>
          <FormLabel>Password</FormLabel>
          <FormInput secureTextEntry onChangeText={password=>this.setState({password})}/>
          <TouchableOpacity >
            <Button
              icon={{name: 'send'}}
              title='Submit Details'
              backgroundColor="#4286f4"
              onPress={this.Signup}
            />
          </TouchableOpacity>
        </KeyboardAvoidingView>
        </Content>
      </CardItem>

      </Card>
    </ScrollView>
  </View>

);

  }

}
const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: 'green'
  },
  Label:{
    fontSize: 20,
  },
  form: {
    alignSelf: 'stretch',
    backgroundColor: 'grey',
    justifyContent: 'center',
    alignItems: 'center',
  },
  TextStyle: {
    width: 250,
    justifyContent: 'center',
    alignItems: 'center',
    textAlign: 'center',
    color: 'lightgreen'
  },
  TouchStyle: {
    width: 250,
    backgroundColor: 'blue',
    justifyContent: 'center',
    marginTop: 20
  },
  TouchText: {
    alignItems: 'center',
    textAlign: 'center',
    justifyContent: 'center',
    fontSize: 20,
    color: 'white'
  },
  content: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  datePickerBox:{
   marginTop: 9,
   borderColor: '#ABABAB',
   borderWidth: 0.5,
   padding: 0,
   borderTopLeftRadius: 4,
   borderTopRightRadius: 4,
   borderBottomLeftRadius: 4,
   borderBottomRightRadius: 4,
   height: 28,
   justifyContent:'center'
 },
  datePickerText: {
    fontSize: 14,
    marginLeft: 5,
    borderWidth: 0,
    color: '#121212',
  },
});

Please tell me how to do it, any help will be appreciated . Thanks.

what errors do you get in the log? you also have to make sure you are connected to your mongo by going into terminal (i have a mac) and type in mongod. — letsCode, Aug 28 '17 at 15:05
It's not about the errors.I am already connected with mongo by going into terminal. Actually i couldn't connect it with user form i.e, registration.js page. Whenever, i try to import (import Mongodb from './Mongodb') in registration.js it gives an error. if i write MongoClient in my registration.js it gives an error too. My question is how to insert values in mongodb in this case? — Talha Zafar, Aug 29 '17 at 04:59

score 0 · Answer 1 · answered Mar 11 '19 at 15:57

I think you should use your machine IP instead of localhost. It should look like this.

var url = "mongodb://192.168.8.5:27017/mytest";

If not working then use http or https instead of mongodb

var url = "http://192.168.8.5:27017/mytest";

var url = "https://192.168.8.5:27017/mytest";

Mongodb connection with react native form

1 Answers1

Linked