React Native Screen

about.tsx

// Filler text added for confidentiality


function AboutCompanyScreen({ themes, darkModeEnabled }: any) {
  // Theme & Color Pallets
  const colors = darkModeEnabled ? themes.dark : themes.light

  const Paragraph = ({ children }: { children: any }) => (
    <View
      style={[
        styles.row,
        { marginTop: normalize(15) },
        { marginLeft: normalize(5) },
      ]}
    >
      <Typography.Body style={[{ flex: 1 }, { flexWrap: "wrap" }]}>
        {children}
      </Typography.Body>
    </View>
  )

  const Title = ({ text }: { text: string }) => (
    <View style={styles.subheading}>
      <Typography.Section>{text}</Typography.Section>
    </View>
  )

  const BulletParagraph = ({
    bullet,
    children,
  }: {
    bullet: string
    children: any
  }) => (
    <View
      style={[
        styles.row,
        { marginTop: normalize(20) },
        { marginLeft: normalize(5) },
      ]}
    >
      <Typography.BodyBold style={{ marginRight: normalize(5) }}>
        {bullet}
      </Typography.BodyBold>
      <Typography.Body style={[{ flex: 1 }, { flexWrap: "wrap" }]}>
        {children}
      </Typography.Body>
    </View>
  )

  return (
    <View
      style={{
        flex: 1,
        padding: normalize(10),
        alignItems: "center",
        width: SCREEN_WIDTH,
        backgroundColor: "#FFF",
      }}
    >
      <SafeAreaView />
      <View style={styles.banner}>
        <TouchableOpacity
          activeOpacity={0.75}
          onPress={() => {
            goBack()
          }}
        >
          <AntDesign name="arrowleft" size={30} color="black" />
        </TouchableOpacity>
        <SubHeading spaceX={10}>Back</SubHeading>
      </View>
      <ScrollView
        showsVerticalScrollIndicator={false}
        style={{
          flex: 1,
          paddingBottom: normalize(20),
          width: SCREEN_WIDTH * 0.9,
          height: SCREEN_HEIGHT * 0.9,
        }}
      >
        <View>
          <Heading spaceX={10}>Vivamus at augue eget arcu</Heading>
        </View>
        <Paragraph>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, 
          sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
          Mi eget mauris pharetra et ultrices neque ornare aenean. 
          Velit dignissim sodales ut eu sem integer vitae. In nisl nisi scelerisque eu ultrices vitae auctor eu augue.
        </Paragraph>

        <Title text={"Velit dignissim sodales"} />
        <BulletParagraph bullet="1.">
          Suspendisse faucibus interdum posuere lorem ipsum. Viverra ipsum nunc aliquet bibendum.
        </BulletParagraph>
        <BulletParagraph bullet="2.">
          At lectus urna duis convallis convallis tellus. 
          Fringilla est ullamcorper eget nulla facilisi etiam. 
          Mattis pellentesque id nibh tortor id aliquet lectus proin nibh.
        </BulletParagraph>
        <BulletParagraph bullet="3.">
          At quis risus sed vulputate odio ut enim blandit volutpat. 
          In arcu cursus euismod quis viverra nibh cras pulvinar. Varius quam quisque id diam.
        </BulletParagraph>
  
        <Typography.H1Title style={{ marginTop: normalize(25) }}>
          Amet nisl purus in mollis nunc:
        </Typography.H1Title>
        <Title text={"At erat pellentesque adipiscing commodo elit"} />
        <Paragraph>
          Laoreet non curabitur gravida arcu ac tortor. Consectetur adipiscing elit ut aliquam purus sit amet.
        </Paragraph>
      </ScrollView>
    </View>
  )
}

const styles = StyleSheet.create({
  row: {
    flexDirection: "row",
  },
  banner: {
    flexDirection: "row",
    alignItems: "center",
    width: SCREEN_WIDTH * 0.95,
  },
  paragraph: {
    marginTop: normalize(10),
  },
  subheading: {
    marginTop: normalize(20),
  },
})

const mapStateToProps = ({ app: { themes, darkModeEnabled } }: any) => ({
  themes,
  darkModeEnabled,
})
export default connect(mapStateToProps)(AboutCompanyScreen)