💍 Daily horoscope screen alpha version done

jvidalv · Apr 29, 2020 · 97f2c99 · 97f2c99
1 parent de4e8d7
commit 97f2c99
Show file tree

Hide file tree

Showing 8 changed files with 211 additions and 20 deletions.
diff --git a/src/components/containers/DefaultScrollView.js b/src/components/containers/DefaultScrollView.js
@@ -1,23 +1,22 @@
 import React from "react";
 import {KeyboardAvoidingView, Platform, SafeAreaView, ScrollView, StatusBar} from "react-native";
-import {withTheme} from 'react-native-paper';
+import {useTheme} from 'react-native-paper';
 import PropTypes from "prop-types";
 
 /**
  * @param children
- * @param theme react-native-paper theme
  * @param background
  * @param barStyle
  * @param keyboardAvoidView
  * @param styleScrollView {object}
  * @returns {*}
  * @constructor
  */
-function DefaultScrollView({children, theme, background, barStyle, keyboardAvoidView, styleScrollView}) {
-    const {colors} = theme;
+function DefaultScrollView({children, background, barStyle, keyboardAvoidView, styleScrollView}) {
+    const {colors} = useTheme();
     return (
         <SafeAreaView style={{flex: 1}}>
-            <StatusBar barStyle={barStyle} backgroundColor={background || colors.primary}/>
+            <StatusBar barStyle={barStyle} backgroundColor={background || colors.primary} animated/>
             <KeyboardAvoidingView style={{flex: 1}} behavior={Platform.OS === "ios" ? "padding" : null}
                                   enabled={keyboardAvoidView}>
                 <ScrollView style={[{flex: 1}, {backgroundColor: background || colors.background}, styleScrollView]}>
@@ -39,4 +38,4 @@ DefaultScrollView.defaultProps = {
     barStyle: "light-content"
 };
 
-export default withTheme(DefaultScrollView);
+export default DefaultScrollView;
diff --git a/src/constants/themes.js b/src/constants/themes.js
@@ -18,7 +18,8 @@ const themes = {
             ...PaperDarkTheme.colors,
             background : '#192f6a',
             primary : '#ffb942',
-            accent : '#415bea'
+            accent : '#415bea',
+            surface : '#12265c',
         },
     }
 };

diff --git a/src/navigation/MainStackNavigation.js b/src/navigation/MainStackNavigation.js
@@ -16,7 +16,7 @@ function MainStackNavigation() {
         >
             <Tab.Screen
                 name="symbol"
-                component={ZodiacScreen}
+                component={DailyScreen}
                 options={{
                     tabBarIcon: 'zodiac-aquarius',
                     tabBarColor: 'red',

diff --git a/src/screens/main/DailyScreen.js b/src/screens/main/DailyScreen.js
@@ -1,22 +1,120 @@
 import React from "react";
-import {StyleSheet, TextInput, View} from "react-native";
-import {Button, Headline, Text, TextInput as PaperTextInput} from "react-native-paper";
-import {DefaultScrollView, DefaultView} from "../../components/containers";
-import Logo from "../../svgs/Logo";
-import Constellation from "../../svgs/Constellation";
-import Aquarius from "../../svgs/Aquarius";
-import i18n from "i18n-js";
+import {StyleSheet, View} from "react-native";
+import {Button, Headline, Paragraph, Subheading, Surface, Text, Title} from "react-native-paper";
+import {DefaultScrollView} from "../../components/containers";
+import {Backgrounds, Zodiac} from "../../svgs";
+import {useGlobals} from "../../contexts/Global";
+import {ThemeUtils} from "../../utils";
 
 /**
  * @param navigation
  * @returns {*}
  * @constructor
  */
 function DailyScreen({navigation}) {
+    const [{theme}] = useGlobals();
     return (
-        <DefaultScrollView>
-           <Text>Holaaa</Text>
-        </DefaultScrollView>
+        <React.Fragment>
+            <Backgrounds.Stars style={{zIndex: 5, position: 'absolute', top: 20, right: 20, opacity: 0.2}}/>
+            <DefaultScrollView barStyle={ThemeUtils.isDark(theme) ? 'light-content' : 'dark-content'}>
+                <View style={{alignItems: 'center', justifyContent: 'center', marginHorizontal: 20}}>
+                    <Zodiac.Aquarius width={80}/>
+                    <Headline style={{fontWeight: 'bold', fontSize: 30}}>
+                        Aquarius
+                    </Headline>
+                    <Subheading>
+                        Wednesday, 29 april, 2020
+                    </Subheading>
+                </View>
+                <View style={{marginTop: 20, marginHorizontal: 20}}>
+                    <Surface style={{padding: 20, borderRadius: 10}}>
+                        <Button icon="heart" style={{marginTop: -5, marginBottom: 10}}
+                                labelStyle={{fontSize: 20, fontWeight: 'bold', letterSpacing: 4}}>Love</Button>
+                        <Paragraph style={{fontSize: 15, lineHeight: 22, letterSpacing: 1}}>
+                            Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece
+                            of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock,
+                            a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure
+                            Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the
+                            word in classical literature, discovered the undoubtable source
+                        </Paragraph>
+                    </Surface>
+                </View>
+                <View style={{marginTop: 20, marginHorizontal: 20}}>
+                    <Surface style={{padding: 20, borderRadius: 10}}>
+                        <Button icon="briefcase" style={{marginTop: -5, marginBottom: 10}}
+                                labelStyle={{fontSize: 20, fontWeight: 'bold', letterSpacing: 4}}>Work</Button>
+                        <Paragraph style={{fontSize: 15, lineHeight: 22, letterSpacing: 1}}>
+                            It has roots in a piece
+                            of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock,
+                            a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure
+                            Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the
+                            word in classical literature, discovered the undoubtable source
+                        </Paragraph>
+                    </Surface>
+                </View>
+                <View style={{marginTop: 20, marginHorizontal: 20}}>
+                    <Surface style={{padding: 20, borderRadius: 10}}>
+                        <Button icon="briefcase" style={{marginTop: -5, marginBottom: 10}}
+                                labelStyle={{fontSize: 20, fontWeight: 'bold', letterSpacing: 4}}>Health</Button>
+                        <Paragraph style={{fontSize: 15, lineHeight: 22, letterSpacing: 1}}>
+                            Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece
+                            of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock,
+                            a Latin professor at Hampden-Sydney College in Virginia.
+                        </Paragraph>
+                    </Surface>
+                </View>
+                <View style={{marginTop: 20, marginHorizontal: 20}}>
+                    <Surface style={{padding: 20, borderRadius: 10}}>
+                        <Button  style={{marginTop: -5, marginBottom: 10}}
+                                labelStyle={{fontSize: 20, fontWeight: 'bold', letterSpacing: 4}}>Today you love</Button>
+                        <View style={{flexDirection:'row', justifyContent : 'space-around'}}>
+                            <View style={{alignItems: 'center'}}>
+                                <Zodiac.Scorpio width={100}/>
+                                <Title>Scorpio</Title>
+                            </View>
+                            <View style={{alignItems: 'center'}}>
+                                <Zodiac.Pisces width={100}/>
+                                <Title>Piscis</Title>
+                            </View>
+                        </View>
+                    </Surface>
+                </View>
+                <View style={{marginTop: 20, marginHorizontal: 20}}>
+                    <Surface style={{padding: 20, borderRadius: 10}}>
+                        <Button  style={{marginTop: -5, marginBottom: 10}}
+                                 labelStyle={{fontSize: 20, fontWeight: 'bold', letterSpacing: 4}}>Today you hate</Button>
+                        <View style={{flexDirection:'row', justifyContent : 'space-around'}}>
+                            <View style={{alignItems: 'center'}}>
+                                <Zodiac.Libra width={100}/>
+                                <Title>Libra</Title>
+                            </View>
+                            <View style={{alignItems: 'center'}}>
+                                <Zodiac.Leo width={100}/>
+                                <Title>Leo</Title>
+                            </View>
+                        </View>
+                    </Surface>
+                </View>
+                <View style={{marginTop: 20, marginHorizontal: 20, marginBottom: 20}}>
+                    <Surface style={{padding: 20, borderRadius: 10}}>
+                        <Button  style={{marginTop: -5, marginBottom: 10}}
+                                 labelStyle={{fontSize: 18, fontWeight: 'bold', letterSpacing: 3}}>Lucky numbers</Button>
+                        <View style={{flexDirection:'row', justifyContent : 'space-around', marginTop: 5}}>
+                            <View style={{alignItems: 'center'}}>
+                                <Title style={{fontSize: 30}}>25</Title>
+                            </View>
+                            <View style={{alignItems: 'center'}}>
+                                <Title style={{fontSize: 30}}>6</Title>
+                            </View>
+                            <View style={{alignItems: 'center'}}>
+                                <Title style={{fontSize: 30}}>32</Title>
+                            </View>
+                        </View>
+                    </Surface>
+                </View>
+            </DefaultScrollView>
+        </React.Fragment>
+
     );
 }
 

diff --git a/src/svgs/backgrounds/Stars.js b/src/svgs/backgrounds/Stars.js
@@ -0,0 +1,76 @@
+import * as React from "react"
+import Svg, { Path, G } from "react-native-svg"
+import PropTypes from "prop-types";
+
+function Stars({color, height, width, style}) {
+    return (
+        <Svg height={height} width={width} viewBox="0 0 512 512" style={style}>
+            <Path
+                d="M138.11 432.879a8.396 8.396 0 00-2.419 7.45l7.145 41.687c1.18 6.867-6.035 12.109-12.211 8.87l-37.426-19.679a8.377 8.377 0 00-7.836 0l-37.43 19.68c-6.18 3.238-13.39-2.004-12.21-8.871l1.05-6.137 6.094-35.55a8.408 8.408 0 00-2.426-7.45l-30.28-29.516c-4.993-4.867-2.24-13.347 4.671-14.36l41.844-6.073a8.422 8.422 0 006.34-4.606l18.718-37.926c3.079-6.25 12-6.25 15.09 0l18.719 37.926a8.402 8.402 0 006.336 4.606l12.933 1.875 28.91 4.199c6.903 1.012 9.665 9.496 4.665 14.36zm0 0"
+                fill="#fed370"
+            />
+            <Path
+                d="M138.11 432.879a8.396 8.396 0 00-2.419 7.45l7.145 41.687c1.18 6.867-6.035 12.109-12.211 8.87l-37.426-19.679a8.377 8.377 0 00-7.836 0l-37.43 19.68c-6.18 3.238-13.39-2.004-12.21-8.871l1.05-6.137c65.606-27.984 90.047-62.973 98.043-91.074l28.91 4.199c6.899 1.012 9.66 9.496 4.66 14.36zm0 0"
+                fill="#fda736"
+            />
+            <Path
+                d="M122.7 214.594a6.56 6.56 0 00-1.891 5.82l5.586 32.578c.921 5.371-4.715 9.469-9.547 6.934l-29.25-15.38a6.56 6.56 0 00-6.125 0l-29.254 15.38c-4.828 2.535-10.465-1.567-9.543-6.934l.82-4.793 4.762-27.785a6.56 6.56 0 00-1.89-5.82l-23.669-23.07c-3.902-3.801-1.75-10.434 3.649-11.223l32.707-4.75a6.573 6.573 0 004.953-3.598l14.629-29.64c2.41-4.887 9.379-4.887 11.793 0l14.632 29.64a6.56 6.56 0 004.954 3.598l10.109 1.469 22.594 3.28c5.394.79 7.554 7.423 3.644 11.223zm0 0"
+                fill="#fed370"
+            />
+            <Path
+                d="M122.7 214.594a6.56 6.56 0 00-1.891 5.82l5.586 32.578c.921 5.371-4.715 9.469-9.547 6.934l-29.25-15.38a6.56 6.56 0 00-6.125 0l-29.254 15.38c-4.828 2.535-10.465-1.567-9.543-6.934l.82-4.793c51.277-21.87 70.379-49.219 76.629-71.18l22.594 3.282c5.394.789 7.554 7.418 3.644 11.222zm0 0"
+                fill="#fda736"
+            />
+            <Path
+                d="M280 476.586a5.042 5.042 0 00-1.453 4.473l4.293 25.027c.707 4.121-3.625 7.27-7.332 5.324l-22.473-11.812a5.034 5.034 0 00-4.703 0l-22.473 11.812c-3.707 1.945-8.039-1.203-7.332-5.324l.633-3.684 3.66-21.343a5.055 5.055 0 00-1.457-4.473l-18.18-17.723c-2.995-2.922-1.343-8.011 2.805-8.62l25.121-3.645a5.05 5.05 0 003.805-2.766l11.238-22.77c1.852-3.753 7.207-3.753 9.063 0l11.238 22.77a5.037 5.037 0 003.805 2.766l7.765 1.125 17.356 2.52c4.144.609 5.8 5.702 2.8 8.62zm0 0"
+                fill="#fed370"
+            />
+            <Path
+                d="M280 476.586a5.042 5.042 0 00-1.453 4.473l4.293 25.027c.707 4.121-3.625 7.27-7.332 5.324l-22.473-11.812a5.034 5.034 0 00-4.703 0l-22.473 11.812c-3.707 1.945-8.039-1.203-7.332-5.324l.633-3.684c39.387-16.8 54.063-37.808 58.863-54.68l17.356 2.52c4.144.606 5.8 5.7 2.8 8.621zm0 0M364.54 126.746a7.602 7.602 0 01-5.384-2.226 7.613 7.613 0 010-10.766L470.684 2.23a7.613 7.613 0 0110.765 0 7.608 7.608 0 010 10.762L369.922 124.52a7.589 7.589 0 01-5.383 2.226zm0 0M144.129 347.16a7.583 7.583 0 01-5.383-2.23 7.608 7.608 0 010-10.762L248.29 224.621a7.613 7.613 0 0110.766 10.766L149.512 344.93a7.583 7.583 0 01-5.383 2.23zm0 0"
+                fill="#fda736"
+            />
+            <Path
+                d="M185.148 354.676a7.595 7.595 0 01-5.382-2.227 7.613 7.613 0 010-10.765l49.718-49.72a7.613 7.613 0 0110.766 10.766l-49.719 49.72a7.602 7.602 0 01-5.383 2.226zm0 0"
+                fill="#fed370"
+            />
+            <Path
+                d="M343.398 317.637a7.602 7.602 0 01-5.382-2.227 7.613 7.613 0 010-10.765l141.546-141.547c2.973-2.973 7.793-2.973 10.766 0s2.973 7.793 0 10.761L348.781 315.41a7.595 7.595 0 01-5.383 2.227zm0 0M281.352 379.684a7.595 7.595 0 01-5.383-2.227 7.613 7.613 0 010-10.766l36.363-36.363a7.613 7.613 0 0110.766 10.766l-36.364 36.363a7.595 7.595 0 01-5.382 2.227zm0 0M169.418 221.324a7.589 7.589 0 01-5.383-2.226 7.613 7.613 0 010-10.766l24.035-24.035a7.608 7.608 0 0110.762 0 7.613 7.613 0 010 10.766l-24.035 24.035a7.586 7.586 0 01-5.379 2.226zm0 0M268.14 75.773a7.589 7.589 0 01-5.382-2.226 7.613 7.613 0 010-10.766l33.879-33.883a7.613 7.613 0 0110.765 10.766l-33.879 33.883a7.602 7.602 0 01-5.382 2.226zm0 0M169.418 174.496a7.589 7.589 0 01-5.383-2.226 7.613 7.613 0 010-10.766l75.617-75.613a7.608 7.608 0 0110.762 0 7.608 7.608 0 010 10.761l-75.613 75.618a7.602 7.602 0 01-5.383 2.226zm0 0M148.36 129.82a7.602 7.602 0 01-5.383-2.226 7.613 7.613 0 010-10.766l35.343-35.344a7.62 7.62 0 0110.766 0 7.613 7.613 0 010 10.766l-35.344 35.344a7.589 7.589 0 01-5.383 2.226zm0 0"
+                fill="#fda736"
+            />
+            <Path
+                d="M328.504 173.406a4.418 4.418 0 00-1.274 3.922l3.766 21.965c.621 3.617-3.18 6.383-6.437 4.676l-19.72-10.371a4.413 4.413 0 00-4.128 0l-19.719 10.37c-3.254 1.708-7.055-1.058-6.433-4.675l.554-3.234 3.211-18.73a4.439 4.439 0 00-1.277-3.923l-15.957-15.55c-2.63-2.567-1.18-7.036 2.46-7.567l22.048-3.203a4.42 4.42 0 003.34-2.426l9.863-19.98c1.62-3.293 6.324-3.293 7.949 0l9.863 19.98a4.426 4.426 0 003.34 2.426l6.817.988L342 150.29c3.637.531 5.09 5 2.457 7.566zm0 0"
+                fill="#fed370"
+            />
+            <Path
+                d="M328.504 173.406a4.418 4.418 0 00-1.274 3.922l3.766 21.965c.621 3.617-3.18 6.383-6.437 4.676l-19.72-10.371a4.413 4.413 0 00-4.128 0l-19.719 10.37c-3.254 1.708-7.055-1.058-6.433-4.675l.554-3.234c34.567-14.743 47.442-33.176 51.657-47.985L342 150.29c3.637.531 5.09 5 2.457 7.566zm0 0M310.031 415.8a7.602 7.602 0 01-5.383-2.226 7.613 7.613 0 010-10.765l43.582-43.582a7.62 7.62 0 0110.766 0 7.62 7.62 0 010 10.765l-43.582 43.582a7.589 7.589 0 01-5.383 2.227zm0 0"
+                fill="#fda736"
+            />
+            <G fill="#fed370">
+                <Path d="M325.965 285.008a7.577 7.577 0 01-5.383-2.23 7.608 7.608 0 010-10.762l17.434-17.438a7.62 7.62 0 0110.765 0 7.613 7.613 0 010 10.766l-17.437 17.433a7.574 7.574 0 01-5.38 2.23zm0 0M431.031 94.477a7.604 7.604 0 01-5.386-2.227 7.62 7.62 0 010-10.766l20.882-20.879a7.613 7.613 0 0110.766 0c2.969 2.973 2.969 7.793 0 10.762L436.41 92.25a7.586 7.586 0 01-5.379 2.227zm0 0M104.035 71.852h-.039a7.615 7.615 0 01-7.574-7.649l.012-2.656c.02-4.203 3.418-7.625 7.648-7.574a7.609 7.609 0 017.574 7.644l-.011 2.656a7.612 7.612 0 01-7.61 7.579zm0 0M103.953 98.883h-.039a7.612 7.612 0 01-7.574-7.649l.012-2.656a7.612 7.612 0 017.613-7.574H104a7.607 7.607 0 017.574 7.648l-.011 2.657a7.611 7.611 0 01-7.61 7.574zm0 0M118.844 84.086h-.04l-2.652-.012a7.611 7.611 0 01.031-15.223h.04l2.656.012a7.612 7.612 0 01-.035 15.223zm0 0M91.809 84.004h-.036l-2.656-.016a7.607 7.607 0 01-7.574-7.648 7.611 7.611 0 017.61-7.574h.038l2.657.015a7.612 7.612 0 01-.04 15.223zm0 0" />
+            </G>
+            <Path
+                d="M22.492 308.285h-.035a7.607 7.607 0 01-7.574-7.648l.012-2.657c.02-4.203 3.476-7.613 7.648-7.574a7.612 7.612 0 017.574 7.649l-.012 2.656a7.615 7.615 0 01-7.613 7.574zm0 0M22.41 335.32h-.035a7.613 7.613 0 01-7.578-7.648l.012-2.656a7.602 7.602 0 017.648-7.575 7.609 7.609 0 017.574 7.645l-.011 2.656a7.612 7.612 0 01-7.61 7.578zm0 0M37.3 320.523h-.034l-2.657-.011c-4.203-.024-7.597-3.446-7.574-7.653.02-4.203 3.45-7.632 7.649-7.574l2.656.016a7.612 7.612 0 01-.04 15.222zm0 0M10.27 320.438h-.036l-2.656-.012A7.61 7.61 0 010 312.78c.02-4.207 3.45-7.61 7.648-7.578l2.657.012a7.612 7.612 0 01-.035 15.223zm0 0"
+                fill="#fda736"
+            />
+            <Path
+                d="M403.762 399.422h-.035a7.609 7.609 0 01-7.575-7.645l.012-2.656a7.61 7.61 0 017.61-7.578h.035a7.613 7.613 0 017.578 7.648l-.012 2.657c-.02 4.187-3.426 7.574-7.613 7.574zm0 0M403.68 426.453h-.04a7.61 7.61 0 01-7.574-7.648l.012-2.657a7.617 7.617 0 017.613-7.574h.036a7.616 7.616 0 017.578 7.653l-.016 2.656a7.608 7.608 0 01-7.61 7.57zm0 0M418.574 411.66h-.039l-2.656-.012a7.612 7.612 0 01.035-15.222h.04l2.655.011a7.611 7.611 0 01-.035 15.223zm0 0M391.54 411.574h-.04l-2.656-.011a7.612 7.612 0 01.039-15.223h.035l2.656.012a7.613 7.613 0 017.578 7.648 7.615 7.615 0 01-7.613 7.574zm0 0"
+                fill="#fed370"
+            />
+        </Svg>
+    )
+}
+
+Stars.defaultProps = {
+    height: 120,
+    width: 120,
+    color : 'white'
+};
+
+Stars.propTypes = {
+    height: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
+    width: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
+    style : PropTypes.object,
+    color : PropTypes.string
+};
+
+export default Stars
diff --git a/src/svgs/index.js b/src/svgs/index.js
@@ -10,9 +10,12 @@ import Sagittarius from "./zodiac/Sagittarius";
 import Scorpio from "./zodiac/Scorpio";
 import Taurus from "./zodiac/Taurus";
 import Virgo from "./zodiac/Virgo";
+import Stars from "./backgrounds/Stars";
 
 export const Zodiac = {
-    Aquarius,
-    Aries, Cancer, Capricorn, Gemini, Leo, Libra, Pisces, Sagittarius, Scorpio, Taurus, Virgo
+    Aquarius, Aries, Cancer, Capricorn, Gemini, Leo, Libra, Pisces, Sagittarius, Scorpio, Taurus, Virgo
 }
 
+export const Backgrounds = {
+    Stars
+}
diff --git a/src/utils/Theme.ts b/src/utils/Theme.ts
@@ -0,0 +1,12 @@
+/**
+ * Custom class to deal with the shitty ass js dates
+ */
+const THEME_DARK = 'dark';
+const THEME_LIGHT = 'light';
+
+const ThemeUtils = {
+    isDark: (theme: string): boolean => theme === THEME_DARK,
+    isLight: (theme: string): boolean => theme === THEME_LIGHT,
+}
+
+export default ThemeUtils;
diff --git a/src/utils/index.js b/src/utils/index.js
@@ -1,7 +1,9 @@
 import PlatformUtils from "./Platform";
 import DateUtils from "./Date";
+import ThemeUtils from "./Theme";
 
 export {
     PlatformUtils as Platform,
     DateUtils,
+    ThemeUtils
 }