ecency/ecency-mobile
1
1
Fork 0
mirror of https://github.com/ecency/ecency-mobile.git synced 2024-11-27 03:14:56 +03:00
Code Issues Actions Packages Projects Releases Wiki Activity

Merge pull request #26 from esteemapp/enhancement/esstylesheet

Browse Source 
Added ESStyleSheet & created global styles, convert styles, created components created containers..
This commit is contained in:
Feruz M 2018-09-26 14:25:22 +03:00 committed by GitHub
commit 72f2d4ea8e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
46 changed files with 3227 additions and 2629 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4508
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

1
package.json
View File

@ -22,6 +22,7 @@
"native-base": "^2.8.0",
"react": "16.4.1",
"react-native": "0.56.0",
"react-native-extended-stylesheet": "^0.10.0",
"react-native-fast-image": "^4.0.14",
"react-native-html-renderer": "^1.0.0",
"react-native-markdown-editor": "^1.0.1",

2
src/_EXAMPLES FOR DEVELOPERS/components-screens/example/example.container.js → src/_EXAMPLES FOR DEVELOPERS/componentsScreens/example/container/exampleContainer.js
View File

@ -10,7 +10,7 @@ import { connect } from "react-redux";
// Utilities
// Component
import { ExampleView } from "../";
import { ExampleView } from "../..";
/*
* Props Name Description Value

0
src/_EXAMPLES FOR DEVELOPERS/components-screens/example/index.js → src/_EXAMPLES FOR DEVELOPERS/componentsScreens/example/index.js
View File

0
src/_EXAMPLES FOR DEVELOPERS/components-screens/example/example.view.js → src/_EXAMPLES FOR DEVELOPERS/componentsScreens/example/screen/exampleScreen.js
View File

3
src/_EXAMPLES FOR DEVELOPERS/componentsScreens/example/screen/exampleStyles.js Normal file
View File

@ -0,0 +1,3 @@
import EStyleSheet from "react-native-extended-stylesheet";
export default EStyleSheet.create({});

0
src/_EXAMPLES FOR DEVELOPERS/components-screens/index.js → src/_EXAMPLES FOR DEVELOPERS/componentsScreens/index.js
View File

5
src/components/logo/logo.js
View File

@ -2,10 +2,13 @@ import React from "react";
import { View, Image } from "react-native";
import LOGO from "../../assets/esteem.png";
// Styles
import styles from "../../styles/logo.styles";
import globalStyles from "../../globalStyles";
const Logo = props => (
<View style={styles.container}>
<View style={globalStyles.container}>
<Image
source={props.source ? props.source : LOGO}
style={[styles.logo, props.style]}

4
src/components/tabBar/index.js Normal file
View File

@ -0,0 +1,4 @@
import TabBar from "./view/tabBarView";
export { TabBar };
export default TabBar;

23
src/components/tabBar/view/tabBarStyles.js Normal file
View File

@ -0,0 +1,23 @@
import EStyleSheet from "react-native-extended-stylesheet";
export default EStyleSheet.create({
tab: {
flex: 1,
alignItems: "center",
justifyContent: "center",
},
tabs: {
height: 50,
flexDirection: "row",
justifyContent: "space-around",
borderWidth: 1,
borderTopWidth: 0,
borderLeftWidth: 0,
borderRightWidth: 0,
borderColor: "#f4f4f4",
},
tabButton: {
flex: 1,
},
tabButtonText: {},
});

107
src/screens/home/customTab.js → src/components/tabBar/view/tabBarView.js
View File

@ -1,7 +1,5 @@
/* eslint-disable no-unused-vars */
import React, { Component } from "react";
import {
StyleSheet,
Text,
View,
Animated,
@ -10,31 +8,34 @@ import {
Platform,
Dimensions,
} from "react-native";
/* eslint-enable no-unused-vars */
export default class CustomTabBar extends Component {
// Styles
import styles from "./tabBarStyles";
export default class TabBar extends Component {
/* Props
* ------------------------------------------------ TODO: Fill fallowlines
* @prop { type } name - Description.
* @prop { type } name - Description.
*
*/
constructor(props) {
super(props);
this.state = {
activeDefaultColor: "#08086b",
inactiveDefaultColor: "#666666",
};
this.state = {};
}
_renderTab(name, page, isTabActive, onPressHandler) {
const { textStyle } = this.props;
const textColor = isTabActive
? this.props.activeColor
: this.props.inactiveColor;
_renderTab = (name, page, isTabActive, onPressHandler) => {
const { activeColor, inactiveColor } = this.props;
const textColor = isTabActive ? activeColor : inactiveColor;
const fontWeight = isTabActive ? "bold" : "normal";
const Button = Platform.OS == "ios" ? ButtonIos : ButtonAndroid;
// TODO: make generic component!!
return (
<Button
style={{ flex: 1 }}
style={styles.tabButton}
key={name}
accessible={true}
accessibilityLabel={name}
@ -48,36 +49,43 @@ export default class CustomTabBar extends Component {
</View>
</Button>
);
}
};
_renderUnderline() {
const containerWidth = Dimensions.get("window").width / 1;
const numberOfTabs = this.props.tabs.length;
const underlineWidth = this.props.tabUnderlineDefaultWidth
? this.props.tabUnderlineDefaultWidth
: containerWidth / (numberOfTabs * 2);
const scale = this.props.tabUnderlineScaleX
? this.props.tabUnderlineScaleX
: 2;
_renderUnderline = () => {
const {
activeColor,
tabs,
tabUnderlineDefaultWidth,
tabUnderlineScaleX,
scrollValue,
underlineStyle,
} = this.props;
const containerWidth = Dimensions.get("window").width;
const numberOfTabs = tabs.length;
const underlineWidth =
tabUnderlineDefaultWidth || containerWidth / (numberOfTabs * 2);
const scale = tabUnderlineScaleX || 2;
const deLen = (containerWidth / numberOfTabs - underlineWidth) / 2;
const tabUnderlineStyle = {
position: "absolute",
width: underlineWidth,
height: 2,
borderRadius: 2,
backgroundColor: this.props.activeColor,
backgroundColor: activeColor,
bottom: 0,
left: deLen,
};
const translateX = this.props.scrollValue.interpolate({
const translateX = scrollValue.interpolate({
inputRange: [0, 1],
outputRange: [0, containerWidth / numberOfTabs],
});
const scaleValue = defaultScale => {
let number = 4;
let arr = new Array(number * 2);
const number = 4;
const arr = new Array(number * 2);
return arr.fill(0).reduce(
function(pre, cur, idx) {
idx == 0
@ -92,7 +100,7 @@ export default class CustomTabBar extends Component {
);
};
const scaleX = this.props.scrollValue.interpolate(scaleValue(scale));
const scaleX = scrollValue.interpolate(scaleValue(scale));
return (
<Animated.View
@ -101,29 +109,26 @@ export default class CustomTabBar extends Component {
{
transform: [{ translateX }, { scaleX }],
},
this.props.underlineStyle,
underlineStyle,
]}
/>
);
}
};
render() {
const { activeTab, backgroundColor, goToPage, style } = this.props;
return (
<View
style={[
styles.tabs,
{ backgroundColor: this.props.backgroundColor },
this.props.style,
{ backgroundColor: backgroundColor },
style,
]}
>
{this.props.tabs.map((name, page) => {
const isTabActive = this.props.activeTab === page;
return this._renderTab(
name,
page,
isTabActive,
this.props.goToPage
);
const isTabActive = activeTab === page;
return this._renderTab(name, page, isTabActive, goToPage);
})}
{this._renderUnderline()}
</View>
@ -144,21 +149,3 @@ const ButtonAndroid = props => (
const ButtonIos = props => (
<TouchableOpacity {...props}>{props.children}</TouchableOpacity>
);
const styles = StyleSheet.create({
tab: {
flex: 1,
alignItems: "center",
justifyContent: "center",
},
tabs: {
height: 50,
flexDirection: "row",
justifyContent: "space-around",
borderWidth: 1,
borderTopWidth: 0,
borderLeftWidth: 0,
borderRightWidth: 0,
borderColor: "#f4f4f4",
},
});

47
src/globalStyles.js Normal file
View File

@ -0,0 +1,47 @@
import EStyleSheet from "react-native-extended-stylesheet";
export default EStyleSheet.create({
container: {
flex: 1,
alignItems: "center",
justifyContent: "center",
},
title: {},
text: {
fontFamily: "$primaryFont",
letterSpacing: "$primaryLatterSpacing",
},
subTitle: {
fontFamily: "$primaryFont",
letterSpacing: "$primaryLatterSpacing",
},
subText: {
fontFamily: "$primaryFont",
letterSpacing: "$primaryLatterSpacing",
},
shadow: {
shadowOpacity: 0.8,
shadowColor: "$shadowColor",
shadowOffset: {
width: 0,
height: 6,
},
},
errorText: {
fontFamily: "$primaryFont",
letterSpacing: "$primaryLatterSpacing",
width: "$deviceWidth / 1.4",
fontSize: 10,
padding: 5,
height: 50,
flex: 1,
color: "#ff1954",
paddingTop: 10,
textAlign: "center",
},
label: {
fontFamily: "$primaryFont",
letterSpacing: "$primaryLatterSpacing",
fontSize: 12,
},
});

33
src/index.js
View File

@ -1,5 +1,38 @@
import { Navigation } from "react-native-navigation";
import { registerScreens } from "./screens";
import { StatusBar, Dimensions } from "react-native";
// STYLE
import EStyleSheet from "react-native-extended-stylesheet";
EStyleSheet.build({
// Primary Colors
$white: "#FFFFFF",
$black: "#000000",
$primaryBlue: "#357ce6",
$primaryGray: "#788187",
$primaryLightGray: "#f6f6f6",
$primaryRed: "#e63535",
// General Colors
$borderColor: "#ffff",
$bubblesBlue: "#5CCDFF",
$iconColor: "#c1c5c7",
$dangerColor: "#fff",
$warningColor: "#fff",
$successColor: "#fff",
$disableButton: "#fff",
$shadowColor: "#fff",
$disableGray: "#fff",
// Devices Sizes
$deviceHeight: Dimensions.get("window").height,
$deviceWidth: Dimensions.get("window").width,
// Fonts Properties
$primaryFont: "Roboto",
$primaryLatterSpacing: 0,
});
registerScreens();

27
src/screens/authorProfile/container/authorContainer.js Normal file
View File

@ -0,0 +1,27 @@
import React, { Component } from "react";
// Constants
// Components
import { AuthorScreen } from "../";
/*
* Props Name Description Value
*@props --> props name here description here Value Type Here
*
*/
class AuthorContainer extends Component {
constructor(props) {
super(props);
this.state = {};
}
// Component Life Cycles
// Component Functions
render() {
return <AuthorScreen {...this.props} />;
}
}
export default AuthorContainer;

5
src/screens/authorProfile/index.js Normal file
View File

@ -0,0 +1,5 @@
import AuthorScreen from "./screen/authorScreen";
import Author from "./container/authorContainer";
export { AuthorScreen, Author };
export default Author;

58
src/screens/author-profile/author.js → src/screens/authorProfile/screen/authorScreen.js
View File

@ -1,38 +1,35 @@
import React from "react";
import {
StatusBar,
Dimensions,
FlatList,
ActivityIndicator,
BackHandler,
} from "react-native";
import React, { Component } from "react";
import { FlatList, ActivityIndicator, BackHandler } from "react-native";
// External Components
import {
Container,
Card,
CardItem,
Header,
Left,
Body,
Right,
Button,
Icon,
Title,
Content,
Text,
View,
} from "native-base";
import ScrollableTabView from "@esteemapp/react-native-scrollable-tab-view";
import CustomTabBar from "../home/customTab";
import PostCard from "../../components/post-card/postCard";
import Comment from "../../components/comment/comment";
import moment from "moment";
import FastImage from "react-native-fast-image";
//import Icon from "react-native-vector-icons/FontAwesome";
import { Navigation } from "react-native-navigation";
import FastImage from "react-native-fast-image";
import Theme, { createThemedComponent } from "react-native-theming";
import styles from "../../styles/author.styles";
import themes from "../../styles/themes";
// Internal Components
import { TabBar } from "../../../components/tabBar";
import PostCard from "../../../components/post-card/postCard";
import Comment from "../../../components/comment/comment";
// TODO: Make utils for all using moment.
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,
@ -40,15 +37,12 @@ import {
getPosts,
getUserComments,
getUser,
getFollowers,
isFolllowing,
} from "../../providers/steem/dsteem";
import { getAuthStatus, getUserData } from "../../realm/realm";
import { decryptKey } from "../../utils/crypto";
} from "../../../providers/steem/dsteem";
import { getAuthStatus, getUserData } from "../../../realm/realm";
import { decryptKey } from "../../../utils/crypto";
const Bar = createThemedComponent(StatusBar, ["barStyle", "backgroundColor"]);
class AuthorPage extends React.Component {
class AuthorScreen extends Component {
static get options() {
return {
_statusBar: {
@ -61,7 +55,7 @@ class AuthorPage extends React.Component {
drawBehind: false,
leftButtons: {
id: "back",
icon: require("../../assets/back.png"),
icon: require("../../../assets/back.png"),
},
},
layout: {
@ -449,7 +443,7 @@ class AuthorPage extends React.Component {
style={styles.tabs}
style={{ flex: 1 }}
renderTabBar={() => (
<CustomTabBar
<TabBar
style={styles.tabbar}
tabUnderlineDefaultWidth={30} // default containerWidth / (numberOfTabs * 4)
tabUnderlineScaleX={3} // default 3
@ -546,4 +540,4 @@ class AuthorPage extends React.Component {
}
}
export default AuthorPage;
export default AuthorScreen;

12
src/styles/author.styles.js → src/screens/authorProfile/screen/authorStyles.js
View File

@ -1,7 +1,7 @@
import { createStyle } from "react-native-theming";
import { StatusBar, Dimensions } from "react-native";
import EStyleSheet from "react-native-extended-stylesheet";
import { StatusBar } from "react-native";
const styles = createStyle({
export default EStyleSheet.create({
container: {
flex: 1,
top: StatusBar.currentHeight,
@ -10,7 +10,7 @@ const styles = createStyle({
backgroundColor: "#f9f9f9",
},
cover: {
width: Dimensions.get("window").width,
width: "$deviceWidth",
height: 160,
},
avatar: {
@ -45,8 +45,6 @@ const styles = createStyle({
flex: 1,
paddingHorizontal: 7,
backgroundColor: "#f9f9f9",
minWidth: Dimensions.get("window").width / 1,
minWidth: "$deviceWidth",
},
});
export default styles;

7
src/screens/home/home.js
View File

@ -3,7 +3,8 @@ import { Text, View, Dimensions, TouchableOpacity } from "react-native";
import { Navigation } from "react-native-navigation";
import ScrollableTabView from "@esteemapp/react-native-scrollable-tab-view";
import CustomTabBar from "./customTab";
import TabBar from "../../components/tabBar";
import Ionicons from "react-native-vector-icons/Ionicons";
import FastImage from "react-native-fast-image";
@ -113,7 +114,7 @@ export default class Home extends React.PureComponent {
<ScrollableTabView
style={styles.tabView}
renderTabBar={() => (
<CustomTabBar
<TabBar
style={styles.tabbar}
tabUnderlineDefaultWidth={80} // default containerWidth / (numberOfTabs * 4)
tabUnderlineScaleX={2} // default 3
@ -178,7 +179,7 @@ const styles = {
flex: 1,
paddingHorizontal: 7,
backgroundColor: "#f9f9f9",
minWidth: Dimensions.get("window").width / 1,
minWidth: Dimensions.get("window").width,
},
container: {
backgroundColor: "#F9F9F9",

1
src/screens/home/hot.js
View File

@ -22,7 +22,6 @@ import Placeholder from "rn-placeholder";
import PostCard from "../../components/post-card/postCard";
// SCREENS
import PostPage from "../../screens/single-post/post";
/* eslint-enable no-unused-vars */
class HotPage extends React.Component {

1
src/screens/home/trending.js
View File

@ -12,7 +12,6 @@ import Placeholder from "rn-placeholder";
import PostCard from "../../components/post-card/postCard";
// SCREENS
import PostPage from "../single-post/post";
/* eslint-enable no-unused-vars */
class TrendingPage extends React.Component {

142
src/screens/index.js
View File

@ -1,141 +1,5 @@
import { Provider } from "react-redux";
import { Navigation } from "react-native-navigation";
import { registerScreens } from "./registerScreens";
import store from "../redux/store/store";
// TODO: All screen gonna import and export from here
// SCREENS
import Splash from "./splash/splashContainer";
import SideMenu from "./sideMenuScreen";
import Home from "./home/home";
import Hot from "./home/hot";
import Feed from "./home/feed";
import Post from "./single-post/post";
import Profile from "./profile/profile";
import Author from "./author-profile/author";
import Login from "./login/login";
import Wallet from "./wallet/wallet";
import Editor from "./editor/editor";
import Discover from "./discover/discover";
import Settings from "./settings/settings";
import Notifications from "./notifications/notification";
import PinCode from "./pinCode/pinCodeContainer";
// COMPONENTS
import SteemConnect from "./steem-connect/steemConnect";
import PostCard from "../components/post-card/postCard";
import Search from "../components/search/search";
function registerScreens() {
Navigation.registerComponentWithRedux(
"navigation.eSteem.Splash",
() => Splash,
Provider,
store
);
Navigation.registerComponentWithRedux(
"navigation.eSteem.Home",
() => Home,
Provider,
store
);
Navigation.registerComponentWithRedux(
"navigation.eSteem.Hot",
() => Hot,
Provider,
store
);
Navigation.registerComponentWithRedux(
"navigation.eSteem.Feed",
() => Feed,
Provider,
store
);
Navigation.registerComponentWithRedux(
"navigation.eSteem.Post",
() => Post,
Provider,
store
);
Navigation.registerComponentWithRedux(
"navigation.eSteem.Login",
() => Login,
Provider,
store
);
Navigation.registerComponentWithRedux(
"navigation.eSteem.Wallet",
() => Wallet,
Provider,
store
);
Navigation.registerComponentWithRedux(
"navigation.eSteem.Editor",
() => Editor,
Provider,
store
);
Navigation.registerComponentWithRedux(
"navigation.eSteem.Discover",
() => Discover,
Provider,
store
);
Navigation.registerComponentWithRedux(
"navigation.eSteem.Settings",
() => Settings,
Provider,
store
);
Navigation.registerComponentWithRedux(
"navigation.eSteem.Notifications",
() => Notifications,
Provider,
store
);
Navigation.registerComponentWithRedux(
"navigation.eSteem.SideMenuScreen",
() => SideMenu,
Provider,
store
);
Navigation.registerComponentWithRedux(
"navigation.eSteem.Profile",
() => Profile,
Provider,
store
);
Navigation.registerComponentWithRedux(
"navigation.eSteem.Author",
() => Author,
Provider,
store
);
Navigation.registerComponentWithRedux(
"navigation.eSteem.PostCard",
() => PostCard,
Provider,
store
);
Navigation.registerComponentWithRedux(
"navigation.eSteem.Search",
() => Search,
Provider,
store
);
Navigation.registerComponentWithRedux(
"navigation.eSteem.PinCode",
() => PinCode,
Provider,
store
);
Navigation.registerComponentWithRedux(
"navigation.eSteem.SteemConnect",
() => SteemConnect,
Provider,
store
);
}
module.exports = {
registerScreens,
};
export { registerScreens };

40
src/screens/login/container/loginContainer.js Normal file
View File

@ -0,0 +1,40 @@
import React, { Component } from "react";
import { connect } from "react-redux";
// Services and Actions
// Middleware
// Constants
// Utilities
// Component
import { LoginScreen } from "../";
/*
* Props Name Description Value
*@props --> props name here description here Value Type Here
*
*/
class LoginContainer extends Component {
constructor(props) {
super(props);
this.state = {};
}
// Component Life Cycle Functions
// Component Functions
render() {
return <LoginScreen {...this.props} />;
}
}
const mapStateToProps = state => ({
account: state.accounts,
});
export default connect(mapStateToProps)(LoginContainer);

5
src/screens/login/index.js Normal file
View File

@ -0,0 +1,5 @@
import LoginScreen from "./screen/loginScreen";
import Login from "./container/loginContainer";
export { LoginScreen, Login };
export default Login;

72
src/screens/login/login.js → src/screens/login/screen/loginScreen.js
View File

@ -3,9 +3,7 @@ import {
View,
ActivityIndicator,
Text,
StyleSheet,
Image,
Dimensions,
TouchableOpacity,
TextInput,
BackHandler,
@ -13,21 +11,22 @@ import {
} from "react-native";
import { Navigation } from "react-native-navigation";
import { connect } from "react-redux";
import Ionicons from "react-native-vector-icons/Ionicons";
import FastImage from "react-native-fast-image";
import Tabs from "../home/customTab";
import { TabBar } from "../../../components/tabBar";
import ScrollableTabView from "@esteemapp/react-native-scrollable-tab-view";
import { Login } from "../../providers/steem/auth";
import { Login } from "../../../providers/steem/auth";
import { addNewAccount } from "../../redux/actions/accountAction";
import { addNewAccount } from "../../../redux/actions/accountAction";
import { default as INITIAL } from "../../constants/initial";
import { lookupAccounts } from "../../providers/steem/dsteem";
import { goToAuthScreens } from "../../navigation";
import { lookupAccounts } from "../../../providers/steem/dsteem";
import { goToAuthScreens } from "../../../navigation";
class LoginPage extends Component {
// Styles
import styles from "./loginStyles";
class LoginScreen extends Component {
static get options() {
return {
_statusBar: {
@ -156,7 +155,7 @@ class LoginPage extends Component {
<ScrollableTabView
style={styles.tabView}
renderTabBar={() => (
<Tabs
<TabBar
style={styles.tabbar}
tabUnderlineDefaultWidth={100} // default containerWidth / (numberOfTabs * 4)
tabUnderlineScaleX={2} // default 3
@ -466,7 +465,7 @@ class LoginPage extends Component {
left: 55,
top: 10,
}}
source={require("../../assets/love_mascot.png")}
source={require("../../../assets/love_mascot.png")}
/>
</View>
</View>
@ -551,52 +550,5 @@ class LoginPage extends Component {
);
}
}
const styles = StyleSheet.create({
container: {
margin: 0,
padding: 0,
backgroundColor: "#f1f1f1",
flexDirection: "column",
},
header: {
flexDirection: "row",
padding: 0,
backgroundColor: "white",
marginBottom: 10,
height: 200,
flex: 0.4,
},
footer: {
flex: 0.2,
bottom: 0,
marginTop: 10,
height: 80,
backgroundColor: "white",
flexDirection: "row",
},
tabView: {
alignSelf: "center",
backgroundColor: "transparent",
},
tabbar: {
alignSelf: "center",
height: 40,
backgroundColor: "white",
},
tabbarItem: {
flex: 1,
backgroundColor: "#ffffff",
minWidth: Dimensions.get("window").width / 1,
},
steemConnectTab: {
flex: 1,
backgroundColor: "#e9e9e9",
minWidth: Dimensions.get("window").width / 1,
},
});
const mapStateToProps = state => ({
account: state.accounts,
});
export default connect(mapStateToProps)(LoginPage);
export default LoginScreen;

45
src/screens/login/screen/loginStyles.js Normal file
View File

@ -0,0 +1,45 @@
import EStyleSheet from "react-native-extended-stylesheet";
export default EStyleSheet.create({
container: {
margin: 0,
padding: 0,
backgroundColor: "#f1f1f1",
flexDirection: "column",
},
header: {
flexDirection: "row",
padding: 0,
backgroundColor: "white",
marginBottom: 10,
height: 200,
flex: 0.4,
},
footer: {
flex: 0.2,
bottom: 0,
marginTop: 10,
height: 80,
backgroundColor: "white",
flexDirection: "row",
},
tabView: {
alignSelf: "center",
backgroundColor: "transparent",
},
tabbar: {
alignSelf: "center",
height: 40,
backgroundColor: "white",
},
tabbarItem: {
flex: 1,
backgroundColor: "#ffffff",
minWidth: "$deviceWidth",
},
steemConnectTab: {
flex: 1,
backgroundColor: "#e9e9e9",
minWidth: "$deviceWidth",
},
});

16
src/screens/notification/container/notificationContainer.js Normal file
View File

@ -0,0 +1,16 @@
import React, { Component } from "react";
// Components
import { NotificationScreen } from "../index";
class NotificationContainer extends Component {
constructor(props) {
super(props);
this.state = {};
}
render() {
return <NotificationScreen {...this.props} />;
}
}
export default NotificationContainer;

5
src/screens/notification/index.js Normal file
View File

@ -0,0 +1,5 @@
import NotificationScreen from "./screen/notificationScreen";
import Notification from "./container/notificationContainer";
export { NotificationScreen, Notification };
export default Notification;

8
src/screens/notifications/notification.js → src/screens/notification/screen/notificationScreen.js
View File

@ -1,8 +1,10 @@
import React from "react";
import { StatusBar } from "react-native";
import { Container, Text } from "native-base";
class NotificationPage extends React.Component {
// Styles
//import styles from "./notificationStyles";
class NotificationScreen extends React.Component {
static navigationOptions = {
title: "Notifications",
};
@ -15,4 +17,4 @@ class NotificationPage extends React.Component {
);
}
}
export default NotificationPage;
export default NotificationScreen;

3
src/screens/notification/screen/notificationStyles.js Normal file
View File

@ -0,0 +1,3 @@
import EStyleSheet from "react-native-extended-stylesheet";
export default EStyleSheet.create({});

3
src/screens/pinCode/pinCodeScreen.js
View File

@ -5,6 +5,7 @@ import { Container, Content, Icon, Item, Input } from "native-base";
import { Logo, FormInput } from "../../components";
import styles from "../../styles/pinCode.styles";
import globalStyles from "../../globalStyles";
class PinCodeScreen extends React.Component {
constructor(props) {
@ -27,7 +28,7 @@ class PinCodeScreen extends React.Component {
render() {
return (
<Container style={styles.container}>
<Container style={globalStyles.container}>
<Content>
<Logo style={styles.logo} />
<Text style={styles.title}>Enter Pin Code</Text>

16
src/screens/profile/container/profileContainer.js Normal file
View File

@ -0,0 +1,16 @@
import React, { Component } from "react";
// Components
import { ProfileScreen } from "../";
class ProfileContainer extends Component {
constructor(props) {
super(props);
this.state = {};
}
render() {
return <ProfileScreen {...this.props} />;
}
}
export default ProfileContainer;

5
src/screens/profile/index.js Normal file
View File

@ -0,0 +1,5 @@
import ProfileScreen from "./screen/profileScreen";
import Profile from "./container/profileContainer";
export { ProfileScreen, Profile };
export default Profile;

4
src/screens/profile/profile.js
View File

@ -11,7 +11,7 @@ import moment from "moment";
import FastImage from "react-native-fast-image";
import ScrollableTabView from "@esteemapp/react-native-scrollable-tab-view";
import CustomTabBar from "../home/customTab";
import { TabBar } from "../../../components/tabBar";
import DiscoverPage from "../discover/discover";
import PostCard from "../../components/post-card/postCard";
import Comment from "../../components/comment/comment";
@ -276,7 +276,7 @@ class ProfilePage extends React.Component {
style={styles.tabs}
style={{ flex: 1 }}
renderTabBar={() => (
<CustomTabBar
<TabBar
style={styles.tabbar}
tabUnderlineDefaultWidth={30} // default containerWidth / (numberOfTabs * 4)
tabUnderlineScaleX={3} // default 3

369
src/screens/profile/screen/profileScreen.js Normal file
View File

@ -0,0 +1,369 @@
/* eslint-disable no-unused-vars */
import React from "react";
import { FlatList, ActivityIndicator } from "react-native";
import moment from "moment";
import FastImage from "react-native-fast-image";
import ScrollableTabView from "@esteemapp/react-native-scrollable-tab-view";
import { TabBar } from "../../../components/tabBar";
import DiscoverPage from "../../discover/discover";
import PostCard from "../../../components/post-card/postCard";
import Comment from "../../../components/comment/comment";
import { Card, CardItem, View, Body, Icon, Text } from "native-base";
import { getUserData, getAuthStatus } from "../../../realm/realm";
import {
getUser,
getFollows,
getPosts,
getUserComments,
} from "../../../providers/steem/dsteem";
// Styles
import styles from "./profileStyles";
/* eslint-enable no-unused-vars */
class ProfileScreen extends React.Component {
static get options() {
return {
_statusBar: {
visible: true,
drawBehind: false,
},
topBar: {
animate: true,
hideOnScroll: false,
drawBehind: false,
leftButtons: {
id: "back",
},
},
layout: {
backgroundColor: "#f5fcff",
},
bottomTabs: {
visible: false,
drawBehind: true,
},
};
}
constructor() {
super();
this.getBlog = this.getBlog.bind(this);
this.getMore = this.getMore.bind(this);
this.getComments = this.getComments.bind(this);
this.state = {
user: [],
posts: [],
commments: [],
replies: [],
about: {},
follows: {},
isLoggedIn: false,
};
}
async componentDidMount() {
await getAuthStatus().then(res => {
const isLoggedIn = res;
});
if (isLoggedIn === true) {
let user;
let userData;
let follows;
let about;
await getUserData().then(res => {
userData = Array.from(res);
});
await getFollows(userData[0].username).then(res => {
follows = res;
});
user = await getUser(userData[0].username);
about = JSON.parse(user.json_metadata);
// BUG: json_metadata: "{}" is coming emty object!!
this.setState(
{
user: user,
isLoggedIn: isLoggedIn,
follows: follows,
about: about.profile,
},
() => {
this.getBlog(userData[0].username);
this.getComments(userData[0].username);
}
);
}
}
renderFooter = () => {
if (!this.state.loading == false) return null;
return (
<View style={{ marginVertical: 20 }}>
<ActivityIndicator animating size="large" />
</View>
);
};
getBlog = user => {
this.setState({ loading: true });
getPosts("blog", { tag: user, limit: 10 }, user)
.then(result => {
this.setState({
isReady: true,
posts: result,
start_author: result[result.length - 1].author,
start_permlink: result[result.length - 1].permlink,
refreshing: false,
loading: false,
});
})
.catch(err => {
alert(err);
});
};
getMore = async () => {
console.log("get more");
await getPosts(
"blog",
{
tag: this.state.user.name,
limit: 10,
start_author: this.state.start_author,
start_permlink: this.state.start_permlink,
},
this.state.user.name
).then(result => {
console.log(result);
let posts = result;
posts.shift();
this.setState({
posts: [...this.state.posts, ...posts],
start_author: result[result.length - 1].author,
start_permlink: result[result.length - 1].permlink,
loading: false,
});
});
};
getComments = async user => {
await getUserComments({ start_author: user, limit: 10 })
.then(result => {
this.setState({
isReady: true,
commments: result,
refreshing: false,
loading: false,
});
})
.catch(err => {
console.log(err);
});
};
render() {
//TODO: Refactor ME !
return (
<View style={styles.container}>
{this.state.isLoggedIn ? (
<View style={{ flex: 1 }}>
<View style={styles.content}>
<FastImage
style={styles.cover}
source={{
uri: this.state.about.cover_image,
priority: FastImage.priority.high,
}}
/>
<FastImage
style={styles.avatar}
source={{
uri: this.state.about.profile_image,
priority: FastImage.priority.high,
}}
/>
<Body style={{ top: -40 }}>
<Text style={{ fontWeight: "bold" }}>
{this.state.user.name}
</Text>
<Text>{this.state.about.about}</Text>
</Body>
<Card style={{ margin: 0 }}>
<CardItem style={styles.about}>
<View style={{ flex: 0.3 }}>
<Text>
{this.state.user.post_count} Posts
</Text>
</View>
<View style={{ flex: 0.4 }}>
<Text>
{this.state.follows.follower_count}{" "}
Followers
</Text>
</View>
<View style={{ flex: 0.4 }}>
<Text>
{this.state.follows.following_count}{" "}
Following
</Text>
</View>
</CardItem>
<CardItem style={styles.info}>
<View style={{ flex: 0.5 }}>
<Text
style={{
marginLeft: 20,
alignSelf: "flex-start",
}}
>
<Icon
style={{
fontSize: 20,
alignSelf: "flex-start",
}}
name="md-pin"
/>
{this.state.about.location}
</Text>
</View>
<View style={{ flex: 0.5 }}>
<Text>
<Icon
style={{
fontSize: 20,
marginRight: 10,
}}
name="md-calendar"
/>
{moment
.utc(this.state.user.created)
.local()
.fromNow()}
</Text>
</View>
</CardItem>
</Card>
</View>
<ScrollableTabView
style={styles.tabs}
style={{ flex: 1 }}
renderTabBar={() => (
<TabBar
style={styles.tabbar}
tabUnderlineDefaultWidth={30} // default containerWidth / (numberOfTabs * 4)
tabUnderlineScaleX={3} // default 3
activeColor={"#222"}
inactiveColor={"#222"}
/>
)}
>
<View tabLabel="Blog" style={styles.tabbarItem}>
<FlatList
data={this.state.posts}
showsVerticalScrollIndicator={false}
renderItem={({ item }) => (
<PostCard
style={{ shadowColor: "white" }}
content={item}
user={this.state.user}
isLoggedIn={true}
/>
)}
keyExtractor={(post, index) =>
index.toString()
}
onEndReached={info => {
if (this.state.loading == false) {
console.log(info);
this.getMore();
}
}}
onEndThreshold={0}
bounces={false}
ListFooterComponent={this.renderFooter}
/>
</View>
<View tabLabel="Comments" style={styles.tabbarItem}>
<FlatList
data={this.state.commments}
showsVerticalScrollIndicator={false}
renderItem={({ item }) => (
<Comment
comment={item}
isLoggedIn={true}
user={this.state.user}
/>
)}
keyExtractor={(post, index) =>
index.toString()
}
onEndThreshold={0}
bounces={false}
ListFooterComponent={this.renderFooter}
/>
</View>
<View
tabLabel="Replies"
style={styles.tabbarItem}
/>
<View tabLabel="Wallet" style={styles.tabbarItem}>
<Card>
<Text>
STEEM Balance: {this.state.user.balance}
</Text>
</Card>
<Card>
<Text>
SBD Balance:{" "}
{this.state.user.sbd_balance}
</Text>
</Card>
<Card>
<Text>
STEEM Power:{" "}
{this.state.user.steem_power} SP
</Text>
<Text>
Received STEEM Power:{" "}
{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:{" "}
{this.state.user.savings_sbd_balance}
</Text>
</Card>
</View>
</ScrollableTabView>
</View>
) : (
<DiscoverPage />
)}
</View>
);
}
}
export default ProfileScreen;

12
src/styles/profile.styles.js → src/screens/profile/screen/profileStyles.js
View File

@ -1,7 +1,7 @@
import { Dimensions, StatusBar } from "react-native";
import { createStyle } from "react-native-theming";
import EStyleSheet from "react-native-extended-stylesheet";
import { StatusBar } from "react-native";
const styles = createStyle({
export default EStyleSheet.create({
container: {
flex: 1,
top: StatusBar.currentHeight,
@ -10,7 +10,7 @@ const styles = createStyle({
backgroundColor: "#f9f9f9",
},
cover: {
width: Dimensions.get("window").width,
width: "$deviceWidth",
height: 160,
},
avatar: {
@ -45,8 +45,6 @@ const styles = createStyle({
flex: 1,
paddingHorizontal: 7,
backgroundColor: "#f9f9f9",
minWidth: Dimensions.get("window").width / 1,
minWidth: "$deviceWidth",
},
});
export default styles;

137
src/screens/registerScreens.js Normal file
View File

@ -0,0 +1,137 @@
import { Provider } from "react-redux";
import { Navigation } from "react-native-navigation";
import store from "../redux/store/store";
// SCREENS
import Splash from "./splash/splashContainer";
import SideMenu from "./sideMenuScreen";
import Home from "./home/home";
import Hot from "./home/hot";
import Feed from "./home/feed";
import { SinglePost } from "./singlePost";
import { Profile } from "./profile";
import { Author } from "./authorProfile";
import { Login } from "./login";
import Wallet from "./wallet/wallet";
import Editor from "./editor/editor";
import Discover from "./discover/discover";
import Settings from "./settings/settings";
import { Notification } from "./notification";
import PinCode from "./pinCode/pinCodeContainer";
// COMPONENTS
import SteemConnect from "./steem-connect/steemConnect";
import PostCard from "../components/post-card/postCard";
import Search from "../components/search/search";
export const registerScreens = () => {
Navigation.registerComponentWithRedux(
"navigation.eSteem.Splash",
() => Splash,
Provider,
store
);
Navigation.registerComponentWithRedux(
"navigation.eSteem.Home",
() => Home,
Provider,
store
);
Navigation.registerComponentWithRedux(
"navigation.eSteem.Hot",
() => Hot,
Provider,
store
);
Navigation.registerComponentWithRedux(
"navigation.eSteem.Feed",
() => Feed,
Provider,
store
);
Navigation.registerComponentWithRedux(
"navigation.eSteem.Post",
() => SinglePost,
Provider,
store
);
Navigation.registerComponentWithRedux(
"navigation.eSteem.Login",
() => Login,
Provider,
store
);
Navigation.registerComponentWithRedux(
"navigation.eSteem.Wallet",
() => Wallet,
Provider,
store
);
Navigation.registerComponentWithRedux(
"navigation.eSteem.Editor",
() => Editor,
Provider,
store
);
Navigation.registerComponentWithRedux(
"navigation.eSteem.Discover",
() => Discover,
Provider,
store
);
Navigation.registerComponentWithRedux(
"navigation.eSteem.Settings",
() => Settings,
Provider,
store
);
Navigation.registerComponentWithRedux(
"navigation.eSteem.Notifications",
() => Notification,
Provider,
store
);
Navigation.registerComponentWithRedux(
"navigation.eSteem.SideMenuScreen",
() => SideMenu,
Provider,
store
);
Navigation.registerComponentWithRedux(
"navigation.eSteem.Profile",
() => Profile,
Provider,
store
);
Navigation.registerComponentWithRedux(
"navigation.eSteem.Author",
() => Author,
Provider,
store
);
Navigation.registerComponentWithRedux(
"navigation.eSteem.PostCard",
() => PostCard,
Provider,
store
);
Navigation.registerComponentWithRedux(
"navigation.eSteem.Search",
() => Search,
Provider,
store
);
Navigation.registerComponentWithRedux(
"navigation.eSteem.PinCode",
() => PinCode,
Provider,
store
);
Navigation.registerComponentWithRedux(
"navigation.eSteem.SteemConnect",
() => SteemConnect,
Provider,
store
);
};

31
src/screens/side-menu/style.js
View File

@ -1,22 +1,25 @@
const React = require("react-native");
const { Platform, Dimensions } = React;
import { Platform } from "react-native";
import EStyleSheet from "react-native-extended-stylesheet";
const deviceHeight = Dimensions.get("window").height;
const deviceWidth = Dimensions.get("window").width;
export default {
export default EStyleSheet.create({
drawerCover: {
alignSelf: "stretch",
backgroundColor: "#296CC0",
height: deviceHeight / 5,
height: "$deviceHeight / 5",
width: null,
position: "relative",
marginBottom: 10,
},
drawerImage: {
position: "absolute",
left: Platform.OS === "android" ? deviceWidth / 20 : deviceWidth / 30,
top: Platform.OS === "android" ? deviceHeight / 20 : deviceHeight / 20,
left:
Platform.OS === "android"
? "$deviceWidth / 20"
: "$deviceWidth / 30",
top:
Platform.OS === "android"
? "$deviceHeight / 20"
: "$deviceHeight / 20",
width: 70,
height: 70,
resizeMode: "cover",
@ -38,8 +41,12 @@ export default {
},
info: {
position: "absolute",
top: Platform.OS === "android" ? deviceHeight / 11 : deviceHeight / 11,
left: Platform.OS === "android" ? deviceWidth / 4 : deviceWidth / 4,
top:
Platform.OS === "android"
? "$deviceHeight / 11"
: "$deviceHeight / 11",
left:
Platform.OS === "android" ? "$deviceWidth / 4" : "$deviceWidth / 4",
},
userLabel: {
fontWeight: "bold",
@ -53,4 +60,4 @@ export default {
fontSize: 12,
marginBottom: 3,
},
};
});

16
src/screens/singlePost/container/singlePostContainer.js Normal file
View File

@ -0,0 +1,16 @@
import React, { Component } from "react";
// Components
import { SinglePostScreen } from "../";
class SinglePostContainer extends Component {
constructor(props) {
super(props);
this.state = {};
}
render() {
return <SinglePostScreen {...this.props} />;
}
}
export default SinglePostContainer;

5
src/screens/singlePost/index.js Normal file
View File

@ -0,0 +1,5 @@
import SinglePost from "./container/singlePostContainer";
import SinglePostScreen from "./screen/singlePostScreen";
export { SinglePost, SinglePostScreen };
export default SinglePost;

6
src/screens/single-post/post.js → src/screens/singlePost/screen/singlePostScreen.js
View File

@ -15,11 +15,11 @@ import {
import { Card, Button, Icon, Text, Title } from "native-base";
import HTML from "react-native-html-renderer";
import styles from "../../styles/post.styles";
import styles from "./singlePostStyles";
import { Navigation } from "react-native-navigation";
/* eslint-enable no-unused-vars */
class SinglePostPage extends React.Component {
class SinglePostScreen extends React.Component {
static get options() {
return {
_statusBar: {
@ -182,4 +182,4 @@ class SinglePostPage extends React.Component {
}
}
export default SinglePostPage;
export default SinglePostScreen;

7
src/styles/post.styles.js → src/screens/singlePost/screen/singlePostStyles.js
View File

@ -1,7 +1,6 @@
import { Dimensions } from "react-native";
import { createStyle } from "react-native-theming";
import EStyleSheet from "react-native-extended-stylesheet";
const styles = createStyle({
export default EStyleSheet.create({
container: {
flex: 1,
alignItems: "center",
@ -12,5 +11,3 @@ const styles = createStyle({
backgroundColor: "white",
},
});
export default styles;

21
src/screens/wallet/wallet.js
View File

@ -1,20 +1,7 @@
import React from "react";
import { StatusBar, Text, Picker, View } from "react-native";
import React, { Component } from "react";
import { Text, Picker, View } from "react-native";
import Slider from "react-native-slider";
import {
Container,
Header,
Left,
Body,
Right,
Button,
Icon,
Title,
Content,
Card,
Input,
Form,
} from "native-base";
import { Container, Button, Content, Card, Input } from "native-base";
import { getUserData, getAuthStatus } from "../../realm/realm";
import {
getUser,
@ -26,7 +13,7 @@ import {
} from "../../providers/steem/dsteem";
import { decryptKey } from "../../utils/crypto";
class WalletPage extends React.Component {
class WalletPage extends Component {
constructor(props) {
super(props);

2
src/styles/home.styles.js
View File

@ -50,7 +50,7 @@ const styles = createStyle({
flex: 1,
paddingHorizontal: 7,
backgroundColor: "#f9f9f9",
minWidth: Dimensions.get("window").width / 1,
minWidth: Dimensions.get("window").width,
},
loginButton: {
alignSelf: "center",

12
src/styles/logo.styles.js
View File

@ -1,18 +1,14 @@
import { createStyle } from "react-native-theming";
import { Dimensions } from "react-native";
import EStyleSheet from "react-native-extended-stylesheet";
const deviceWidth = Dimensions.get("window").width;
const deviceHeight = Dimensions.get("window").height;
export default createStyle({
export default EStyleSheet.create({
container: {
flex: 1,
alignItems: "center",
justifyContent: "center",
},
logo: {
width: deviceWidth / 3,
height: deviceHeight / 6,
width: "$deviceWidth / 3",
height: "$deviceHeight / 6",
backgroundColor: "transparent",
},
});

17
src/styles/pinCode.styles.js
View File

@ -1,15 +1,6 @@
import { createStyle } from "react-native-theming";
import { Dimensions } from "react-native";
import EStyleSheet from "react-native-extended-stylesheet";
const deviceHeight = Dimensions.get("window").height;
const deviceWidth = Dimensions.get("window").width;
export default createStyle({
container: {
flex: 1,
alignItems: "center",
justifyContent: "center",
},
export default EStyleSheet.create({
title: {
color: "#357ce6",
fontSize: 20,
@ -19,7 +10,7 @@ export default createStyle({
marginBottom: 25,
},
logo: {
marginTop: deviceHeight / 8,
marginTop: "$deviceHeight / 8",
},
forgotButtonText: {
color: "#788187",
@ -33,7 +24,7 @@ export default createStyle({
borderColor: "#fff",
borderRadius: 5,
paddingLeft: 15,
minWidth: deviceWidth / 2,
minWidth: "$deviceWidth / 2",
},
icon: {
color: "#357ce6",

9
src/styles/trending.styles.js
View File

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