Fix latest example

Author: Kadi Kraman

Example/Latest/App.js

@@ -0,0 +1,125 @@
+import React, { Component } from 'react';
+import { UIManager, LayoutAnimation, Alert } from 'react-native';
+import { authorize, refresh, revoke } from 'react-native-app-auth';
+import { Page, Button, ButtonContainer, Form, Heading } from './components';
+
+UIManager.setLayoutAnimationEnabledExperimental &&
+  UIManager.setLayoutAnimationEnabledExperimental(true);
+
+type State = {
+  hasLoggedInOnce: boolean,
+  accessToken: ?string,
+  accessTokenExpirationDate: ?string,
+  refreshToken: ?string
+};
+
+const config = {
+  issuer: 'https://demo.identityserver.io',
+  clientId: 'native.code',
+  redirectUrl: 'io.identityserver.demo:/oauthredirect',
+  additionalParameters: {},
+  scopes: ['openid', 'profile', 'email', 'offline_access']
+
+  // serviceConfiguration: {
+  //   authorizationEndpoint: 'https://demo.identityserver.io/connect/authorize',
+  //   tokenEndpoint: 'https://demo.identityserver.io/connect/token',
+  //   revocationEndpoint: 'https://demo.identityserver.io/connect/revoke'
+  // }
+};
+
+export default class App extends Component<{}, State> {
+  state = {
+    hasLoggedInOnce: false,
+    accessToken: '',
+    accessTokenExpirationDate: '',
+    refreshToken: ''
+  };
+
+  animateState(nextState: $Shape<State>, delay: number = 0) {
+    setTimeout(() => {
+      this.setState(() => {
+        LayoutAnimation.easeInEaseOut();
+        return nextState;
+      });
+    }, delay);
+  }
+
+  authorize = async () => {
+    try {
+      const authState = await authorize(config);
+
+      this.animateState(
+        {
+          hasLoggedInOnce: true,
+          accessToken: authState.accessToken,
+          accessTokenExpirationDate: authState.accessTokenExpirationDate,
+          refreshToken: authState.refreshToken
+        },
+        500
+      );
+    } catch (error) {
+      Alert.alert('Failed to log in', error.message);
+    }
+  };
+
+  refresh = async () => {
+    try {
+      const authState = await refresh(config, {
+        refreshToken: this.state.refreshToken
+      });
+
+      this.animateState({
+        accessToken: authState.accessToken || this.state.accessToken,
+        accessTokenExpirationDate:
+          authState.accessTokenExpirationDate || this.state.accessTokenExpirationDate,
+        refreshToken: authState.refreshToken || this.state.refreshToken
+      });
+    } catch (error) {
+      Alert.alert('Failed to refresh token', error.message);
+    }
+  };
+
+  revoke = async () => {
+    try {
+      await revoke(config, {
+        tokenToRevoke: this.state.accessToken,
+        sendClientId: true
+      });
+      this.animateState({
+        accessToken: '',
+        accessTokenExpirationDate: '',
+        refreshToken: ''
+      });
+    } catch (error) {
+      Alert.alert('Failed to revoke token', error.message);
+    }
+  };
+
+  render() {
+    const { state } = this;
+    return (
+      <Page>
+        {!!state.accessToken ? (
+          <Form>
+            <Form.Label>accessToken</Form.Label>
+            <Form.Value>{state.accessToken}</Form.Value>
+            <Form.Label>accessTokenExpirationDate</Form.Label>
+            <Form.Value>{state.accessTokenExpirationDate}</Form.Value>
+            <Form.Label>refreshToken</Form.Label>
+            <Form.Value>{state.refreshToken}</Form.Value>
+          </Form>
+        ) : (
+          <Heading>{state.hasLoggedInOnce ? 'Goodbye.' : 'Hello, stranger.'}</Heading>
+        )}
+
+        <ButtonContainer>
+          {!state.accessToken && (
+            <Button onPress={this.authorize} text="Authorize" color="#DA2536" />
+          )}
+          {!!state.refreshToken && <Button onPress={this.refresh} text="Refresh" color="#24C2CB" />}
+          {!!state.accessToken && <Button onPress={this.revoke} text="Revoke" color="#EF525B" />}
+        </ButtonContainer>
+      </Page>
+    );
+  }
+}

Example/Latest/README.md

@@ -0,0 +1,34 @@
+# React Native App Auth Latest Example
+
+Demo application that uses the version of react-native-app-auth in this repo
+
+## Versions
+**React Native** 0.57.2
+**App Auth:** Latest
+**React Native App Auth:** Latest
+
+## Setup
+
+You'll need to have Yarn and the React Native CLI installed:
+
+```sh
+npm install --global yarn react-native-cli
+```
+
+Clone the repo and install dependencies
+
+```sh
+git clone https://github.com/FormidableLabs/react-native-app-auth.git
+cd ./react-native-app-auth/Example/iOSPodsExample
+yarn
+```
+
+## Run
+
+```
+react-native run-ios
+```
+
+```
+react-native run-android
+```

Example/Latest/android/settings.gradle

@@ -1,5 +1,5 @@
 rootProject.name = 'AppAuthExample'
 include ':react-native-app-auth'
-project(':react-native-app-auth').projectDir = new File(rootProject.projectDir, '../../android')
+project(':react-native-app-auth').projectDir = new File(rootProject.projectDir, '../../../android')
 
 include ':app'

Example/Latest/assets/background.jpg

@@ -0,0 +1,32 @@
+// @flow
+
+import React, { Component } from 'react';
+import { Platform } from 'react-native';
+import styled from 'styled-components/native';
+
+type Props = {
+  text: string,
+  color: string,
+  onPress: () => any
+};
+
+const ButtonBox = styled.TouchableOpacity.attrs({ activeOpacity: 0.8 })`
+  height: 50px;
+  flex: 1;
+  margin: 5px;
+  align-items: center;
+  justify-content: center;
+  background-color: ${props => props.color};
+`;
+
+const ButtonText = styled.Text`
+  color: white;
+`;
+
+const Button = ({ text, color, onPress }: Props) => (
+  <ButtonBox onPress={onPress} color={color}>
+    <ButtonText>{text}</ButtonText>
+  </ButtonBox>
+);
+
+export default Button;

Example/Latest/components/Button.js

@@ -0,0 +1,13 @@
+// @flow
+
+import styled from 'styled-components/native';
+
+export default styled.View`
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  align-self: flex-end;
+  flex-direction: row;
+  margin: 5px;
+`;

Example/Latest/components/ButtonContainer.js

@@ -0,0 +1,22 @@
+// @flow
+
+import styled from 'styled-components/native';
+
+const Form = styled.View`
+  flex: 1;
+`;
+
+Form.Label = styled.Text`
+  font-size: 14px;
+  font-weight: bold;
+  background-color: transparent;
+  margin-bottom: 10px;
+`;
+
+Form.Value = styled.Text.attrs({ numberOfLines: 10, ellipsizeMode: 'tail' })`
+  font-size: 14px;
+  background-color: transparent;
+  margin-bottom: 20px;
+`;
+
+export default Form;

Example/Latest/components/Form.js

@@ -0,0 +1,18 @@
+// @flow
+
+import { Platform } from 'react-native';
+import styled from 'styled-components/native';
+
+const font = Platform.select({
+  ios: 'GillSans-light',
+  android: 'sans-serif-thin'
+});
+
+export default styled.Text`
+  color: black;
+  font-family: ${font};
+  font-size: 32px;
+  margin-top: 120px;
+  background-color: transparent;
+  text-align: center;
+`;

Example/Latest/components/Heading.js

@@ -0,0 +1,11 @@
+// @flow
+
+import styled from 'styled-components/native';
+
+export default styled.ImageBackground.attrs({
+  source: require('../assets/background.jpg')
+})`
+  flex: 1;
+  background-color: white;
+  padding: 40px 10px 10px 10px;
+`;

Example/Latest/components/Page.js

@@ -0,0 +1,7 @@
+// @flow
+
+export { default as Button } from './Button';
+export { default as ButtonContainer } from './ButtonContainer';
+export { default as Form } from './Form';
+export { default as Heading } from './Heading';
+export { default as Page } from './Page';