#1 - Add reply suggestions

omerlagziel · Nov 22, 2021 · 0815f6b · 0815f6b
1 parent 22e8bf1
commit 0815f6b
Show file tree

Hide file tree

Showing 2 changed files with 48 additions and 4 deletions.
diff --git a/packages/components/src/components/ReviewCard.tsx b/packages/components/src/components/ReviewCard.tsx
@@ -7,7 +7,7 @@ import {
   TouchableOpacity,
   GestureResponderEvent,
 } from 'react-native'
-import { Stars } from '.'
+import { Stars } from './Stars'
 
 const cardHeaderHeight = 50
 

diff --git a/packages/components/src/features/review/Review.tsx b/packages/components/src/features/review/Review.tsx
@@ -1,5 +1,12 @@
 import React, { Component } from 'react'
-import { View, TextInput } from 'react-native'
+import {
+  View,
+  Text,
+  TouchableOpacity,
+  TextInput,
+  StyleSheet,
+  ScrollView,
+} from 'react-native'
 import { useSelector, useDispatch } from 'react-redux'
 import { BottomTabNavigationProp } from '@react-navigation/bottom-tabs'
 
@@ -17,12 +24,49 @@ export default ({ navigation }: Props) => {
   return (
     <View>
       <ReviewCard
-        title="John Doe 222222"
+        title="John Doe"
         subtitle="2 days ago"
         description="Food was great as always, highly recommend this place! Will definitely come back soon. Only note is to keep the music a little less loud."
         fullscreen
       />
-      <TextInput />
+      <ScrollView style={styles.replyOptions} horizontal>
+        <TouchableOpacity style={styles.replyOption}>
+          <Text style={styles.replyOptionText}>Thank you John!</Text>
+        </TouchableOpacity>
+        <TouchableOpacity style={styles.replyOption}>
+          <Text style={styles.replyOptionText}>Thanks John!</Text>
+        </TouchableOpacity>
+        <TouchableOpacity style={styles.replyOption}>
+          <Text style={styles.replyOptionText}>Many thanks John!</Text>
+        </TouchableOpacity>
+        <TouchableOpacity style={styles.replyOption}>
+          <Text style={styles.replyOptionText}>Appreciate it John!</Text>
+        </TouchableOpacity>
+      </ScrollView>
+      <TextInput placeholder="Reply.." style={styles.textInput} multiline />
     </View>
   )
 }
+
+const styles = StyleSheet.create({
+  textInput: {
+    fontSize: 14,
+    backgroundColor: 'white',
+    padding: 15,
+  },
+  replyOptions: {
+    flexDirection: 'row',
+    padding: 15,
+  },
+  replyOption: {
+    flexDirection: 'row',
+    backgroundColor: '#A9A9A9',
+    borderRadius: 8,
+    padding: 8,
+    marginHorizontal: 5,
+  },
+  replyOptionText: {
+    fontWeight: 'bold',
+    color: 'white',
+  },
+})