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
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();
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
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%",
},
});
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/*"
}
]
}
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";
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.
Do you want to be updated about new blogs?
Follow me on twitter: https://twitter.com/ramonpostulart
Top comments (1)
This is helpful, but it seems like we need to create a new client for every operation which is not ideal. Any way to have a centralised client?