javascript – Bug no fetch do React Native

Estou tendo um problema ao usar o fetch no react native com expo, quanto entro na página “CadasGasto” e aperto no TextInput o teclado fecha a abre na mesma hora, quanto tiro a função fetch do código o TextInput normalmente, alguém poderia me dizer uma forma de usar o fetch sem bugar o TextInput?

import React, { useEffect } from 'react'
import { useStateIfMounted } from 'use-state-if-mounted'
import styled from 'styled-components'
import { Svg, Path } from 'react-native-svg'
import { StatusBar, TouchableOpacity } from 'react-native'
import ModalSelector from 'react-native-modal-selector'
import Erro from './components/Erro'
import Image503 from './components/Image503'
import { URL } from '@env'
import Campo from './components/Campo'

export default function App() {
  const (voltar, setVoltar) = useStateIfMounted('')
  const (pagina, setPagina) = useStateIfMounted('home')
  function Voltar(props) {
    const CampoView = styled.View`
        background-color: #049DD9;
        width: 100%;
        flex: 1;
        flex-direction: row;
        text-align: center;
        ${(props) => {
            if (props.estilo) {
                return props.estilo
            } else {
                return ''
            }
        }}
    `
    const TituloText = styled.Text`
        color: white;
        text-align: center;
        font-size: 30px;
        margin-bottom: 4%;
        flex: 11;
        margin-right: 17%;
        margin-top: 5%;
        ${(props) => {
            if (props.estilo) {
                return props.estilo
            } else {
                return ''
            }
        }}
    `

    const SetaVoltarSvg = styled(Svg)`
        padding: 70%;
        border-radius: 40px;
    `

    const BtnSvgVoltar = styled.TouchableOpacity`
        flex: 2;
        margin-left: 5%;
        margin-top: 1%;
        ${(props) => {
            if (props.estilo) {
                return props.estilo
            } else {
                return ''
            }
        }}
    `
    return (
        <CampoView estilo={props.estiloView}>
            <BtnSvgVoltar onPress={() => {
                setPagina(voltar)
                setVoltar(props.setVoltar)
            }} estilo={props.estiloBtn}>
                <SetaVoltarSvg xmlns="http://www.w3.org/2000/svg" fill="#ffffff" width="100%" height="100%" class="bi bi-arrow-left" viewBox="0 0 16 16">
                    <Path fill-rule="evenodd" d="M15 8a.5.5 0 0 0-.5-.5H2.707l3.147-3.146a.5.5 0 1 0-.708-.708l-4 4a.5.5 0 0 0 0 .708l4 4a.5.5 0 0 0 .708-.708L2.707 8.5H14.5A.5.5 0 0 0 15 8z"/>
                </SetaVoltarSvg>
            </BtnSvgVoltar>
            <TituloText estilo={props.estiloText}>{props.children}</TituloText>
        </CampoView>
    )
  }
  function Series() {
    const (series, setSeries) = useStateIfMounted(())
    const (erroSeries, setErroSeries) = useStateIfMounted('')
    useEffect(() => {
        async function getSeries () {
            fetch(`${URL}/series`).then(resu => {
                resu.json().then(resu => {
                    setErroSeries('')
                    setSeries(resu)
                }).catch(() => {
                    setSeries(())
                    setErroSeries('Houve um erro ao carregar as séries')
                })
            })
        }
        getSeries()
    })
    const corPd = '#049DD9'
    const FundoScrollView = styled.ScrollView`
        background-color: ${corPd};
    `
    const ContainerView = styled.View`
        flex: 1;
        background-color: ${corPd};
        align-items: center;
        justify-content: center;
    `
    return (
        <FundoScrollView>
            <StatusBar style="auto"/>
            <ContainerView>
                <Voltar>Séries</Voltar>
                <Erro>{erroSeries}</Erro>
                <Image503 erro={erroSeries}/>
                {series.map((serie, index) => <Campo chaveDados={index} key={index} dadosDados={serie} nome="Nome da série: " alunos="Quantidade de alunos: " turno="Turno da série: "></Campo>)}
            </ContainerView>
        </FundoScrollView>
    )
  }
  function Home() {
    const corPd = '#049DD9'
    
    const FundoScrollView = styled.ScrollView`
        background-color: ${corPd};
    `
    const ContainerView = styled.View`
        flex: 1;
        background-color: ${corPd};
        align-items: center;
        justify-content: center;
    `
    const ConfigSvg = styled(Svg)`
        width: 30px;
        height: 30px;
        padding: 0;
    `
    const BtnPd = styled.TouchableOpacity`
        background-color: #ffffff;
        width: 40%;
        padding: 4%;
        border-radius: 5px;
        margin-top: 5%;
    `
    BtnPd.Text = styled.Text`
        color: ${corPd};
        font-size: 20px;
        text-align: center;
    `
    return (
        <FundoScrollView>
            <StatusBar style="auto"/>
            <ContainerView>
                <TouchableOpacity onPress={() => {
                        setVoltar('home')
                        setPagina('config')
                    }} style={{marginLeft: '80%', marginTop: '5%'}}>
                    <ConfigSvg xmlns="http://www.w3.org/2000/svg" fill="#ffffff" class="bi bi-gear" viewBox="0 0 16 16">
                        <Path d="M8 4.754a3.246 3.246 0 1 0 0 6.492 3.246 3.246 0 0 0 0-6.492zM5.754 8a2.246 2.246 0 1 1 4.492 0 2.246 2.246 0 0 1-4.492 0z"/>
                        <Path d="M9.796 1.343c-.527-1.79-3.065-1.79-3.592 0l-.094.319a.873.873 0 0 1-1.255.52l-.292-.16c-1.64-.892-3.433.902-2.54 2.541l.159.292a.873.873 0 0 1-.52 1.255l-.319.094c-1.79.527-1.79 3.065 0 3.592l.319.094a.873.873 0 0 1 .52 1.255l-.16.292c-.892 1.64.901 3.434 2.541 2.54l.292-.159a.873.873 0 0 1 1.255.52l.094.319c.527 1.79 3.065 1.79 3.592 0l.094-.319a.873.873 0 0 1 1.255-.52l.292.16c1.64.893 3.434-.902 2.54-2.541l-.159-.292a.873.873 0 0 1 .52-1.255l.319-.094c1.79-.527 1.79-3.065 0-3.592l-.319-.094a.873.873 0 0 1-.52-1.255l.16-.292c.893-1.64-.902-3.433-2.541-2.54l-.292.159a.873.873 0 0 1-1.255-.52l-.094-.319zm-2.633.283c.246-.835 1.428-.835 1.674 0l.094.319a1.873 1.873 0 0 0 2.693 1.115l.291-.16c.764-.415 1.6.42 1.184 1.185l-.159.292a1.873 1.873 0 0 0 1.116 2.692l.318.094c.835.246.835 1.428 0 1.674l-.319.094a1.873 1.873 0 0 0-1.115 2.693l.16.291c.415.764-.42 1.6-1.185 1.184l-.291-.159a1.873 1.873 0 0 0-2.693 1.116l-.094.318c-.246.835-1.428.835-1.674 0l-.094-.319a1.873 1.873 0 0 0-2.692-1.115l-.292.16c-.764.415-1.6-.42-1.184-1.185l.159-.291A1.873 1.873 0 0 0 1.945 8.93l-.319-.094c-.835-.246-.835-1.428 0-1.674l.319-.094A1.873 1.873 0 0 0 3.06 4.377l-.16-.292c-.415-.764.42-1.6 1.185-1.184l.292.159a1.873 1.873 0 0 0 2.692-1.115l.094-.319z"/>
                    </ConfigSvg>
                </TouchableOpacity>
                <BtnPd onPress={() => {
                  setVoltar('home')
                  setPagina('series')
                }}>
                    <BtnPd.Text>Ver séries</BtnPd.Text>
                </BtnPd>
                <BtnPd onPress={() => {
                  setVoltar('home')
                  setPagina('gastos')
                }}>
                    <BtnPd.Text>Ver gastos</BtnPd.Text>
                </BtnPd>
                <BtnPd onPress={() => {
                  setVoltar('home')
                  setPagina('apps')
                }}>
                    <BtnPd.Text>Ver apps</BtnPd.Text>
                </BtnPd>
            </ContainerView>
        </FundoScrollView>
    )
  }
  function Gastos() {
    const (gastos, setGastos) = useStateIfMounted(())
    const (erroGastos, setErroGastos) = useStateIfMounted('')
    useEffect(() => {
        async function getGastos () {
            fetch(`${URL}/financeiro/gasto/gastos/mostrar`).then(resu => {
                resu.json().then(resu => {
                    setErroGastos('')
                    setGastos(resu)
                }).catch(() => {
                    setGastos(())
                    setErroGastos('Houve um erro ao carregar os gastos')
                })
            })
        }
        getGastos()
    })
    const corPd = '#049DD9'
    const FundoScrollView = styled.ScrollView`
        background-color: ${corPd};
    `
    const ContainerView = styled.View`
        flex: 1;
        background-color: ${corPd};
        align-items: center;
        justify-content: center;
    `
    const BtnCadas = styled.TouchableOpacity`
        background-color: #ffffff;
        width: 45%;
        padding: 4%;
        border-radius: 5px;
        margin-top: 5%;
    `

    BtnCadas.Text = styled.Text`
        color: ${corPd};
        font-size: 15px;
        text-align: center;
    `
    return (
        <FundoScrollView>
            <StatusBar style="auto"/>
            <ContainerView>
                <Voltar>Gastos</Voltar>
                <Erro>{erroGastos}</Erro>
                <Image503 erro={erroGastos}/>
                <BtnCadas onPress={() => {
                        setVoltar('gastos')
                        setPagina('cadasGasto')
                    }}>
                    <BtnCadas.Text>Cadastrar gasto</BtnCadas.Text>
                </BtnCadas>
                {gastos.map((gasto, index) => <Campo chaveDados={index} key={index} dadosDados={gasto} nome="Nome do gasto: " valorReal="Valor do gasto: " categoria="Categoria do gasto: "></Campo>)}
            </ContainerView>
        </FundoScrollView>
    )
  }
  function Config() {
        const corPd = '#049DD9'
        const FundoScrollView = styled.ScrollView`
            background-color: ${corPd};
        `
        const ContainerView = styled.View`
            flex: 1;
            background-color: ${corPd};
            align-items: center;
            justify-content: center;
        `
        return (
            <FundoScrollView>
                <StatusBar style="auto"/>
                <ContainerView>
                <Voltar estiloText={`margin-right: 0%;`}>Configurações</Voltar>
                </ContainerView>
            </FundoScrollView>
        )
  }
  function Apps() {
        const (apps, setApps) = useStateIfMounted(())
        const (erroApps, setErroApps) = useStateIfMounted('')
        useEffect(() => {
            async function getApps () {
                fetch(`${URL}/apps`).then(resu => {
                    resu.json().then(resu => {
                        setErroApps('')
                        setApps(resu)
                    }).catch(() => {
                        setApps(())
                        setErroApps('Houve um erro ao carregar os apps')
                    })
                })
            }
            getApps()
        })
        const corPd = '#049DD9'
        const FundoScrollView = styled.ScrollView`
            background-color: ${corPd};
        `
        const ContainerView = styled.View`
            flex: 1;
            background-color: ${corPd};
            align-items: center;
            justify-content: center;
        `
        return (
            <FundoScrollView>
                <StatusBar style="auto"/>
                <ContainerView>
                    <Voltar estiloText={`margin-left: 5%;`}>Apps</Voltar>
                    <Erro>{erroApps}</Erro>
                    <Image503 erro={erroApps}/>
                    {apps.map((app, index) => <Campo chaveDados={index} key={index} dadosDados={app} larguraDados="90%" nome="Nome do app: " url={{texto: 'URL do app: ', link: 'url'}} criado></Campo>)}
                </ContainerView>
            </FundoScrollView>
        )
  }
  function CadasGasto() {
    const corPd = '#049DD9'
    const FundoScrollView = styled.ScrollView`
        background-color: ${corPd};
    `
    const ContainerView = styled.View`
        flex: 1;
        background-color: ${corPd};
        align-items: center;
        justify-content: center;
    `
    const CampoNome = styled.TextInput`
        background: #ffffff;
        padding: 3%;
        margin-top: 10%;
        border-radius: 8px;
        width: 60%;
    `
    const CampoValor = styled.TextInput`
        background: #ffffff;
        padding: 3%;
        margin-top: 10%;
        border-radius: 8px;
        width: 60%;
    `
    const BtnEnvi = styled.TouchableOpacity`
        
    `
    BtnEnvi.Text = styled.Text`
        background-color: #ffffff;
        margin-top: 10%;
        padding-top: 4%;
        padding-bottom: 4%;
        padding-left: 6%;
        padding-right: 6%;
        color: ${corPd};
        border-radius: 8px;
    `
    const (categoriasGastos, setCategoriasGastos) = useStateIfMounted(())
    const (erroCategoriasGastos, setErroCategoriasGastos) = useStateIfMounted('')
    async function getCategoriasGastos () {
        fetch(`${URL}/financeiro/gasto/categorias/mostrar`).then(resu => {
            resu.json().then(resu => {
                setErroCategoriasGastos('')
                setCategoriasGastos(resu)
            }).catch(() => {
                setCategoriasGastos(())
                setErroCategoriasGastos('Houve um erro ao carregar as categorias')
            })
        })
    }
    getCategoriasGastos()
    let index = 0
    const data = ()
    categoriasGastos.map((categoria, index) => {
        data.push({
            key: index,
            label: categoria.nome
        })
    })
    const data2 = (
        { key: index++, section: true, label: 'Categorias' },
        { key: index++, label: 'Red Apples' },
        { key: index++, label: 'Cherries' },
        { key: index++, label: 'Cranberries' },
        { key: index++, label: 'Vegetable' }
    )
    return (
        <FundoScrollView>
            <StatusBar style="auto"/>
            <ContainerView>
                <Voltar estiloText={`margin-left: 8%;font-size: 23px;`} setVoltar="home">Cadastro de gasto</Voltar>
                <CampoNome placeholder="Nome do gasto" autoCompleteType="name" placeholderTextColor={corPd} selectionColor={corPd}/>
                <CampoValor placeholder="Valor do gasto"  placeholderTextColor={corPd} selectionColor={corPd}/>
                <ModalSelector data={data2} initValue="Selecione a categoria" onChange={(option)=>{ console.log(`${option.label} (${option.key}) nom nom nom`)}} style={{marginTop: '5%'}} cancelText="Cancelar" optionContainerStyle={{backgroundColor: '#ffffff'}} sectionTextStyle={{color: '#049DD9', fontSize: 25}} optionTextStyle={{color: '#049DD9'}} cancelStyle={{backgroundColor: '#ffffff', marginTop: '50%'}} cancelTextStyle={{color: '#049DD9', fontSize: 18, padding: '1%'}} cancelContainerStyle={{width: '35%', marginLeft: '33%'}}/>
                <BtnEnvi>
                    <BtnEnvi.Text>Confirmar</BtnEnvi.Text>
                </BtnEnvi>
            </ContainerView>
        </FundoScrollView>
    )
}
  function VeriPagina() {
    if (pagina == 'home') {
      return <Home/>
    } else if (pagina == 'series') {
      return <Series/>
    } else if (pagina == 'gastos') {
        return <Gastos/>
    } else if (pagina == 'config') {
        return <Config/>
    } else if (pagina == 'apps') {
        return <Apps/>
    } else if (pagina == 'cadasGasto') {
        return <CadasGasto/>
    }
  }
  return (
    <VeriPagina/>
  )
}

Código completo: https://github.com/Miguelpenha/Teste-React-Native