├── .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<iFormFieldProps>;
 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<iPhoneFieldProps>;
 59 | 
 60 |   // DON'T THINK THIS IS ACTUALLY USED
 61 |   export const SectionFooter: React.FC<iUIProps>;
 62 | 
 63 |   interface iLinkCellProps extends iUIProps {
 64 |     onPress: () => void;
 65 |   }
 66 |   export const LinkCell: React.FC<iLinkCellProps>;
 67 | 
 68 |   export const Header: React.FC<iUIProps>;
 69 | 
 70 |   export const ErrorRow: React.FC<iUIProps>;
 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<iAmplifyButtonProps>;
 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<iWACompProps>,
114 |     includeGreetings?: boolean | iAuthConfig,
115 |     authenticatorComponents?: typeof AuthPiece[],
116 |     federated?: any,
117 |     theme?: iTheme,
118 |     signUpConfig?: iSignUpConfig,
119 |   ): React.ComponentClass<iWithAuthenticatorProps>;
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<iAuthenticatorProps>;
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<iAuthPieceProps>;
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<iSignUpProps>;
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<iGreetingsProps>;
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<iWOACompProps>,
187 |   ): React.ComponentClass<iWithOAuthProps>;
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<iConnectProps>;
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<iS3ImageProps>;
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<iS3AlbumProps>;
220 | 
221 |   // *** INTERACTIONS ***
222 |   export const ChatBot: React.ComponentClass<any>;
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 |       <View>
 57 |         <TextInput
 58 |           value={this.state.name}
 59 |           onChangeText={(text: string) => {
 60 |             this.setState({name: text});
 61 |           }}
 62 |         />
 63 |         <TextInput
 64 |           value={this.state.description}
 65 |           onChangeText={(text: string) => {
 66 |             this.setState({description: text});
 67 |           }}
 68 |         />
 69 |         <Button title="Add" onPress={this.submit} />
 70 |       </View>
 71 |     );
 72 |   }
 73 | }
 74 | 
 75 | class App extends React.Component {
 76 |   render() {
 77 |     interface iListViewProps {
 78 |       todos: Todo[];
 79 |     }
 80 |     const ListView = ({todos}: iListViewProps) => (
 81 |       <View>
 82 |         <Text>All Todos</Text>
 83 |         <FlatList
 84 |           data={todos}
 85 |           renderItem={({item}) => (
 86 |             <Text>
 87 |               {item.name} ({item.id})
 88 |             </Text>
 89 |           )}
 90 |           keyExtractor={(todo: Todo) => todo.id}
 91 |         />
 92 |       </View>
 93 |     );
 94 |     interface graphQLQueryResult {
 95 |       data: {listTodos: {items: Todo[]}};
 96 |       loading: boolean;
 97 |       errors: string;
 98 |     }
 99 |     interface graphQLSubscriptionData {
100 |       onCreateTodo: Todo;
101 |     }
102 |     return (
103 |       <View>
104 |         <Connect mutation={graphqlOperation(mutations.createTodo)}>
105 |           {({mutation}: {mutation: (x: unknown) => void}) => (
106 |             <AddTodo onCreate={mutation} />
107 |           )}
108 |         </Connect>
109 |         <Connect
110 |           query={graphqlOperation(queries.listTodos)}
111 |           subscription={graphqlOperation(subscriptions.onCreateTodo)}
112 |           onSubscriptionMsg={(
113 |             prev: graphQLSubscriptionData,
114 |             {onCreateTodo}: graphQLSubscriptionData,
115 |           ) => {
116 |             console.log(onCreateTodo);
117 |             return prev;
118 |           }}>
119 |           {({data: {listTodos}, loading, errors}: graphQLQueryResult) => {
120 |             if (errors) {
121 |               return <Text>Error</Text>;
122 |             }
123 |             if (loading || !listTodos) {
124 |               return <Text>Loading...</Text>;
125 |             }
126 |             return <ListView todos={listTodos.items} />;
127 |           }}
128 |         </Connect>
129 |       </View>
130 |     );
131 |   }
132 | }
133 | 
134 | export default App;
135 | 


--------------------------------------------------------------------------------
/examples/Auth - Customize your own components.tsx:
--------------------------------------------------------------------------------
 1 | // Customize your own components
 2 | // https://aws-amplify.github.io/docs/js/authentication#customize-your-own-components
 3 | 
 4 | import React from 'react';
 5 | import {SignIn, Authenticator, AuthPiece} from 'aws-amplify-react-native';
 6 | 
 7 | function App() {
 8 |   return (
 9 |     <Authenticator hideDefault={true}>
10 |       <SignIn />
11 |       {/* NEXT LINE NOT REACT NATIVE */}
12 |       {/* <MyCustomSignUp override={'SignUp'} /> */}
13 |       <MyCustomSignUp />
14 |     </Authenticator>
15 |   );
16 | }
17 | 
18 | interface iMyCustomSignUpProps {
19 |   onStateChange?: (state: string, data: unknown) => void;
20 |   authState?: string;
21 | }
22 | class MyCustomSignUp extends AuthPiece {
23 |   constructor(props: iMyCustomSignUpProps) {
24 |     super(props);
25 |     this.gotoSignIn = this.gotoSignIn.bind(this);
26 |   }
27 | 
28 |   gotoSignIn() {
29 |     // NEEDS THIS TO TYPECHECK
30 |     if (this.props.onStateChange) {
31 |       // to switch the authState to 'signIn'
32 |       this.props.onStateChange('signIn', {});
33 |     }
34 |   }
35 | 
36 |   render() {
37 |     return (
38 |       <div>
39 |         {/* only render this component when the authState is 'signUp' */}
40 |         {this.props.authState === 'signUp' && (
41 |           <div>
42 |             My Custom SignUp Component
43 |             <button onClick={this.gotoSignIn}>Goto SignIn</button>
44 |           </div>
45 |         )}
46 |       </div>
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<iAppProps> {
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 |       <SafeAreaView style={styles.safeArea}>
42 |         {user && (
43 |           <Button title="Sign Out" onPress={signOut} /* icon="logout" */ />
44 |         )}
45 |         <ScrollView contentContainerStyle={styles.scrollViewContainer}>
46 |           <Text>{JSON.stringify({user, error}, null, 2)}</Text>
47 |           {!user && (
48 |             <React.Fragment>
49 |               {/* Go to the Cognito Hosted UI */}
50 |               <Button title="Cognito" onPress={hostedUISignIn} />
51 | 
52 |               {/* Go directly to a configured identity provider */}
53 |               <Button title="Facebook" onPress={facebookSignIn} />
54 |               <Button title="Google" onPress={googleSignIn} />
55 |               <Button title="Amazon" onPress={amazonSignIn} />
56 | 
57 |               {/* e.g. for OIDC providers */}
58 |               <Button
59 |                 title="Yahoo"
60 |                 onPress={() => customProviderSignIn('Yahoo')}
61 |               />
62 |             </React.Fragment>
63 |           )}
64 |         </ScrollView>
65 |       </SafeAreaView>
66 |     );
67 |   }
68 | }
69 | 
70 | const styles = StyleSheet.create({
71 |   safeArea: {
72 |     flexGrow: 1,
73 |     paddingTop: StatusBar.currentHeight,
74 |     backgroundColor: '#FFFFFF',
75 |   },
76 |   scrollViewContainer: {
77 |     flexGrow: 1,
78 |     alignItems: 'center',
79 |     justifyContent: 'center',
80 |   },
81 | });
82 | 
83 | const OAuthApp = withOAuth(App);
84 | 
85 | export default OAuthApp;
86 | 


--------------------------------------------------------------------------------
/examples/Auth - Refreshing JWT Tokens.tsx:
--------------------------------------------------------------------------------
 1 | // Refreshing JWT Tokens
 2 | // https://aws-amplify.github.io/docs/js/authentication#react-components
 3 | 
 4 | import React from 'react';
 5 | import {Button} from 'react-native';
 6 | import {withOAuth} from 'aws-amplify-react-native';
 7 | 
 8 | function refreshToken() {
 9 |   // refresh the token here and get the new token info
10 |   const token = null;
11 |   const expires_at = null;
12 |   const identity_id = null;
13 |   // ......
14 |   return new Promise((res, _) => {
15 |     const data = {
16 |       token, // the token from the provider
17 |       expires_at, // the timestamp for the expiration
18 |       identity_id, // optional, the identityId for the credentials
19 |     };
20 |     res(data);
21 |   });
22 | }
23 | 
24 | interface iMyAppProps {
25 |   loading: boolean;
26 |   oAuthUser: unknown;
27 |   oAuthError: unknown;
28 |   hostedUISignIn: () => void;
29 |   facebookSignIn: () => void;
30 |   amazonSignIn: () => void;
31 |   googleSignIn: () => void;
32 |   customProviderSignIn: (provider: string) => void;
33 |   signOut: () => void;
34 | }
35 | class MyApp extends React.Component<iMyAppProps> {
36 |   // ...
37 |   render() {
38 |     return (
39 |       <Button title="Sign in with AWS" onPress={this.props.amazonSignIn} />
40 |     );
41 |   }
42 | }
43 | 
44 | const OAuthApp = withOAuth(MyApp);
45 | 
46 | export {OAuthApp, refreshToken};
47 | 


--------------------------------------------------------------------------------
/examples/Auth - Sign up in with email phone number.tsx:
--------------------------------------------------------------------------------
 1 | // Sign up/in with email/phone number
 2 | // https://aws-amplify.github.io/docs/js/react#sign-upin-with-emailphone-number
 3 | 
 4 | import React from 'react';
 5 | import {Text} from 'react-native';
 6 | import {withAuthenticator, Authenticator} from 'aws-amplify-react-native';
 7 | function App() {
 8 |   return <Text>App</Text>;
 9 | }
10 | 
11 | // When using Authenticator
12 | class EmailApp1 {
13 |   // ...
14 |   render() {
15 |     return <Authenticator usernameAttributes="email" />;
16 |   }
17 | }
18 | // When using withAuthenticator
19 | const EmailApp2 = withAuthenticator(App, {usernameAttributes: 'email'});
20 | 
21 | class PhoneApp1 {
22 |   // ...
23 |   render() {
24 |     return <Authenticator usernameAttributes="phone_number" />;
25 |   }
26 | }
27 | // When using withAuthenticator
28 | const PhoneApp2 = withAuthenticator(App, {usernameAttributes: 'phone_number'});
29 | 
30 | const signUpConfig = {
31 |   header: 'My Customized Sign Up',
32 |   hideAllDefaults: true,
33 |   defaultCountryCode: '1',
34 |   signUpFields: [
35 |     {
36 |       label: 'My user name',
37 |       key: 'username',
38 |       required: true,
39 |       displayOrder: 1,
40 |       type: 'string',
41 |     },
42 |     {
43 |       label: 'Password',
44 |       key: 'password',
45 |       required: true,
46 |       displayOrder: 2,
47 |       type: 'password',
48 |     },
49 |     {
50 |       label: 'PhoneNumber',
51 |       key: 'phone_number',
52 |       required: true,
53 |       displayOrder: 3,
54 |       type: 'string',
55 |     },
56 |     {
57 |       label: 'Email',
58 |       key: 'email',
59 |       required: true,
60 |       displayOrder: 4,
61 |       type: 'string',
62 |     },
63 |   ],
64 | };
65 | const usernameAttributes = 'My user name';
66 | const SignUpConfigApp = withAuthenticator(App, {
67 |   signUpConfig,
68 |   usernameAttributes,
69 | });
70 | 
71 | export {EmailApp1, EmailApp2, PhoneApp1, PhoneApp2, SignUpConfigApp};
72 | 


--------------------------------------------------------------------------------
/examples/Auth - SignUp Configuration.tsx:
--------------------------------------------------------------------------------
 1 | // SignUp Configuration
 2 | // https://aws-amplify.github.io/docs/js/react#signup-configuration
 3 | 
 4 | import React from 'react';
 5 | import {Text} from 'react-native';
 6 | import {withAuthenticator} from 'aws-amplify-react-native';
 7 | 
 8 | function App() {
 9 |   return <Text>App</Text>;
10 | }
11 | const signUpConfig = {
12 |   header: 'My Customized Sign Up',
13 |   hideAllDefaults: true,
14 |   defaultCountryCode: '1',
15 |   signUpFields: [
16 |     {
17 |       label: 'My custom email label',
18 |       key: 'email',
19 |       required: true,
20 |       displayOrder: 1,
21 |       type: 'string',
22 |     },
23 |     // and other custom attributes
24 |   ],
25 | };
26 | 
27 | export default withAuthenticator(App, {signUpConfig});
28 | 


--------------------------------------------------------------------------------
/examples/Auth - Using the Authenticator Component.tsx:
--------------------------------------------------------------------------------
 1 | // Using the Authenticator Component
 2 | // https://aws-amplify.github.io/docs/js/authentication#using-the-authenticator-component
 3 | 
 4 | import React from 'react';
 5 | import {
 6 |   Authenticator,
 7 |   AmplifyTheme,
 8 |   Loading,
 9 |   ConfirmSignIn,
10 |   SignUp,
11 |   ConfirmSignUp,
12 |   ForgotPassword,
13 |   RequireNewPassword,
14 |   VerifyContact,
15 |   Greetings,
16 | } from 'aws-amplify-react-native';
17 | 
18 | const CognitoUser = {};
19 | const myCustomTheme = AmplifyTheme;
20 | function myMessageMap(x: string) {
21 |   return x;
22 | }
23 | function App() {
24 |   return (
25 |     <Authenticator
26 |       // Optionally hard-code an initial state
27 |       authState="signIn"
28 |       // Pass in an already authenticated CognitoUser or FederatedUser object
29 |       authData={CognitoUser || 'username'}
30 |       // Fired when Authentication State changes
31 |       onStateChange={authState => console.log(authState)}
32 |       // An object referencing federation and/or social providers
33 |       // The federation here means federation with the Cognito Identity Pool Service
34 |       // *** Only supported on React/Web (Not React Native) ***
35 |       // For React Native use the API Auth.federatedSignIn()
36 |       // federated={myFederatedConfig}
37 |       // A theme object to override the UI / styling
38 |       theme={myCustomTheme}
39 |       // Hide specific components within the Authenticator
40 |       // *** Only supported on React/Web (Not React Native)  ***
41 |       //   hide={[
42 |       //     Greetings,
43 |       //     SignIn,
44 |       //     ConfirmSignIn,
45 |       //     RequireNewPassword,
46 |       //     SignUp,
47 |       //     ConfirmSignUp,
48 |       //     VerifyContact,
49 |       //     ForgotPassword,
50 |       //     TOTPSetup,
51 |       //     Loading,
52 |       //   ]}
53 |       // or hide all the default components
54 |       hideDefault={true}
55 |       // Pass in an aws-exports configuration
56 |       // NEXT LINE NOT REACT NATIVE
57 |       // amplifyConfig={myAWSExports}
58 |       // Pass in a message map for error strings
59 |       errorMessage={myMessageMap}>
60 |       // Default components can be customized/passed in as child components. //
61 |       Define them here if you used hideDefault={true}
62 |       <Greetings />
63 |       {/* NOT IN REACT NATIVE */}
64 |       {/* <SignIn federated={myFederatedConfig} /> */}
65 |       <ConfirmSignIn />
66 |       <RequireNewPassword />
67 |       <SignUp />
68 |       <ConfirmSignUp />
69 |       <VerifyContact />
70 |       <ForgotPassword />
71 |       {/* NOT IN REACT NATIVE */}
72 |       {/* <TOTPSetup /> */}
73 |       <Loading />
74 |     </Authenticator>
75 |   );
76 | }
77 | 
78 | export {App};
79 | 


--------------------------------------------------------------------------------
/examples/Auth - Using withAuthenticator HOC.tsx:
--------------------------------------------------------------------------------
 1 | // Using withAuthenticator HOC
 2 | // https://aws-amplify.github.io/docs/js/authentication#using-withauthenticator-hoc
 3 | 
 4 | import React from 'react';
 5 | import {Text} from 'react-native';
 6 | import {withAuthenticator, AuthPiece} from 'aws-amplify-react-native';
 7 | function App() {
 8 |   return <Text>App</Text>;
 9 | }
10 | 
11 | const App1 = withAuthenticator(App);
12 | 
13 | const MyComponents: typeof AuthPiece[] = [];
14 | const App2 = withAuthenticator(App, {
15 |   // Render a sign out button once logged in
16 |   includeGreetings: true,
17 |   // Show only certain components
18 |   authenticatorComponents: MyComponents,
19 |   // display federation/social provider buttons
20 |   // NEXT LINE NOT REACT NATIVE
21 |   // federated: {myFederatedConfig},
22 |   // customize the UI/styling
23 |   // NEXT LINE NOT REACT NATIVE
24 |   // theme: {myCustomTheme},
25 | });
26 | 
27 | export {App1, App2};
28 | 


--------------------------------------------------------------------------------
/examples/Auth - Wrapping your Component.tsx:
--------------------------------------------------------------------------------
 1 | // Wrapping your Component
 2 | // https://aws-amplify.github.io/docs/js/authentication#wrapping-your-component
 3 | 
 4 | import React from 'react';
 5 | import {View, Text} from 'react-native';
 6 | import {Authenticator} from 'aws-amplify-react-native';
 7 | 
 8 | function App() {
 9 |   return <Text>App</Text>;
10 | }
11 | 
12 | class AppWithAuth extends React.Component {
13 |   render() {
14 |     return (
15 |       <View>
16 |         <Authenticator>
17 |           <App />
18 |         </Authenticator>
19 |       </View>
20 |     );
21 |   }
22 | }
23 | 
24 | export default AppWithAuth;
25 | 


--------------------------------------------------------------------------------
/examples/Customize UI Theme.tsx:
--------------------------------------------------------------------------------
 1 | // Customize UI Theme
 2 | // https://aws-amplify.github.io/docs/js/authentication#customize-ui-theme
 3 | 
 4 | import React from 'react';
 5 | import {Authenticator, AmplifyTheme} from 'aws-amplify-react-native';
 6 | 
 7 | const MySectionHeader = Object.assign({}, AmplifyTheme.sectionHeader, {
 8 |   background: 'orange',
 9 | });
10 | const MyTheme: typeof AmplifyTheme = Object.assign({}, AmplifyTheme, {
11 |   sectionHeader: MySectionHeader,
12 | });
13 | 
14 | <Authenticator theme={MyTheme} />;
15 | 


--------------------------------------------------------------------------------
/examples/Storage - S3Album.tsx:
--------------------------------------------------------------------------------
 1 | // S3Album
 2 | // https://aws-amplify.github.io/docs/js/storage#s3album
 3 | 
 4 | import React from 'react';
 5 | import {S3Album} from 'aws-amplify-react-native';
 6 | 
 7 | const path = './path';
 8 | function render() {
 9 |   return (
10 |     <S3Album
11 |       level="protected"
12 |       path={path}
13 |       filter={item => /jpg/i.test(item.path)}
14 |     />
15 |   );
16 | }
17 | 
18 | export {render};
19 | 


--------------------------------------------------------------------------------
/examples/Storage - S3Image.tsx:
--------------------------------------------------------------------------------
 1 | // S3Image
 2 | // https://aws-amplify.github.io/docs/js/storage#s3image
 3 | 
 4 | import React from 'react';
 5 | import {S3Image} from 'aws-amplify-react-native';
 6 | 
 7 | const image_body = {};
 8 | const key = 'key';
 9 | function render() {
10 |   return <S3Image level="protected" body={image_body} imgKey={key} />;
11 | }
12 | 
13 | export {render};
14 | 


--------------------------------------------------------------------------------
/examples/graphql/mutations.js:
--------------------------------------------------------------------------------
 1 | /* eslint-disable */
 2 | // this is an auto generated file. This will be overwritten
 3 | 
 4 | export const createTodo = /* GraphQL */ `
 5 |   mutation CreateTodo(
 6 |     $input: CreateTodoInput!
 7 |     $condition: ModelTodoConditionInput
 8 |   ) {
 9 |     createTodo(input: $input, condition: $condition) {
10 |       id
11 |       name
12 |       description
13 |     }
14 |   }
15 | `;
16 | export const updateTodo = /* GraphQL */ `
17 |   mutation UpdateTodo(
18 |     $input: UpdateTodoInput!
19 |     $condition: ModelTodoConditionInput
20 |   ) {
21 |     updateTodo(input: $input, condition: $condition) {
22 |       id
23 |       name
24 |       description
25 |     }
26 |   }
27 | `;
28 | export const deleteTodo = /* GraphQL */ `
29 |   mutation DeleteTodo(
30 |     $input: DeleteTodoInput!
31 |     $condition: ModelTodoConditionInput
32 |   ) {
33 |     deleteTodo(input: $input, condition: $condition) {
34 |       id
35 |       name
36 |       description
37 |     }
38 |   }
39 | `;
40 | 


--------------------------------------------------------------------------------
/examples/graphql/queries.js:
--------------------------------------------------------------------------------
 1 | /* eslint-disable */
 2 | // this is an auto generated file. This will be overwritten
 3 | 
 4 | export const getTodo = /* GraphQL */ `
 5 |   query GetTodo($id: ID!) {
 6 |     getTodo(id: $id) {
 7 |       id
 8 |       name
 9 |       description
10 |     }
11 |   }
12 | `;
13 | export const listTodos = /* GraphQL */ `
14 |   query ListTodos(
15 |     $filter: ModelTodoFilterInput
16 |     $limit: Int
17 |     $nextToken: String
18 |   ) {
19 |     listTodos(filter: $filter, limit: $limit, nextToken: $nextToken) {
20 |       items {
21 |         id
22 |         name
23 |         description
24 |       }
25 |       nextToken
26 |     }
27 |   }
28 | `;
29 | 


--------------------------------------------------------------------------------
/examples/graphql/subscriptions.js:
--------------------------------------------------------------------------------
 1 | /* eslint-disable */
 2 | // this is an auto generated file. This will be overwritten
 3 | 
 4 | export const onCreateTodo = /* GraphQL */ `
 5 |   subscription OnCreateTodo {
 6 |     onCreateTodo {
 7 |       id
 8 |       name
 9 |       description
10 |     }
11 |   }
12 | `;
13 | export const onUpdateTodo = /* GraphQL */ `
14 |   subscription OnUpdateTodo {
15 |     onUpdateTodo {
16 |       id
17 |       name
18 |       description
19 |     }
20 |   }
21 | `;
22 | export const onDeleteTodo = /* GraphQL */ `
23 |   subscription OnDeleteTodo {
24 |     onDeleteTodo {
25 |       id
26 |       name
27 |       description
28 |     }
29 |   }
30 | `;
31 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "amplifyreactnativetypes",
 3 |   "version": "1.0.0",
 4 |   "description": "",
 5 |   "main": "index.js",
 6 |   "scripts": {
 7 |     "test": "echo \"Error: no test specified\" && exit 1",
 8 |     "lint": "eslint . --ext .js,.jsx,.ts,.tsx"
 9 |   },
10 |   "author": "",
11 |   "license": "ISC",
12 |   "dependencies": {
13 |     "aws-amplify": "^2.2.4",
14 |     "aws-amplify-react-native": "^3.2.2",
15 |     "react": "^16.12.0",
16 |     "react-native": "^0.61.5"
17 |   },
18 |   "devDependencies": {
19 |     "@react-native-community/eslint-config": "0.0.7",
20 |     "@types/react-native": "^0.61.12",
21 |     "eslint": "^6.8.0",
22 |     "typescript": "^3.7.5"
23 |   }
24 | }
25 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     /* Basic Options */
 4 |     "target": "esnext" /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017','ES2018' or 'ESNEXT'. */,
 5 |     "module": "commonjs" /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', or 'ESNext'. */,
 6 |     "lib": [
 7 |       "es6"
 8 |     ] /* Specify library files to be included in the compilation. */,
 9 |     "allowJs": true /* Allow javascript files to be compiled. */,
10 |     // "checkJs": true,                       /* Report errors in .js files. */
11 |     "jsx": "react-native" /* Specify JSX code generation: 'preserve', 'react-native', or 'react'. */,
12 |     // "declaration": true,                   /* Generates corresponding '.d.ts' file. */
13 |     // "sourceMap": true,                     /* Generates corresponding '.map' file. */
14 |     // "outFile": "./",                       /* Concatenate and emit output to single file. */
15 |     // "outDir": "./",                        /* Redirect output structure to the directory. */
16 |     // "rootDir": "./",                       /* Specify the root directory of input files. Use to control the output directory structure with --outDir. */
17 |     // "removeComments": true,                /* Do not emit comments to output. */
18 |     "noEmit": true /* Do not emit outputs. */,
19 |     "incremental": true /* Enable incremental compilation */,
20 |     // "importHelpers": true,                 /* Import emit helpers from 'tslib'. */
21 |     // "downlevelIteration": true,            /* Provide full support for iterables in 'for-of', spread, and destructuring when targeting 'ES5' or 'ES3'. */
22 |     "isolatedModules": true /* Transpile each file as a separate module (similar to 'ts.transpileModule'). */,
23 | 
24 |     /* Strict Type-Checking Options */
25 |     "strict": true /* Enable all strict type-checking options. */,
26 |     // "noImplicitAny": true,                 /* Raise error on expressions and declarations with an implied 'any' type. */
27 |     // "strictNullChecks": true,              /* Enable strict null checks. */
28 |     // "strictFunctionTypes": true,           /* Enable strict checking of function types. */
29 |     // "strictPropertyInitialization": true,  /* Enable strict checking of property initialization in classes. */
30 |     // "noImplicitThis": true,                /* Raise error on 'this' expressions with an implied 'any' type. */
31 |     // "alwaysStrict": true,                  /* Parse in strict mode and emit "use strict" for each source file. */
32 | 
33 |     /* Additional Checks */
34 |     // "noUnusedLocals": true,                /* Report errors on unused locals. */
35 |     // "noUnusedParameters": true,            /* Report errors on unused parameters. */
36 |     // "noImplicitReturns": true,             /* Report error when not all code paths in function return a value. */
37 |     // "noFallthroughCasesInSwitch": true,    /* Report errors for fallthrough cases in switch statement. */
38 | 
39 |     /* Module Resolution Options */
40 |     "moduleResolution": "node" /* Specify module resolution strategy: 'node' (Node.js) or 'classic' (TypeScript pre-1.6). */,
41 |     "baseUrl": "./" /* Base directory to resolve non-absolute module names. */,
42 |     // "paths": {},                           /* A series of entries which re-map imports to lookup locations relative to the 'baseUrl'. */
43 |     // "rootDirs": [],                        /* List of root folders whose combined content represents the structure of the project at runtime. */
44 |     // "typeRoots": [], /* List of folders to include type definitions from. */,
45 |     // "types": [],                           /* Type declaration files to be included in compilation. */
46 |     "allowSyntheticDefaultImports": true /* Allow default imports from modules with no default export. This does not affect code emit, just typechecking. */,
47 |     "esModuleInterop": true /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */
48 |     // "preserveSymlinks": true,              /* Do not resolve the real path of symlinks. */
49 | 
50 |     /* Source Map Options */
51 |     // "sourceRoot": "./",                    /* Specify the location where debugger should locate TypeScript files instead of source locations. */
52 |     // "mapRoot": "./",                       /* Specify the location where debugger should locate map files instead of generated locations. */
53 |     // "inlineSourceMap": true,               /* Emit a single file with source maps instead of having a separate file. */
54 |     // "inlineSources": true,                 /* Emit the source alongside the sourcemaps within a single file; requires '--inlineSourceMap' or '--sourceMap' to be set. */
55 | 
56 |     /* Experimental Options */
57 |     // "experimentalDecorators": true,        /* Enables experimental support for ES7 decorators. */
58 |     // "emitDecoratorMetadata": true,         /* Enables experimental support for emitting type metadata for decorators. */
59 |   },
60 |   "exclude": [
61 |     "node_modules",
62 |     "babel.config.js",
63 |     "metro.config.js",
64 |     "jest.config.js"
65 |   ]
66 | }
67 | 


--------------------------------------------------------------------------------