Fix validation for editing group details

src/assets/theme.js

@@ -53,7 +53,8 @@ const lightColors = {
   agendaBackground: "#F2F2F2",
   textSectionTitleColor: "#b6c1cd",
   textDisabledColor: "#d9e1e8",
-  todayColor: "#00adf5"
+  todayColor: "#00adf5",
+  spinnerBg: "#F5FCFF88",
 };
 
 const darkColors = {
@@ -62,7 +63,7 @@ const darkColors = {
   lightMain: "#1F1F1F",
   chatList: "#000",
   textColor: "#fff",
-  chatBackground: "000" || "#151e27",
+  chatBackground: "#000", // "#151e27",
   shadow: "#fff",
   whiteBlack: "#000",
   systemMsgBubble: "#2f3f4f",
@@ -89,7 +90,8 @@ const darkColors = {
   agendaBackground: "#000",
   textSectionTitleColor: "#fff",
   textDisabledColor: "#434343",
-  todayColor: "#70CCCF"
+  todayColor: "#70CCCF",
+  spinnerBg: "#43434388",
 };
 
 const sizes = {

src/components/Spinner.js

@@ -1,10 +1,11 @@
 import React from "react";
 import { View, ActivityIndicator, StyleSheet } from "react-native";
+import { connect } from "react-redux";
 
 class Spinner extends React.Component {
   render() {
     return (
-      <View style={styles.loading}>
+      <View style={[styles.loading, { backgroundColor: this.props.backgroundColor }]}>
         <ActivityIndicator size="large" />
       </View>
     );
@@ -20,9 +21,14 @@ const styles = StyleSheet.create({
     top: 0,
     alignItems: "center",
     justifyContent: "center",
-    backgroundColor: "#F5FCFF88",
     elevation: 5
   }
 });
 
-export default Spinner;
+const mapStateToProp = state => {
+  return {
+    backgroundColor: state.theme.colors.spinnerBg
+  }
+}
+
+export default connect(mapStateToProp)(Spinner);

src/screens/Auth/UserDetails.js

@@ -13,7 +13,10 @@ import defaultPicture from "../../assets/default_profile.png";
 import Spinner from "../../components/Spinner";
 
 class UserDetails extends React.Component {
-  state = { loading: false };
+  state = {
+    loading: false,
+    username: ""
+  };
 
   handleSubmit = values => {
     this.setState({ loading: true });
@@ -48,6 +51,8 @@ class UserDetails extends React.Component {
           name="username"
           component={this.renderInput}
           label="Enter username"
+          value={this.state.username}
+          onChange={text => this.setState({ username: text })}
         />
         <Button
           shadow

src/screens/Main/Groups/CreatePoll.js

@@ -116,7 +116,6 @@ class CreatePoll extends React.Component {
           autoCapitalize="sentences"
           name="question"
           left
-          // label="Question"
           component={this.renderInput}
           placeholder="Enter question"
           style={[

src/screens/Main/Groups/GroupDetails.js

@@ -9,7 +9,6 @@ import {
 } from "react-native";
 import { connect } from "react-redux";
 import { Field, reduxForm } from "redux-form";
-
 import Text from "../../../components/Text";
 import ContinueButton from "../../../components/ContinueButton";
 import { createGroup, editGroup } from "../../../store/actions/groups";
@@ -64,13 +63,14 @@ class GroupDetails extends React.Component {
   };
 
   handleSubmitEdit = values => {
+    console.log(values);
     this.setState({ loading: true });
     this.props
       .dispatch(
         editGroup(
           this.props.navigation.getParam("groupID"),
-          values.groupname,
-          values.grouppicture.uri,
+          (values.groupname || this.state.groupName),
+          ((values.grouppicture || {}).uri || this.props.group.photoURL),
         )
       )
       .then(group => {
@@ -95,6 +95,7 @@ class GroupDetails extends React.Component {
     return (
       <TextInput
         {...input}
+        keyboardAppearance={this.props.colors.keyboard}
         value={this.state.groupName}
         onChangeText={text => this.setState({ groupName: text })}
         style={[styles.textInput, { marginTop: 5, color: this.props.colors.textColor }]}
@@ -117,14 +118,16 @@ class GroupDetails extends React.Component {
             autoCapitalize="sentences"
             name="grouppicture"
             component={this.renderImagePicker}
-            validate={required}
+            validate={this.props.navigation.getParam("type") === "create" ? required : null}
           />
           <Field
             autoCapitalize="sentences"
             name="groupname"
             component={this.renderInput}
             label="Enter group name"
-            validate={required}
+            validate={this.props.navigation.getParam("type") === "create" ? required : null}
+            value={this.state.groupName}
+            onChange={text => this.setState({ groupName: text })}
           />
         </View>
         <TouchableOpacity