react-native-paper#useTheme JavaScript Examples
The following examples show how to use
react-native-paper#useTheme.
You can vote up the ones you like or vote down the ones you don't like,
and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
| Source File: learn.screen.js From astrale with GNU General Public License v3.0 | 6 votes |
|
SubHeading = () => {
const { colors } = useTheme();
return (
<View style={{ marginHorizontal: 20 }}>
<Title
theme={{ colors: { text: colors.primary } }}
style={{ textAlign: 'center' }}
>
{i18n.t('Astrology guides')}
</Title>
<View style={{ height: 10 }} />
<Text style={{ textAlign: 'center' }}>{i18n.t('Learn paragraph')}</Text>
</View>
);
}
Example #2
| Source File: Married.js From astrale with GNU General Public License v3.0 | 6 votes |
|
function Married({ color, height, width, style }) {
const { colors } = useTheme();
return (
<Svg height={height} width={width} viewBox="0 0 512 512" style={style}>
<Circle
cx={236.967}
cy={236.967}
r={236.967}
fill={colors.primary + '50'}
/>
<Path
d="M362.409 45.446c0 51.115-85.141 90.88-85.141 90.88s-21.291-9.941-42.571-26.272c-20.532-15.725-42.571-38.626-42.571-64.608 0-24.553 19.548-44.794 44.235-45.43 17.147-.453 32.791 8.769 40.907 23.424C285.489 8.596 301.308-.467 318.153.027c24.685.609 44.256 20.821 44.256 45.419z"
fill="#f92a08"
/>
<Path
d="M361.95 38.992c-3.207 17.418-23.101 32.814-42.8 44.073-25.943 14.828-57.877 14.81-83.815-.026-16.574-9.48-39.3-25.271-42.75-44.036 6.1-43.039 63.624-53.59 84.683-15.563 21.093-38.091 78.62-27.382 84.682 15.552z"
fill="#f92a08"
/>
<Path
d="M267.305 482.053C155.743 558.752.03 479.899.03 341.339c0-94.261 76.405-170.667 170.667-170.667 46.965 0 89.504 18.976 120.363 49.664a153.49 153.49 0 00-48.117 36.821c-70.883-60.907-183.179-11.46-183.179 84.181 0 61.269 49.664 110.933 110.933 110.933 73.767 0 126.852-70.745 106.72-141.291.798 0 12.9-27.511 48.512-40.661 33.773 73.691 11.196 163.7-58.624 211.734z"
fill="#ffe773"
/>
<Path
d="M512.03 358.406c0 126.859-144.667 197.54-244.725 123.648a171.866 171.866 0 0043.264-42.891c61.956 36.853 141.728-7.707 141.728-80.757 0-51.84-42.027-93.867-93.867-93.867-33.759 0-64.316 17.973-81.003 46.432h-.011v.011c-14.524 24.725-16.465 54.08-7.232 79.477a111.248 111.248 0 01-43.627 46.731c-45.793-76.403-16.82-177.157 64.501-216.853 100.938-49.385 220.972 23.819 220.972 138.069z"
fill="#efd66c"
/>
</Svg>
);
}
Example #3
| Source File: Male.js From astrale with GNU General Public License v3.0 | 6 votes |
|
function Male({ color, height, width, style }) {
const { colors } = useTheme();
return (
<Svg height={height} width={width} viewBox="0 0 512 512" style={style}>
<Circle cx={236.967} cy={236.967} r={236.967} fill={colors.accent} />
<G fill={colors.primary}>
<Path d="M283.19 189.084c-44.146-44.149-115.719-44.149-159.864 0-44.153 44.157-44.153 115.726 0 159.875 44.146 44.142 115.719 44.142 159.864 0 44.149-44.153 44.149-115.722 0-159.875zm-30.391 129.484c-27.356 27.364-71.723 27.364-99.09 0-27.364-27.367-27.364-71.73 0-99.09 27.367-27.367 71.738-27.367 99.09 0 27.367 27.36 27.367 71.723 0 99.09z" />
<Path d="M252.732 218.835c16.685 16.67 35.573-10.9 46.024-21.343 9.987-9.987 34.847-34.844 44.842-44.845.924 10.458 2.746 50.937 4.277 61.287 2.443 16.445 22.817 22.582 30.316 8.105.778-1.029 1.272-2.324 1.478-3.843.344-1.388.348-2.683.079-3.832-.269-13.549-1.355-57.13-1.635-70.69-.254-13.197 1.53-27.562-3.308-39.97a10.55 10.55 0 00-.804-2.133c-.98-1.957-3.398-3.746-5.74-4.266-11.431-4.322-24.093-2.885-36.318-3.136-15.188-.303-60.205-.681-75.382-.984-17.568-.359-18.17 22.2-5.369 29.714 6.41 3.727 46.529 3.394 53.65 4.116 4.558.471 9.137.906 13.71 1.351-9.923 9.923-34.709 34.713-44.643 44.643-10.435 10.428-37.802 29.19-21.177 45.826z" />
</G>
<Path
d="M368.256 97.301c-11.431-4.322-24.093-2.885-36.318-3.136-15.188-.303-60.205-.681-75.382-.984-17.568-.359-18.17 22.2-5.369 29.714 6.41 3.727 46.529 3.394 53.65 4.116 4.557.471 9.137.906 13.71 1.351-9.923 9.923-34.709 34.713-44.643 44.643-1.306 1.306-2.874 2.735-4.587 4.284-44.183-31.906-106.218-27.985-145.993 11.79-44.075 44.078-44.146 115.468-.228 159.632l30.391-30.387c-27.132-27.382-27.068-71.565.217-98.851 27.293-27.293 71.479-27.356 98.851-.213l.307-.307 30.091-30.095 89.358-89.354c-1.148-1.039-2.596-1.881-4.055-2.203z"
fill={colors.primary}
/>
</Svg>
);
}
Example #4
| Source File: daily.screen.js From astrale with GNU General Public License v3.0 | 6 votes |
|
ProgressItem = ({ text, percent, style }) => {
const { colors } = useTheme();
return (
<View style={[{ flex: 1 }, style]}>
<Text style={ProgressItemStyles.text}>{text}</Text>
<ProgressBar style={ProgressItemStyles.bar} progress={percent / 100} />
<Text theme={{ colors: { text: colors.primary } }}>{percent}%</Text>
</View>
);
}
Example #5
| Source File: daily.screen.js From astrale with GNU General Public License v3.0 | 6 votes |
|
LuckyNumber = ({ number }) => {
const { colors } = useTheme();
return (
<View
style={[LuckyNumberStyles.circle, { backgroundColor: colors.accent }]}
>
<Text style={{ fontSize: 16, marginTop: 3 }}>{number}</Text>
</View>
);
}
Example #6
| Source File: compatibility.screen.js From astrale with GNU General Public License v3.0 | 6 votes |
|
Bars = ({ name, icon, end }) => {
const { colors } = useTheme();
return (
<>
<View style={styles.mathProgressText}>
<Button theme={{ colors: { primary: colors.text } }} icon={icon}>
{i18n.t(name)}
</Button>
<Text>{end}%</Text>
</View>
<ProgressBar progress={end / 100} style={styles.matchProgressBar} />
</>
);
}
Example #7
| Source File: close.js From astrale with GNU General Public License v3.0 | 6 votes |
|
/**
* @param navigation
* @param style {object}
* @param position {string}
* @returns {*}
* @constructor
*/
function Close({ style, position }) {
const navigation = useNavigation();
const { colors } = useTheme();
const innerPosition = position === 'left' ? { left: 20 } : { right: 20 };
return PlatformUtils.isAndroid ? (
<MaterialCommunityIcons
onPress={() => navigation.goBack()}
style={[styles.container, innerPosition]}
name="close"
color={colors.text}
size={30}
/>
) : (
<View style={styles.iosBarContainer}>
<View
style={[
styles.iosBarContent,
{
backgroundColor: colors.text + '3D',
},
]}
/>
</View>
);
}
Example #8
| Source File: main-nav.js From astrale with GNU General Public License v3.0 | 6 votes |
|
/**
* @param children
* @param style {object}
* @param rightButton {React.ComponentElement}
* @returns {*}
* @constructor
*/
function MainNav({ children, style, rightButton }) {
const navigation = useNavigation();
const { colors } = useTheme();
return (
<View style={[StyleSheet.absoluteFill, styles.container, style]}>
<View style={styles.content}>
<MaterialCommunityIcons
onPress={() => navigation.navigate('Profile', { key: 1 })}
name="account-circle-outline"
color={colors.text}
size={30}
style={{ opacity: 0.5 }}
/>
{rightButton}
</View>
</View>
);
}
Example #9
| Source File: custom-input.js From astrale with GNU General Public License v3.0 | 6 votes |
|
/**
* @param props
* @returns {*}
* @constructor
*/
function CustomInput(props) {
const { colors } = useTheme();
const maxLength = props.keyboardType === 'number-pad' ? 5 : null;
return (
<PaperTextInput
{...props}
style={[styles.input, { backgroundColor: colors.text + '00' }]}
render={(props) => (
<TextInput
{...props}
style={[styles.inputCustom, props.customStyle]}
maxLength={maxLength}
/>
)}
/>
);
}
Example #10
| Source File: Female.js From astrale with GNU General Public License v3.0 | 6 votes |
|
function Female({ color, height, width, style }) {
const { colors } = useTheme();
return (
<Svg height={height} width={width} viewBox="0 0 512 512" style={style}>
<Circle cx={236.967} cy={236.967} r={236.967} fill={colors.primary} />
<G fill={colors.accent}>
<Path d="M197.716 336.944c-3.906-3.903-18.904-19.263-18.63-18.993.056-.052 28.741-28.378 28.741-28.378s16.157-14.271 22.275-27.985c.494-1.104-18.821-18.978-18.821-18.978-13.822 6.11-28.303 22.481-28.303 22.481-9.485 9.478-28.557 28.194-28.557 28.194l-17.934-17.934c-10.425-10.421-21.672-30.279-38.305-13.65-16.673 16.677 3.371 28.048 13.822 38.499 3.906 3.903 17.571 17.927 17.571 17.927-7.289 7.285-2.073 2.069-6.275 6.279-10.428 10.428-37.676 29.059-21.048 45.684 16.681 16.685 35.446-10.75 45.889-21.201 4.183-4.18-1.115 1.119 6.092-6.095 7.517 7.529 14.672 14.675 19.005 19.008 10.425 10.428 21.669 30.279 38.305 13.643 16.665-16.671-3.38-28.05-13.827-38.501z" />
<Path d="M352.241 119.801c-44.146-44.153-115.719-44.153-159.868 0-44.146 44.153-44.146 115.722 0 159.864 44.149 44.157 115.722 44.157 159.868 0 44.149-44.142 44.149-115.711 0-159.864zm-30.376 129.466c-27.364 27.364-71.723 27.364-99.09 0s-27.367-71.726 0-99.09 71.73-27.364 99.09 0c27.364 27.363 27.364 71.726 0 99.09z" />
</G>
<Path
d="M148.141 348.888c4.183-4.18-1.115 1.119 6.092-6.095 7.517 7.528 14.672 14.675 19.005 19.008 10.425 10.428 21.669 30.279 38.305 13.643 16.666-16.67-3.379-28.048-13.826-38.499-3.906-3.903-18.904-19.263-18.63-18.993l26.967-26.623c44.198 32.06 106.357 28.179 146.188-11.663 44.149-44.142 44.149-115.711 0-159.864-.03-.03-.064-.06-.094-.086l-30.376 30.372c.03.03.067.06.097.086 27.364 27.364 27.364 71.73 0 99.09-27.364 27.364-71.723 27.364-99.09 0-.03-.03-.056-.064-.086-.094L102.02 369.838c.082.079.146.161.232.247 16.681 16.689 35.446-10.746 45.889-21.197z"
fill={colors.accent}
/>
</Svg>
);
}
Example #11
| Source File: Hand.js From astrale with GNU General Public License v3.0 | 6 votes |
|
function Hand({ color, height, width, style }) {
const { colors } = useTheme();
return (
<Svg
height={height}
width={width}
viewBox="0 0 212.495 212.495"
style={[style]}
>
<Path
d="M189.917 49.052c-1.442-.673-2.97-1.027-4.402-1.027-2.069 0-3.794.723-4.871 2.029-6.374 7.763-12.211 22.862-16.917 34.99-2.162 5.608-5.061 13.116-7.025 16.638-1.074-10.325 3.561-47.559 5.343-61.893l.029-.233c1.242-9.96 1.435-11.706 1.374-12.487-.48-5.544-2.416-9.298-5.758-11.152-3.378-1.875-7.974-1.474-13.063 1.142-2.559 1.317-3.597 6.381-7.315 29.397l-.018.104c-2.047 12.644-6.764 41.765-10.382 46.414-3.225-7.086-5.604-46.239-6.635-63.185-.716-11.867-1.142-18.682-1.6-20.764-.97-4.363-6.07-8.375-11.356-8.944-4.398-.526-8.178 1.474-10.178 5.268-3.486 3.389-3.182 15.453-1.593 44.084.755 13.628 2.316 41.772-.111 44.754-4.37-.791-10.715-18.796-18.85-53.532-2.283-9.727-2.995-12.658-3.815-13.975-1.482-4.49-7.315-8.28-12.784-8.28-.465 0-.923.029-1.374.079-2.888.369-9.57 2.548-9.033 14.802 2.659 17.121 5.966 29.783 9.173 42.077l.064.247c1.918 7.362 3.733 14.319 5.332 22.006 3.769 18.159 1.049 29.075 1.016 29.196-.243 1.124-.641 1.797-1.188 2.001a2.047 2.047 0 01-.716.115c-1.596 0-3.905-1.224-5.086-1.997-2.43-5.587-14.602-32.228-27.01-36.672l-.447-.168-.462.011c-4.681.122-8.217 1.646-10.515 4.538-3.643 4.567-2.702 10.776-2.455 12.021l.154.455c.089.193 8.944 19.487 9.906 28.241.837 7.512 7.287 16.03 12.465 22.883l.215.276c1.689 2.244 3.146 4.18 4.28 5.955 15.149 18.266 39.997 34.486 40.201 34.618 3.056 2.613 4.688 5.05 4.738 7.054.029 1.313-.698 2.044-.723 2.069l-.601.551 3.332 3.74.619-.533c.243-.215 2.426-2.197 2.405-5.791-.014-3.568-2.283-7.304-6.778-11.127-.247-.161-24.898-16.398-39.12-33.516-1.138-1.822-2.874-4.109-4.549-6.327-4.556-6.023-10.797-14.283-11.477-20.399-1.013-9.13-9.158-27.214-10.196-29.483-.129-.916-.558-4.957 1.525-7.555 1.26-1.575 3.343-2.452 6.199-2.609 11.119 4.631 23.817 34.124 23.943 34.421l.268.626.544.419c.759.555 4.753 3.335 8.621 3.335.888 0 1.721-.14 2.466-.426 1.542-.576 3.547-2.015 4.32-5.536.125-.48 3.049-11.989-.981-31.397-1.603-7.766-3.457-14.867-5.418-22.382l-.032-.111c-3.16-12.093-6.428-24.597-9.04-41.304-.24-5.594 1.424-8.901 4.678-9.319 3.708-.523 8.285 2.638 8.8 5.039l.365 1.689.397.057c.687 2.248 1.99 7.82 2.856 11.549 7.376 31.429 14.28 57.448 24.039 57.448.795 0 1.961-.233 3.013-1.349 4.012-4.23 3.375-21.24 1.847-48.765-.744-13.335-2.126-38.143-.19-39.976l.709-.401.34-.737c.92-1.976 2.459-2.981 4.574-2.981.261 0 .515.014.759.047 3.099.336 6.496 2.777 6.993 5.028.383 1.729.888 10.039 1.474 19.651l.018.326c3.335 54.993 5.54 68.42 11.213 68.42 6.442 0 9.595-12.798 15.804-51.253l.029-.157c1.525-9.42 3.815-23.585 4.839-25.668 3.335-1.668 6.36-2.076 8.117-1.113 2.226 1.231 2.963 4.545 3.178 7.072.007.687-.676 6.202-1.342 11.542-6.027 48.411-6.893 65.017-3.565 68.349.884.877 2.129 1.256 3.246.998 3.393-.716 5.637-5.823 11.671-21.444 4.556-11.782 10.221-26.441 16.094-33.584.054-.054.333-.197.948-.197.719 0 1.542.197 2.323.558 1.464.684 2.928 2.015 2.62 3.701-1.532 8.432-8.435 31.981-13.485 49.173-4.366 14.877-6.163 21.101-6.31 22.772 0 .311-.136 31.286-11.796 68.539l-3.854 13.016 4.831 1.428 3.84-12.973c11.635-37.181 12.014-69.541 12-69.763.118-1.181 3.443-12.476 6.12-21.598l.075-.233c5.322-18.191 11.957-40.81 13.532-49.478.672-3.72-1.468-7.317-5.458-9.164z"
fill={colors.primary + '00'}
stroke="black"
strokeWidth={2}
/>
</Svg>
);
}
Example #12
| Source File: main-stack.js From astrale with GNU General Public License v3.0 | 5 votes |
|
function MainStackNavigation() {
const [{ showLoader }] = useGlobals();
const { colors } = useTheme();
return (
<>
<Sta.Navigator screenOptions={{ headerShown: false }} mode="modal">
<Sta.Screen name="Home" component={BottomBarNavigation} />
<Sta.Screen
name="Profile"
component={ProfileScreen}
options={{
cardStyle: {
backgroundColor: 'transparent',
marginTop: 50,
borderTopLeftRadius: 30,
borderTopRightRadius: 30,
},
}}
/>
<Sta.Screen
name="Signs"
component={ZodiacScreen}
options={{
cardStyle: {
backgroundColor: 'transparent',
marginTop: 50,
borderTopLeftRadius: 30,
borderTopRightRadius: 30,
},
}}
/>
<Sta.Screen
name="Question"
component={AstrologerQuestionScreen}
options={{
cardStyle: {
backgroundColor: 'transparent',
marginTop: 100,
borderTopLeftRadius: 30,
borderTopRightRadius: 30,
},
}}
/>
</Sta.Navigator>
{showLoader && (
<Portal>
<BlurView
intensity={70}
style={[
StyleSheet.absoluteFill,
{
flex: 1,
justifyContent: 'center',
alignItems: 'center',
zIndex: 50,
},
]}
>
<View
style={{
backgroundColor: colors.background,
padding: 20,
borderRadius: 15,
}}
>
<ActivityIndicator size={50} />
</View>
</BlurView>
</Portal>
)}
</>
);
}
Example #13
| Source File: zodiac.screen.js From astrale with GNU General Public License v3.0 | 5 votes |
|
/**
* @param navigation
* @returns {*}
* @constructor
*/
function ZodiacScreen({ navigation }) {
const [{ session }, dispatch] = useGlobals();
const { colors } = useTheme();
const isAndroid = PlatformUtils.isAndroid;
const isDark = useIsDark();
const locales = ['es', 'en'];
const cut_locale = Localization.locale.substring(0, 2);
const locale = locales.includes(cut_locale) ? cut_locale : 'en';
const handleSignPress = async (sign) => {
dispatch({
type: 'setSession',
fields: { sign },
});
await Storer.set(SESSION_KEY, { session, sign });
dispatch({ type: 'toggleLoader' });
await Sleep(300);
dispatch({ type: 'toggleLoader' });
navigation.pop();
};
return (
<BlurView
style={[StyleSheet.absoluteFill]}
tint={isDark ? 'dark' : 'light'}
intensity={isAndroid ? 150 : 100}
>
<Close position="right" />
<View style={styles.headerContainer}>
<ShadowHeadline style={styles.headerHeadline}>
{i18n.t('Zodiac signs')}
</ShadowHeadline>
</View>
<View style={styles.signsContainer}>
{HoroscopeSigns.map((sign) => (
<Sign
key={sign}
showTitle
sign={sign}
signHeight={65}
signWidth={65}
onPress={() => handleSignPress(sign)}
style={{ marginBottom: 7, padding: 3 }}
styleTitle={{ marginTop: 5 }}
subtitle={HoroscopeDates[sign][locale]}
/>
))}
</View>
<Backgrounds.ConstellationSimple
height={450}
width={450}
color={colors.text}
dotColor={colors.primary}
style={styles.constellation}
/>
</BlurView>
);
}
Example #14
| Source File: name.screen.js From astrale with GNU General Public License v3.0 | 5 votes |
|
/**
* @param navigation
* @returns {*}
* @constructor
*/
function NameScreen({ navigation }) {
const dispatch = useGlobals()[1];
const [name, setName] = React.useState();
const { colors } = useTheme();
const buttonDisabled = !name || name.length < 2;
const _handleContinue = () => {
dispatch({
type: 'setSession',
fields: { name },
});
navigation.push('BirthDate');
};
return (
<DefaultView>
<SpaceSky />
<Aquarius width={60} height={60} style={styles.aquarius} />
<Backgrounds.Constellation
color={colors.text}
dotColor={colors.primary}
height={180}
width={180}
style={styles.constellation}
/>
<View style={{ flex: 0.5 }} />
<View style={styles.textContainer}>
<Headline style={styles.textHeadline}>
{i18n.t("What's your name?")}
</Headline>
<Text style={styles.textText}>
{i18n.t(
'In order to give you accurate and personal information we need to know some info'
)}
</Text>
</View>
<View style={styles.inputContainer}>
<CustomInput
value={name}
placeholder={i18n.t('Write here')}
onChangeText={(text) => setName(text)}
style={{ fontSize: 12 }}
maxLength={20}
/>
</View>
<View style={styles.buttonContainer}>
<Button
mode="contained"
disabled={buttonDisabled}
onPress={_handleContinue}
>
{i18n.t('Continue')}
</Button>
</View>
</DefaultView>
);
}
Example #15
| Source File: loading.screen.js From astrale with GNU General Public License v3.0 | 5 votes |
|
/**
* @param navigation
* @returns {*}
* @constructor
*/
function LoadingScreen({ navigation }) {
const [{ session }, dispatch] = useGlobals();
const { colors } = useTheme();
const [phrase, setPhrase] = React.useState(0);
const phrases = [
i18n.t('Analyzing name'),
i18n.t('Analyzing birth date'),
i18n.t('Analyzing gender'),
i18n.t('Analyzing relationship status'),
i18n.t('Analyzing favourite number'),
i18n.t('Concluding analysis'),
];
React.useEffect(() => {
const intervalNumber = setInterval(() => {
if (phrase < 5) {
setPhrase(phrase + 1);
} else {
const preSession = {
...session,
...{ days: 1, daysRow: 1, basicsDone: true },
};
Storer.set(SESSION_KEY, preSession).then(() => {
dispatch({
type: 'setSession',
fields: preSession,
});
});
}
}, 3000);
return () => clearInterval(intervalNumber);
});
return (
<DefaultView>
<SpaceSky />
<View style={{ flex: 1 }} />
<View style={styles.loadingContainer}>
<Rotation style={{ opacity: 0.7 }} rotate>
<SolarSystem />
</Rotation>
</View>
<View style={{ flex: 3 }}>
<Subheading style={[styles.textSubheading, { color: colors.primary }]}>
{phrases[phrase]}
</Subheading>
</View>
</DefaultView>
);
}
Example #16
| Source File: main-stack.js From astrale with GNU General Public License v3.0 | 5 votes |
|
function BottomBarNavigation() {
const [{ session }] = useGlobals();
const { colors } = useTheme();
const _barStyle = useIsDark() ? 'light-content' : 'dark-content';
return (
<>
<StatusBar
barStyle={_barStyle}
backgroundColor={colors.background}
animated
/>
<Tab.Navigator>
<Tab.Screen
name="symbol"
component={DailyScreen}
options={{
tabBarIcon: (props) => (
<BarIcon
{...props}
name={`zodiac-${session.sign.toLowerCase()}`}
/>
),
tabBarLabel: (props) => (
<BarLabel {...props} colo>
{i18n.t(session.sign)}
</BarLabel>
),
title: i18n.t(session.sign),
}}
/>
<Tab.Screen
name="Compatibility"
component={CompatibilityScreen}
options={{
tabBarIcon: (props) => <BarIcon {...props} name="account-heart" />,
tabBarLabel: (props) => (
<BarLabel {...props}>{i18n.t('Compatibility2')}</BarLabel>
),
title: i18n.t('Compatibility2'),
}}
/>
<Tab.Screen
name="Learn"
component={LearnStackNavigation}
options={{
tabBarIcon: (props) => (
<BarIcon {...props} name="book-open-page-variant" />
),
tabBarLabel: (props) => (
<BarLabel {...props}>{i18n.t('Learn')}</BarLabel>
),
title: i18n.t('Learn'),
}}
/>
<Tab.Screen
name="Astrologists"
component={AstrologersScreen}
options={{
tabBarIcon: (props) => (
<BarIcon {...props} name="theme-light-dark" />
),
tabBarLabel: (props) => (
<BarLabel {...props}>{i18n.t('Astrologers')}</BarLabel>
),
title: i18n.t('Astrologers'),
}}
/>
</Tab.Navigator>
</>
);
}
Example #17
| Source File: default-view.js From astrale with GNU General Public License v3.0 | 5 votes |
|
/**
* @param children
* @param theme react-native-paper theme
* @param background
* @param barStyle
* @param keyboardAvoidView
* @param styleView
* @returns {*}
* @constructor
*/
function DefaultView({
children,
background,
barStyle,
keyboardAvoidView,
styleView,
}) {
const { colors } = useTheme();
return (
<SafeAreaView style={{ flex: 1 }}>
<StatusBar
barStyle={barStyle}
backgroundColor={background || colors.background}
animated
/>
<KeyboardAvoidingView
style={{ flex: 1 }}
behavior={Platform.OS === 'ios' ? 'padding' : null}
enabled={keyboardAvoidView}
>
<View
style={[
{ flex: 1 },
{ backgroundColor: background || colors.background },
styleView,
]}
>
{children}
</View>
</KeyboardAvoidingView>
</SafeAreaView>
);
}
Example #18
| Source File: Settings_Screen.js From Reminder-App with MIT License | 5 votes |
|
function Settings() {
const { state, toggle_darkmode } = useContext(Context);
const { colors } = useTheme();
return (
<View style={styles.container}>
<View style={styles.TitleContainer}>
<Text style={[styles.text, { fontSize: 45, color: colors.text }]}>
Settings
</Text>
</View>
<View
style={{
marginHorizontal: 20,
}}
>
<View
style={{
flexDirection: "row",
justifyContent: "space-between",
marginVertical: 15,
}}
>
<Text style={[styles.text, { color: colors.text }]}>Theme</Text>
<TouchableOpacity onPress={toggle_darkmode}>
<Feather
name={state.Theme ? "moon" : "sun"}
size={40}
color={colors.text}
/>
</TouchableOpacity>
</View>
</View>
<View style={styles.TitleContainer}>
<Text style={[styles.text, { fontSize: 45, color: colors.text }]}>
About
</Text>
</View>
<Text
style={[
styles.text,
{ color: colors.text, fontSize: 16, marginHorizontal: 20 },
]}
>
Its a simple open source app created with react-native and expo
</Text>
</View>
);
}
Example #19
| Source File: InLove.js From astrale with GNU General Public License v3.0 | 5 votes |
|
function InLove({ color, height, width, style }) {
const { colors } = useTheme();
return (
<Svg height={height} width={width} viewBox="0 0 512 512" style={style}>
<Circle cx={256} cy={265.905} r={246.096} fill="#ffd93b" />
<G fill="#f92a08">
<Path d="M182.704 19.857c11.632 29.696-27.36 97.376-27.36 97.376S80.752 94.017 69.12 64.337c-6.272-16.032 1.68-34.224 17.712-40.496 12.96-5.072 27.328-.864 35.648 9.408-.88-13.2 6.768-26.016 19.728-31.088 16.08-6.304 34.224 1.664 40.496 17.696zM498.288 97.201c-17.12 35.888-112 58.08-112 58.08s-42.448-87.712-25.312-123.6c9.248-19.376 32.576-27.632 51.968-18.384 15.68 7.488 24.096 24.144 21.824 40.496 11.28-12.048 29.456-16.016 45.136-8.544 19.44 9.264 27.632 32.576 18.384 51.952z" />
</G>
<Path
d="M250.432 230.737c-5.744 46.464-47.52 84.048-93.456 84.048-45.792 0-78.448-37.584-72.704-84.048 5.728-46.336 47.648-83.904 93.44-83.904 45.936 0 78.448 37.584 72.72 83.904z"
fill="#fff"
/>
<Circle cx={173.616} cy={196.161} r={34.672} fill="#3e4347" />
<Ellipse
transform="rotate(-134.999 185.728 183.985)"
cx={185.728}
cy={183.983}
rx={10.736}
ry={7.568}
fill="#fff"
/>
<Path
d="M431.152 244.609c3.824 36.8-23.216 66.544-60.464 66.544-37.136 0-70.464-29.76-74.288-66.544-3.808-36.688 23.344-66.448 60.48-66.448 37.264 0 70.464 29.76 74.272 66.448z"
fill="#fff"
/>
<Circle cx={351.808} cy={224.481} r={34.672} fill="#3e4347" />
<Ellipse
transform="rotate(-134.999 363.912 212.265)"
cx={363.91}
cy={212.263}
rx={10.736}
ry={7.568}
fill="#fff"
/>
<Path
d="M98.112 349.729c12.208 18.528 24.464 31.2 39.744 44.464 31.696 26.704 73.648 42.288 117.872 42.816 46.464-.64 86.96-16.352 118.416-42.832 15.104-13.104 27.76-26.288 39.744-44.448-8.88 19.536-19.152 36.192-33.872 50.816-34.96 34.272-74.096 50.72-123.744 51.84-51.104-1.168-89.984-18.256-124.272-51.856-14.816-14.72-25.104-31.52-33.888-50.8z"
fill="#3e4347"
/>
</Svg>
);
}
Example #20
| Source File: ItsDifficult.js From astrale with GNU General Public License v3.0 | 5 votes |
|
function ItsDifficult({ color, height, width, style }) {
const { colors } = useTheme();
return (
<Svg height={height} width={width} viewBox="0 0 512 512" style={style}>
<Circle cx={256} cy={256} r={256} fill="#ffd93b" />
<Path
d="M421.584 332.448c-24.96 67.2-89.68 115.04-165.6 115.04s-140.56-47.84-165.6-115.04c-3.04-8.32 2.88-17.12 11.76-17.12 102.56 14.8 205.2 14.8 307.68 0 8.88 0 14.88 8.8 11.76 17.12z"
fill="#3e4347"
/>
<Path
d="M369.68 320.336c-75.728 8.08-151.536 8.08-227.312 0 3.504 32.592 52.992 43.872 113.6 43.872 60.72 0 110.208-11.264 113.712-43.872z"
fill="#fff"
/>
<Path
d="M255.984 447.488c21.712 0 42.464-4.032 61.664-11.184-3.104-11.808-9.84-22.144-19.024-29.616-8.56-6.96-20.48-8.96-30.32-4.08-6 2.96-13.12 4.72-21.28 4.72-1.6 0-3.2-.08-4.72-.24-10.16-.88-20.4 2.64-26.32 10.96-4.592 6.576-7.792 14.16-9.296 22.336 15.648 4.56 32.16 7.104 49.296 7.104z"
fill="#e24b4b"
/>
<G fill="#3e4347">
<Path d="M214.336 233.36c-6.624 0-12-5.376-12-12 0-16.8-13.664-30.464-30.448-30.464S141.44 204.56 141.44 221.36c0 6.624-5.376 12-12 12s-12-5.376-12-12c0-30.032 24.432-54.464 54.448-54.464s54.448 24.432 54.448 54.464c0 6.624-5.376 12-12 12zM382.576 233.36c-6.624 0-12-5.376-12-12 0-16.8-13.664-30.464-30.448-30.464-16.8 0-30.464 13.664-30.464 30.464 0 6.624-5.376 12-12 12s-12-5.376-12-12c0-30.032 24.432-54.464 54.464-54.464 30.016 0 54.448 24.432 54.448 54.464 0 6.624-5.376 12-12 12z" />
</G>
<Path
d="M363.568 101.024c0-10.656-19.28-42.112-19.28-42.112s-19.28 31.472-19.28 42.112 8.64 19.28 19.28 19.28c10.656 0 19.28-8.624 19.28-19.28z"
fill="#38c0dc"
/>
<Ellipse
transform="rotate(-141.178 352.645 107.609)"
cx={352.645}
cy={107.609}
rx={4.016}
ry={6.464}
fill="#45cbea"
/>
<Path
d="M451.008 168.384c0-17.52-31.744-69.328-31.744-69.328s-31.744 51.808-31.744 69.328 14.208 31.744 31.744 31.744 31.744-14.208 31.744-31.744z"
fill="#38c0dc"
/>
<Path
d="M438.112 183.344c-3.664 4.608-8.864 6.384-11.712 4.144-2.96-2.24-2.24-7.92 1.424-12.416 3.792-4.608 8.992-6.512 11.952-4.144 2.832 2.24 2.112 7.92-1.664 12.416z"
fill="#45cbea"
/>
</Svg>
);
}
Example #21
| Source File: compatibility.screen.js From astrale with GNU General Public License v3.0 | 4 votes |
|
/**
* @param navigation
* @returns {*}
* @constructor
*/
function CompatibilityScreen({ navigation }) {
const { colors } = useTheme();
const [scRef, setScRef] = React.useState();
const [selectedSigns, setSelectedSigns] = React.useState([]);
const [compDetailsShow, setCompDetailsShow] = React.useState(false);
const handleSignPress = (sign) => {
setSelectedSigns((selectedSigns) => [...selectedSigns, sign]);
};
const handleSignTopPress = () =>
setSelectedSigns([]) || setCompDetailsShow(false);
React.useEffect(() => {
if (selectedSigns.length === 2) {
setCompDetailsShow(true);
scRef.scrollTo({ y: 0 });
}
}, [selectedSigns]);
return (
<SafeAreaView style={{ flex: 1 }}>
<SpaceSky />
<View style={{ marginBottom: 10 }}>
<MainNav />
<View style={styles.headerContainer}>
<ShadowHeadline>{i18n.t('Compatibility')}</ShadowHeadline>
</View>
</View>
<View style={styles.matchCirclesContainer}>
{selectedSigns[0] ? (
<Sign
sign={selectedSigns[0]}
onPress={handleSignTopPress}
showTitle={false}
signHeight={100}
signWidth={100}
/>
) : (
<View
style={[
styles.matchCircle,
{
shadowColor: '#000000',
backgroundColor: colors.surface,
borderColor: colors.text,
},
]}
>
<Text style={{ textAlign: 'center', fontSize: 10 }}>
{i18n.t('Your sign')}
</Text>
</View>
)}
<View style={styles.matchSeparator}>
<Text style={{ fontSize: 22 }}>?</Text>
</View>
{selectedSigns[1] ? (
<Sign
onPress={handleSignTopPress}
sign={selectedSigns[1]}
showTitle={false}
signHeight={100}
signWidth={100}
/>
) : (
<View
style={[
styles.matchCircle,
{
shadowColor: '#000000',
backgroundColor: colors.surface,
borderColor: colors.text,
},
]}
>
<Text style={{ textAlign: 'center', fontSize: 10 }}>
{i18n.t('Partner sign')}
</Text>
</View>
)}
</View>
<Divider />
<ScrollView ref={(scrollRef) => setScRef(scrollRef)}>
<View style={{ height: 20 }} />
{compDetailsShow ? (
<MatchContent sign1={selectedSigns[0]} sign2={selectedSigns[1]} />
) : (
<SignsContent onPress={handleSignPress} />
)}
</ScrollView>
</SafeAreaView>
);
}
Example #22
| Source File: Dices.js From astrale with GNU General Public License v3.0 | 4 votes |
|
function Dices({ color, height, width, style }) {
const { colors } = useTheme();
return (
<Svg height={height} width={width} viewBox="0 0 512 512" style={style}>
<Path
d="M512 256c0 141.385-114.615 256-256 256-86.977 0-163.819-43.374-210.087-109.672v-.01a255.544 255.544 0 01-27.909-51.816A252.832 252.832 0 018.475 321.6C2.947 300.659 0 278.674 0 256c0-15.005 1.296-29.717 3.772-44.022.209-1.191.428-2.382.648-3.563a250.113 250.113 0 015.298-22.476 253.657 253.657 0 0114.367-38.463C64.909 60.343 153.412 0 256 0c141.385 0 256 114.615 256 256z"
fill={colors.accent}
/>
<Path
d="M451.135 195.135c0 107.771-87.365 195.135-195.135 195.135-66.298 0-124.871-33.062-160.138-83.597v-.008a194.777 194.777 0 01-21.274-39.497 192.722 192.722 0 01-7.264-22.031c-4.213-15.961-6.46-32.719-6.46-50.003 0-11.437.987-22.651 2.876-33.555.16-.908.327-1.816.494-2.716a190.54 190.54 0 014.039-17.132 193.362 193.362 0 0110.952-29.318C110.341 45.996 177.803 0 256 0c107.771 0 195.135 87.365 195.135 195.135z"
fill={colors.accent}
/>
<G fill="#d6dfe8">
<Path d="M509.816 287.807c0 3.135-1.515 6.269-4.545 8.119l-129.546 79.276a25.18 25.18 0 01-26.279 0L219.9 295.926c-3.03-1.849-4.545-4.984-4.545-8.119 0-3.124 1.515-6.248 4.545-8.108l129.546-79.276a25.18 25.18 0 0126.279 0l129.546 79.276c3.03 1.859 4.545 4.983 4.545 8.108z" />
<Path d="M215.353 123.246h294.463v164.561H215.353z" />
</G>
<Path
d="M362.58 235.492v143.409a25.142 25.142 0 01-13.134-3.699L219.9 295.926c-3.03-1.849-4.545-4.984-4.545-8.119V123.246l133.639 87.162a29.95 29.95 0 0113.586 25.084z"
fill="#b6c5d3"
/>
<Path
d="M505.268 115.132L375.72 35.857a25.165 25.165 0 00-26.272 0L219.9 115.132c-6.064 3.71-6.064 12.518 0 16.228l129.548 79.275a25.165 25.165 0 0026.272 0l129.547-79.275c6.064-3.71 6.064-12.517.001-16.228z"
fill="#eaf1f9"
/>
<G fill="#574d70">
<Ellipse cx={362.58} cy={126.046} rx={29.56} ry={17.335} />
<Ellipse
transform="rotate(-67.5 446.275 253.952)"
cx={446.286}
cy={253.959}
rx={15.326}
ry={10.449}
/>
<Ellipse
transform="rotate(-67.5 482.402 276.104)"
cx={482.414}
cy={276.111}
rx={15.326}
ry={10.449}
/>
<Ellipse
transform="rotate(-67.5 482.398 188.55)"
cx={482.41}
cy={188.555}
rx={15.326}
ry={10.449}
/>
<Ellipse
transform="rotate(-67.5 410.138 319.353)"
cx={410.148}
cy={319.362}
rx={15.326}
ry={10.449}
/>
<Ellipse
transform="rotate(-67.5 410.137 230.538)"
cx={410.148}
cy={230.544}
rx={15.326}
ry={10.449}
/>
<Ellipse
transform="rotate(76.272 322.581 314.154)"
cx={322.57}
cy={314.143}
rx={15.325}
ry={10.449}
/>
</G>
<G fill="#d6dfe8">
<Path d="M264.411 350.501c0 3.135-1.515 6.269-4.545 8.119L130.32 437.896a25.18 25.18 0 01-26.279 0l-58.128-35.568v-.01a255.544 255.544 0 01-27.909-51.816A252.832 252.832 0 018.475 321.6l95.566-58.483a25.182 25.182 0 0126.279 0l129.546 79.276c3.03 1.859 4.545 4.983 4.545 8.108z" />
<Path d="M264.411 185.94v164.561H18.004C6.384 321.264 0 289.374 0 256c0-16.259 1.515-32.162 4.42-47.585a250.113 250.113 0 015.298-22.476h254.693z" />
</G>
<Path
d="M117.175 298.183v143.412a25.142 25.142 0 01-13.134-3.699l-58.128-35.568a255.12 255.12 0 01-28.62-53.635 249.698 249.698 0 01-5.099-14.399C5.308 312.832 1.17 290.126.219 266.606A255.89 255.89 0 010 256c0-4.618.125-9.216.366-13.772a255.062 255.062 0 014.054-33.813l99.171 64.69a29.945 29.945 0 0113.584 25.078z"
fill="#b6c5d3"
/>
<Path
d="M259.866 194.058L130.32 273.335a25.186 25.186 0 01-26.279 0L3.772 211.978c.209-1.191.428-2.382.648-3.563a250.113 250.113 0 015.298-22.476 253.657 253.657 0 0114.367-38.463l79.956-48.922a25.143 25.143 0 0126.279 0l129.546 79.266c6.061 3.721 6.061 12.529 0 16.238z"
fill="#eaf1f9"
/>
<G fill="#574d70">
<Ellipse cx={117.175} cy={185.208} rx={18.996} ry={11.146} />
<Ellipse cx={117.175} cy={133.977} rx={18.996} ry={11.146} />
<Ellipse cx={117.175} cy={236.429} rx={18.996} ry={11.146} />
<Ellipse
transform="rotate(-75.498 197.072 319.422)"
cx={197.064}
cy={319.409}
rx={27.658}
ry={18.86}
/>
<Ellipse
transform="rotate(67.5 78.274 387.257)"
cx={78.276}
cy={387.267}
rx={15.326}
ry={10.449}
/>
<Ellipse
transform="rotate(67.5 78.273 298.444)"
cx={78.275}
cy={298.452}
rx={15.326}
ry={10.449}
/>
<Path d="M11.88 270.618c-3.699 1.536-8.182-.199-11.661-4.012A255.89 255.89 0 010 256c0-4.618.125-9.216.366-13.772 5.298-2.017 12.11 2.518 15.308 10.23 3.239 7.826 1.546 15.955-3.794 18.16z" />
</G>
</Svg>
);
}
Example #23
| Source File: profile.screen.js From astrale with GNU General Public License v3.0 | 4 votes |
|
/**
* @param navigation
* @returns {*}
* @constructor
*/
function ProfileScreen({ navigation }) {
const [{ session }, dispatch] = useGlobals();
const { name, sign, birthDate, number, relationship, sex } = session;
const { colors } = useTheme();
const { setRate } = useRate();
const { setStartShare } = useShare(
i18n.t(
'Try Astrale, the most precise horoscopes app in this existential plain'
),
'https://play.google.com/store/apps/details?id=josep.astrale'
);
const isDark = useIsDark();
const isAndroid = PlatformUtils.isAndroid;
const _handleDarkThemeChange = () => {
dispatch({
type: 'switchTheme',
theme: isDark ? 'light' : 'dark',
});
};
const _handleLogOut = async () => {
await Storer.delete(SESSION_KEY);
dispatch({ type: 'setLogOut' });
};
const _handleRatePress = async () => setRate(true);
const _handleSharePress = async () => setStartShare(true);
return (
<BlurView
style={[StyleSheet.absoluteFill]}
tint={isDark ? 'dark' : 'light'}
intensity={isAndroid ? 150 : 100}
>
<Backgrounds.Telescope color={colors.text} style={styles.telescope} />
<Close position="right" />
<View style={styles.headerContainer}>
<Avatar.Text label={name.substring(0, 1)} />
<View style={{ marginLeft: 25 }}>
<Title>{i18n.t(sign)}</Title>
<Title>{DateUtils.toEuropean(new Date(birthDate))}</Title>
</View>
</View>
<Divider style={{ marginTop: 25 }} />
<View style={styles.detailsContainer}>
<View style={{ flexDirection: 'row', alignItems: 'center' }}>
<MaterialCommunityIcons
name="gender-transgender"
color={colors.text}
size={18}
/>
<Text style={{ marginLeft: 10 }}>{i18n.t(sex)} </Text>
</View>
<View style={{ flexDirection: 'row', alignItems: 'center' }}>
<MaterialCommunityIcons
name="heart-circle"
color={colors.text}
size={18}
/>
<Text style={{ marginLeft: 10 }}>{i18n.t(relationship)} </Text>
</View>
<View style={{ flexDirection: 'row', alignItems: 'center' }}>
<MaterialCommunityIcons name="dice-6" color={colors.text} size={18} />
<Text style={{ marginLeft: 10 }}>{number} </Text>
</View>
</View>
<Divider style={{ marginTop: 15 }} />
<View style={styles.buttonsContainer}>
<Button
onPress={_handleSharePress}
icon="account-multiple"
style={{ marginTop: 10 }}
labelStyle={styles.buttonsLabel}
uppercase={false}
contentStyle={{ justifyContent: 'flex-start' }}
>
{i18n.t('Share with your friends')}
</Button>
<Button
onPress={_handleRatePress}
icon="message-draw"
style={{ marginTop: 10 }}
labelStyle={styles.buttonsLabel}
uppercase={false}
contentStyle={{ justifyContent: 'flex-start' }}
>
{i18n.t('Rate the app')}
</Button>
{__DEV__ && (
<Button
onPress={_handleLogOut}
icon="restart"
style={{ marginTop: 10 }}
labelStyle={styles.buttonsLabel}
uppercase={false}
contentStyle={{ justifyContent: 'flex-start' }}
>
{i18n.t('Restart')}
</Button>
)}
</View>
<Divider style={{ marginTop: 10 }} />
<View style={styles.optionsContainer}>
<View style={styles.optionsOption}>
<Button
icon="brightness-6"
style={styles.optionsButton}
labelStyle={styles.optionsLabel}
uppercase={false}
theme={{ colors: { primary: colors.text } }}
>
{i18n.t('Dark theme')}
</Button>
<Switch onChange={_handleDarkThemeChange} value={isDark} />
</View>
</View>
<Divider style={{ marginTop: 10 }} />
<View
style={[
{
position: 'absolute',
bottom: 20,
alignItems: 'center',
justifyContent: 'center',
width: '100%',
},
]}
>
<Text>v{Constants.manifest.version}</Text>
</View>
</BlurView>
);
}
Example #24
| Source File: Home.jsx From react-native-big-list with Apache License 2.0 | 4 votes |
|
Home = () => {
const {
colors: { background, surface },
} = useTheme();
const [openSelector, setOpenSelector] = useState(false);
const [selected, setSelected] = useState("standard");
const [insetBottom, setInsetBottom] = useState(0);
const insets = useSafeAreaInsets();
const options = [
{ label: "Standard List", value: "standard" },
{ label: "Columns List", value: "columns" },
{ label: "Sections List", value: "sections" },
{ label: "Multiselect List", value: "multiselect" },
{ label: "Compare List", value: "compare" },
];
const selectedOption = options.find((item) => item.value === selected);
return (
<View
style={[
styles.container,
{
backgroundColor: background,
paddingBottom: insetBottom + insets.bottom + 64,
},
]}
>
<Appbar.Header style={[styles.header, { height: 75 }]}>
<Appbar.Content title="BigList Example" subtitle="10.000 items" />
</Appbar.Header>
<TouchableOpacity
style={[
styles.containerBottom,
{ backgroundColor: surface, bottom: insets.bottom },
]}
onPress={() => setOpenSelector(!openSelector)}
onLayout={(event) => {
setInsetBottom(event.height || 0);
}}
>
<TextInput
label="View mode"
editable={false}
onTouchStart={() => setOpenSelector(true)}
value={selectedOption.label}
right={
<TextInput.Icon
name="chevron-down"
onPress={() => setOpenSelector(!openSelector)}
/>
}
/>
</TouchableOpacity>
{selected === "standard" ? (
<List />
) : selected === "columns" ? (
<ColumnsList />
) : selected === "sections" ? (
<SectionList />
) : selected === "multiselect" ? (
<MultiSelectList />
) : selected === "compare" ? (
<CompareList />
) : null}
{openSelector && (
<View
style={[
StyleSheet.absoluteFill,
{ flex: 1, backgroundColor: surface },
]}
>
<Appbar.Header style={[styles.header, { height: 75 }]}>
<Appbar.Content
title="View mode"
subtitle="Select the list view mode example..."
/>
</Appbar.Header>
<SelectList
data={options}
value={selected}
onSelect={(value) => {
setSelected(value);
setOpenSelector(false);
}}
/>
</View>
)}
</View>
);
}
Example #25
| Source File: learn.screen.js From astrale with GNU General Public License v3.0 | 4 votes |
|
/**
* @param navigation
* @returns {*}
* @constructor
*/
function LearnScreen({ navigation }) {
const dispatch = useGlobals()[1];
const { colors } = useTheme();
const handleViewLesson = async (lesson) => {
try {
dispatch({ type: 'toggleLoader' });
} catch {
} finally {
dispatch({ type: 'toggleLoader' });
navigation.navigate(lesson, { key: 1 });
}
};
return (
<SafeAreaView style={{ flex: 1 }}>
<SpaceSky />
<View style={{ marginBottom: 10 }}>
<MainNav style={{ top: 0 }} />
<View style={styles.headerContainer}>
<ShadowHeadline>{i18n.t('Learn')}</ShadowHeadline>
</View>
</View>
<ScrollViewFadeFirst element={<SubHeading />} height={140}>
<Surface
style={[
styles.surfaceRight,
{ backgroundColor: 'transparent', marginTop: 10 },
]}
>
<View style={[StyleSheet.absoluteFill, { top: -25, opacity: 0.8 }]}>
<Constellation
color={colors.text + '3D'}
dotColor={colors.accent}
width={250}
height={300}
/>
</View>
<LinearGradient
colors={['transparent', '#4c4c4c' + 'E6', '#4c4c4c' + 'E6']}
start={[0, 0]}
end={[1, 0]}
style={styles.gradientRight}
>
<View style={{ flex: 0.8 }} />
<View style={{ flex: 1 }}>
<Subheading
theme={{ colors: { text: '#FFFFFF' } }}
numberOfLines={1}
style={{ fontWeight: 'bold' }}
>
{i18n.t('About the Zodiac')}
</Subheading>
<Caption theme={{ colors: { text: '#FFFFFF' } }}>
{i18n.t('Older as mankind')}
</Caption>
<Caption
theme={{ colors: { text: '#FFFFFF' } }}
style={{ marginTop: -3 }}
>
{i18n.t('Bind to the sky')}
</Caption>
<View style={{ flex: 1, justifyContent: 'flex-end' }}>
<Button
mode="contained"
icon="lock-outline"
style={{ borderRadius: 25, marginTop: 5 }}
theme={{
colors: { primary: colors.backdrop, text: '#FFFFFF' },
}}
labelStyle={{ fontSize: 9, letterSpacing: 0 }}
onPress={() => handleViewLesson('AboutZodiac')}
>
{i18n.t('Watch an ad to unblock')}
</Button>
</View>
</View>
</LinearGradient>
</Surface>
<View style={{ height: 20 }} />
<Surface
style={[
styles.surfaceLeft,
{ backgroundColor: 'transparent', height: 140 },
]}
>
<View style={[StyleSheet.absoluteFill, { right: 150, opacity: 0.4 }]}>
<ConstellationSimple
color={colors.text + '3D'}
dotColor={colors.primary}
width={200}
height={150}
/>
</View>
<LinearGradient
colors={['#81411a', '#81411aE6', '#81411a3D', 'transparent']}
start={[0, 0]}
end={[1, 0]}
style={styles.gradientLeft}
>
<View style={{ flex: 1 }}>
<Subheading
theme={{ colors: { text: '#FFFFFF' } }}
numberOfLines={1}
style={{ fontWeight: 'bold' }}
>
{i18n.t('The signs')}
</Subheading>
<Caption theme={{ colors: { text: '#FFFFFF' } }}>
{i18n.t('The importance of when')}
</Caption>
<View style={{ flex: 1, justifyContent: 'flex-end' }}>
<Button
mode="contained"
icon="lock-outline"
style={{ borderRadius: 25 }}
theme={{
colors: { primary: colors.backdrop, text: '#FFFFFF' },
}}
labelStyle={{ fontSize: 9, letterSpacing: 0 }}
onPress={() => handleViewLesson('TheSigns')}
>
{i18n.t('Watch an ad to unblock')}
</Button>
</View>
</View>
<View style={{ flex: 0.6 }} />
</LinearGradient>
</Surface>
<View style={{ height: 20 }} />
<Surface
style={[
styles.surfaceRight,
{ backgroundColor: 'transparent', height: 130 },
]}
>
<View style={[StyleSheet.absoluteFill, { top: -25, opacity: 0.3 }]}>
<Leo color={colors.text} width={200} height={200} />
</View>
<LinearGradient
colors={['transparent', '#13366f' + 'E6', '#13366f' + 'E6']}
start={[0, 0]}
end={[1, 0]}
style={styles.gradientRight}
>
<View style={{ flex: 0.8 }} />
<View style={{ flex: 1 }}>
<Subheading
theme={{ colors: { text: '#FFFFFF' } }}
numberOfLines={1}
style={{ fontWeight: 'bold' }}
>
{i18n.t('The elements')}
</Subheading>
<Caption theme={{ colors: { text: '#FFFFFF' } }}>
{i18n.t('The pillars of life')}
</Caption>
<View style={{ flex: 1, justifyContent: 'flex-end' }}>
<Button
mode="contained"
icon="lock-outline"
style={{ borderRadius: 25, marginTop: 5 }}
theme={{ colors: { primary: colors.backdrop } }}
labelStyle={{ fontSize: 9, letterSpacing: 0 }}
onPress={() => handleViewLesson('TheElements')}
>
{i18n.t('Watch an ad to unblock')}
</Button>
</View>
</View>
</LinearGradient>
</Surface>
<View style={{ height: 150 }} />
</ScrollViewFadeFirst>
</SafeAreaView>
);
}
Example #26
| Source File: daily.screen.js From astrale with GNU General Public License v3.0 | 4 votes |
|
/**
* @param navigation {object}
* @returns {*}
* @constructor
*/
function DailyScreen({ navigation }) {
const [{ session }, dispatch] = useGlobals();
const { colors } = useTheme();
const dataIndex = daily.findIndex(
(item) =>
item.day.split('-')[2].toString() === new Date().getDate().toString() &&
item.sign === session.sign
);
const data = daily[dataIndex !== -1 ? dataIndex : 0];
const d = new Date();
React.useLayoutEffect(() => {
if (!session?.sign) {
Storer.delete(SESSION_KEY).then(() => dispatch({ type: 'setLogOut' }));
}
}, [dispatch, session?.sign]);
const Header = (
<View>
<MainNav
rightButton={
<MaterialCommunityIcons
onPress={() => navigation.navigate('Signs', { key: 'Sign' })}
name="swap-horizontal"
color={colors.text}
size={30}
style={{ opacity: 0.5 }}
/>
}
/>
<View style={[styles.headerContainer]}>
<Sign
sign={session.sign}
showTitle={false}
signWidth={70}
signHeight={70}
/>
<ShadowHeadline style={styles.headerHeadline}>
{i18n.t(session.sign)}
</ShadowHeadline>
<Subheading>
{i18n.t('date_daily', {
day: d.getDate(),
month: months[session.language][d.getMonth()],
year: d.getFullYear(),
})}
</Subheading>
</View>
<Divider />
</View>
);
return (
<>
<SpaceSky />
<SafeAreaView>
<ScrollViewFadeFirst element={Header} height={200}>
<View style={{ height: 20 }} />
<ShowFromTop>
<View
style={[
styles.defaultContainer,
{
flexDirection: 'row',
alignItems: 'center',
marginTop: 10,
},
]}
>
<TextBold style={styles.textTitles}>
{i18n.t('Focus of the day')}:
</TextBold>
<TextBold
style={{ fontSize: 16, marginLeft: 5, color: colors.primary }}
>
{i18n.t(data.contents.focus)}
</TextBold>
</View>
<View
style={[
styles.defaultContainer,
{
marginTop: 25,
marginBottom: 5,
flexDirection: 'row',
justifyContent: 'space-around',
},
]}
>
<ProgressItem
text={i18n.t('Love')}
percent={data.contents.percents.love}
/>
<ProgressItem
text={i18n.t('Career')}
percent={data.contents.percents.work}
style={{ marginHorizontal: 5 }}
/>
<ProgressItem
text={i18n.t('Health')}
percent={data.contents.percents.health}
/>
</View>
<View style={[styles.defaultContainer]}>
<View style={styles.horoscopeTodayContainer}>
<TextBold style={styles.textTitles}>
{i18n.t('Your horoscope for today')}:
</TextBold>
<View style={styles.iconsHoroscopeToday}>
<MaterialCommunityIcons
name="heart"
size={16}
color={colors.text}
style={{ marginLeft: 5 }}
/>
<MaterialCommunityIcons
name="briefcase"
size={16}
color={colors.text}
style={{ marginLeft: 5 }}
/>
<MaterialCommunityIcons
name="food-apple"
size={16}
color={colors.text}
style={{ marginLeft: 5 }}
/>
</View>
</View>
<Text style={{ marginTop: 15 }}>
{data.contents.text[Language.filteredLocale()]}
</Text>
</View>
<View style={styles.defaultContainer}>
<TextBold style={styles.textTitles}>
{i18n.t('Today you love')}
</TextBold>
</View>
<View
style={[
styles.loveContainer,
{
borderColor: colors.text + '0D',
},
]}
>
<View
style={[
styles.heartLoveContainer,
{
backgroundColor: colors.text + '0D',
},
]}
>
<MaterialCommunityIcons
name="heart"
size={30}
color={colors.accent}
/>
</View>
<View style={[styles.loveSignsContainer]}>
{data.contents.compatibility.map((sign, i) => (
<Sign
key={i}
sign={sign}
signHeight={40}
signWidth={50}
styleTitle={{ fontSize: 12 }}
/>
))}
</View>
</View>
<Divider style={{ marginTop: 20 }} />
<View style={styles.defaultContainer}>
<TextBold style={styles.textTitles}>
{i18n.t('Lucky numbers')}
</TextBold>
</View>
<View
style={[
styles.defaultContainer,
{
flexDirection: 'row',
justifyContent: 'space-evenly',
},
]}
>
{data.contents.numbers.map((number, i) => (
<LuckyNumber key={i} number={number} />
))}
</View>
<View style={{ paddingVertical: 10 }} />
</ShowFromTop>
</ScrollViewFadeFirst>
</SafeAreaView>
</>
);
}
Example #27
| Source File: birthday_swipable.js From Reminder-App with MIT License | 4 votes |
|
export default function renderItem({
item,
index,
itemRefs,
deleteItem,
showmodel,
}) {
const { colors } = useTheme();
function Age() {
let years = Math.floor(moment().diff(moment(item.Date), "years", true));
let days = Math.floor(moment().diff(moment(item.Date), "days", true));
let text = "";
if (years == 0 && days == 0) {
return null;
} else if (days == 0) {
text = `Happy Birthday, ${item.text} is ${years} old`;
} else if (years == 0) {
text = `Lived for ${days} days`;
} else {
text = "Lived for " + days + " Days, \n" + years + " Years old";
}
return (
<Text
style={[
styles.text,
{ color: colors.text, fontSize: 16, marginTop: 15 },
]}
>
{text}
</Text>
);
}
const renderUnderlayLeft = ({ item, percentOpen }) => (
<Animated.View
style={[
styles.row,
styles.underlayLeft,
{ opacity: percentOpen, backgroundColor: colors.elemprim },
]} // Fade in on open
>
<TouchableOpacity onPressOut={() => deleteItem(item)}>
<FontAwesome name="trash-o" size={35} color={colors.text} />
</TouchableOpacity>
</Animated.View>
);
const renderUnderlayRight = ({ item, percentOpen, open, close }) => (
<Animated.View
style={[
styles.row,
styles.underlayRight,
{
backgroundColor: colors.elemsec,
transform: [{ translateX: multiply(sub(1, percentOpen), -400) }], // Translate from left on open
},
]}
>
<TouchableOpacity onPressOut={close}>
<Text style={[styles.text, { color: colors.text }]}>CLOSE</Text>
</TouchableOpacity>
</Animated.View>
);
return (
<SwipeableItem
key={item.key}
item={item}
ref={(ref) => {
if (ref && !itemRefs.get(item.key)) {
itemRefs.set(item.key, ref);
}
}}
onChange={({ open }) => {
if (open) {
// Close all other open items
[...itemRefs.entries()].forEach(([key, ref]) => {
if (key !== item.key && ref) ref.close();
});
}
}}
overSwipe={30}
renderUnderlayLeft={renderUnderlayLeft}
renderUnderlayRight={renderUnderlayRight}
snapPointsLeft={[150]}
snapPointsRight={[175]}
>
<View style={[styles.row, { flex: 1, backgroundColor: colors.tab }]}>
<View
style={{
flexDirection: "row",
alignItems: "center",
justifyContent: "space-between",
flex: 1,
}}
>
<View style={{ flex: 1, marginVertical: 10, marginHorizontal: 5 }}>
<TouchableOpacity onPress={() => showmodel(item)}>
<Text style={[styles.text, { color: colors.text, flex: 1 }]}>
{item.text == "Tap to change the name"
? item.text
: `${item.text}'s Birthday`}
</Text>
{Age()}
{/* <Text
style={[
styles.text,
{ color: colors.text, fontSize: 16, marginTop: 15 },
]}
>
{Age()}
</Text> */}
</TouchableOpacity>
</View>
<View style={styles.sep} />
<View style={{ flex: 0.3 }}>
<Text
style={[
styles.text,
{
color: colors.text,
fontSize: 14,
textAlign: "center",
lineHeight: 22,
},
]}
>
{`${
moment(item.Date).format("Do ") +
"," +
moment(item.Date).format("MMM")
}`}
</Text>
</View>
</View>
</View>
</SwipeableItem>
);
}
Example #28
| Source File: astrologers.screen.js From astrale with GNU General Public License v3.0 | 4 votes |
|
/**
* @param navigation
* @returns {*}
* @constructor
*/
function AstrologersScreen({ navigation }) {
const { colors } = useTheme();
const [showAdvice, setShowAdvice] = React.useState(true);
const _handleCloseAdvice = () => setShowAdvice(false);
const astrologist_colors = {
Western: '#0f3e6a',
Vedic: '#3d530d',
Hellenistic: '#735b13',
Oriental: '#62230d',
};
const dummy_astrologist = [
{
id: 1,
name: 'Marisa',
school: 'Hellenistic',
years_exp: 9,
stars: 4,
reviews: 125,
photo: require('./astrologers/marisa.jpg'),
},
{
id: 2,
name: 'Carter',
school: 'Western',
years_exp: 21,
stars: 5,
reviews: 120,
photo: require('./astrologers/carter.jpg'),
},
{
id: 3,
name: 'Samanta',
school: 'Oriental',
years_exp: 12,
stars: 5,
reviews: 321,
photo: require('./astrologers/samanta.jpg'),
},
{
id: 4,
name: 'Bianca',
school: 'Vedic',
years_exp: 45,
stars: 4,
reviews: 69,
photo: require('./astrologers/bianca.jpg'),
},
{
id: 5,
name: 'George',
school: 'Western',
years_exp: 15,
stars: 5,
reviews: 198,
photo: require('./astrologers/george.jpg'),
},
{
id: 6,
name: 'Meowi',
school: 'Oriental',
years_exp: 1,
stars: 5,
reviews: 7,
photo: require('./astrologers/meowi.jpg'),
},
];
return (
<SafeAreaView style={{ flex: 1 }}>
<SpaceSky />
<View style={{ marginBottom: 10 }}>
<MainNav style={{ top: 0 }} />
<View style={styles.headerContainer}>
<ShadowHeadline>{i18n.t('Astrologers')}</ShadowHeadline>
</View>
</View>
<ScrollView>
{showAdvice && (
<View
style={[
styles.adviceContainer,
{ borderColor: colors.primary + 'E6' },
]}
>
<MaterialCommunityIcons
onPress={_handleCloseAdvice}
name="close"
size={20}
style={styles.adviceClose}
color={colors.primary + 'E6'}
/>
<Title style={{ textAlign: 'center' }}>
{i18n.t('How it works')}
</Title>
<View style={{ marginTop: 10 }}>
<View style={{ flexDirection: 'row', alignItems: 'center' }}>
<Avatar.Text
size={30}
label="1"
theme={{ colors: { primary: colors.primary + 'E6' } }}
labelStyle={{ fontSize: 22 }}
/>
<Text style={{ marginLeft: 15, fontSize: 12 }}>
{i18n.t('Select an astrologer')}
</Text>
</View>
<View
style={[
styles.listDivider,
{
borderLeftColor: colors.accent + 'E6',
},
]}
/>
<View style={{ flexDirection: 'row', alignItems: 'center' }}>
<Avatar.Text
size={30}
label="2"
theme={{ colors: { primary: colors.primary + 'E6' } }}
labelStyle={{ fontSize: 22 }}
/>
<Text
style={{
marginLeft: 15,
fontSize: 12,
}}
>
{i18n.t('Introduce your email and question')}
</Text>
</View>
<View
style={[
styles.listDivider,
{
borderLeftColor: colors.accent + 'E6',
},
]}
/>
<View style={{ flexDirection: 'row', alignItems: 'center' }}>
<Avatar.Text
size={30}
label="3"
theme={{ colors: { primary: colors.primary + 'E6' } }}
labelStyle={{ fontSize: 22 }}
/>
<Text
style={{
marginLeft: 15,
fontSize: 12,
}}
>
{i18n.t('Wait ~24 hours for the response')}
</Text>
</View>
</View>
</View>
)}
<View style={styles.astrologistContainer}>
{dummy_astrologist.map(
({ id, name, school, years_exp, stars, photo, reviews }, i) => (
<React.Fragment key={id}>
<TouchableRipple
onPress={() =>
navigation.navigate('Question', {
key: 'Profile',
astrologist: dummy_astrologist[i],
})
}
style={styles.astrologistCard}
underlayColor={colors.text + '33'}
borderless
>
<>
<Image
style={styles.astrologistImage}
source={photo}
resizeMethod="resize"
resizeMode="cover"
/>
<LinearGradient
colors={['transparent', 'rgba(0,0,0,0.8)']}
style={styles.astrologistGradient}
>
<Title theme={{ colors: { text: '#FFFFFF' } }}>
{name}
</Title>
</LinearGradient>
<Subheading
theme={{ colors: { text: '#FFFFFF' } }}
style={[
styles.astrologistSubheading,
{ backgroundColor: astrologist_colors[school] },
]}
>
{i18n.t(school, { word: i18n.t('Astrology') })}
</Subheading>
<View
style={[
styles.astrologistDetailsContainer,
{ borderColor: astrologist_colors[school] },
]}
>
<Text style={{ fontSize: 10 }}>
{years_exp} other years experience
</Text>
<View style={styles.astrologistStars}>
<MaterialCommunityIcons name="star" color="gold" />
<MaterialCommunityIcons name="star" color="gold" />
<MaterialCommunityIcons name="star" color="gold" />
<MaterialCommunityIcons name="star" color="gold" />
<MaterialCommunityIcons
name={stars === 5 ? 'star' : 'star-half'}
color="gold"
/>
<Text style={styles.astrologistReview}>{reviews}</Text>
</View>
</View>
</>
</TouchableRipple>
{i + (1 % 2) === 0 ? (
<View style={{ width: '100%', height: 50 }} />
) : null}
</React.Fragment>
)
)}
</View>
</ScrollView>
</SafeAreaView>
);
}
Example #29
| Source File: birth-date.screen.js From astrale with GNU General Public License v3.0 | 4 votes |
|
/**
* @param navigation
* @returns {*}
* @constructor
*/
function BirthDateScreen({ navigation }) {
const [{ session }, dispatch] = useGlobals();
const { colors } = useTheme();
const [date, setDate] = React.useState(new Date(642449499000));
const [sign, setSign] = React.useState(
ZodiacCalculator(date.getDate(), date.getMonth() + 1)
);
const [show, setShow] = React.useState(true);
React.useLayoutEffect(() => {
setSign(ZodiacCalculator(date.getDate(), date.getMonth() + 1));
}, [date]);
const onChange = (event, selectedDate) => {
const currentDate = selectedDate || date;
Platform.isAndroid && setShow(Platform.isIos);
setDate(currentDate);
};
const showDatePicker = () => {
setShow(true);
};
const _handleContinue = () => {
dispatch({
type: 'setSession',
fields: { birthDate: date.getTime(), sign },
});
navigation.push('Sex');
};
return (
<DefaultView>
<SpaceSky />
<Scorpio width={60} height={60} style={styles.scorpio} />
<Backgrounds.ConstellationSimple
color={colors.text}
dotColor={colors.primary}
height={200}
width={200}
style={styles.constellation}
/>
<View style={{ flex: 1 }} />
<View style={styles.textContainer}>
<Headline style={styles.textHeadline}>
{i18n.t('Your date of birth')}
</Headline>
<Text style={styles.textText}>
{i18n.t(
'{name}, to give you accurate and personal information we need to know some info',
{ name: session.name }
)}
</Text>
</View>
<View style={styles.logoContainer}>
<Sign sign={sign} width={50} showTitle={false} height={50} />
</View>
<Surface style={styles.dateContainer}>
{Platform.isAndroid && (
<Button style={{ alignSelf: 'center' }} onPress={showDatePicker}>
{i18n.t('Press to change')}
</Button>
)}
{show && (
<RNDateTimePicker
value={date}
display="spinner"
onChange={onChange}
on
minimumDate={new Date(1930, 0, 0)}
maximumDate={new Date(2010, 0, 0)}
textColor="#ffffff"
/>
)}
{Platform.isAndroid && (
<View style={{ justifyContent: 'center', alignItems: 'center' }}>
<Text style={{ fontSize: 40 }}>{DateUtils.toEuropean(date)}</Text>
</View>
)}
</Surface>
<View style={styles.buttonContainer}>
<Button mode="contained" disabled={!date} onPress={_handleContinue}>
{i18n.t('Continue')}
</Button>
</View>
</DefaultView>
);
}
