changed global variable with & dropdown redesign done

package-lock.json

@@ -8973,14 +8973,6 @@
         "prop-types": "^15.5.10"
       }
     },
-    "react-native-theming": {
-      "version": "1.0.16",
-      "resolved": "https://registry.npmjs.org/react-native-theming/-/react-native-theming-1.0.16.tgz",
-      "integrity": "sha512-f8P7F3yKW9i+PmsmZo98V933Ggsu6YpsBw8pvNEAOENnNqbFmeDL6K+89F0WmkpF6bSs/qqSbyGUWKvCgNhBkw==",
-      "requires": {
-        "prop-types": "^15.6.0"
-      }
-    },
     "react-native-vector-icons": {
       "version": "4.6.0",
       "resolved": "https://registry.npmjs.org/react-native-vector-icons/-/react-native-vector-icons-4.6.0.tgz",

package.json

@@ -33,7 +33,6 @@
     "react-native-navigation": "^2.0.2519",
     "react-native-restart": "0.0.6",
     "react-native-slider": "^0.11.0",
-    "react-native-theming": "^1.0.16",
     "react-native-vector-icons": "^4.6.0",
     "react-redux": "^5.0.7",
     "realm": "^2.15.3",

src/components/buttons/index.js

@@ -1,3 +1,3 @@
-import GreetingHeaderButton from "./views/greetingHeaderButtonView";
+import TextButton from "./views/textButtonView";
 
-export { GreetingHeaderButton };
+export { TextButton };

src/components/buttons/views/textButtonStyles.js

@@ -2,6 +2,8 @@ import EStyleSheet from "react-native-extended-stylesheet";
 
 export default EStyleSheet.create({
   button: {
+    flex: 1,
+    flexDirection: "row",
     width: 54,
     backgroundColor: "transparent",
     height: 19,

src/components/buttons/views/textButtonView.js

@@ -1,9 +1,9 @@
 import React, { Fragment } from "react";
 import { TouchableWithoutFeedback, Text, View } from "react-native";
 
-import styles from "./greetingHeaderButtonStyles";
+import styles from "./textButtonStyles";
 
-const GreetingHeaderButtonView = ({ text, onPress, style }) => (
+const TextButtonView = ({ text, onPress, style }) => (
   <Fragment>
     <TouchableWithoutFeedback
       style={[styles.button, style]}
@@ -16,4 +16,4 @@ const GreetingHeaderButtonView = ({ text, onPress, style }) => (
   </Fragment>
 );
 
-export default GreetingHeaderButtonView;
+export default TextButtonView;

src/components/containerHeader/view/containerHeaderStyles.js

@@ -13,7 +13,7 @@ export default EStyleSheet.create({
   title: {
     alignSelf: "flex-start",
     fontSize: 14,
-    color: "#788187",
+    color: "$primaryGray",
     fontWeight: "bold",
     marginLeft: 26,
   },

src/components/dropdownButton/view/dropdownButtonStyles.js

@@ -8,10 +8,9 @@ export default EStyleSheet.create({
     alignSelf: "flex-start",
     height: 35,
   },
-  dropdownWrapper: {},
   dropdownText: {
     fontSize: 9,
-    color: "#788187",
+    color: "$primaryGray",
     marginLeft: 25,
   },
   dropdownIcon: {
@@ -37,7 +36,7 @@ export default EStyleSheet.create({
   },
   dropdownText: {
     fontSize: 9,
-    color: "#788187",
+    color: "$primaryGray",
     padding: 5,
     borderColor: "#e7e7e7",
   },
@@ -51,7 +50,7 @@ export default EStyleSheet.create({
   buttonText: {
     fontSize: 9,
     alignSelf: "center",
-    color: "#788187",
+    color: "$primaryGray",
     fontWeight: "normal",
   },
   rowWrapper: {
@@ -70,16 +69,17 @@ export default EStyleSheet.create({
     borderRadius: 20,
     height: 35,
     backgroundColor: "$primaryBlue",
-    marginLeft: 5,
+    alignSelf: "flex-start",
-    width: "$deviceWidth / 3.2",
+    paddingLeft: 11,
+    paddingRight: 11,
+    marginLeft: 20,
   },
   highlightedRowText: {
-    textAlign: "center",
+    color: "$white",
-    color: "#fff",
     fontWeight: "bold",
   },
   rowText: {
-    fontSize: 10,
+    fontSize: 9,
-    color: "#788187",
+    color: "$primaryGray",
   },
 });

src/components/dropdownButton/view/dropdownButtonView.js

@@ -12,7 +12,7 @@ import Ionicons from "react-native-vector-icons/Ionicons";
 // Styles
 import styles from "./dropdownButtonStyles";
 
-/* Props
+/* Props TODO: Fill all description
   * ------------------------------------------------
   *   @prop { string }      defaultText         - Description....
   *   @prop { string }      iconName            - Description....
@@ -35,13 +35,6 @@ const renderDropdownRow = (rowData, rowID, highlighted) => {
   );
 };
 
-// const _dropdown_2_renderButtonText = rowData => {
-//   const { name, age } = rowData;
-//   return `${name} - ${age}`;
-// };
-
-const renderDropdownSeperator = () => null;
-
 const DropdownButtonView = ({
   defaultText,
   iconName,
@@ -50,7 +43,6 @@ const DropdownButtonView = ({
   defaultIndex,
 }) => (
   <View style={styles.container}>
-    <View style={styles.dropdownWrapper}>
     <ModalDropdown
       style={styles.button}
       textStyle={styles.buttonText}
@@ -61,13 +53,11 @@ const DropdownButtonView = ({
       onSelect={e => onSelect && onSelect(e)}
       defaultIndex={defaultIndex}
       defaultValue={defaultText}
-        // renderButtonText={rowData => _dropdown_2_renderButtonText(rowData)}
+      renderSeparator={() => null}
-        renderSeparator={() => renderDropdownSeperator()}
       renderRow={(rowData, rowID, highlighted) =>
         renderDropdownRow(rowData, rowID, highlighted)
       }
     />
-    </View>
     <View style={styles.iconWrapper}>
       <Ionicons
         style={styles.dropdownIcon}

src/components/formInput/view/formInputView.js

@@ -29,27 +29,34 @@ class FormInputView extends Component {
     this.state = {
       value: "",
       inputBorderColor: "#c1c5c7",
+      isValid: true,
     };
   }
 
   // Component Life Cycles
+  componentWillReceiveProps(nextProps) {
+    const { isValid } = this.props;
+
+    if (nextProps.isValid !== isValid) {
+      this.setState({ isValid: nextProps.isValid });
+    }
+  }
 
   // Component Functions
   _handleOnChange = value => {
     const { onChange } = this.props;
 
-    value && this.setState({ value });
+    this.setState({ value });
-    onChange && value && onChange(value);
+    onChange && onChange(value);
   };
 
   render() {
-    const { inputBorderColor, value } = this.state;
+    const { inputBorderColor, isValid, value } = this.state;
     const {
       placeholder,
       type,
       isFirstImage,
       isEditable,
-      isValid,
       leftIconName,
       rightIconName,
       secureTextEntry,

src/components/informationArea/view/informationAreaStyles.js

@@ -15,6 +15,6 @@ export default EStyleSheet.create({
   infoText: {
     flex: 0.875,
     fontSize: 12,
-    color: "#788187",
+    color: "$primaryGray",
   },
 });

src/components/loginHeader/view/loginHeaderStyles.js

@@ -14,7 +14,7 @@ export default EStyleSheet.create({
   },
   description: {
     textAlignVertical: "center",
-    color: "#788187",
+    color: "$primaryGray",
     fontSize: 14,
     fontWeight: "400",
   },
@@ -22,7 +22,7 @@ export default EStyleSheet.create({
     textAlignVertical: "center",
     fontSize: 20,
     fontWeight: "bold",
-    color: "#788187",
+    color: "$primaryGray",
     marginBottom: 16,
   },
   mascot: {

src/components/loginHeader/view/loginHeaderView.js

@@ -3,7 +3,7 @@ import { View, Text, Image } from "react-native";
 // Constants
 
 // Components
-import { GreetingHeaderButton } from "../../buttons";
+import { TextButton } from "../../buttons";
 import { LineBreak } from "../../basicUIElements";
 // Styles
 // eslint-disable-next-line
@@ -36,7 +36,7 @@ class LoginHeaderView extends Component {
             source={require("../../../assets/esteem.png")}
           />
           <View style={styles.headerButton}>
-            <GreetingHeaderButton onPress={onPress} text="Sign up" />
+            <TextButton onPress={onPress} text="Sign up" />
           </View>
         </View>
         {!isKeyboardOpen && (

src/components/mainButton/view/mainButtonStyles.js

@@ -45,4 +45,7 @@ export default EStyleSheet.create({
     width: 20,
     height: 20,
   },
+  disableTouchable: {
+    backgroundColor: "#c1c5c7",
+  },
 });

src/components/mainButton/view/mainButtonView.js

@@ -30,16 +30,29 @@ class MainButton extends Component {
   constructor(props) {
     super(props);
 
-    this.state = {};
+    this.state = {
+      isDisable: !props.isLoading && props.isDisable,
+    };
   }
 
   // Component Life Cycles
+  componentWillReceiveProps(nextProps) {
+    const { isLoading, isDisable } = this.props;
+    if (
+      nextProps.isLoading !== isLoading ||
+      nextProps.isDisable !== isDisable
+    ) {
+      this.setState({
+        isDisable: !nextProps.isLoading && nextProps.isDisable,
+      });
+    }
+  }
 
   // Component Functions
   _handleOnPress = () => {
-    const { onPress, isDisable, source } = this.props;
+    const { onPress } = this.props;
 
-    onPress && !isDisable && onPress();
+    onPress && onPress();
   };
 
   _getBody = () => {
@@ -75,13 +88,15 @@ class MainButton extends Component {
   };
 
   render() {
-    const { wrapperStyle, isDisable } = this.props;
+    const { wrapperStyle } = this.props;
+    const { isDisable } = this.state;
 
     return (
       <View style={wrapperStyle}>
         <TouchableOpacity
+          disabled={isDisable}
           onPress={() => this._handleOnPress()}
-          style={styles.touchable}
+          style={[styles.touchable, isDisable && styles.disableTouchable]}
         >
           <View style={styles.body}>{this._getBody()}</View>
         </TouchableOpacity>

src/components/notification/view/notificationStyles.js

@@ -40,7 +40,7 @@ export default EStyleSheet.create({
     fontWeight: "bold",
   },
   title: {
-    color: "#788187",
+    color: "$primaryGray",
   },
   description: {
     color: "#3c4449",
@@ -48,7 +48,7 @@ export default EStyleSheet.create({
     fontWeight: "500",
   },
   scrollView: {
-    height: "$deviceHeight / 1.25",
+    height: "$deviceHeight / 1.35",
   },
   isNewNotification: {
     backgroundColor: "#eaf2fc",

src/components/search/search.js

@@ -98,7 +98,7 @@ export default class Search extends Component {
               flex: 0.1,
               fontSize: 18,
               top: 10,
-                            color: "#788187",
+              color: "$primaryGray",
             }}
           />
 
@@ -133,9 +133,7 @@ export default class Search extends Component {
             showsVerticalScrollIndicator={false}
             horizontal={true}
             renderItem={({ item }) => (
-                            <View
+              <View style={{ margin: 10, flexDirection: "column" }}>
-                                style={{ margin: 10, flexDirection: "column" }}
-                            >
                 <Image
                   style={{
                     width: 50,

src/providers/steem/dsteem.js

@@ -261,7 +261,7 @@ export const upvote = (vote, postingKey) => {
  * @method upvoteAmount estimate upvote amount
  */
 export const upvoteAmount = async input => {
-    if (rewardFund == null || medianPrice == null) {
+  if (!rewardFund || !medianPrice) {
     rewardFund = await client.database.call("get_reward_fund", ["post"]);
 
     await client.database
@@ -533,10 +533,7 @@ export const postContent = (data, postingKey) => {
 
 export const lookupAccounts = async username => {
   try {
-        let users = await client.database.call("lookup_accounts", [
+    let users = await client.database.call("lookup_accounts", [username, 20]);
-            username,
-            20,
-        ]);
     return users;
   } catch (error) {
     throw error;

src/screens/authorProfile/screen/authorScreen.js

@@ -22,15 +22,11 @@ import { PostCard } from "../../../components/postCard";
 
 import Comment from "../../../components/comment/comment";
 
-// TODO: Make utils for all using moment.
+import { getTimeFromNow } from "../../../utils/time";
-import moment from "moment";
-
-//import Icon from "react-native-vector-icons/FontAwesome";
 
 // Styles
 import styles from "./authorStyles";
 
-//import themes from "../../styles/themes";
 import {
   followUser,
   unfollowUser,
@@ -114,7 +110,7 @@ class AuthorScreen extends Component {
       isLoggedIn = res;
     });
 
-    if (isLoggedIn == true) {
+    if (isLoggedIn) {
       getUserData()
         .then(res => {
           user = Array.from(res);
@@ -184,7 +180,7 @@ class AuthorScreen extends Component {
   };
 
   getMore = () => {
-    if (this.state.loading == true) {
+    if (this.state.loading) {
       return false;
     } else {
       getPosts(
@@ -299,7 +295,7 @@ class AuthorScreen extends Component {
   };
 
   renderFooter = () => {
-    if (!this.state.loading == false) return null;
+    if (this.state.loading) return null;
 
     return (
       <View style={{ marginVertical: 20 }}>
@@ -343,7 +339,7 @@ class AuthorScreen extends Component {
                 {this.state.author.name}
               </Text>
               <Text>{this.state.about.about}</Text>
-              {this.state.isFolllowing == true ? (
+              {this.state.isFolllowing ? (
                 <Button
                   onPress={() => {
                     this.unfollow();
@@ -421,10 +417,7 @@ class AuthorScreen extends Component {
                       }}
                       name="md-calendar"
                     />
-                    {moment
+                    {getTimeFromNow(this.state.author.created)}
-                      .utc(this.state.author.created)
-                      .local()
-                      .fromNow()}
                   </Text>
                 </View>
               </CardItem>
@@ -458,7 +451,7 @@ class AuthorScreen extends Component {
                 )}
                 keyExtractor={(post, index) => index.toString()}
                 onEndReached={info => {
-                  if (this.state.loading == false) {
+                  if (!this.state.loading) {
                     console.log(info);
                     this.getMore();
                   }

src/screens/home/home.js

@@ -90,7 +90,7 @@ export default class Home extends React.PureComponent {
       isLoggedIn = res;
     });
 
-    if (isLoggedIn == true) {
+    if (isLoggedIn) {
       await getUserData().then(res => {
         user = Array.from(res);
       });
@@ -118,7 +118,7 @@ export default class Home extends React.PureComponent {
               style={styles.tabbar}
               tabUnderlineDefaultWidth={80} // default containerWidth / (numberOfTabs * 4)
               tabUnderlineScaleX={2} // default 3
-              activeColor={"$primaryBlue"}
+              activeColor={"#357ce6"}
               inactiveColor={"#222"}
               tabBarPosition="overlayTop"
             />

src/screens/login/screen/loginScreen.js

@@ -5,7 +5,7 @@ import ScrollableTabView from "@esteemapp/react-native-scrollable-tab-view";
 
 // Internal Components
 import { FormInput } from "../../../components/formInput";
-import { GreetingHeaderButton } from "../../../components/buttons";
+import { TextButton } from "../../../components/buttons";
 import { InformationArea } from "../../../components/informationArea";
 import { Login } from "../../../providers/steem/auth";
 import { LoginHeader } from "../../../components/loginHeader";
@@ -29,7 +29,7 @@ class LoginScreen extends Component {
       username: "",
       password: "",
       isLoading: false,
-      isUsernameValid: true,
+      isUsernameValid: false,
       keyboardIsOpen: false,
     };
   }
@@ -109,7 +109,14 @@ class LoginScreen extends Component {
   };
 
   render() {
-    const { isLoading, username, isUsernameValid, keyboardIsOpen } = this.state;
+    const {
+      isLoading,
+      username,
+      isUsernameValid,
+      keyboardIsOpen,
+      password,
+    } = this.state;
+
     return (
       <View style={{ flex: 1 }}>
         <StatusBar hidden translucent />
@@ -131,7 +138,7 @@ class LoginScreen extends Component {
                 style={styles.tabbar}
                 tabUnderlineDefaultWidth={100} // default containerWidth / (numberOfTabs * 4)
                 tabUnderlineScaleX={2} // default 3
-                activeColor={"$primaryBlue"}
+                activeColor={"#357ce6"}
                 inactiveColor={"#222"}
               />
             )}
@@ -163,14 +170,18 @@ class LoginScreen extends Component {
                 removed upon logout!"
                 iconName="ios-information-circle-outline"
               />
-              {/* It will remove */}
+              <View style={styles.footerButtons}>
-              <GreetingHeaderButton onPress={goToAuthScreens} text="cancel" />
+                <TextButton onPress={goToAuthScreens} text="cancel" />
+              </View>
               <MainButton
                 wrapperStyle={styles.mainButtonWrapper}
                 onPress={this._handleOnPressLogin}
                 iconName="md-person"
                 iconColor="white"
                 text="LOGIN"
+                isDisable={
+                  !isUsernameValid || password.length < 2 || username.length < 2
+                }
                 isLoading={isLoading}
               />
             </View>
@@ -179,7 +190,6 @@ class LoginScreen extends Component {
                 description="If you don't want to keep your password encrypted and saved on your device, you can use Steemconnect."
                 iconName="ios-information-circle-outline"
               />
-
               <MainButton
                 wrapperStyle={styles.mainButtonWrapper}
                 onPress={this._loginwithSc2}

src/screens/login/screen/loginStyles.js

@@ -50,4 +50,14 @@ export default EStyleSheet.create({
     bottom: 24,
     flexDirection: "row",
   },
+  footerButtons: {
+    flex: 1,
+    flexDirection: "row",
+    justifyContent: "center",
+    alignItems: "center",
+    alignSelf: "flex-end",
+    position: "absolute",
+    bottom: 45,
+    left: "$deviceWidth / 2.3",
+  },
 });

src/screens/notification/screen/notificationScreen.js

@@ -1,5 +1,5 @@
 import React, { Fragment } from "react";
-import { Text, View } from "react-native";
+import { Text, View, SafeAreaView } from "react-native";
 import ScrollableTabView from "@esteemapp/react-native-scrollable-tab-view";
 import { TabBar } from "../../../components/tabBar";
 import { Notification } from "../../../components/notification";
@@ -9,7 +9,7 @@ import styles from "./notificationStyles";
 class NotificationScreen extends React.Component {
   render() {
     return (
-      <Fragment>
+      <SafeAreaView style={{ flex: 1, backgroundColor: "#fff" }}>
         <ScrollableTabView
           style={styles.tabView}
           renderTabBar={() => (
@@ -17,7 +17,7 @@ class NotificationScreen extends React.Component {
               style={styles.tabbar}
               tabUnderlineDefaultWidth={100}
               tabUnderlineScaleX={2}
-              activeColor={"$primaryBlue"}
+              activeColor={"#357ce6"}
               inactiveColor={"#222"}
             />
           )}
@@ -29,7 +29,7 @@ class NotificationScreen extends React.Component {
             <Text>Leaderboard</Text>
           </View>
         </ScrollableTabView>
-      </Fragment>
+      </SafeAreaView>
     );
   }
 }

src/screens/profile/profile.js

@@ -2,7 +2,7 @@
 import React from "react";
 import { FlatList, ActivityIndicator } from "react-native";
 
-import moment from "moment";
+import { getTimeFromNow } from "../../utils/time";
 import FastImage from "react-native-fast-image";
 
 import ScrollableTabView from "@esteemapp/react-native-scrollable-tab-view";
@@ -11,7 +11,7 @@ import DiscoverPage from "../discover/discover";
 import { PostCard } from "../../components/postCard";
 import Comment from "../../components/comment/comment";
 
-import { Card, CardItem, View, Body, Title, Container } from "native-base";
+import { Card, CardItem, View, Body } from "native-base";
 
 import { getUserData, getAuthStatus } from "../../realm/realm";
 import {
@@ -19,7 +19,6 @@ import {
   getFollows,
   getPosts,
   getUserComments,
-  getUserReplies,
 } from "../../providers/steem/dsteem";
 import styles from "../../styles/profile.styles";
 /* eslint-enable no-unused-vars */
@@ -76,7 +75,7 @@ class ProfilePage extends React.Component {
       isLoggedIn = res;
     });
 
-    if (isLoggedIn == true) {
+    if (isLoggedIn) {
       await getUserData().then(res => {
         userData = Array.from(res);
       });
@@ -103,7 +102,7 @@ class ProfilePage extends React.Component {
   }
 
   renderFooter = () => {
-    if (!this.state.loading == false) return null;
+    if (this.state.loading) return null;
 
     return (
       <View style={{ marginVertical: 20 }}>
@@ -235,10 +234,7 @@ class ProfilePage extends React.Component {
                         }}
                         name="md-calendar"
                       />
-                      {moment
+                      {getTimeFromNow(this.state.user.created)}
-                        .utc(this.state.user.created)
-                        .local()
-                        .fromNow()}
                     </Text>
                   </View>
                 </CardItem>
@@ -271,7 +267,7 @@ class ProfilePage extends React.Component {
                   )}
                   keyExtractor={(post, index) => index.toString()}
                   onEndReached={info => {
-                    if (this.state.loading == false) {
+                    if (!this.state.loading) {
                       console.log(info);
                       this.getMore();
                     }

src/screens/profile/screen/profileScreen.js

@@ -2,7 +2,7 @@
 import React from "react";
 import { FlatList, ActivityIndicator } from "react-native";
 
-import moment from "moment";
+import { getTimeFromNow } from "../../../utils/time";
 import FastImage from "react-native-fast-image";
 
 import ScrollableTabView from "@esteemapp/react-native-scrollable-tab-view";
@@ -72,7 +72,7 @@ class ProfileScreen extends React.Component {
       const isLoggedIn = res;
     });
 
-    if (isLoggedIn === true) {
+    if (isLoggedIn) {
       let user;
       let userData;
       let follows;
@@ -105,7 +105,7 @@ class ProfileScreen extends React.Component {
   }
 
   renderFooter = () => {
-    if (!this.state.loading == false) return null;
+    if (this.state.loading) return null;
 
     return (
       <View style={{ marginVertical: 20 }}>
@@ -238,10 +238,7 @@ class ProfileScreen extends React.Component {
                         }}
                         name="md-calendar"
                       />
-                      {moment
+                      {getTimeFromNow(this.state.user.created)}
-                        .utc(this.state.user.created)
-                        .local()
-                        .fromNow()}
                     </Text>
                   </View>
                 </CardItem>
@@ -274,7 +271,7 @@ class ProfileScreen extends React.Component {
                   )}
                   keyExtractor={(post, index) => index.toString()}
                   onEndReached={info => {
-                    if (this.state.loading == false) {
+                    if (!this.state.loading) {
                       console.log(info);
                       this.getMore();
                     }

src/screens/side-menu/authLoading.js

@@ -14,7 +14,7 @@ export class AuthLoadingScreen extends React.Component {
   checkAuth = async () => {
     await getAuthStatus()
       .then(result => {
-                if (result === true) {
+        if (result) {
           getUserData()
             .then(userData => {
               // This will switch to the App screen or Auth screen and this loading

src/screens/sideMenuScreen.js

@@ -24,7 +24,7 @@ class SideMenuScreen extends Component {
       isLoggedIn = res;
     });
 
-        if (isLoggedIn == true) {
+    if (isLoggedIn) {
       await getUserData().then(res => {
         user = Array.from(res);
       });

src/screens/splash/splashContainer.js

@@ -14,7 +14,7 @@ class SplashContainer extends React.Component {
   async componentDidMount() {
     await getAuthStatus()
       .then(result => {
-                if (result === true) {
+        if (result) {
           goToAuthScreens();
         } else {
           goToNoAuthScreens();

src/screens/steem-connect/steemConnect.js

@@ -17,16 +17,14 @@ export default class SteemConnect extends Component {
     if (event.url.indexOf("?access_token=") > -1) {
       this.webview.stopLoading();
       try {
-                access_token = event.url.match(
+        access_token = event.url.match(/\?(?:access_token)\=([\S\s]*?)\&/)[1];
-                    /\?(?:access_token)\=([\S\s]*?)\&/
-                )[1];
       } catch (error) {
         console.log(error);
       }
 
       loginWithSC2(access_token, "pinCode")
         .then(result => {
-                    if (result === true) {
+          if (result) {
             // TODO: Handle pinCode and navigate to home page
             goToAuthScreens();
           } else {
@@ -51,9 +49,7 @@ export default class SteemConnect extends Component {
               steemConnectOptions.redirect_uri
             )}&${encodeURIComponent(steemConnectOptions.scope)}`,
           }}
-                    onNavigationStateChange={this.onNavigationStateChange.bind(
+          onNavigationStateChange={this.onNavigationStateChange.bind(this)}
-                        this
-                    )}
           ref={ref => {
             this.webview = ref;
           }}

src/screens/wallet/wallet.js

@@ -42,7 +42,7 @@ class WalletPage extends Component {
       isLoggedIn = res;
     });
 
-        if (isLoggedIn == true) {
+    if (isLoggedIn) {
       await getUserData().then(res => {
         userData = Array.from(res);
       });
@@ -124,8 +124,7 @@ class WalletPage extends Component {
     let toWithdraw =
       (vestSteem * 1e6) /
       (parseFloat(this.state.globalProps.total_vesting_fund_steem) /
-                (parseFloat(this.state.globalProps.total_vesting_shares) /
+        (parseFloat(this.state.globalProps.total_vesting_shares) / 1e6));
-                    1e6));
     console.log(toWithdraw);
     data = {
       delegator: this.state.user.name,
@@ -198,8 +197,7 @@ class WalletPage extends Component {
     let toWithdraw =
       (vestSteem * 1e6) /
       (parseFloat(this.state.globalProps.total_vesting_fund_steem) /
-                (parseFloat(this.state.globalProps.total_vesting_shares) /
+        (parseFloat(this.state.globalProps.total_vesting_shares) / 1e6));
-                    1e6));
 
     let data = {
       account: this.state.user.name,
@@ -226,26 +224,18 @@ class WalletPage extends Component {
             <Text>SBD Balance: {this.state.user.sbd_balance}</Text>
           </Card>
           <Card>
+            <Text>STEEM Power: {this.state.user.steem_power} SP</Text>
             <Text>
-                            STEEM Power: {this.state.user.steem_power} SP
+              Received STEEM Power: {this.state.user.received_steem_power} SP
             </Text>
             <Text>
-                            Received STEEM Power:{" "}
+              Delegated Power Power: {this.state.user.delegated_steem_power} SP
-                            {this.state.user.received_steem_power} SP
-                        </Text>
-                        <Text>
-                            Delegated Power Power:{" "}
-                            {this.state.user.delegated_steem_power} SP
             </Text>
           </Card>
           <Card>
+            <Text>Saving STEEM Balance: {this.state.user.savings_balance}</Text>
             <Text>
-                            Saving STEEM Balance:{" "}
+              Saving STEEM Balance: {this.state.user.savings_sbd_balance}
-                            {this.state.user.savings_balance}
-                        </Text>
-                        <Text>
-                            Saving STEEM Balance:{" "}
-                            {this.state.user.savings_sbd_balance}
             </Text>
           </Card>
 
@@ -259,9 +249,7 @@ class WalletPage extends Component {
               }}
               autoCapitalize="none"
               placeholder="Recipient"
-                            onChangeText={user =>
+              onChangeText={user => this.setState({ receiver: user })}
-                                this.setState({ receiver: user })
-                            }
               value={this.state.receiver}
             />
             <Input
@@ -272,9 +260,7 @@ class WalletPage extends Component {
                 margin: 10,
               }}
               placeholder="amount"
-                            onChangeText={amount =>
+              onChangeText={amount => this.setState({ amount: amount })}
-                                this.setState({ amount: amount })
-                            }
               value={this.state.amount}
             />
             <Input
@@ -301,10 +287,7 @@ class WalletPage extends Component {
                 <Picker.Item label="STEEM" value="STEEM" />
                 <Picker.Item label="SBD" value="SBD" />
               </Picker>
-                            <Button
+              <Button onPress={this.sendSteem} style={{ margin: 10 }}>
-                                onPress={this.sendSteem}
-                                style={{ margin: 10 }}
-                            >
                 <Text style={{ color: "white" }}>Send</Text>
               </Button>
             </View>
@@ -337,18 +320,13 @@ class WalletPage extends Component {
                 onValueChange={value => {
                   this.setState({
                     value: value,
-                                        percent: Math.floor(
+                    percent: Math.floor(value.toFixed(2) * 100),
-                                            value.toFixed(2) * 100
-                                        ),
                   });
                 }}
               />
               <Text>
                 Total:{" "}
-                                {(parseInt(this.state.vestSteem) *
+                {(parseInt(this.state.vestSteem) * this.state.percent) / 100} SP
-                                    this.state.percent) /
-                                    100}{" "}
-                                SP
               </Text>
               <Text>{Math.floor(this.state.value * 100)}%</Text>
               <Button
@@ -405,40 +383,22 @@ class WalletPage extends Component {
                   this.setState(
                     {
                       value: value,
-                                            percent: Math.floor(
+                      percent: Math.floor(value.toFixed(2) * 100),
-                                                value.toFixed(2) * 100
-                                            ),
                     },
                     () => {
                       let avail =
-                                                parseFloat(
+                        parseFloat(this.state.user.vesting_shares) -
-                                                    this.state.user
+                        (parseFloat(this.state.user.to_withdraw) -
-                                                        .vesting_shares
+                          parseFloat(this.state.user.withdrawn)) /
-                                                ) -
-                                                (parseFloat(
-                                                    this.state.user.to_withdraw
-                                                ) -
-                                                    parseFloat(
-                                                        this.state.user
-                                                            .withdrawn
-                                                    )) /
                           1e6 -
-                                                parseFloat(
+                        parseFloat(this.state.user.delegated_vesting_shares);
-                                                    this.state.user
-                                                        .delegated_vesting_shares
-                                                );
                       let vestSteem = parseFloat(
                         parseFloat(
-                                                    this.state.globalProps
+                          this.state.globalProps.total_vesting_fund_steem
-                                                        .total_vesting_fund_steem
                         ) *
-                                                    (parseFloat(
+                          (parseFloat(avail * this.state.value) /
-                                                        avail * this.state.value
-                                                    ) /
                             parseFloat(
-                                                            this.state
+                              this.state.globalProps.total_vesting_shares
-                                                                .globalProps
-                                                                .total_vesting_shares
                             )),
                         6
                       );
@@ -446,13 +406,10 @@ class WalletPage extends Component {
                       console.log(
                         (vestSteem * 1e6) /
                           (parseFloat(
-                                                        this.state.globalProps
+                            this.state.globalProps.total_vesting_fund_steem
-                                                            .total_vesting_fund_steem
                           ) /
                             (parseFloat(
-                                                            this.state
+                              this.state.globalProps.total_vesting_shares
-                                                                .globalProps
-                                                                .total_vesting_shares
                             ) /
                               1e6))
                       );
@@ -462,17 +419,13 @@ class WalletPage extends Component {
               />
               <Text>
                 Total Steem Power:{" "}
-                                {(parseInt(this.state.vestSteem) *
+                {(parseInt(this.state.vestSteem) * this.state.percent) / 100} SP
-                                    this.state.percent) /
-                                    100}{" "}
-                                SP
               </Text>
               <Text>
                 Estimated Weekly:{" "}
                 {Math.floor(
                   ((
-                                        (parseInt(this.state.vestSteem) *
+                    (parseInt(this.state.vestSteem) * this.state.percent) /
-                                            this.state.percent) /
                     100
                   ).toFixed(0) /
                     13) *
@@ -485,9 +438,7 @@ class WalletPage extends Component {
                 onPress={this.powerDownSteem}
                 style={{ margin: 10, alignSelf: "flex-end" }}
               >
-                                <Text style={{ color: "white" }}>
+                <Text style={{ color: "white" }}>Power Down</Text>
-                                    Power Down
-                                </Text>
               </Button>
             </View>
           </Card>

src/styles/feed.styles.js

@@ -1,7 +1,7 @@
-import { createStyle } from "react-native-theming";
+import EStyleSheet from "react-native-extended-stylesheet";
-import { StatusBar, Dimensions } from "react-native";
+import { StatusBar } from "react-native";
 
-const styles = createStyle({
+export default EStyleSheet.create({
   container: {
     backgroundColor: "#F9F9F9",
     flex: 1,
@@ -21,7 +21,7 @@ const styles = createStyle({
   },
   tabs: {
     position: "absolute",
-        top: Dimensions.get("window").width / 30,
+    top: "$deviceWidth / 30",
     alignItems: "center",
   },
   flatlistFooter: {
@@ -32,5 +32,3 @@ const styles = createStyle({
     borderColor: "#CED0CE",
   },
 });
-
-export default styles;

src/styles/formInput.styles.js

@@ -1,9 +1,6 @@
-import { createStyle } from "react-native-theming";
+import EStyleSheet from "react-native-extended-stylesheet";
-import { Dimensions } from "react-native";
 
-const deviceWidth = Dimensions.get("window").width;
+export default EStyleSheet.create({
-
-export default createStyle({
   container: {
     flex: 1,
     alignItems: "center",
@@ -13,6 +10,6 @@ export default createStyle({
     backgroundColor: "#f5f5f5",
     borderRadius: 5,
     padding: 15,
-        minWidth: deviceWidth / 2,
+    minWidth: "$deviceWidth / 2",
   },
 });

src/styles/home.styles.js

@@ -1,7 +1,6 @@
-import { createStyle } from "react-native-theming";
+import EStyleSheet from "react-native-extended-stylesheet";
-import { StatusBar, Dimensions } from "react-native";
 
-const styles = createStyle({
+export default EStyleSheet.create({
   container: {
     backgroundColor: "#F9F9F9",
     flex: 1,
@@ -50,12 +49,10 @@ const styles = createStyle({
     flex: 1,
     paddingHorizontal: 7,
     backgroundColor: "#f9f9f9",
-        minWidth: Dimensions.get("window").width,
+    minWidth: "$deviceWidth",
   },
   loginButton: {
     alignSelf: "center",
     marginTop: 100,
   },
 });
-
-export default styles;

src/styles/hot.styles.js

@@ -1,7 +1,6 @@
-import { createStyle } from "react-native-theming";
+import EStyleSheet from "react-native-extended-stylesheet";
-import { StatusBar, Dimensions } from "react-native";
+import { StatusBar } from "react-native";
-
+export default EStyleSheet.create({
-const styles = createStyle({
   container: {
     backgroundColor: "#F9F9F9",
     flex: 1,
@@ -21,7 +20,7 @@ const styles = createStyle({
   },
   tabs: {
     position: "absolute",
-        top: Dimensions.get("window").width / 30,
+    top: "$deviceWidth / 30",
     alignItems: "center",
   },
   flatlistFooter: {
@@ -32,5 +31,3 @@ const styles = createStyle({
     borderColor: "#CED0CE",
   },
 });
-
-export default styles;

src/styles/pinCode.styles.js

@@ -13,7 +13,7 @@ export default EStyleSheet.create({
     marginTop: "$deviceHeight / 8",
   },
   forgotButtonText: {
-    color: "#788187",
+    color: "$primaryGray",
     fontSize: 14,
     marginTop: 25,
     alignSelf: "center",

src/styles/themes.js

@@ -1,37 +0,0 @@
-import { createTheme } from 'react-native-theming';
-
-const fonts = {
-    FONT_SIZE_SMALL: '12',
-    FONT_SIZE_MEDIUM: '14',
-    FONT_SIZE_LARGE: '16',
-    FONT_WEIGHT_LIGHT: '200',
-    FONT_WEIGHT_MEDIUM: '600',
-    FONT_WEIGHT_HEAVY: '800',
-};
-
-const themes = [
-    createTheme(
-        {
-            backgroundColor: 'white',
-            textColor: 'black',
-            buttonColor: 'blue',
-            buttonText: 'white',
-            statusBar: 'dark-content',
-            fontSize: fonts.FONT_SIZE_MEDIUM,
-            fontWeight: fonts.FONT_WEIGHT_MEDIUM,
-        },
-        'Light'
-    ),
-    createTheme(
-        {
-            backgroundColor: 'black',
-            textColor: 'white',
-            buttonColor: 'yellow',
-            buttonText: 'black',
-            statusBar: 'light-content',
-            fontSize: fonts.FONT_SIZE_MEDIUM,
-            fontWeight: fonts.FONT_WEIGHT_MEDIUM,
-        },
-        'Dark'
-    ),
-];

src/utils/formatter.js

@@ -0,0 +1,27 @@
+// TODO: Move all formats functions here!
+
+// const imgRegex = /(https?:\/\/.*\.(?:tiff?|jpe?g|gif|png|svg|ico))/gim;
+// const postRegex = /^https?:\/\/(.*)\/(.*)\/(@[\w\.\d-]+)\/(.*)/i;
+// const youTubeRegex = /(?:https?:\/\/)?(?:www\.)?(?:youtube\.com\/watch\?v=|youtu\.be\/)([^& \n<]+)(?:[^ \n<]+)?/g;
+// const vimeoRegex = /(https?:\/\/)?(www\.)?(?:vimeo)\.com.*(?:videos|video|channels|)\/([\d]+)/i;
+// const dTubeRegex = /(https?:\/\/d.tube.#!\/v\/)(\w+)\/(\w+)/g;
+
+export const getPostSummary = (postBody, length) => {
+  if (!postBody) {
+    return "";
+  }
+
+  postBody = postBody
+    .replace(/(<([^>]+)>)/gi, "") // Remove html tags
+    .replace(/\r?\n|\r/g, " ") // Remove new lines
+    .replace(/(?:https?|ftp):\/\/[\n\S]+/g, "") // Remove urls
+    .trim()
+    .replace(/ +(?= )/g, ""); // Remove all multiple spaces
+
+  if (length) {
+    // Truncate
+    postBody = postBody.substring(0, length);
+  }
+
+  return postBody;
+};

src/utils/postParser.js

@@ -1,7 +1,7 @@
 import Remarkable from "remarkable";
-import { postSummary } from "./postSummary";
+import { getPostSummary } from "../utils/formatter";
-import { reputation } from "./reputation";
+import { getReputation } from "./reputation";
-import moment from "moment";
+import { getTimeFromNow } from "../utils/time";
 
 const md = new Remarkable({ html: true, breaks: true, linkify: true });
 
@@ -45,15 +45,7 @@ export const markDown2Html = input => {
 
   output = md.render(output);
 
-    /* eslint-disable */
+  // TODO: Implement Regex  --> Look at utls/formatter.js
-    const imgRegex = /(https?:\/\/.*\.(?:tiff?|jpe?g|gif|png|svg|ico))/gim;
-    const postRegex = /^https?:\/\/(.*)\/(.*)\/(@[\w\.\d-]+)\/(.*)/i;
-    const youTubeRegex = /(?:https?:\/\/)?(?:www\.)?(?:youtube\.com\/watch\?v=|youtu\.be\/)([^& \n<]+)(?:[^ \n<]+)?/g;
-    const vimeoRegex = /(https?:\/\/)?(www\.)?(?:vimeo)\.com.*(?:videos|video|channels|)\/([\d]+)/i;
-    const dTubeRegex = /(https?:\/\/d.tube.#!\/v\/)(\w+)\/(\w+)/g;
-    /* eslint-enable */
-
-    // TODO: Implement Regex
 
   return output;
 };
@@ -61,21 +53,16 @@ export const markDown2Html = input => {
 export const parsePosts = (posts, user) => {
   posts.map(post => {
     post.json_metadata = JSON.parse(post.json_metadata);
-        post.json_metadata.image
+    post.json_metadata.image ? (post.image = post.json_metadata.image[0]) : "";
-            ? (post.image = post.json_metadata.image[0])
+    post.pending_payout_value = parseFloat(post.pending_payout_value).toFixed(
-            : "";
+      2
-        post.pending_payout_value = parseFloat(
+    );
-            post.pending_payout_value
+    post.created = getTimeFromNow(post.created);
-        ).toFixed(2);
-        post.created = moment
-            .utc(post.created)
-            .local()
-            .fromNow();
     post.vote_count = post.active_votes.length;
-        post.author_reputation = reputation(post.author_reputation);
+    post.author_reputation = getReputation(post.author_reputation);
     post.avatar = `https://steemitimages.com/u/${post.author}/avatar/small`;
     post.body = markDown2Html(post.body);
-        post.summary = postSummary(post.body, 100);
+    post.summary = getPostSummary(post.body, 100);
     post.raw_body = post.body;
     post.active_votes.sort((a, b) => {
       return b.rshares - a.rshares;
@@ -100,7 +87,7 @@ export const parsePosts = (posts, user) => {
       post.active_votes[i].value = (
         post.active_votes[i].rshares * ratio
       ).toFixed(2);
-            post.active_votes[i].reputation = reputation(
+      post.active_votes[i].reputation = getReputation(
         post.active_votes[i].reputation
       );
       post.active_votes[i].percent = post.active_votes[i].percent / 100;
@@ -124,18 +111,13 @@ export const parsePosts = (posts, user) => {
 export const parsePost = post => {
   post.json_metadata = JSON.parse(post.json_metadata);
   post.json_metadata.image ? (post.image = post.json_metadata.image[0]) : "";
-    post.pending_payout_value = parseFloat(post.pending_payout_value).toFixed(
+  post.pending_payout_value = parseFloat(post.pending_payout_value).toFixed(2);
-        2
+  post.created = getTimeFromNow(post.created);
-    );
-    post.created = moment
-        .utc(post.created)
-        .local()
-        .fromNow();
   post.vote_count = post.active_votes.length;
-    post.author_reputation = reputation(post.author_reputation);
+  post.author_reputation = getReputation(post.author_reputation);
   post.avatar = `https://steemitimages.com/u/${post.author}/avatar/small`;
   post.body = markDown2Html(post.body);
-    post.summary = postSummary(post.body, 100);
+  post.summary = getPostSummary(post.body, 100);
   post.raw_body = post.body;
   post.active_votes.sort((a, b) => {
     return b.rshares - a.rshares;
@@ -152,10 +134,10 @@ export const parsePost = post => {
   let ratio = totalPayout / voteRshares;
 
   for (let i in post.active_votes) {
-        post.active_votes[i].value = (
+    post.active_votes[i].value = (post.active_votes[i].rshares * ratio).toFixed(
-            post.active_votes[i].rshares * ratio
+      2
-        ).toFixed(2);
+    );
-        post.active_votes[i].reputation = reputation(
+    post.active_votes[i].reputation = getReputation(
       post.active_votes[i].reputation
     );
     post.active_votes[i].percent = post.active_votes[i].percent / 100;
@@ -216,12 +198,9 @@ export const parseComments = comments => {
     comment.pending_payout_value = parseFloat(
       comment.pending_payout_value
     ).toFixed(2);
-        comment.created = moment
+    comment.created = getTimeFromNow(comment.created);
-            .utc(comment.created)
-            .local()
-            .fromNow();
     comment.vote_count = comment.active_votes.length;
-        comment.author_reputation = reputation(comment.author_reputation);
+    comment.author_reputation = getReputation(comment.author_reputation);
     comment.avatar = `https://steemitimages.com/u/${
       comment.author
     }/avatar/small`;

src/utils/postSummary.js

@@ -1,19 +0,0 @@
-export const postSummary = (postBody, length) => {
-    if (!postBody) {
-        return "";
-    }
-
-    postBody = postBody
-        .replace(/(<([^>]+)>)/gi, "") // Remove html tags
-        .replace(/\r?\n|\r/g, " ") // Remove new lines
-        .replace(/(?:https?|ftp):\/\/[\n\S]+/g, "") // Remove urls
-        .trim()
-        .replace(/ +(?= )/g, ""); // Remove all multiple spaces
-
-    if (length) {
-        // Truncate
-        postBody = postBody.substring(0, length);
-    }
-
-    return postBody;
-};

src/utils/reputation.js

@@ -1,18 +1,23 @@
-export const reputation = reputation => {
+export const getReputation = reputation => {
-    if (reputation == null) return reputation;
+  if (reputation === null) return reputation;
-    reputation = parseInt(reputation);
+
-    let rep = String(reputation);
+  let _reputation = String(parseInt(reputation));
-    const neg = rep.charAt(0) === "-";
+
-    rep = neg ? rep.substring(1) : rep;
+  const neg = _reputation.charAt(0) === "-";
-    const str = rep;
+  _reputation = neg ? _reputation.substring(1) : _reputation;
+
+  const str = _reputation;
   const leadingDigits = parseInt(str.substring(0, 4));
   const log = Math.log(leadingDigits) / Math.log(10);
   const n = str.length - 1;
   let out = n + (log - parseInt(log));
+
   if (isNaN(out)) out = 0;
+
   out = Math.max(out - 9, 0);
   out = (neg ? -1 : 1) * out;
   out = out * 9 + 25;
   out = parseInt(out);
+
   return out;
 };

src/utils/time.js

@@ -0,0 +1,10 @@
+import moment from "moment";
+
+export const getTimeFromNow = value => {
+  if (!value) return null;
+
+  return moment
+    .utc(value)
+    .local()
+    .fromNow();
+};