added error component and ts error removed

src/components/form/components/Checkbox.tsx

@@ -1,10 +1,15 @@
-import {StyleSheet, Text, View} from 'react-native';
+import {StyleSheet, View} from 'react-native';
 import React from 'react';
+import RNCheckbox from '../../../../RN-UI-LIB/src/components/chechbox/Checkbox';
 
-const Checkbox = () => {
+interface ICheckbox {
+    onSelectionChange: (val: boolean) => void;
+}
+
+const Checkbox = ({onSelectionChange}: ICheckbox) => {
     return (
         <View>
-            <Text>Checkbox</Text>
+            <RNCheckbox onSelectionChange={onSelectionChange} />
         </View>
     );
 };

src/components/form/components/CheckboxGroup.tsx

@@ -0,0 +1,30 @@
+import {StyleSheet, View} from 'react-native';
+import React from 'react';
+import RNCheckboxGroup from '../../../../RN-UI-LIB/src/components/chechbox/CheckboxGroup';
+import {ICheckboxOption} from '../../../../RN-UI-LIB/src/components/chechbox/types';
+
+interface ICheckboxGroup {
+    onSelectionChange: (val: ICheckboxOption[] | null) => void;
+    options: ICheckboxOption[];
+    showCheckboxAll?: boolean;
+}
+
+const CheckboxGroup = ({
+    onSelectionChange,
+    options,
+    showCheckboxAll,
+}: ICheckboxGroup) => {
+    return (
+        <View>
+            <RNCheckboxGroup
+                onSelectionChange={onSelectionChange}
+                options={options}
+                showCheckAll={showCheckboxAll}
+            />
+        </View>
+    );
+};
+
+export default CheckboxGroup;
+
+const styles = StyleSheet.create({});

src/components/form/components/ErrorMessage.tsx

@@ -0,0 +1,27 @@
+import {Text, View} from 'react-native';
+import React from 'react';
+import {GenericStyles} from '../../../../RN-UI-LIB/src/styles';
+import InfoIcon from '../../../../RN-UI-LIB/src/Icons/InfoIcon';
+
+interface IError {
+    show: any;
+}
+
+const ErrorMessage: React.FC<IError> = props => {
+    const {show} = props;
+    if (!show) {
+        return null;
+    }
+    return (
+        <View style={GenericStyles.mt12}>
+            <Text style={GenericStyles.alignCenter}>
+                <InfoIcon color={'red'} />{' '}
+                <Text style={[GenericStyles.ml10, GenericStyles.redText]}>
+                    This is mandatory field
+                </Text>
+            </Text>
+        </View>
+    );
+};
+
+export default ErrorMessage;

src/components/form/components/ImageUpload.tsx

@@ -8,6 +8,7 @@ import {GenericStyles} from '../../../../RN-UI-LIB/src/styles';
 import {useState} from 'react';
 import {useSelector} from 'react-redux';
 import {RootState} from '../../../store/store';
+import ErrorMessage from './ErrorMessage';
 
 interface IImageUpload {
     questionType: string;
@@ -72,11 +73,7 @@ const ImageUpload: React.FC<IImageUpload> = props => {
                     <Image style={styles.image} source={{uri: image}} />
                 </View>
             )}
-            {error?.[sectionId]?.[questionId] ? (
-                <Text style={GenericStyles.redText}>
-                    This is mendatory field
-                </Text>
-            ) : null}
+            <ErrorMessage show={error?.[sectionId]?.[questionId]} />
         </View>
     );
 };

src/components/form/components/RadioButton.tsx

@@ -1,5 +1,5 @@
 import React, {useEffect} from 'react';
-import {StyleSheet, View} from 'react-native';
+import {View} from 'react-native';
 
 import {useState} from 'react';
 import {Control, Controller} from 'react-hook-form';
@@ -9,10 +9,10 @@ import RadioChip from '../../../../RN-UI-LIB/src/components/radio_button/RadioCh
 import RadioGroup from '../../../../RN-UI-LIB/src/components/radio_button/RadioGroup';
 import Text from '../../../../RN-UI-LIB/src/components/Text';
 import {GenericStyles} from '../../../../RN-UI-LIB/src/styles';
-import {COLORS} from '../../../../RN-UI-LIB/src/styles/colors';
 import template from '../../../data/templateData.json';
 import {RootState} from '../../../store/store';
 import QuestionRenderingEngine from '../QuestionRenderingEngine';
+import ErrorMessage from './ErrorMessage';
 
 interface IRadioButton {
     questionType: string;
@@ -126,12 +126,7 @@ const RadioButton: React.FC<IRadioButton> = props => {
                 )}
                 name={`${sectionId}.${questionId}`}
             />
-            {error?.[sectionId]?.[questionId] ? (
-                <Text style={GenericStyles.redText}>
-                    This is mendatory field
-                </Text>
-            ) : null}
-
+            <ErrorMessage show={error?.[sectionId]?.[questionId]} />
             {associatedQuestions.map((nextQuestion: string, index) => {
                 if (
                     template.questions[
@@ -162,10 +157,4 @@ const RadioButton: React.FC<IRadioButton> = props => {
     );
 };
 
-const styles = StyleSheet.create({
-    redText: {
-        color: COLORS.TEXT.RED,
-    },
-});
-
 export default RadioButton;

src/components/form/components/Rating.tsx

@@ -4,6 +4,7 @@ import {Control, Controller} from 'react-hook-form';
 import {GenericStyles} from '../../../../RN-UI-LIB/src/styles';
 import StarRating from '../../../../RN-UI-LIB/src/components/star_rating/StarRating';
 import template from '../../../data/templateData.json';
+import ErrorMessage from './ErrorMessage';
 interface IRating {
     questionType: string;
     questionId: string;
@@ -18,13 +19,14 @@ interface IRating {
 const Rating: React.FC<IRating> = props => {
     const {questionId, error, sectionId} = props;
 
-    const question = template.questions[questionId];
+    const question =
+        template.questions[questionId as keyof typeof template.questions];
     if (!question) {
         return null;
     }
     return (
         <View style={[GenericStyles.mt12]}>
-            <Text>
+            <Text style={GenericStyles.mb12}>
                 {question.text}{' '}
                 {question.type === 'mandatory' && (
                     <Text style={GenericStyles.redText}>*</Text>
@@ -44,11 +46,7 @@ const Rating: React.FC<IRating> = props => {
                 )}
                 name={`${props.sectionId}.${questionId}`}
             />
-            {error?.[sectionId]?.[questionId] ? (
-                <Text style={GenericStyles.redText}>
-                    This is mendatory field
-                </Text>
-            ) : null}
+            <ErrorMessage show={error?.[sectionId]?.[questionId]} />
         </View>
     );
 };

src/components/form/components/TextArea.tsx

@@ -1,4 +1,4 @@
-import {StyleSheet, View} from 'react-native';
+import {View} from 'react-native';
 import React from 'react';
 import {Control, Controller} from 'react-hook-form';
 
@@ -6,6 +6,7 @@ import template from '../../../data/templateData.json';
 import RNTextArea from '../../../../RN-UI-LIB/src/components/TextArea';
 import Text from '../../../../RN-UI-LIB/src/components/Text';
 import {GenericStyles} from '../../../../RN-UI-LIB/src/styles';
+import ErrorMessage from './ErrorMessage';
 
 interface ITextArea {
     questionType: string;
@@ -21,7 +22,8 @@ interface ITextArea {
 const TextArea: React.FC<ITextArea> = props => {
     const {questionId, error, sectionId} = props;
 
-    const question = template.questions[questionId];
+    const question =
+        template.questions[questionId as keyof typeof template.questions];
     if (!question) {
         return null;
     }
@@ -49,15 +51,9 @@ const TextArea: React.FC<ITextArea> = props => {
                 )}
                 name={`${props.sectionId}.${questionId}`}
             />
-            {error?.[sectionId]?.[questionId] ? (
-                <Text style={GenericStyles.redText}>
-                    This is mendatory field
-                </Text>
-            ) : null}
+            <ErrorMessage show={error?.[sectionId]?.[questionId]} />
         </View>
     );
 };
 
 export default TextArea;
-
-const styles = StyleSheet.create({});

src/components/form/components/TextInput.tsx

@@ -6,6 +6,7 @@ import {Control, Controller} from 'react-hook-form';
 
 import template from '../../../data/templateData.json';
 import Text from '../../../../RN-UI-LIB/src/components/Text';
+import ErrorMessage from './ErrorMessage';
 
 interface ITextInput {
     questionType: string;
@@ -21,7 +22,8 @@ interface ITextInput {
 const TextInput: React.FC<ITextInput> = props => {
     const {questionId, error, sectionId} = props;
 
-    const question = template.questions[questionId];
+    const question =
+        template.questions[questionId as keyof typeof template.questions];
     if (!question) {
         return null;
     }
@@ -47,11 +49,7 @@ const TextInput: React.FC<ITextInput> = props => {
                 )}
                 name={`${props.sectionId}.${questionId}`}
             />
-            {error?.[sectionId]?.[questionId] ? (
-                <Text style={GenericStyles.redText}>
-                    This is mendatory field
-                </Text>
-            ) : null}
+            <ErrorMessage show={error?.[sectionId]?.[questionId]} />
         </View>
     );
 };