├── .eslintrc.js ├── .gitignore ├── .prettierrc.js ├── README.md ├── aws-amplify-react-native.d.ts ├── examples ├── API - Connect.tsx ├── Auth - Customize your own components.tsx ├── Auth - React Components.tsx ├── Auth - Refreshing JWT Tokens.tsx ├── Auth - Sign up in with email phone number.tsx ├── Auth - SignUp Configuration.tsx ├── Auth - Using the Authenticator Component.tsx ├── Auth - Using withAuthenticator HOC.tsx ├── Auth - Wrapping your Component.tsx ├── Customize UI Theme.tsx ├── Storage - S3Album.tsx ├── Storage - S3Image.tsx └── graphql │ ├── mutations.js │ ├── queries.js │ └── subscriptions.js ├── package.json └── tsconfig.json /.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | extends: '@react-native-community', 4 | }; 5 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | package-lock.json 3 | -------------------------------------------------------------------------------- /.prettierrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | bracketSpacing: false, 3 | jsxBracketSameLine: true, 4 | singleQuote: true, 5 | trailingComma: 'all', 6 | }; 7 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | The [`aws-amplify-react-native.d.ts` file](https://github.com/dantasfiles/AmplifyReactNativeTypes/blob/master/aws-amplify-react-native.d.ts) contains custom type declarations for the [`aws-amplify-react-native` package](https://github.com/aws-amplify/amplify-js/tree/master/packages/aws-amplify-react-native). 2 | 3 | The [`examples` directory](https://github.com/dantasfiles/AmplifyReactNativeTypes/tree/master/examples) contains examples from the AWS Amplify documentation. 4 | The examples successfully typecheck in Typescript, and you can open them in an IDE like VSCode to examine the types. 5 | 6 | This is a short-term stopgap solution, as the `aws-amplify-react-native` package is being rewritten by AWS in their [Amplify UI Component Library Refactor]( 7 | https://github.com/aws-amplify/amplify-js/issues/3279) 8 | 9 | Some of the types may be incorrect, as I'm trying to make inferences about code written by AWS developers. Please do not hesistate to open an issue or pull request with suggestions or corrections. 10 | -------------------------------------------------------------------------------- /aws-amplify-react-native.d.ts: -------------------------------------------------------------------------------- 1 | declare module 'aws-amplify-react-native' { 2 | const Amplify: any; 3 | export default Amplify; 4 | 5 | // *** UI *** 6 | interface iTheme { 7 | container: {}; 8 | section: {}; 9 | sectionScroll: {}; 10 | sectionHeader: {}; 11 | sectionHeaderText: {}; 12 | sectionFooter: {}; 13 | sectionFooterLink: {}; 14 | sectionFooterLinkDisabled: {}; 15 | navBar: {}; 16 | navButton: {}; 17 | cell: {}; 18 | errorRow: {}; 19 | errorRowIcon: {}; 20 | errorRowText: {}; 21 | photo: {}; 22 | album: {}; 23 | button: {}; 24 | buttonDisabled: {}; 25 | buttonText: {}; 26 | formField: {}; 27 | input: {}; 28 | inputLabel: {}; 29 | phoneContainer: {}; 30 | phoneInput: {}; 31 | picker: {}; 32 | pickerItem: {}; 33 | signedOutMessage: {}; 34 | } 35 | 36 | export const AmplifyTheme: iTheme; 37 | 38 | export const AmplifyMessageMapEntries: (String | RegExp)[][]; 39 | 40 | interface iUIProps { 41 | theme?: iTheme; 42 | } 43 | 44 | interface iFormFieldProps extends iUIProps { 45 | label?: string; 46 | required?: boolean; 47 | [propName: string]: any; 48 | } 49 | export const FormField: React.FC; 50 | 51 | interface iPhoneFieldProps extends iUIProps { 52 | label?: string; 53 | required?: boolean; 54 | defaultDialCode?: string; 55 | onChangeText: (phone: string) => void; 56 | [propName: string]: any; 57 | } 58 | export const PhoneField: React.ComponentClass; 59 | 60 | // DON'T THINK THIS IS ACTUALLY USED 61 | export const SectionFooter: React.FC; 62 | 63 | interface iLinkCellProps extends iUIProps { 64 | onPress: () => void; 65 | } 66 | export const LinkCell: React.FC; 67 | 68 | export const Header: React.FC; 69 | 70 | export const ErrorRow: React.FC; 71 | 72 | interface iAmplifyButtonProps extends iUIProps { 73 | disabled?: boolean; 74 | style?: any; 75 | text?: string; 76 | [propName: string]: any; 77 | } 78 | export const AmplifyButton: React.FC; 79 | 80 | // *** AUTH *** 81 | interface iSignUpFields { 82 | label: string; 83 | key: string; 84 | required: boolean; 85 | displayOrder: number; 86 | type: string; 87 | custom?: boolean; 88 | } 89 | interface iSignUpConfig { 90 | header?: string; 91 | hiddenDefaults?: string[]; 92 | hideAllDefaults?: boolean; 93 | defaultCountryCode?: string; 94 | signUpFields?: iSignUpFields[]; 95 | } 96 | interface iAuthConfig { 97 | includeGreetings?: boolean; 98 | usernameAttributes?: string; 99 | authenticatorComponents?: typeof AuthPiece[]; 100 | signUpConfig?: iSignUpConfig; 101 | } 102 | interface iWACompProps { 103 | authState: string; 104 | authData: any; 105 | onStateChange: (state: string, data: any) => void; 106 | } 107 | interface iWithAuthenticatorProps { 108 | authState?: string; 109 | onStateChange?: (state: string, data: any) => void; 110 | [propName: string]: any; 111 | } 112 | export function withAuthenticator( 113 | Comp: React.ComponentType, 114 | includeGreetings?: boolean | iAuthConfig, 115 | authenticatorComponents?: typeof AuthPiece[], 116 | federated?: any, 117 | theme?: iTheme, 118 | signUpConfig?: iSignUpConfig, 119 | ): React.ComponentClass; 120 | 121 | interface iAuthenticatorProps { 122 | authState?: string; 123 | authData?: any; 124 | onStateChange?: (state: string, data: any) => void; 125 | theme?: iTheme; 126 | errorMessage?: (message: string) => string; 127 | hideDefault?: boolean; 128 | signUpConfig?: iSignUpConfig; 129 | usernameAttributes?: string; 130 | } 131 | export const Authenticator: React.ComponentClass; 132 | 133 | interface iAuthPieceProps { 134 | usernameAttributes?: string; 135 | onStateChange?: (state: string, data: any) => void; 136 | errorMessage?: (message: string) => string; 137 | messageMap?: (message: string) => string; 138 | authState?: string; 139 | track?: () => void; 140 | theme?: iTheme; 141 | authData?: any; 142 | } 143 | export const AuthPiece: React.ComponentClass; 144 | 145 | export const Loading: typeof AuthPiece; 146 | 147 | export const SignIn: typeof AuthPiece; 148 | 149 | export const ConfirmSignIn: typeof AuthPiece; 150 | 151 | interface iSignUpProps extends iAuthPieceProps { 152 | signUpConfig?: iSignUpConfig; 153 | } 154 | export const SignUp: React.ComponentClass; 155 | 156 | export const ConfirmSignUp: typeof AuthPiece; 157 | 158 | export const ForgotPassword: typeof AuthPiece; 159 | 160 | export const RequireNewPassword: typeof AuthPiece; 161 | 162 | export const VerifyContact: typeof AuthPiece; 163 | 164 | interface iGreetingsProps extends iAuthPieceProps { 165 | signedInMessage?: string; 166 | signedOutMessage?: string; 167 | } 168 | export const Greetings: React.ComponentClass; 169 | 170 | interface iWithOAuthProps { 171 | oauth_config?: any; 172 | [propName: string]: any; 173 | } 174 | interface iWOACompProps { 175 | loading: boolean; 176 | oAuthUser: any; 177 | oAuthError: any; 178 | hostedUISignIn: () => void; 179 | facebookSignIn: () => void; 180 | amazonSignIn: () => void; 181 | googleSignIn: () => void; 182 | customProviderSignIn: (provider: string) => void; 183 | signOut: () => void; 184 | } 185 | export function withOAuth( 186 | Comp: React.ComponentType, 187 | ): React.ComponentClass; 188 | 189 | // *** API *** 190 | interface iGraphQLOperation { 191 | query: any; 192 | variables: {}; 193 | } 194 | interface iConnectProps { 195 | query?: iGraphQLOperation; 196 | mutation?: iGraphQLOperation; 197 | subscription?: iGraphQLOperation; 198 | onSubscriptionMsg?: (prevData: any, data: any) => any; 199 | } 200 | export const Connect: React.ComponentClass; 201 | 202 | // *** STORAGE *** 203 | interface iS3ImageProps extends iUIProps { 204 | imgKey?: string; 205 | level?: string; 206 | body?: any; 207 | contentType?: string; 208 | style?: string; 209 | resizeMode?: string; 210 | } 211 | export const S3Image: React.ComponentClass; 212 | 213 | interface iS3AlbumProps extends iUIProps { 214 | path?: string; 215 | level?: string; 216 | filter?: (data: any) => boolean; 217 | [propName: string]: any; 218 | } 219 | export const S3Album: React.ComponentClass; 220 | 221 | // *** INTERACTIONS *** 222 | export const ChatBot: React.ComponentClass; 223 | } 224 | -------------------------------------------------------------------------------- /examples/API - Connect.tsx: -------------------------------------------------------------------------------- 1 | // Connect 2 | // https://aws-amplify.github.io/docs/js/api#connect 3 | 4 | import React from 'react'; 5 | import {View, Text, TextInput, FlatList, Button} from 'react-native'; 6 | import {Connect} from 'aws-amplify-react-native'; 7 | import {graphqlOperation} from 'aws-amplify'; 8 | import * as mutations from './graphql/mutations'; 9 | import * as queries from './graphql/queries'; 10 | import * as subscriptions from './graphql/subscriptions'; 11 | 12 | interface Todo { 13 | id: string; 14 | name: string; 15 | description?: string; 16 | } 17 | 18 | interface iAddTodoProps { 19 | onCreate: (x: unknown) => void; 20 | } 21 | interface iAddTodoState { 22 | name: string; 23 | description: string; 24 | } 25 | class AddTodo extends React.Component< 26 | iAddTodoProps, 27 | iAddTodoState, 28 | iAddTodoState 29 | > { 30 | constructor(props: iAddTodoProps) { 31 | super(props); 32 | this.submit = this.submit.bind(this); 33 | this.state = { 34 | name: '', 35 | description: '', 36 | }; 37 | } 38 | 39 | async submit() { 40 | const {onCreate} = this.props; 41 | const input = { 42 | name: this.state.name, 43 | description: this.state.description, 44 | }; 45 | console.log(input); 46 | 47 | try { 48 | await onCreate({input}); 49 | } catch (err) { 50 | console.error(err); 51 | } 52 | } 53 | 54 | render() { 55 | return ( 56 | 57 | { 60 | this.setState({name: text}); 61 | }} 62 | /> 63 | { 66 | this.setState({description: text}); 67 | }} 68 | /> 69 | 44 | 45 | )} 46 | 47 | ); 48 | } 49 | } 50 | 51 | export default App; 52 | -------------------------------------------------------------------------------- /examples/Auth - React Components.tsx: -------------------------------------------------------------------------------- 1 | // React Components 2 | // https://aws-amplify.github.io/docs/js/authentication#react-components 3 | 4 | import React from 'react'; 5 | import { 6 | StyleSheet, 7 | Text, 8 | ScrollView, 9 | SafeAreaView, 10 | StatusBar, 11 | Button, 12 | } from 'react-native'; 13 | import {withOAuth} from 'aws-amplify-react-native'; 14 | 15 | interface iAppProps { 16 | loading: boolean; 17 | oAuthUser: unknown; 18 | oAuthError: unknown; 19 | hostedUISignIn: () => void; 20 | facebookSignIn: () => void; 21 | amazonSignIn: () => void; 22 | googleSignIn: () => void; 23 | customProviderSignIn: (provider: string) => void; 24 | signOut: () => void; 25 | } 26 | 27 | class App extends React.Component { 28 | render() { 29 | const { 30 | oAuthUser: user, 31 | oAuthError: error, 32 | hostedUISignIn, 33 | facebookSignIn, 34 | googleSignIn, 35 | amazonSignIn, 36 | customProviderSignIn, 37 | signOut, 38 | } = this.props; 39 | 40 | return ( 41 | 42 | {user && ( 43 |