react-native-paper#useTheme JavaScript Examples

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

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

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

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

LuckyNumber = ({ number }) => {
  const { colors } = useTheme();
  return (
    <View
      style={[LuckyNumberStyles.circle, { backgroundColor: colors.accent }]}
    >
      <Text style={{ fontSize: 16, marginTop: 3 }}>{number}</Text>
    </View>
  );
}

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

/**
 * @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>
  );
}

/**
 * @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>
  );
}

/**
 * @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}
        />
      )}
    />
  );
}

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

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

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

/**
 * @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>
  );
}

/**
 * @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>
  );
}

/**
 * @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>
  );
}

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

/**
 * @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>
  );
}

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

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

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

/**
 * @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>
  );
}

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

/**
 * @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>
  );
}

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

/**
 * @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>
  );
}

/**
 * @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>
    </>
  );
}

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

/**
 * @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>
  );
}

/**
 * @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>
  );
}