invariant violation: App(...)Nothing was returned from render. this usually means a return statement is missing. react native - image

Question

Good Day Every one! i just want to ask for your opinion why does my code display the error at the title. I've been working on it for 2 days but haven't resolve it yet. I hope somebody will help me. Thank you! Here is my actual Code. I'm using cloudinary where i save the image (which works perfectly) and firestore as my database. the error occurs when I apply Insert function on firestore for database.
import React, { useState, Component } from 'react'
import {
StyleSheet,
View,
Text,
Dimensions,
TouchableOpacity,
Image,
TextInput,
Platform,
ActivityIndicator, ScrollView, KeyboardAvoidingView, Picker
} from 'react-native';
import ImagePicker from 'react-native-image-picker';
import firebase from './firebase';
const App = (props) => {
const [photo, setPhoto] = useState('https://res.cloudinary.com/{my_Cloud_name}/image/upload/v1585540130/bg_3__1580384977_49.145.192.210_rnmved.jpg');
const selectPhotoTapped = () => {
const options = {
title: 'Select Photo',
storageOptions: {
skipBackup: true,
path: 'images',
},
};
ImagePicker.showImagePicker(options, (response) => {
console.log('Response = ', response);
if (response.didCancel) {
console.log('User cancelled image picker');
} else if (response.error) {
console.log('ImagePicker Error: ', response.error);
} else {
const source = {
uri: response.uri,
type: response.type,
name: response.fileName,
}
cloudinaryUpload(source)
console.log('Source: ', source);
console.log('cloudinary upload: ', photo);
return (photo);
}
});
}
const cloudinaryUpload = (photo) => {
const data = new FormData()
data.append('file', photo)
data.append('upload_preset', '{my_upload_present}/')
data.append("cloud_name", "{my_Cloud_name}/")
fetch("https://api.cloudinary.com/v1_1/{my_Cloud_name}//upload", {
method: "post",
body: data
}).then(res => res.json()).
then(data => {
setPhoto(data.secure_url)
}).catch(err => {
Alert.alert("An Error Occured While Uploading")
})
}
class AddPost extends Component {
state = {
image: '',
section: '',
unit: '',
price: '',
product: '',
status: '',
hasError: false,
errorText: '',
isLoading: false,
}
onChangeTitle = title => {
this.setState({ image })
this.setState({ section })
this.setState({ unit })
this.setState({ price })
this.setState({ product })
this.setState({ status })
}
onSubmit = async () => {
try {
const newDocumentData = this.ref.collection('products').doc().id;
this.setState({
loading: true,
});
const userId = firebase.auth().currentUser.uid;
this.ref.collection('products').doc(newDocumentData).set({
store_id: firebase.auth().currentUser.uid,
pr_name: this.state.product,
pr_id: newDocumentData,
pr_price: this.state.price,
pr_unit: this.state.unit,
pr_store_name: firebase.auth().currentUser.email, //change into name of store.
pr_section : this.state.section,
pr_image: this .state.image,
prod_status: 'active',
}).then((docRef) => {
this.setState({
image: '',
section: '',
unit: '',
price: '',
product: '',
status: '',
isloading: false,
});
Actions.gold();
})
} catch (e) {
console.error(e)
}
}
render() {
if (this.state.isLoading) {
return (
<View style={{flex: 1, paddingTop: 20}}>
<ActivityIndicator />
</View>
);
}
return (
<View>
<View style={styles.imageContainer}>
<Text style={{fontSize: 20, textAlign: 'center', marginBottom: 7}}> Add Product </Text>
<ScrollView
keyboardShouldPersistTaps="handled"
showsVerticalScrollIndicator={false}>
<KeyboardAvoidingView enabled >
<Image source={{ uri: photo }} style={{
width: 200,
height: 200,
borderRadius: 100,
alignSelf: 'center',
}}/>
<TextInput
label="Enter Product"
placeholder="Enter Product"
label="Enter Product"
value={this.state.product}
onChangeText={product => this.onChangeTitle(product)}
underlineColorAndroid='transparent'
style={styles.TextInputStyleClass}
/>
<TextInput
placeholder="Enter Price"
keyboardType={'decimal-pad'}
value={this.state.price}
onChangeText={price => this.onChangeTitle(price)}
underlineColorAndroid='transparent'
style={styles.TextInputStyleClass}
/>
<Picker
style={{height: 50, width: 300}}
onValueChange={(TextInputValue, itemIndex) =>
this.setState({unit: TextInputValue})}>
<Picker.Item label = "Select Unit" />
<Picker.Item label = "Kilo" value = "Kilo" />
<Picker.Item label = "Each" value = "Each" />
<Picker.Item label = "Bottle" value = "Bottle" />
<Picker.Item label = "Pack" value = "Pack" />
<Picker.Item label = "Sack" value = "Sack" />
</Picker>
<Picker
style={{height: 50, width: 300}}
onValueChange={(TextInputValue, itemIndex) =>
this.setState({section: TextInputValue})}>
<Picker.Item label = "Select Section" />
<Picker.Item label = "Meat" value = "Meat" />
<Picker.Item label = "Vegetable" value = "Vegetable" />
<Picker.Item label = "Fruits" value = "Fruits" />
<Picker.Item label = "Biscuits" value = "Biscuits" />
<Picker.Item label = "Condiments" value = "Condiments" />
<Picker.Item label = "Canned Goods" value = "Canned Goods" />
<Picker.Item label = "Drinks" value = "Drinks" />
<Picker.Item label = "Diapers/Napkin" value = "Diapers/Napkin" />
<Picker.Item label = "Frozen Products" value = "Frozen Products" />
<Picker.Item label = "Junk Foods" value = "Junk Foods" />
<Picker.Item label = "Milk" value = "Milk" />
<Picker.Item label = "Soap/Shampoo" value = "Soap/Shampoo" />
<Picker.Item label = "Pesonal Items" value = "Pesonal Items" />
<Picker.Item label = "Pasta/Noodleslete" value = "Pasta/Noodles" />
</Picker>
<TextInput
placeholder="Enter Description"
multiline={true}
numberOfLines={4}
label="Enter Product"
value={this.state.Description}
onChangeText={Description => this.onChangeTitle(Description)}
underlineColorAndroid='transparent'
style={styles.TextInputStyleClass}
/>
<TextInput
placeholder="Enter image"
value={ photo }
onChangeText={image => this.onChangeTitle(image)}
underlineColorAndroid='transparent'
style={styles.TextInputStyleClass}
/>
<TouchableOpacity onPress={selectPhotoTapped} style={styles.uploadButton}>
<Text style={styles.uploadButtonText}>Upload</Text>
</TouchableOpacity>
<TouchableOpacity activeOpacity = { .4 } style={styles.uploadButton} >
<Text style={styles.TextStyle}> INSERT PRODUCT TO SERVER </Text>
</TouchableOpacity>
<TouchableOpacity activeOpacity = { .4 } style={styles.uploadButton} >
<Text style={styles.TextStyle}> SHOW ALL INSERTED PRODUCTS RECORDS</Text>
</TouchableOpacity>
<TouchableOpacity activeOpacity = { .4 } >
<Text style={styles.TextStyle}> </Text>
</TouchableOpacity>
</KeyboardAvoidingView>
</ScrollView>
</View>
</View >
);
};
}
}
export default App;
const styles = StyleSheet.create({
imageContainer: {
height: Dimensions.get('window').height
},
backgroundImage: {
flex: 1,
resizeMode: 'cover',
},
uploadContainer: {
backgroundColor: 'white',
borderTopLeftRadius: 45,
borderTopRightRadius: 45,
position: 'absolute',
bottom: 0,
width: Dimensions.get('window').width,
height: 200,
},
uploadContainerTitle: {
alignSelf: 'center',
fontSize: 25,
margin: 20,
fontFamily: 'Roboto'
},
uploadButton: {
borderRadius: 16,
alignSelf: 'center',
shadowColor: "#000",
shadowOffset: {
width: 7,
height: 5,
},
shadowOpacity: 1.58,
shadowRadius: 9,
elevation: 4,
margin: 10,
padding: 10,
backgroundColor: '#fe5b29',
width: Dimensions.get('window').width - 60,
alignItems: 'center'
},
uploadButtonText: {
color: '#f6f5f8',
fontSize: 20,
fontFamily: 'Roboto'
},
MainContainer :{
alignItems: 'center',
flex:1,
paddingTop: 30,
},
MainContainer_For_Show_StudentList_Activity :{
flex:1,
paddingTop: (Platform.OS == 'ios') ? 20 : 0,
marginLeft: 5,
marginRight: 5
},
TextInputStyleClass: {
textAlign: 'center',
width: '90%',
marginBottom: 7,
height: 40,
borderWidth: 1,
borderColor: '#FF5722',
borderRadius: 5 ,
},
TouchableOpacityStyle: {
paddingTop:10,
paddingBottom:10,
borderRadius:5,
marginBottom:7,
width: '90%',
backgroundColor: '#00BCD4'
},
TextStyle:{
color:'#fff',
textAlign:'center',
},
rowViewContainer: {
fontSize: 20,
paddingRight: 10,
paddingTop: 10,
paddingBottom: 10,
},
});

Answer 1

The return should have your JSX code in it to return Something.
Your current return has JSX code but it is all under your AddPost class while your App function has nothing to return.
You are using useState which is used for functional components and setState which is used for class components combined. I suggest you should use only one type of component at a time in a project to make your code simpler and better.
To make this work I suggest you should add your AddPost class under App's return.
eg
const App = (props) => {
//somewhere here
return(
//only if this is your initial file
//else import other file and write followingly
<AddPost/>
)
export default App;