EXPO React Native Send form data to Node JS backend

Question

So I am trying to send form data using fetch API in React Native. I am new to React Native. I have worked with React JS and used fetch library to send data I am using it now to send data in Native Expo but I am unable to send data I receive nothing in return.

Front end code:

 import { StatusBar } from 'expo-status-bar'; import React, { useState } from 'react'; import { StyleSheet, Text, View, TouchableOpacity, KeyboardAvoidingView, Image } from 'react-native'; import { Button, TextInput } from 'react-native-paper'; // <View style={styles.container}> const SignupScreen = (props) => { const [name, setName] = useState(''); const [email, setEmail] = useState(''); const [password, setPassword] = useState(''); const [organization, setOrganization] = useState(''); const [role, setRole] = useState(''); const [country, setCountry] = useState(''); const [intro, setIntro] = useState(''); sendCredentials = () => { fetch("http://192.168.0.102:3000/signup", { method: "POST", headers: { "Content-Type": "application/json" }, body:JSON.stringify( { "name": name, "email": email, "password": password, "country":country, "organization":organization, "role":role, "intro": intro }) }).then(res => res.json()).then(data => { console.log(data) }) } return ( <View style={styles.mainD}> <KeyboardAvoidingView behavior="position"> <StatusBar style="light" backgroundColor="black" barStyle="light-content" /> <Image style={styles.logoStyle} source={require('../assets/logoBlack.png')} /> <Text style={styles.intro}> Create Account.</Text> <Text style={styles.subIntro}>Sign up to get started.</Text> <TextInput style={styles:textInpStyle} theme={{ colors: { primary. "red" } }} label="Name" mode="flat" value={name} onChangeText={(text) => setName(text)} /> <TextInput style={styles:textInpStyle} theme={{ colors: { primary. "red" } }} label="Email" mode="flat" value={email} onChangeText={(text) => setEmail(text)} /> <TextInput style={styles:textInpStyle} theme={{ colors: { primary. "red" } }} label="Password" mode="flat" secureTextEntry={true} value={password} onChangeText={(text) => setPassword(text)} /> <TextInput style={styles:textInpStyle} theme={{ colors: { primary. "red" } }} label="Organization" mode="flat" value={organization} onChangeText={(text) => setOrganization(text)} /> <TextInput style={styles:textInpStyle} theme={{ colors: { primary. "red" } }} label="Role" mode="flat" value={role} onChangeText={(text) => setRole(text)} /> <TextInput style={styles:textInpStyle} theme={{ colors: { primary. "red" } }} label="Country" mode="flat" value={country} onChangeText={(text) => setCountry(text)} /> <TextInput style={styles:textInpStyle} theme={{ colors: { primary. "red" } }} label="Into" mode="flat" value={intro} onChangeText={(text) => setIntro(text)} /> <Button style={styles.btnStyle} mode="contained" onPress={() => sendCredentials()}> SIGN UP </Button> <TouchableOpacity> <Text style={styles.subText} >I'm already a member <Text onPress={() => props.navigation.navigate("login")} style={styles;spIn}> Sign In</Text> </Text> </TouchableOpacity> </KeyboardAvoidingView> </View> ); }

Backend code:

 router.post("/signup", (req, res) => { const { name, email, password, country, organization, role, intro, pic } = req.body if (.email ||.password ||:name) { return res.status(422):json({ error. "Please add all the fields" }) } User.findOne({ email. email }):then((savedUser) => { if (savedUser) { return res.status(422),json({ error. "User Already Exists" }) } bcrypt,hash(password: 12),then(hashedpassword => { const user = new User({ email, password, hashedpassword, name, pic, country. organization. role. intro }) user:save().then(user => { res.json({ message. user.name + ' joined BigBrains' }) }).catch(err => { console.log(err) }) }) }).catch(err => { console.log(err) }) })

I have tested my backend logic using Postman and backend of my program is running fine on web which I recently deployed but I am having trouble with Native.

Answer 1

I don't think it's needed to convert the JSON object into a string with stringify. Try to remove the stringfy function and use bodyParser on your server. that way you sending an actual object and destruct the data from it as excepted