switched from modal to full screen view

2 files changed, 29 insertions, 9 deletions

diff --git a/src/components/comments/AddComment.tsx b/src/components/comments/AddComment.tsx
index f8c0b6bc..c6c816b9 100644
--- a/src/components/comments/AddComment.tsx
+++ b/src/components/comments/AddComment.tsx
@@ -12,6 +12,7 @@ import {postMomentComment} from '../../services';
 import {logout} from '../../store/actions';
 import {useSelector, useDispatch} from 'react-redux';
 import {RootState} from '../../store/rootreducer';
+import {SCREEN_HEIGHT, SCREEN_WIDTH} from '../../utils';
 
 /**
  * This file provides the add comment view for a user.
@@ -69,7 +70,7 @@ const AddComment: React.FC<AddCommentProps> = ({
   return (
     <KeyboardAvoidingView
       behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
-      keyboardVerticalOffset={130}>
+      keyboardVerticalOffset={(1 / 9) * SCREEN_HEIGHT}>
       <View style={styles.container}>
         <Image
           style={styles.avatar}
@@ -79,8 +80,10 @@ const AddComment: React.FC<AddCommentProps> = ({
               : require('../../assets/images/avatar-placeholder.png')
           }
         />
+
         <TaggBigInput
           style={styles.text}
+          containerStyle={styles.textContainer}
           multiline
           placeholder="Add a comment....."
           placeholderTextColor="gray"
@@ -93,10 +96,18 @@ const AddComment: React.FC<AddCommentProps> = ({
   );
 };
 const styles = StyleSheet.create({
-  container: {flexDirection: 'row'},
+  container: {
+    flexDirection: 'row',
+    justifyContent: 'flex-start',
+    width: SCREEN_WIDTH,
+    marginTop: '5%',
+  },
+  textContainer: {
+    width: '100%',
+    alignItems: 'flex-start',
+    marginVertical: 11,
+  },
   text: {
-    position: 'relative',
-    right: '18%',
     backgroundColor: 'white',
     width: '70%',
     paddingLeft: '2%',
@@ -109,7 +120,8 @@ const styles = StyleSheet.create({
     height: 40,
     width: 40,
     borderRadius: 30,
-    marginRight: 15,
+    marginRight: 10,
+    marginLeft: 20,
   },
 });
 
diff --git a/src/components/onboarding/TaggBigInput.tsx b/src/components/onboarding/TaggBigInput.tsx
index 4e8e1ef7..4212afd1 100644
--- a/src/components/onboarding/TaggBigInput.tsx
+++ b/src/components/onboarding/TaggBigInput.tsx
@@ -1,22 +1,30 @@
 import React from 'react';
-import {View, TextInput, StyleSheet, TextInputProps} from 'react-native';
+import {
+  View,
+  TextInput,
+  StyleSheet,
+  TextInputProps,
+  ViewStyle,
+} from 'react-native';
 import * as Animatable from 'react-native-animatable';
-import {TAGG_LIGHT_PURPLE} from '../../constants';
+import { TAGG_LIGHT_PURPLE } from '../../constants';
 
 interface TaggBigInputProps extends TextInputProps {
   valid?: boolean;
   invalidWarning?: string;
   attemptedSubmit?: boolean;
   width?: number | string;
+  containerStyle?: ViewStyle;
 }
 /**
  * An input component that receives all props a normal TextInput component does. TaggInput components grow to 60% of their parent's width by default, but this can be set using the `width` prop.
  */
 const TaggBigInput = React.forwardRef((props: TaggBigInputProps, ref: any) => {
   return (
-    <View style={styles.container}>
+    <View
+      style={props.containerStyle ? props.containerStyle : styles.container}>
       <TextInput
-        style={[{width: props.width}, styles.input]}
+        style={[{ width: props.width }, styles.input]}
         placeholderTextColor="#ddd"
         clearButtonMode="while-editing"
         ref={ref}