fln-espranza 0.0.18 → 0.0.20

package/components/Avatar.tsx

@@ -22,7 +22,8 @@ export default function Avatar({ size, source, nameFirstLetter, textColor }: Ava
      "#2D3A5D",
     ]
 
-    let color = colors[Math.floor(Math.random() * colors.length)]
+    // let color = colors[Math.floor(Math.random() * colors.length)]
+    const [color, setColor] = React.useState(colors[Math.floor(Math.random() * colors.length)]);
   return (
     <View
       style={tw.style(

package/components/EOption.tsx

@@ -1,34 +1,86 @@
-import React, { useState } from 'react';
-import { TouchableOpacity, View, TouchableOpacityProps } from 'react-native';
-import tw from '../../../lib/tailwind';
-import EText from './EText';
+import React, { useState } from "react";
+import {
+  TouchableOpacity,
+  View,
+  TouchableOpacityProps,
+  Dimensions,
+  Image,
+} from "react-native";
+import tw from "../../../lib/tailwind";
+import EText from "./EText";
 import { Colors } from "../utils/Color";
 
+const ImageWidth = Dimensions.get("window").width / 2 - 18;
+const ContentWidth = Dimensions.get("window").width - 32;
+const ImageHeight = 120;
+const MediaContainerStyle = "rounded-md overflow-hidden";
 
 interface RadioButtonProps extends TouchableOpacityProps {
-    text?: string;
-    isActive: boolean;
-    onPress?: () => void;
+  text?: string;
+  isActive: boolean;
+  imageSource?: string;
+  onPress?: () => void;
 }
-const EOption = ({ isActive, text, onPress, ...props }: RadioButtonProps) => {
-
-    return (
-        <TouchableOpacity
-            style={[tw`flex flex-row justify-start items-center mt-2 px-4 py-3 border rounded-lg`, {
-                borderColor: isActive ? Colors['secondary-base'] : Colors.border,
-                backgroundColor: isActive ? Colors['secondary-light'] : Colors.white
-            }]
-            }
-            onPress={() => {
-                onPress && onPress();
+const EOption = ({
+  isActive,
+  text,
+  imageSource,
+  onPress,
+  ...props
+}: RadioButtonProps) => {
+  return (
+    <TouchableOpacity
+      style={[
+        tw`flex flex-row justify-start items-center mt-1 px-4 py-3 border rounded-lg ${
+          imageSource ? "flex-col p-0 items-start" : ""
+        }`,
+        {
+          borderColor: isActive ? Colors["secondary-base"] : Colors.border,
+          backgroundColor: isActive ? Colors["secondary-light"] : Colors.white,
+          width: imageSource ? ImageWidth : ContentWidth,
+        },
+      ]}
+      onPress={() => {
+        onPress && onPress();
+      }}
+      activeOpacity={0.7}
+      {...props}
+    >
+      {imageSource && (
+        <View
+          style={[
+            tw`${MediaContainerStyle}`,
+            {
+              height: ImageHeight,
+              width: ImageWidth - 2,
+              backgroundColor: Colors["secondary-base"],
+            },
+          ]}
+        >
+          <Image
+            style={[
+              tw`h-full w-full`,
+              {
+                opacity: isActive ? 0.5 : 1,
+              },
+            ]}
+            source={{
+              uri: "https://th-thumbnailer.cdn-si-edu.com/CbddkFFO3OB80rRz83Iiuf-Z0FY=/1000x750/filters:no_upscale():focal(1471x1061:1472x1062)/https://tf-cmsv2-smithsonianmag-media.s3.amazonaws.com/filer/b6/30/b630b48b-7344-4661-9264-186b70531bdc/istock-478831658.jpg",
             }}
-            {...props}
+            // resizeMode="contain"
+          />
+        </View>
+      )}
+      {text ? (
+        <EText
+          size={"base"}
+          style={tw`font-normal ${imageSource ? "py-2 px-4" : ""}`}
         >
-            <EText size={"base"} style={tw`font-normal`}>
-                {text}
-            </EText>
-        </TouchableOpacity>
-    );
+          {text}
+        </EText>
+      ) : null}
+    </TouchableOpacity>
+  );
 };
 
 export default EOption;

package/components/ETimeLineCard.tsx

@@ -15,9 +15,10 @@ interface IProps {
   completed: boolean;
   anotherButton?: boolean;
   onPress?: () => void;
+  onAnotherButtonPress?: () => void;
 }
 
-export default function ETimeLineCard({ title, description, completed, anotherButton, onPress }: IProps) {
+export default function ETimeLineCard({ title, description, completed, anotherButton, onPress, onAnotherButtonPress }: IProps) {
   return (
     <TouchableOpacity
       onPress={() =>  onPress && onPress()}
@@ -53,7 +54,7 @@ export default function ETimeLineCard({ title, description, completed, anotherBu
 
         {
           anotherButton ? (
-            <TouchableOpacity style={tw`flex-row`}>
+            <TouchableOpacity style={tw`flex-row`} onPress={onAnotherButtonPress}>
               <EText size="sm" style={[tw`ml-2 font-semibold`, {color: Colors['primary-base']}]}>
                 Another Assessment
               </EText>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fln-espranza",
-  "version": "0.0.18",
+  "version": "0.0.20",
   "description": "All components used inside FLN Project of Espranza Innovations",
   "main": "index.ts",
   "scripts": {