DEV Community

loading...
Cover image for The guide to connect AWS Amplify to any (AWS) service 2.0
AWS Community Builders

The guide to connect AWS Amplify to any (AWS) service 2.0

rpostulart
IT Engineering Lead who loves to work on side projects with React, GatsbyJS, React Native, NodeJS and AWS Amplify.
Updated on ・3 min read

I have written a few blogs about Amplify. One of my previous blogs was about how you can connect AWS Amplify to each AWS service with AWS Lambda and include the AWS SDK.

AWS SDK 2.0

When you did

yarn install aws-sdk
Enter fullscreen mode Exit fullscreen mode

the full aws-sdk package (57MB) was installed and then you were able to import services like:

const AWS = require("aws-sdk");
AWS.config.region = "eu-west-1";
const pinpoint = new AWS.Pinpoint();
Enter fullscreen mode Exit fullscreen mode

AWS SDK 3.0

With the release of @AWS-SDK 3.0 you are able to do modular package imports in React Native and Lambda now. For example if your want to access S3 (7 MB) in React Native without the Amplify framework. You can run:

yarn install @aws-sdk/client-s3
Enter fullscreen mode Exit fullscreen mode

Look into this tutorial for more code examples:
https://docs.aws.amazon.com/sdk-for-javascript/v3/developer-guide/getting-started-react-native.html

Example React Native Component

In this example I will create a GeofenceCollection in the AWS Location service. I am making use of AWS Amplify for Authentication via Cognito, the main component is wrapped in withAuthenticator and I have logged in with a known user.

import React, { useEffect, useState } from "react";
import { StyleSheet } from "react-native";
import EditScreenInfo from "../components/EditScreenInfo";
import { Text, View } from "../components/Themed";
import "react-native-get-random-values";
import "react-native-url-polyfill/auto";
import Auth from "@aws-amplify/auth";
import {
  LocationClient,
  CreateGeofenceCollectionCommand,
} from "@aws-sdk/client-location";
import awsconfig from "../src/aws-exports"; // if you are using Amplify CLI

function TabOneScreen() {

  useEffect(() => {
    const CreateGeofenceCollection = async () => {
      const credentials = await Auth.currentCredentials();
      console.log(credentials);
      const client = new LocationClient({
        credentials: Auth.essentialCredentials(credentials),
        region: awsconfig.aws_project_region,
      });
      try {
        await client.send(
          new CreateGeofenceCollectionCommand({
            CollectionName: "Ramon",
            PricingPlan: "RequestBasedUsage",
          })
        );
      } catch (e) {
        console.log("Error", e);
      }
    };
    CreateGeofenceCollection();
  });

  return (
    <View style={styles.container}>
      <Text style={styles.title}>Tab One111</Text>
      <View
        style={styles.separator}
        lightColor="#eee"
        darkColor="rgba(255,255,255,0.1)"
      />
      <EditScreenInfo path="/screens/TabOneScreen.tsx" />
    </View>
  );
}

export default TabOneScreen;

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: "center",
    justifyContent: "center",
  },
  title: {
    fontSize: 20,
    fontWeight: "bold",
  },
  separator: {
    marginVertical: 30,
    height: 1,
    width: "80%",
  },
});

Enter fullscreen mode Exit fullscreen mode

Make sure you add a policy to the authenticated cognito role:

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "VisualEditor0",
            "Effect": "Allow",
            "Action": "geo:CreateGeofenceCollection",
            "Resource": "arn:aws:geo:REGION:ACCOUNTID:geofence-collection/*"
        }
    ]
}
Enter fullscreen mode Exit fullscreen mode

More resources:

AWS-SDK V3 API Docs

https://docs.aws.amazon.com/AWSJavaScriptSDK/v3/latest/index.html

AWS SDK V2 API Docs

These docs are much better, to understand the input params.
https://docs.aws.amazon.com/AWSJavaScriptSDK/latest/

Blog about performance improvement

https://aws.amazon.com/blogs/developer/modular-packages-in-aws-sdk-for-javascript/

Launch announcement

https://aws.amazon.com/blogs/developer/modular-aws-sdk-for-javascript-is-now-generally-available/

Polyfil import

I had some unclear errors, but you need to install and import two additional packages.

import "react-native-get-random-values";
import "react-native-url-polyfill/auto";
Enter fullscreen mode Exit fullscreen mode

See this issue and documentation:
https://github.com/aws/aws-sdk-js-v3/issues/2288#issuecomment-824454312
https://github.com/aws/aws-sdk-js-v3#getting-started

About me

I am a doing (side)projects with technology like AWS Amplify, ReactJS, React Native and EXPO. I am an AWS community builder. I am a huge fan of AWS Amplify and blog about certain topics that come along with it. If you have any questions related to the framework, React of React Native then you can always reach out to me.

Twitter

Alt Text

Do you want to be updated about new blogs?
Follow me on twitter: https://twitter.com/ramonpostulart

Discussion (0)