aws-samples/aws-amplify-react-native-events-app-workshop

This is a self-paced workshop designed for developers who want to build a React Native mobile application using mobile services from Amazon Web Services (AWS).

React Native The AWSome Way!

This is a self-paced workshop designed for developers who want to build a React Native mobile application using mobile services from Amazon Web Services (AWS).

Reference Architecture

Our application allow users to create meetups and also to join existing meetups. Each meetup has also a chat feature to let users discuss about the event.

Screenshots

The data model will consist of:

• Users: a list of users who are using the app
• Events: a list of events created by the users in the app
• Chats: a list of chat messages created in the event by users
• EventUserJoined: a joint table between users and events to indicate who is joining which events

Our mobile application will be written in React Native. We will also be using AWS Amplify. AWS Amplify provides a declarative and make it really easy to add features like authentication and analytic to our mobile application. Our backend will be powered by AWS AppSnyc, a fully managed GraphQL service. AWS AppSync defines a GraphQL Schema with data types and GraphQL operations (query, mutation and subscription). It also associate a set of resolvers to Amazon DynamoDB, where we have 4 tables for our data models.

Lab 1

Setup AWS Cloud9, expo client, React native development and AWS environment.

Lab 2

Run AWS Amplify CLI & setup Auth in AWS Cloud9.

Lab 3

Setup AppSync, update GraphQL schema & add Analytics.

Lab 4

Run your React Native App on your Mobile Device!

Lab 5

Explore Amazon Pinpoint (Analytics) and reach out to your users at real-time!

# Pro Tips

Before moving to the next module, a brief word on working with the Amplify command line tools. Some operations present a multiple choice option such as the one shown below. In these cases, you can use the space bar to select one or more of the options before pressing the enter button to move to the next question. Selected choices will have a filled circle instead of an outline.

? Pick one or more of the following options.
❯◯ not selected 1
 ◉ selected
 ◯ not selected 2

Clean up

If you ever need to clean up your AWS account, you just need to run the following command in your AWS Cloud9 environment:

amplify delete

And once done, you can now delete your AWS Cloud9 instance.

For future upgrades and debugging references

These are the list of packages installed for the demo app.

yarn add @aws-amplify/core \
  @aws-amplify/analytics \
  @react-navigation/native \
  @react-navigation/stack \ 
  @react-navigation/bottom-tabs \
  native-base \
  aws-amplify-react-native \
  react-native-swipe-list-view \
  react-native-gifted-chat \
  react-native-modal-datetime-picker \
  moment

expo install react-native-gesture-handler \
  react-native-reanimated \
  react-native-screens \
  react-native-safe-area-context \
  @react-native-community/masked-view \
  expo-font \
  @react-native-community/netinfo \
  expo-app-loading

When running npx pod-install, one error encountered.

Make sure you fix it by choosing the respective Command Line Tool in Xcode.

Re-run npx pod-install, you should see the success messages

License Summary

This sample code is made available under the MIT-0 license. See the LICENSE file.

aws-amplify-react-native-events-app-workshop's Issues

Unable to resolve "native-base/Fonts/Roboto.ttf" from "App.js"

When I launch the app in Expo on iPhone, I get the below error. I see that the file is not in my package.

Unable to resolve "native-base/Fonts/Roboto.ttf" from "App.js"
Failed building JavaScript bundle.
Unable to resolve "native-base/Fonts/Roboto.ttf" from "App.js"
Failed building JavaScript bundle.

I see this part of the code in app.js but there is no Roboro.ttf file in native-base/Fonts/Roboto.ttf

function App() {
const [appState, setAppState] = useState(AppState.currentState);
const [isLoading, setIsLoading] = useState(true);
const navigationRef = useRef();
const routeNameRef = useRef();

const loadFonts = async () => {
// for native-base
await Font.loadAsync({
Roboto: require('native-base/Fonts/Roboto.ttf'),
Roboto_medium: require('native-base/Fonts/Roboto_medium.ttf'),
...Ionicons.font,
});
setIsLoading(!isLoading);
};

useEffect(() => {
loadFonts();

Not able to load app in Expo (iOS)

ec2-user@f7da532866c1:/code$ yarn start -c
yarn run v1.22.4
$ expo start -c
Starting project at /code
Expo DevTools is running at http://localhost:19002
Opening DevTools in the browser... (press shift-d to disable)
Starting Metro Bundler on port 19001.
Your JavaScript transform cache is empty, rebuilding (this may take a minute).
Tunnel ready.

exp://54.206.117.81:19000

.....

Getting following error on both App and Docker container

Unable to resolve "react-native-swipe-list-view" from "src/screens/HomeScreen.js"
Failed building JavaScript bundle.

Corrupt file contents in /code/amplify/.config/local-aws-info.json

When I use command "amplify push" after adding analytics, I get the below error:

`UPDATE_COMPLETE functioneventappfb982ea6PostConfirmation AWS::CloudFormation::Stack Thu May 21 2020 04:45:34 GMT+0000 (Coordinated Universal Time)
⠏ Updating resources in the cloud. This may take a few minutes...

UPDATE_COMPLETE amplify-eventapp-dev-112821 AWS::CloudFormation::Stack Thu May 21 2020 04:45:34 GMT+0000 (Coordinated Universal Time)
⠼ Updating resources in the cloud. This may take a few minutes...Error: Corrupt file contents in /code/amplify/.config/local-aws-info.json
at getConfigForEnv (/usr/local/lib/node_modules/@aws-amplify/cli/node_modules/amplify-provider-awscloudformation/lib/configuration-manager.js:462:17)
at loadConfigurationForEnv (/usr/local/lib/node_modules/@aws-amplify/cli/node_modules/amplify-provider-awscloudformation/lib/configuration-manager.js:513:29)
at Object.loadConfiguration (/usr/local/lib/node_modules/@aws-amplify/cli/node_modules/amplify-provider-awscloudformation/lib/configuration-manager.js:499:24)
at Object.aws.configureWithCreds (/usr/local/lib/node_modules/@aws-amplify/cli/node_modules/amplify-provider-awscloudformation/src/aws-utils/aws.js:18:45)
at Object.getConfiguredAWSClient (/usr/local/lib/node_modules/@aws-amplify/cli/node_modules/amplify-provider-awscloudformation/index.js:60:13)
at getS3Client (/usr/local/lib/node_modules/@aws-amplify/cli/node_modules/amplify-category-auth/provider-utils/awscloudformation/utils/trigger-file-uploader.js:13:30)
at uploadFiles (/usr/local/lib/node_modules/@aws-amplify/cli/node_modules/amplify-category-auth/provider-utils/awscloudformation/utils/trigger-file-uploader.js:19:28)
at uploadAuthTriggerFiles (/usr/local/lib/node_modules/@aws-amplify/cli/node_modules/amplify-provider-awscloudformation/lib/upload-auth-trigger-files.js:7:11)
at Object.run (/usr/local/lib/node_modules/@aws-amplify/cli/node_modules/amplify-provider-awscloudformation/lib/push-resources.js:71:11)
at runMicrotasks ()
✖ An error occurred when pushing the resources to the cloud

Unable to upload trigger files to S3
An error occured during the push operation: Unable to upload trigger files to S3
ec2-user@7bbe1f6e7523:/code$`

All seems ok but no app

Hi,

After executing:

yarn start

I received a:

Error: Cannot resolve entry file: The mainfield defined in yourpackage.json points to a non-existent path.

The entry point inside package.json is 'index.js', I changed to App.js.

Next, and issue related to src/graphql/queries and finally, all seems correct, launching expo go app (Downloaded javascript bundle) and I received just a white screen.

No errors in the cloud9 environment.

Any clue?

Application Monthly Cost

Hi Team,

Thank you for this great tutorial. I was looking to learn more about the AWS services by creating an event app for my university society. What is the monthly cost of running this app as it is?

Cheers,
Omar