TextAlign e Position não funciona

Olá, Lucas, tudo bem?

Primeiramente, agradeço por compartilhar sua dúvida no fórum. Entendo que você está enfrentando dificuldades ao utilizar as propriedades "textAlign" e "position" no React Native. Vou tentar te ajudar a entender como essas propriedades funcionam e como podemos resolver esse problema.

Vamos abordar o problema que você mencionou em relação ao uso do "textAlign" e do "width: '100%'". Quando você define o "width" como "100%", você está indicando que o elemento deve ocupar toda a largura disponível no seu container. No entanto, você mencionou que o texto acaba sumindo do campo de visibilidade.

Isso pode acontecer se o elemento pai do texto estiver com uma largura menor do que o valor "100%". Nesse caso, o texto se ajustará à largura do elemento pai e, se ultrapassar esse limite, poderá ficar invisível.

Para resolver esse problema, você pode verificar o elemento pai do texto e garantir que ele tenha uma largura suficiente para acomodar o texto corretamente. Se necessário, você pode definir explicitamente a largura do elemento pai ou ajustar as propriedades de layout para que ele se expanda corretamente.

Aqui está um exemplo de como você pode aplicar o "textAlign" com uma largura de 100% corretamente:

import React from 'react';
import { View, Text } from 'react-native';

const App = () => {
  return (
    <View style={{ width: '100%' }}>
      <Text style={{ textAlign: 'center' }}>
        Seu texto aqui
      </Text>
    </View>
  );
};

export default App;

Nesse exemplo, definimos uma View com uma largura de "100%" e dentro dela colocamos o Text com a propriedade "textAlign" definida como "center". Isso fará com que o texto seja centralizado horizontalmente dentro da View.

Agora, em relação ao uso da propriedade "position: 'absolute'", você mencionou que o texto acaba ficando sobreposto à SafeAreaView e à imagem. A propriedade "position: 'absolute'" faz com que o elemento seja posicionado de forma absoluta em relação ao seu elemento pai.

Quando você aplica "position: 'absolute'" ao texto sem especificar as coordenadas de posicionamento (top, bottom, left, right), ele será posicionado no canto superior esquerdo do seu elemento pai por padrão. É provável que isso esteja causando a sobreposição com a SafeAreaView e a imagem no seu caso. Mas para que eu possa te ajudar de forma mais rápida, poderia mandar o seu código dessa parte? Assim posso dar uma olhada, fico no aguardo!

Bons estudos!