Resoluçao Desafio(Velocidade)

Onborading.js

export default function Onboarding({navigation}) {
    const [fazerLogin, setFazerLogin] = useState(false);
    const [altura, setAltura] = useState(250);
    const [velocidade, setVelocidade] = useState(0);

    function avancar() {
        if (fazerLogin) {
            navigation.navigate('Principal');
        } else {
            setAltura(400);
            setFazerLogin(true);
        }
    }

    function diminuirVelocidade() {
        setVelocidade(1000)
    }

 function AumentarVelocidade() {
        setVelocidade(500)
    }

    return (
        <TelaDeFundo>
            <View style={styles.container}>
                <StatusBar barStyle='dark-content' backgroundColor='#FFF'/>
                <Image
                    source={require('../../assets/logo.png')}
                    style={styles.logo}
                />

                <TouchableOpacity
                    onPress={() => diminuirVelocidade()}
                    style={styles.botaoV}>
                    <Text style={styles.botaoTextoV}>1x</Text>
                </TouchableOpacity>

                <TouchableOpacity
                    onPress={() => AumentarVelocidade()}
                    style={styles.botaoV}>
                    <Text style={styles.botaoTextoV}>2x</Text>
                </TouchableOpacity>

                <View style={styles.carrosselArea}>


                    {!fazerLogin &&
                        <Carrocel data={itens} velocidade={velocidade}/>
                    }
                </View>
                <Image
                    source={require('../../assets/medica.png')}
                    style={styles.medicaImg}
                />
                <FundoOndulado height={altura}>
                    <View style={styles.infoArea}>
                        {fazerLogin ?
                            <Formulario
                                titulo="Olá! Acesse sua conta"
                                texto="Entre com suas informações. Senão tiver uma conta ainda crie uma agora"
                            />
                            :
                            <View>
                                <Text style={styles.titulo}>Gerencie as suas consultas</Text>
                                <Text style={styles.texto}>
                                    Você consegue gerenciar todas suas consultas e ver o tempo médio de cada, e a
                                    quantidade de consultas realizadas.
                                </Text>
                            </View>
                        }

                        <TouchableOpacity style={styles.botao} onPress={avancar}>
                            <Text style={styles.botaoTexto}>{fazerLogin ? 'Entrar' : 'Começar'}</Text>
                        </TouchableOpacity>
                    </View>
                </FundoOndulado>
            </View>
        </TelaDeFundo>
    );
}

Carrocel.js

export function Carrocel({data,velocidade}) {
    const carrosselRef = useRef();
    const [indice, setIndice] = useState(0);

    useEffect(() => {
        carrosselRef.current.scrollToIndex({index: indice});
        const intervalo = setInterval(() => {
            alterarPosicaoObjeto();
        }, velocidade ? velocidade : 1000)
        return () => clearInterval(intervalo);
    }, [indice]);

    function alterarPosicaoObjeto() {
        if (indice < data.length - 1) {
            setIndice(indice + 1);
        } else {
            setIndice(0)
        }
    }

    return (
        <View style={styles.conteiner}>
            <FlatList
                data={data}
                horizontal
                showsHorizontalScrollIndicator={false}
                keyExtractor={item => item.id}
                renderItem={({item, index}) => (
                    <Image
                        source={item.imagem}
                        style={[styles.image, index == data.length - 1 ? {marginRight: 200} : null]}
                        resizeMode="contain"
                    />
                )}
                ref={carrosselRef}
            />
        </View>
    )

}