1

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.

3
  • 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. Commented Aug 28, 2017 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? Commented Aug 29, 2017 at 4:59
  • @DroiDev sir Would you mind to tell me how to do it? Commented Aug 30, 2017 at 12:33

1 Answer 1

0

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";
Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.