re Typography (#8)

app/src/components/typography/Additional.tsx

@@ -1,13 +1,15 @@
 import React from 'react';
-import { StyleSheet, Text } from 'react-native';
+import { StyleSheet, Text, TextProps } from 'react-native';
 import { slate400 } from '../../utils/colors';
 
-interface AdditionalProps {
-  text: string;
-}
+interface AdditionalProps extends TextProps {}
 
-const Additional = ({ text }: AdditionalProps) => {
-  return <Text style={styles.additional}>{text}</Text>;
+const Additional = ({ children, style, ...props }: AdditionalProps) => {
+  return (
+    <Text {...props} style={[styles.additional, style]}>
+      {children}
+    </Text>
+  );
 };
 
 export default Additional;

app/src/components/typography/Description.tsx

@@ -1,13 +1,15 @@
 import React from 'react';
-import { StyleSheet, Text } from 'react-native';
+import { StyleSheet, Text, TextProps } from 'react-native';
 import { slate500 } from '../../utils/colors';
 
-interface DescriptionProps {
-  text: string;
-}
+interface DescriptionProps extends TextProps {}
 
-const Description = ({ text }: DescriptionProps) => {
-  return <Text style={styles.description}>{text}</Text>;
+const Description = ({ children, style, ...props }: DescriptionProps) => {
+  return (
+    <Text {...props} style={[styles.description, style]}>
+      {children}
+    </Text>
+  );
 };
 
 export default Description;

app/src/components/typography/LargeTitle.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import { StyleSheet, Text, TextProps } from 'react-native';
+import { black } from '../../utils/colors';
+
+interface TitleProps extends TextProps {}
+/*
+ * Used for Prominent Top Page Titles
+ */
+const LargeTitle = ({ children, style, ...props }: TitleProps) => {
+  return (
+    <Text {...props} style={[styles.title, style]}>
+      {children}
+    </Text>
+  );
+};
+
+export default LargeTitle;
+
+const styles = StyleSheet.create({
+  title: {
+    fontSize: 38,
+    lineHeight: 47,
+    color: black,
+    fontFamily: 'Advercase-Regular',
+  },
+});

app/src/components/typography/Title.tsx

@@ -1,13 +1,15 @@
 import React from 'react';
-import { StyleSheet, Text } from 'react-native';
+import { StyleSheet, Text, TextProps } from 'react-native';
 import { black } from '../../utils/colors';
 
-interface TitleProps {
-  text: string;
-}
+interface TitleProps extends TextProps {}
 
-const Title = ({ text }: TitleProps) => {
-  return <Text style={styles.title}>{text}</Text>;
+const Title = ({ children, style, ...props }: TitleProps) => {
+  return (
+    <Text {...props} style={[styles.title, style]}>
+      {children}
+    </Text>
+  );
 };
 
 export default Title;

app/src/screens/Onboarding/PassportNFCScanScreen.tsx

@@ -115,8 +115,8 @@ const PassportNFCScanScreen: React.FC<PassportNFCScanScreenProps> = ({}) => {
         {isNfcSheetOpen ? (
           <>
             <TextsContainer>
-              <Title text="Ready to scan" />
-              <Description text={scanningMessage} />
+              <Title children="Ready to scan" />
+              <Description children={scanningMessage} />
             </TextsContainer>
 
             <Image
@@ -136,9 +136,9 @@ const PassportNFCScanScreen: React.FC<PassportNFCScanScreenProps> = ({}) => {
         ) : (
           <>
             <TextsContainer>
-              <Title text="Verify your passport" />
+              <Title children="Verify your passport" />
               <Description
-                text={
+                children={
                   isNfcEnabled
                     ? 'Open your passport to the last page to access the NFC chip. Place your phone against the page'
                     : dialogMessage

app/src/screens/Onboarding/PassportOnboardingScreen.tsx

@@ -34,9 +34,9 @@ const PassportOnboardingScreen: React.FC<
       </ExpandableBottomLayout.TopSection>
       <ExpandableBottomLayout.BottomSection>
         <TextsContainer>
-          <Title text="Scan your passport" />
-          <Description text="Open your passport to the first page to scan it." />
-          <Additional text="Self ID will not capture an image of your passport. Our system is only reading the fields." />
+          <Title children="Scan your passport" />
+          <Description children="Open your passport to the first page to scan it." />
+          <Additional children="Self ID will not capture an image of your passport. Our system is only reading the fields." />
         </TextsContainer>
         <ButtonsContainer>
           <PrimaryButton onPress={() => navigation.navigate('PassportCamera')}>