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

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);