Nós vamos agora entrar na parte final do código, manipulando a barra de progresso que temos e também as nossas imagens de acordo com os hábitos. Vamos começar pela criação do hábito, nós vamos criar ele com a barra de progresso em 1, que é o 100% da lib.

Nós vamos então no arquivo “statusBar”, que fica dentro de home dos components. Nós vamos deixar a barra de progreesso 0, enquanto o hábito não foi criado, e quando ele for criado nós vamos deixar ele em 1, que é o nosso 100. “Src → Components → Home → StatusBar → index.jsx”

Nós vamos receber via props 4 parâmetros, que será o progress bar de cada habito, e vamos colocar eles dentro de progress. Se tiver um número ele vai aceitar o número, e se for um null, ele vai apenas deixar como se fosse o 0, ou seja, quando não tiver hábito, ele vai ficar como 0.

import React from "react";
import { View, StyleSheet, Image } from "react-native";

import { ProgressBar } from "react-native-paper";

export default function StatusBar({
  mindHabit,
  moneyHabit,
  bodyHabit,
  funHabit,
}) {
  return (
    <View style={styles.container}>
      <View style={styles.statusBarContainer}>
        <Image
          source={require("../../../assets/icons/educationIcon.png")}
          style={styles.icon}
        />
        <ProgressBar
          progress={mindHabit}
          color={"#90B7F3"}
          style={styles.progress}
        />
      </View>
      <View style={styles.statusBarContainer}>
        <Image
          source={require("../../../assets/icons/moneyIcon.png")}
          style={styles.icon}
        />
        <ProgressBar
          progress={moneyHabit}
          color={"#85BB65"}
          style={styles.progress}
        />
      </View>
      <View style={styles.statusBarContainer}>
        <Image
          source={require("../../../assets/icons/bodyIcon.png")}
          style={styles.icon}
        />
        <ProgressBar
          progress={bodyHabit}
          color={"#FF0043"}
          style={styles.progress}
        />
      </View>
      <View style={styles.statusBarContainer}>
        <Image
          source={require("../../../assets/icons/funIcon.png")}
          style={styles.icon}
        />
        <ProgressBar
          progress={funHabit}
          color={"#FE7F23"}
          style={styles.progress}
        />
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    padding: 20,
    backgroundColor: "#151515",
    borderRadius: 10,
    marginTop: 10,
    marginBottom: 10,
  },
  statusBarContainer: {
    flexDirection: "row",
    alignItems: "center",
    marginVertical: 6,
  },
  progress: {
    borderRadius: 10,
    width: 250,
    height: 8,
  },
  icon: {
    width: 25,
    height: 25,
    marginRight: 5,
  },
});

Agora, precisamos ir para a home, pois será lá que vamos passar esses progressBar “Src → Pages → Home → index.jsx”

// ... outros códigos

return (
  <View style={styles.container}>
    <ScrollView>
      <View style={{ alignItems: "center" }}>
        <Text style={styles.dailyChecks}>
          ❤️ {robotDaysLife} {robotDaysLife === "01" ? "dia" : "dias"} - ✔️ 80
          Checks
        </Text>

        <LifeStatus />

        <StatusBar
          mindHabit={mindHabit?.progressBar}
          moneyHabit={moneyHabit?.progressBar}
          bodyHabit={bodyHabit?.progressBar}
          funHabit={funHabit?.progressBar}
        />

// ... outros códigos

Agora nós podemos testar, deixando um hábito criado e os demais vazios, vamos ver a mudança.