diff --git a/native/account/registration/registration-terms.react.js b/native/account/registration/registration-terms.react.js
index ed1dedb06..d7ab45f41 100644
--- a/native/account/registration/registration-terms.react.js
+++ b/native/account/registration/registration-terms.react.js
@@ -1,77 +1,131 @@
// @flow
import invariant from 'invariant';
import * as React from 'react';
-import { Text } from 'react-native';
+import { Text, View, Image, Linking } from 'react-native';
import RegistrationButtonContainer from './registration-button-container.react.js';
import RegistrationButton from './registration-button.react.js';
import RegistrationContainer from './registration-container.react.js';
import RegistrationContentContainer from './registration-content-container.react.js';
import { RegistrationContext } from './registration-context.js';
import type { RegistrationNavigationProp } from './registration-navigator.react.js';
import type {
CoolOrNerdMode,
AccountSelection,
AvatarData,
} from './registration-types.js';
+import commSwooshSource from '../../img/comm-swoosh.png';
import type { NavigationRoute } from '../../navigation/route-names.js';
import { useStyles } from '../../themes/colors.js';
export type RegistrationTermsParams = {
+userSelections: {
+coolOrNerdMode: CoolOrNerdMode,
+keyserverUsername: string,
+accountSelection: AccountSelection,
+avatarData: ?AvatarData,
},
};
+const onTermsOfUsePressed = () => {
+ Linking.openURL('https://comm.app/terms');
+};
+
+const onPrivacyPolicyPressed = () => {
+ Linking.openURL('https://comm.app/privacy');
+};
+
type Props = {
+navigation: RegistrationNavigationProp<'RegistrationTerms'>,
+route: NavigationRoute<'RegistrationTerms'>,
};
function RegistrationTerms(props: Props): React.Node {
const registrationContext = React.useContext(RegistrationContext);
invariant(registrationContext, 'registrationContext should be set');
const { register } = registrationContext;
const [registrationInProgress, setRegistrationInProgress] =
React.useState(false);
const { userSelections } = props.route.params;
const onProceed = React.useCallback(async () => {
setRegistrationInProgress(true);
try {
await register(userSelections);
} finally {
setRegistrationInProgress(false);
}
}, [register, userSelections]);
const styles = useStyles(unboundStyles);
+
+ /* eslint-disable react-native/no-raw-text */
+ const termsNotice = (
+
+ By registering, you are agreeing to our{' '}
+
+ Terms of Use
+
+ {' and '}
+
+ Privacy Policy
+
+ .
+
+ );
+ /* eslint-enable react-native/no-raw-text */
+
return (
-
+
Finish registration
+ {termsNotice}
+
+
+
);
}
const unboundStyles = {
+ scrollViewContentContainer: {
+ flexGrow: 1,
+ },
header: {
fontSize: 24,
color: 'panelForegroundLabel',
paddingBottom: 16,
},
+ body: {
+ fontFamily: 'Arial',
+ fontSize: 15,
+ lineHeight: 20,
+ color: 'panelForegroundSecondaryLabel',
+ paddingBottom: 16,
+ },
+ commSwooshContainer: {
+ flexGrow: 1,
+ flexShrink: 1,
+ alignItems: 'center',
+ justifyContent: 'center',
+ },
+ commSwoosh: {
+ resizeMode: 'center',
+ width: '100%',
+ height: '100%',
+ },
+ hyperlinkText: {
+ color: 'purpleLink',
+ },
};
export default RegistrationTerms;
diff --git a/native/img/comm-swoosh.png b/native/img/comm-swoosh.png
new file mode 100644
index 000000000..b63e01514
Binary files /dev/null and b/native/img/comm-swoosh.png differ