How should React native handle asyncronous serverless image processing pipeline to deliver text back to mobile app

user_7551094 0
Viewed 68

I am writing a small application that utilises AWS serverless architexture and a React native Expo front end.

The question is slightly abstract in nature as i dont require a specific answer but more a nudge in the right direction on implementation and architecture.

I have architected the application to send an image to AWS S3 via API GW (authorised via cognito), when the image lands in s3 a backend process is triggered spinning up AWS textract and once successful SNS topic updates a second lambda to process the text in the image landing the final result in a second bucket - all this is fine and i can manually hit the bucket through Postman and everything works happily!

The question comes when integrating the front-end, in the React native app, i snap a picture and on save i can call the API GW endpoint to upload the image (all fine again), its just that im unsure how to query/ get the notification of the success of textract. and then navigate the user to the viewText screen.

I have a couple of ideas but they feel flakey at best:

  1. Use an intermediate screen to grab some more info about the image uploaded, the time the user takes to upload info would (hopefully) allow the backend processes to complete and then submitting that extra info to the api could return the success response with image text.
  2. Have the app listen out for SNS success which could undisable a btn in the UI to view text on the next screen
  3. On image submit have a loading screen display for an arbitary amount of time (~2/3seconds) and then navigate to the text screen, and use the useEffect hook to call api gw looking for the successful recognised text - could delay further with setTimeout() if this is not long enough? Also on navigate show some sort of skeleton component as if loading data.

Thanks in advance for any advice.

serverless expo react-native amazon-textract amazon-web-services
1 Answers

To close this out if anyone is following this question.

I have blocked the user from seeing the results of the textract analysis in a RN immediately by requesting the user to input additional data about the image in the next screen in the stack. Such as a title, and a citation for reference.

The user has to at the least input a 'title' to the image which i then store with the output of the analysis in dynamodb; if the user wishes to progress to the 'textract output' screen in the stack I have placed a submit button that is disabled until at least the 'title' input is valid.

The resultant screen also has a skeleton component that renders showing a loading state for 1.5 seconds and then attempts the call to retrieve the data from dynamo. This has given enough time including with the cold starts and lower mobile data speeds for a great user experience.

user_75510940
Related