Component tweaks

src/components/DatePicker.js

@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import { View, StyleSheet, Text } from 'react-native';
 import ReactDatePicker from 'react-native-datepicker';
 
+const DEFAULT_DATETIME_FORMAT = 'YYYY-MM-DD h:mm a';
 const DEFAULT_DATE_FORMAT = 'YYYY-MM-DD';
 const CONFIRM_BUTTON_TEXT = 'Confirm';
 const CANCEL_BUTTON_TEXT = 'Cancel';
@@ -19,11 +20,12 @@ export default function Datepicker(props) {
         key={name}
         style={styles.date}
         date={value}
-        mode="date"
-        format={DEFAULT_DATE_FORMAT}
+        mode={meta.isDateTime ? "datetime" : "date"}
+        format={meta.isDateTime ? DEFAULT_DATETIME_FORMAT : DEFAULT_DATE_FORMAT}
         confirmBtnText={CONFIRM_BUTTON_TEXT}
         cancelBtnText={CANCEL_BUTTON_TEXT}
         onDateChange={onChangeInputValue}
+        disabled={meta.disabled === true ? true : false}
       />
     </View>
   );

src/components/InputText.js

@@ -7,19 +7,27 @@ import { color } from '../styles';
 
 export default function InputText(props) {
   const {
-    name, value, meta, style, onChangeInputValue, isMandatory
+    name, value, meta, style, onChangeInputValue, isMandatory, imgView, inputStyle
   } = props;
 
   return (
-    <View key={name}>
-      <Text style={styles.text}>{`${meta.label} ${isMandatory ? '*' : ''}`}</Text>
+    <View key={name} style={[meta.containerStyle ,{}]}>
+      {imgView ? 
+      <View style={styles.yellowMainView}>
+        {imgView()}
+        <View style={styles.yellowView}>
+        <Text style={[styles.yellowTxt]}>{`${meta.label} ${isMandatory ? '*' : ''}`}</Text>
+        </View>
+        </View> :
+        <Text style={[styles.text, meta.textStyle]}>{`${meta.label} ${isMandatory ? '*' : ''}`}</Text>
+      }
       <TextInput
-        style={{ ...styles.textBox(meta.multiline, meta.numberOfLines), ...style }}
+        style={{ ...styles.textBox(meta.multiline, meta.numberOfLines), ...style, ...inputStyle }}
         value={value || ''}
         underlineColorAndroid="transparent"
         onChangeText={onChangeInputValue}
         accessibilityLabel={`input-${meta.label}`}
-        editable
+        editable={meta.editable}
         placeholder={meta.placeholder}
         multiline={meta.multiline}
         numberOfLines={meta.numberOfLines}
@@ -41,6 +49,25 @@ const styles = StyleSheet.create({
     margin: 10,
     paddingLeft: 10
   }),
+  yellowMainView: {
+    flexDirection: 'row',
+  },
+  yellowView: {
+    backgroundColor: '#FDDE02',
+    paddingHorizontal: 12,
+    paddingVertical: 8,
+    borderRadius: 20,
+    borderTopLeftRadius: 0,
+    width: '80%',
+    marginLeft: 10,
+  },
+  yellowTxt: {
+    fontFamily: 'Nunito-Regular',
+    fontSize: 20,
+    color: '#444444',
+    fontWeight: '600',
+    // fontStyle: 'italic',
+  }
 });
 
 InputText.propTypes = {

src/components/Radio.js

@@ -1,7 +1,9 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import {
-  View, StyleSheet, Text, Image, TouchableOpacity
+  View, StyleSheet, Text, Image, TouchableOpacity,
+  ScrollView,
+  Dimensions
 } from 'react-native';
 import { radioButton } from '../constant';
 
@@ -10,18 +12,27 @@ export default function Radio(props) {
     name, value, meta, onChangeInputValue, isMandatory
   } = props;
 
+  const deviceWidth = Dimensions.get('window').width;
   const onPress = value => () => onChangeInputValue(value);
 
   return (
-    <View key={name} style={styles.container}>
-      <Text style={styles.heading}>{`${meta.text} ${isMandatory ? '*' : ''}`}</Text>
+    <View key={name} style={[styles.container, props.style]}>
+      <Text style={[styles.heading, meta.headingStyle]}>{`${meta.text} ${isMandatory ? '*' : ''}`}</Text>
+
+      <ScrollView disabled={meta.isScrollable ? false : true} horizontal={meta.isHorizontal} 
+      showsHorizontalScrollIndicator={false}
+      style={{ borderWidth:0, width:'100%'}} 
+      contentContainerStyle={{ width:'auto'}}>
+
       {meta.data.map((item, index) => (
-        <View key={index} style={styles.radioContainer}>
+        <View key={index} style={styles.radioContainer} >
+
           <TouchableOpacity
             onPressIn={onPress(item.value || item.label)}
             hitSlop={styles.slop}
             style={styles.buttonContainer}
             key={index}
+            disabled={meta.disabled}
           >
             <Image
               accessibilityLabel={`choose-option-${item.label}`}
@@ -32,10 +43,11 @@ export default function Radio(props) {
                   : radioButton.unselected
               }
             />
-            <Text style={styles.text}>{item.label}</Text>
+            <Text style={[styles.text, meta.optionTextStyle]}>{item.label}</Text>
           </TouchableOpacity>
         </View>
       ))}
+      </ScrollView>
     </View>
   );
 }
@@ -66,7 +78,7 @@ const styles = StyleSheet.create({
   },
   radioContainer: {
     paddingVertical: 10,
-    width: '100%',
+    width: 'auto',
     height: 40,
     paddingLeft: 10,
   }

src/components/Rating.js

@@ -7,18 +7,19 @@ import {
 
 export default function Rating(props) {
   const {
-    name, meta, style, onChangeInputValue, isMandatory
+    name, meta, style, value = 0, onChangeInputValue, isMandatory
   } = props;
 
   const recordRating = rating => onChangeInputValue(rating);
   return (
-    <View key={name}>
+    <View key={name} style={{borderWidth:0, alignItems:'flex-start'}}>
       <Text style={styles.text}>{`${meta.label} ${isMandatory ? '*' : ''}`}</Text>
       <AirbnbRating
+        isDisabled={meta.disabled}
         onFinishRating={recordRating}
-        starContainerStyle={{ ...style, ...styles.rating }}
+        starContainerStyle={[ style, styles.rating, {borderWidth:0, marginTop:15, marginLeft:15} ]}
         count={meta.count || 5}
-        defaultRating={0}
+        defaultRating={value}
         showRating={false}
         size={30}
       />