Merge pull request #2 from prateekiiest/prateek/initialComps

Add initial component structure with Text Image Component

library/components/TextImageComponent/TextImageComponent.styles.ts

@@ -0,0 +1,43 @@
+import {StyleSheet} from 'react-native';
+import { Colors, Fonts, lineHeight, relativeFontSize } from '../../../../constants';
+
+const styles = StyleSheet.create({
+  container: {
+    alignItems: 'center',
+    flex: 1,
+    justifyContent: 'space-between',
+  },
+  contentContainer: {
+    alignItems: 'center',
+    flex: 2 / 3,
+    width: '85%',
+  },
+  descriptionText: {
+    color: Colors.GREY_24,
+    fontFamily: Fonts.MONTSERRAT_REGULAR,
+    fontSize: relativeFontSize(16),
+    fontWeight: '500',
+    lineHeight: lineHeight(22),
+    marginBottom: 3,
+    marginTop: 3
+  },
+  introImageView: {
+    aspectRatio: 7 / 8,
+    flex: 2 / 3,
+    justifyContent: 'center',
+  },
+  nextButtonView: {
+    alignItems: 'center',
+    flex: 2 / 7,
+    justifyContent: 'center',
+    textAlign: 'center',
+    width: '90%',
+  },
+  textContainer: {
+    flex: 1,
+    justifyContent: 'space-around',
+    width: '95%',
+  },
+});
+
+export {styles};

library/components/TextImageComponent/TextImageComponent.tsx

@@ -0,0 +1,66 @@
+import React, {Fragment, ReactElement, useState} from 'react';
+import {View, Text, SafeAreaView, ScrollView} from 'react-native';
+import {Actions} from 'react-native-router-flux';
+import {Colors} from '../../../../constants';
+import HTMLView from 'react-native-htmlview';
+import {urlMapping} from '../../../AppNavigator/AppNavigator.types';
+import { styles } from './TextImageComponent.styles';
+import { TIProps } from './TextImageComponent.types';
+import { FAB } from '../../FAB';
+
+const renderDescriptionTexts = (
+  textsArray: string,
+): ReactElement => {
+  return (
+    <HTMLView
+      textComponentProps={{style: styles.descriptionText}}
+      value={textsArray}
+      onLinkPress={(url) => {
+        Actions.push(urlMapping[url]);
+      }}
+    />
+  );
+};
+
+const TextImageComponent = ({data} : TIProps): ReactElement => {
+  
+  const Svg =
+    data.imageComponent;
+  return (
+    <Fragment>
+      <SafeAreaView style={styles.container}>
+        <View style={styles.introImageView}>
+          <Svg />
+        </View>
+        <View style={styles.contentContainer}>
+          <View style={styles.textContainer}>
+            <ScrollView>
+              {renderDescriptionTexts(
+                data.descriptionTexts,
+              )}
+            </ScrollView>
+          </View>
+        </View>
+
+        <View
+          style={styles.nextButtonView}
+          accessible={true}
+          accessibilityLabel={'Next Button'}
+          accessibilityLiveRegion="polite"
+          accessibilityRole="button">
+          <FAB
+          color={Colors.BB_BLUE}
+            style={{backgroundColor: Colors.BB_BLUE}}
+            onPress={
+              () => {
+               
+              }
+            }
+          />
+        </View>
+      </SafeAreaView>
+    </Fragment>
+  );
+};
+
+export {TextImageComponent};

library/components/TextImageComponent/TextImageComponent.types.ts

@@ -0,0 +1,20 @@
+import {FC} from 'react';
+import {SvgProps} from 'react-native-svg';
+import {ITheme} from '../../../../constants/Themes';
+import {NavigationScenes} from '../../../AppNavigator/AppNavigator.types';
+
+export interface IBarrierLevel {
+  descriptionTexts: string;
+  imageComponent: FC<SvgProps>;
+  next?: string;
+  goto?: NavigationScenes;
+}
+
+export interface IBarrierTextIntroData {
+  [key: string]: IBarrierLevel;
+}
+
+export interface ITextIntroCompProps {
+  data: IBarrierTextIntroData;
+  theme: ITheme;
+}