Home

Welcome to the react-native-tips-tricks wiki!

# Tips on using Image picker for React Native:

The picker module can be grabbed from https://github.com/marcshilling/react-native-image-picker, also follow the guide there. It is useful for both image browsing and resizing before uploading.

After you can display the image, now it's time to get the image Base64 string to upload it to server.

The main thing here is that we must use encodeURIComponent() to encode the string before sending to server. If you fail to do so, your Base64 string will goes wrong and cannot be processed by the server.

So, our code will now looks like this:

            fetchBody = fetchBody + "CurrentUserID=" + this.state.currentUserID;
	fetchBody = fetchBody + "&TenMon=" + this.state.newFoodName;
	fetchBody = fetchBody + "&MoTa=" + this.state.newFoodDescription;
	fetchBody = fetchBody + "&LoaiMonAn=" + "2";
	fetchBody = fetchBody + "&foodImageString=" + encodeURIComponent(this.state.foodImageSource.uri); 
	//Must have encodeURIComponent here for the base 64 string to works
	//https://github.com/marcshilling/react-native-image-picker

	//Display the loading icon
	this.setState({ isLoading: true});

	//console.log(this.state.foodImageSource.uri);
	fetch(searchURL, {method: "POST", body: fetchBody})
    .then((response) => response.json())
    .then((responseData) => {
    		console.log(responseData);
    		this.setState({ isLoading: false });

    		var submitStatus = responseData.InsertNewFoodResult[0].Status;

    		if (submitStatus == "success") {
			    this.props.navigator.push({
				  title: 'Món ăn',
				  component: FoodDetail,
				  passProps: {foodID: responseData.InsertNewFoodResult[0].MonAnID}
				});
			}
			else {
				AlertIOS.alert(
		            'Không thể tạo món mới',
		            responseData.InsertNewFoodResult[0].ErrorMessage
	            );
			}
    })
    .done(() => {
    	//Hide the loading icon
    	
    });