So regarding the spacing, on the image picker component, I'll simply add a little bit of margin bottom
here of 15 to add a spacing between this image picker component and everything else in the form but
the more important thing of course is that we kind of pass this picked image on to our place, our
new place screen right because that's where we need the image in the end, I don't just need it here as
a preview, I also need it in that other screen.
Well for that, we can go to our take image handler and when we set this as a preview, of course we can
also reach out to our props and assume that we get a let's say on image taken prop which should point
at a function which we define in the new place screen which we can now execute and to that function,
I forward my imageUri as well. So I don't just store it here internally to have a preview,
I also forward it to the parent component so to say and that should be on image taken.
So all we need to do for this to work is we need to go to the new place screen and add this on image
taken prop here on the image picker
and now this should point at a function which is executed by the image picker
once we did pick an image.
So of course here, I also want to store that value, so I'll add another state here and that's the image
value or just image and set image,
maybe the selected image and set selected image name is up to you, which initially is null or undefined
like this
and now we can add a new function for this,
the image taken handler here which receives the image path in the end, right,
that's what we forward from the image picker when we call this function
and here we then set the selected image to the image path we're getting as an argument and the image
taken handler is now what we pass into the image picker here with the help of the on image taken prop
and this is how we communicate between the image picker and the new place screen. When we now click the
save button and therefore the save place handler gets executed, when we dispatch this add place action,
I now want to forward the selected image,
so this state constant here. Of course for that, we need to tweak the add place action creator a bit, right
now it only expects a title, it should now also expect an image and also add this here to our place
data and in the reducer,
I now want to add the image to the place which is getting created but important, right now our place model
expects no image,
so it's time to change that as well,
add an imageUrl there maybe, imageUri to be precise because it's local and then have this image
URI set equal to imageUri we're getting here and now with this adjusted, back in the places
reducer, we now get this extra image data in our action and we need to pass this on to the new place
constructor, so here action.placeData.image is what I want to forward,
so that's the new argument added to the place constructor and action.placeData.image of course refers
to the image we're setting here in our action object. So with that, the image is actually getting added to
the place which is created
and with that in the place list screen where we output the place item, we can now feed some data into the
image and that would be itemData.item.imageUrl, image URL because itemData.item
refers to a single place which is created as defined in our place model and there we have imageUri
and therefore of course here it should be imageUri, not URL but that's the important,
it's not just image, it's imageUri
because here we're referring to a place object following our place model. If we now save that and have
a look,
this should actually work and should allow us to add images which we also see in our place list.
So here if I click take image and I take this dummy image here, like this, crop this and then also add
a title here and click save place,
this doesn't look too bad, we see our image here.
Now one thing is important to understand.
Thus far, we're only storing this image in the default path we get out of the box which is this temporary
path and that's of course not where we want to have it stored because as I mentioned, this will be cleared
periodically and therefore eventually we'll lose our image which of course is not the goal here.