created post button & sub button & new bottom navigation & some enhancment for navigation package

README.md

@@ -39,7 +39,7 @@ TODO
 
 1.  When you address an issue or a feature, make sure that there doesn't already exist a Trello card or a ISSUES ticket for this work item.
 
--   [Issues](https://github.com/esteemapp/esteem-mobile/issues)
+- [Issues](https://github.com/esteemapp/esteem-mobile/issues)
 
 2.  If the item already exists and is in progress, please remove the card or the issue you were assigned and leave a note that it is a duplicate.
     3.If the item is not being worked on, please make sure that you put the card or issue as "In Progress" and assign it to yourself so other developers know that you are working on it.
@@ -52,10 +52,10 @@ If you would like to have someone in particular review your work, leave your pat
 
 #### Who to assign your patch for review
 
--   [@feruzm](https://github.com/feruzm)
--   [@talhasch](https://github.com/talhasch)
--   [@mistikk](https://github.com/mistikk)
--   [@ue](https://github.com/ue)
+- [@feruzm](https://github.com/feruzm)
+- [@talhasch](https://github.com/talhasch)
+- [@mistikk](https://github.com/mistikk)
+- [@ue](https://github.com/ue)
 
 ### Patch Review Template
 
@@ -74,9 +74,9 @@ If you resolved a issue or something You have to whern you commit your pr commit
 
 #### Creating branch
 
--   For example if you want create branch for an issue should contain issue number (ex. #55)
--   Whats your interest put bugfix/your*branch_name or feature/your_branch_name*#issue_number
--   If you some changes for only config req config/your_branch_name
+- For example if you want create branch for an issue should contain issue number (ex. #55)
+- Whats your interest put bugfix/your*branch_name or feature/your_branch_name*#issue_number
+- If you some changes for only config req config/your_branch_name
 
 #### Commit messages
 
@@ -84,4 +84,4 @@ What ever you want number of commit. Before create push squash your all commit.
 
 #### Pushing
 
--   Make sure push your main branch (master)
+- Make sure push your main branch (master)

src/_EXAMPLES FOR DEVELOPERS/componentsScreens/example/container/exampleContainer.js

@@ -1,49 +0,0 @@
-import React, { Component } from "react";
-import { connect } from "react-redux";
-
-// Services and Actions
-
-// Middleware
-
-// Constants
-
-// Utilities
-
-// Component
-import { ExampleView } from "../..";
-
-/*
-*            Props Name        Description                                     Value
-*@props -->  props name here   description here                                Value Type Here
-*
-*/
-
-class ExampleContainer extends Component {
-  constructor(props) {
-    super(props);
-    this.state = {};
-  }
-
-  // Component Life Cycle Functions
-
-  // Component Functions
-
-  render() {
-    const {} = this.props;
-
-    return <ExampleView />;
-  }
-}
-
-const mapStateToProps = state => ({
-  user: state.user.user,
-});
-
-const mapDispatchToProps = (dispatch, ownProps) => ({
-  // onClick: () => dispatch(setVisibilityFilter(ownProps.filter))
-});
-
-export default connect(
-  mapStateToProps,
-  mapDispatchToProps
-)(ExampleContainer);

src/components/postButton/index.js

@@ -0,0 +1,4 @@
+import PostButton from './view/postButtonView';
+
+export { PostButton };
+export default PostButton;

src/components/postButton/view/postButtonStyles.js

@@ -0,0 +1,24 @@
+import EStyleSheet from 'react-native-extended-stylesheet';
+
+export default EStyleSheet.create({
+  subButton: {
+    position: 'absolute',
+    alignItems: 'center',
+    justifyContent: 'center',
+    alignSelf: 'center',
+    backgroundColor: '#357ce6',
+  },
+  subButtonWrapper: {
+    position: 'absolute',
+  },
+  postButtonWrapper: {
+    position: 'absolute',
+    alignItems: 'center',
+  },
+  postButtonIcon: {
+    bottom: 25,
+    backgroundColor: '#357ce6',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+});

src/components/postButton/view/postButtonView.js

@@ -0,0 +1,141 @@
+import React, { Component } from 'react';
+import {
+  Animated, Easing, TouchableOpacity, View,
+} from 'react-native';
+import Icon from 'react-native-vector-icons/FontAwesome';
+
+// Components
+import SubPostButton from './subPostButtonView';
+
+// Styles
+import styles from './postButtonStyles';
+
+const SIZE = 60;
+const durationIn = 300;
+const durationOut = 200;
+
+class PostButtonView extends Component {
+  mode = new Animated.Value(0);
+
+  icon1 = new Animated.Value(0);
+
+  icon2 = new Animated.Value(0);
+
+  icon3 = new Animated.Value(0);
+
+  toggleView = () => {
+    if (this.mode._value) {
+      Animated.parallel(
+        [this.mode, this.icon1, this.icon2, this.icon3].map(item => Animated.timing(item, {
+          toValue: 0,
+          duration: durationIn,
+          easing: Easing.cubic,
+        })),
+      ).start();
+    } else {
+      Animated.parallel([
+        Animated.timing(this.mode, {
+          toValue: 1,
+          duration: durationOut,
+          easing: Easing.cubic,
+        }),
+        Animated.sequence([
+          ...[this.icon1, this.icon2, this.icon3].map(item => Animated.timing(item, {
+            toValue: 1,
+            duration: durationOut,
+            easing: Easing.elastic(1),
+          })),
+        ]),
+      ]).start();
+    }
+  };
+
+  render() {
+    const firstX = this.icon1.interpolate({
+      inputRange: [0, 1],
+      outputRange: [20, -20],
+    });
+    const firstY = this.icon1.interpolate({
+      inputRange: [0, 1],
+      outputRange: [0, -50],
+    });
+    const secondX = this.icon2.interpolate({
+      inputRange: [0, 1],
+      outputRange: [20, 30],
+    });
+    const secondY = this.icon2.interpolate({
+      inputRange: [0, 1],
+      outputRange: [0, -80],
+    });
+    const thirdX = this.icon3.interpolate({
+      inputRange: [0, 1],
+      outputRange: [20, 80],
+    });
+    const thirdY = this.icon3.interpolate({
+      inputRange: [0, 1],
+      outputRange: [0, -50],
+    });
+
+    const rotation = this.mode.interpolate({
+      inputRange: [0, 1],
+      outputRange: ['0deg', '45deg'],
+    });
+
+    // const bluring = this.mode.interpolate({
+    //   inputRange: [0, 1],
+    //   outputRange: [10, 5],
+    // });
+
+    // const blurin2 = this.mode.interpolate({
+    //   inputRange: [0, 1],
+    //   outputRange: [0, -20],
+    // });
+
+    return (
+      <View style={styles.postButtonWrapper}>
+        <SubPostButton
+          size={SIZE}
+          style={{
+            left: firstX,
+            top: firstY,
+          }}
+          icon="camera"
+        />
+        <SubPostButton
+          size={SIZE}
+          style={{
+            left: secondX,
+            top: secondY,
+          }}
+          icon="pencil"
+        />
+        <SubPostButton
+          size={SIZE}
+          style={{
+            left: thirdX,
+            top: thirdY,
+          }}
+          icon="video-camera"
+        />
+
+        <TouchableOpacity onPress={this.toggleView} activeOpacity={1}>
+          <Animated.View
+            style={[
+              styles.postButtonIcon,
+              {
+                transform: [{ rotate: rotation }],
+                width: SIZE,
+                height: SIZE,
+                borderRadius: SIZE / 2,
+              },
+            ]}
+          >
+            <Icon name="plus" size={22} color="#F8F8F8" />
+          </Animated.View>
+        </TouchableOpacity>
+      </View>
+    );
+  }
+}
+
+export default PostButtonView;

src/components/postButton/view/subPostButtonView.js

@@ -0,0 +1,44 @@
+import React from 'react';
+import { Animated, TouchableHighlight } from 'react-native';
+import Icon from 'react-native-vector-icons/FontAwesome';
+
+// Styles
+import styles from './postButtonStyles';
+
+/* Props
+  * ------------------------------------------------
+  *   @prop { type }    size                 - Description....
+  *   @prop { type }    onPress              - Description....
+  *   @prop { type }    style                - Description....
+  *   @prop { type }    icon                 - Description....
+  *
+  */
+
+const SubPostButton = ({
+  style, icon, onPress, size,
+}) => (
+  <Animated.View
+    style={[
+      styles.subButtonWrapper,
+      {
+        ...style,
+      },
+    ]}
+  >
+    <TouchableHighlight
+      onPress={() => onPress && onPress()}
+      style={[
+        styles.subButton,
+        {
+          width: size / 2,
+          height: size / 2,
+          borderRadius: size / 4,
+        },
+      ]}
+    >
+      <Icon name={icon} size={14} color="#F8F8F8" />
+    </TouchableHighlight>
+  </Animated.View>
+);
+
+export default SubPostButton;

src/components/search/search.js

@@ -9,7 +9,7 @@ import {
   ActivityIndicator,
 } from 'react-native';
 import Ionicons from 'react-native-vector-icons/Ionicons';
-import { Navigation } from 'react-native-navigation';
+// import { Navigation } from 'react-native-navigation';
 import { lookupAccounts } from '../../providers/steem/dsteem';
 import { SEARCH_API_TOKEN } from '../../../config';
 
@@ -27,7 +27,7 @@ export default class Search extends Component {
   }
 
   closeSearch = () => {
-    Navigation.dismissOverlay(this.props.componentId);
+    // Navigation.dismissOverlay(this.props.componentId);
   };
 
   handleSearch = async (text) => {
@@ -184,9 +184,7 @@ export default class Search extends Component {
                 >
                   <Image
                     source={{
-                      uri: `https://steemitimages.com/u/${
-                        item.author
-                      }/avatar/small`,
+                      uri: `https://steemitimages.com/u/${item.author}/avatar/small`,
                     }}
                     style={{
                       width: 40,

src/config/routes.js

@@ -1,6 +1,7 @@
 import { createStackNavigator } from 'react-navigation';
+import { BaseNavigator } from '../navigation';
 
-import { Home, Splash } from '../screens';
+import { Splash } from '../screens';
 
 export default createStackNavigator({
   SplashScreen: {
@@ -10,9 +11,10 @@ export default createStackNavigator({
     },
   },
   HomeScreen: {
-    screen: Home,
+    screen: BaseNavigator,
     navigationOptions: {
       header: () => null,
+      gesturesEnabled: false,
     },
   },
 });

src/index.js

@@ -5,6 +5,7 @@ import { Provider } from 'react-redux';
 import EStyleSheet from 'react-native-extended-stylesheet';
 import store from './redux/store/store';
 import { ReduxNavigation } from './config/reduxNavigation';
+import { BaseNavigator } from './navigation';
 
 // STYLE
 

src/navigation/baseNavigator.js

@@ -0,0 +1,71 @@
+import React from 'react';
+import { createBottomTabNavigator } from 'react-navigation';
+import Icon from 'react-native-vector-icons/FontAwesome';
+import Home from '../screens/home/home';
+import { Notification } from '../screens/notification';
+import AuthorProfile from '../screens/authorProfile';
+import Wallet from '../screens/home/home';
+
+import { PostButton } from '../components/postButton';
+
+const BaseNavigator = createBottomTabNavigator(
+  {
+    Home: {
+      screen: Home,
+      navigationOptions: () => ({
+        tabBarIcon: ({ tintColor }) => <Icon name="list" color={tintColor} size={18} />,
+      }),
+    },
+    Notification: {
+      screen: Notification,
+      navigationOptions: () => ({
+        tabBarIcon: ({ tintColor }) => <Icon name="bell-o" color={tintColor} size={18} />,
+      }),
+    },
+    PostButton: {
+      screen: () => null,
+      navigationOptions: () => ({
+        tabBarIcon: <PostButton />,
+      }),
+    },
+    AuthorProfile: {
+      screen: AuthorProfile,
+      navigationOptions: () => ({
+        tabBarIcon: ({ tintColor }) => <Icon name="envelope-o" color={tintColor} size={18} />,
+      }),
+    },
+    Wallet: {
+      screen: Wallet,
+      navigationOptions: () => ({
+        tabBarIcon: ({ tintColor }) => <Icon name="credit-card" color={tintColor} size={18} />,
+      }),
+    },
+  },
+  {
+    tabBarOptions: {
+      showLabel: false,
+      activeTintColor: '#357ce6',
+      inactiveTintColor: '#c1c5c7',
+      style: {
+        backgroundColor: '#fff',
+        height: 56,
+        borderWidth: 0.1,
+        shadowColor: '#b0b0b0',
+        shadowOffset: { height: 0 },
+        shadowOpacity: 0.5,
+      },
+      tabStyle: {},
+    },
+  },
+);
+
+// const defaultGetStateForAction = BaseNavigator.router.getStateForAction;
+
+// BaseNavigator.router.getStateForAction = (action, state) => {
+//     if (action.type === NavigationActions.NAVIGATE && action.routeName === 'Adding') {
+//         return null;
+//     }
+//
+//     return defaultGetStateForAction(action, state);
+// };
+export { BaseNavigator };

src/navigation/index.js

@@ -0,0 +1 @@
+export * from './baseNavigator';

src/screens/authorProfile/screen/authorScreen.js

@@ -13,7 +13,7 @@ import {
   View,
 } from 'native-base';
 import ScrollableTabView from '@esteemapp/react-native-scrollable-tab-view';
-import { Navigation } from 'react-native-navigation';
+//import { Navigation } from 'react-native-navigation';
 import FastImage from 'react-native-fast-image';
 
 // Internal Components
@@ -67,7 +67,7 @@ class AuthorScreen extends Component {
 
   constructor(props) {
     super(props);
-    Navigation.events().bindComponent(this);
+    //Navigation.events().bindComponent(this);
     this.getBlog = this.getBlog.bind(this);
     this.getMore = this.getMore.bind(this);
     this.getComments = this.getComments.bind(this);
@@ -94,7 +94,7 @@ class AuthorScreen extends Component {
 
   async componentDidMount() {
     BackHandler.addEventListener('hardwareBackPress', () => {
-      Navigation.pop(this.props.componentId);
+//      Navigation.pop(this.props.componentId);
       return true;
     });
     /* for (var i = 0; i < themes.length; i++) {
@@ -307,7 +307,7 @@ class AuthorScreen extends Component {
   navigationButtonPressed({ buttonId }) {
     // will be called when "buttonOne" is clicked
     if (buttonId === 'back') {
-      Navigation.pop(this.props.componentId);
+      //Navigation.pop(this.props.componentId);
     }
   }
 

src/screens/home/home.js

@@ -27,28 +27,31 @@ import FeedPage from './feed';
 import TrendingPage from './trending';
 
 export default class Home extends React.PureComponent {
-  static get options() {
-    return {
-      _statusBar: {
-        visible: true,
-        drawBehind: false,
-      },
-      topBar: {
-        animate: true,
-        hideOnScroll: true,
-        drawBehind: false,
-        noBorder: true,
-        elevation: 0,
-      },
-      layout: {
-        backgroundColor: '#f5fcff',
-      },
-      bottomTabs: {
-        visible: true,
-        drawBehind: true,
-      },
-    };
-  }
+  static navigationOptions = {
+    title: 'Home',
+  };
+  // static get options() {
+  //   return {
+  //     _statusBar: {
+  //       visible: true,
+  //       drawBehind: false,
+  //     },
+  //     topBar: {
+  //       animate: true,
+  //       hideOnScroll: true,
+  //       drawBehind: false,
+  //       noBorder: true,
+  //       elevation: 0,
+  //     },
+  //     layout: {
+  //       backgroundColor: '#f5fcff',
+  //     },
+  //     bottomTabs: {
+  //       visible: true,
+  //       drawBehind: true,
+  //     },
+  //   };
+  // }
 
   constructor(props) {
     super(props);