Agora, com esse estilo, podemos fazer dois componentes, que será as animações, onde teremos aqui no start e na home, e também o botão padrão que usaremos na maioria das páginas.

Dentro de src criaremos então uma pasta chamada “Components”, dentro dela criaremos uma pasta chamanda “Common”, que será onde teremos componentes comuns a várias páginas.

Agora, dentro dela, podemos ter uma pasta chamada “LifeStatus” e outra “DefaultButton”, cada uma com um index.jsx dentro.

Começaremos pelo lifeStatus. Nós antes de começar a criar, iremos instalar a lib que manipulará nossas animações.

npm i --save lottie-react-native

Agora, nós temos a lib que precisamos. Podemos ir para o “index.jsx” da pasta “LifeStatus”

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

export default function LifeStatus() {
  /*Status:
   100 - Máximo
   50 - Médio
   25 - baixo
   00 - Curto (Acabou o game)
   No robô, nós temos primeiros Felicidade e depoisa Saúde xx-xx
*/
  return (
    <View style={styles.container}>
      
    </View>
  );
}

Agora, nós vamos utilizar as imagens que temos. Como o comentário indica, temos numeração para cada status, que vamos modificar futuramente através de props.

Agora vamos terminar de criar as coisas importando o “LottieView”, que é o componente principal da biblioteca que vamos estar usando.

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

import LottieView from "lottie-react-native";

export default function LifeStatus() {
  /* Status:
    100- Máximo
    50 - Médio
    25 - Baixo
    00 - Curto (Acabou o game)
    No robô, consideramos primeiro Felicidade e depois Saúde xx-xx
   */
  return (
    <View style={styles.container}>
      <LottieView
        source={require("../../../assets/education/education-100.json")}
        autoPlay
        loop
        style={styles.educacaoAnimacao}
      />
      <LottieView
        source={require("../../../assets/money/money-100.json")}
        autoPlay
        loop
        style={styles.financasAnimacao}
      />
      <LottieView
        source={require("../../../assets/robot/robot-100-100.json")}
        autoPlay
        loop   
        style={styles.roboAnimacao}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    width: 300,
    height: 300,
  },
  roboAnimacao: {
    width: 190,
    marginTop: 30,
    marginLeft: 25,
  },
  educacaoAnimacao: {
    width: 100,
    marginTop: 50,
    marginLeft: 5,
    position: "absolute",
  },
  financasAnimacao: {
    width: 100,
    position: "absolute",
    marginTop: 50,
    marginLeft: 95,
  },
});

Com isso feito, e com o estilo aplicado, podemos ir importar esse componente no nosso “Start”

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

import LifeStatus from "../../Components/Common/LifeStatus";

export default function Start() {
  return (
    <View style={styles.container}>
      <ScrollView style={styles.scroll} showsVerticalScrollIndicator={false}>
        <View style={{ alignItems: "center" }}>
          <Image
            source={require("../../assets/icons/logo3.png")}
            style={styles.logo}
          />
          <LifeStatus />
          <Text style={styles.description}>
            Vamos transformar sua vida {"\\n"} em um jogo, buscando sempre {"\\n"} o melhor nível.
          </Text>
        </View>
      </ScrollView>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "rgba(21, 21, 21, 0.98)",
  },
  logo: {
    width: 300,
    height: 60,
    marginTop: 60,
    marginBottom: 20,
  },
  description: {
    color: "#FFFFFF",
    fontSize: 20,
    textAlign: "center",
    marginVertical: 60,
  },
});

Podemos ver no emulador o seu retorno visual, e que está tudo funcionando e animado do jeito que queremos.