Parabéns mano, precisamos de pessoas como você. Ensina de uma forma simples e descomplicada. Gostei e estou aprendendo contigo. Continue... Obrigado pelas dicas!!!
Cara, que tutorial excelente! Não sou muito de comentar em vídeos no UA-cam, mas esse ficou muito show! Passei a tarde interira procurando por um tutorial para criar uma tela de login e o seu foi o melhor que encontrei!
Quem estiver assistindo hoje e tentando fazer, vale a dica: tem que indicar se a animação acontecerá utilizando drive nativo ou não- useNativeDrive. por exemplo: Animated.spring(offset.y, { toValue: 0, speed: 4, bounciness: 20, useNativeDriver: true }) e na parte do logo: Animated.timing(logo.x,{toValue:130, duration:100, useNativeDriver: false}) caso contrário, não funcionará nas API 30 ou superior.
Todas aulas que vejo suas são excelentes. Sou sincero em dizer que você é uma das pessoas que mais consegue passar o conteúdo de forma limpa e clara que já vi. Obrigado e parabéns pelo seu trabalho.
Excelente vídeo, terminei o projeto. Abaixo link no Github para quem quiser ver. Usei o expo para meu projeto. Inclusive adicionei no input de senha a configuração para ocultar as informações: secureTextEntry={true} github.com/wbhaese/loginPageNative
Parabéns, eu tava com muita dificuldade em achar um conteúdo bom do React Native com o Firebase. Vi esse vídeo e logo comprei seu curso, estou desenvolvendo um app pra uma academia aqui da cidade, e depois que adquiri seu curso, o andamento dele começou a ir pra frente!!!!
1:30 O mano, eu fiquei 1 hora pra resolver o problema de subir a logo, porque tu colocou esse src, e nao precisa disso, já vai logo no assets: source={require('./assets/logo.png')} Cara, eu perdi um tempao nisso aí. Mas que aula hein, ta de parabens!
fala galera lembrando que no video ele só põe o KeyboardAvoidView, mas é necessário importar o Platform e adicionar essa linha no Key... >> behavior={Platform.OS === "ios" ? "padding" : "height"} se não não vai funfar no IOS.
kra eu n sei o seu nivel de conhecimento na programação mas aparentemente o canal dele vai se focar no front mobile, é necessario fazer um backend com as funcionalidades como salvar informações no banco de dados e td mais, recomendo vc dar uma olhada em tutoriais de node, é a melhor forma de se trabalhar com o backend quando o assunto é integração com o React Native
mano, se você fizer um curso de animações com React Native, tanto animações de components quanto de SVGs, utilizando typescript e/ou styled-components seria muito foda, curti bastante sua didática, vou ativar o sino e esperar você divulgar este curso ahahahah vlw man
podia ter feito uma animação na logo ia ficar bem legal ... fazer ela se encaixar ... podia usar svg... mas o tutorial ficou bem legal continua assim .. só tem que aumentar a frequencia de postagens..
Achei o vídeo muito bom, parabéns. Tive que atualizar alguns pontos, quem quiser conferir: github.com/joseclaudiojr/RN-animatedlogin Alguns pontos: alterei o código para rodar corretamente no iOS, pois o KeyboardAvoidingView deve utilizar o behavior='padding', e a animação com width e height não funcionam para o módulo animated, tive que utilizar transform.scale. Aproveitei e migrei para o modo com classe do State do Hook (acho mais fácil de entender).
Olá, teria como fazer um vídeo ou me recomendar um vídeo para mim fazer o código usando o firebase? Obs: sou iniciante e estou estudando. Fiz a tela completa agora preciso fazer o código que vai conectar com o Firebase e autenticação...
Faz um vídeo dando umas dicas de rádio Button, tava procurando umas liba boas, mas acabei eu mesmo fazendo com TochableOpacity, esse componente não tem no react native
Parabéns, a título de contribuição, tem um bug na versão nova (Animated: `useNativeDriver` was not specified) em que resolvi adicionando a propriedade abaixo no corpo das duas animações: useNativeDriver: true,
Eu fiz isso tbm, só q quando adiciono ele a animação da logo gera um novo erro (Style 'width' is not supported by native animated module) n consegui resolver
Por que aos 19:30 você não teve que declarar as variáveis 'keyboardDidShowListener' e 'keyboardDidHideListener' com let antes das variáveis ? Você não importou essas variáveis, como o programa sabe quem são ?
Estou com uma duvida bem besta, qual o comando para mudar em tempo de execução a tela no dispositivo android. Digo alterou o código já muda no navvegador ou no celular?
Pelo contrário, muitas vezes colocar o picture-in-picture da câmera diminui área de tela visível para o tutorial. É legal fazer como ele fez, colocar no início e no fim. Ficou muito bom.
rapaiz, fiz igualzinho, so que meu logo ficou preso no topo, e nao sai, somente se eu remover o flex do container, ai ele gruda no formulario e nao se mexe também
Parabéns pelo vídeo. Baixei o codigo pelo github só para rodar e testar e não rodou. Após fazer um gitclone e rodar yarn start eu usei yarn run ios. Tem algo que fiz de errado?
Valeu Pia, achei muito massa o tutorial, cara a unica coisa que não rolou foi o meu teclado quando esta aberto, nao esta subindo os inputs juntos, oq pode ser? estou usando expo... falou.
Ola, fiz tudo certinho ele estava dando certo até quando usamos os hooks useState e o useEffect por conta que não é possível usá-los dentro de uma class... Mudei a exportação para function assim como está no seu, porém agora ele me retorna um erro: attempted to assign to readonly property ..... Já fiz milhões de pesquisas e ainda não achei o que posso fazer, alguém teve o mesmo problema?
estou com o mesmo erro, estou procurando para tentar ver o que é estou usando o expo, e o app no celular fisico e no emulador até fecha quando tento abrir a aplicação agora kkk
Estou tendo problemas na hora de diminuir o tamanho da logo quando abro o teclado, aparece o erro useNativeDriver, já coloquei useNativeDriver: true em todos as partes que tem timing, porém não funciona.
Parabéns pelo conteúdo, me deparei com um erro relacionado ao width, aparentemente ele não é suportado pelo Animated. tentei usar o transform, scaleX e scaleY porém minha logo some. Como poderia resolver?
Encontrei o problema, aparentemente a escala do transform é diferente, defini os valores padrões da imagem para x: 1, y: 1 e para deixar menor mudei para 0.6 os dois valores.
Opa beleza? O width é suportado pelo animated normal igual fazemos, da uma olhada com calma, provavelmente pulou ou esqueceu de algo que fazemos no video :)
Quem estiver com o problema "useNativeDriver" quando executa é só inserir na animação useNativeDriver: true, Ex: Animated.timing(opacity,{ toValue: 1, duration: 500, useNativeDriver: true,
Usando o expo na animação do container tive o seguinte erro: " Animated: `useNativeDriver` was not specified issue of ReactNativeBase Input " para resolver o problema basta colocar a seguinte linha dentro das config do animated.spring : " useNativeDriver: true" espero ter ajudado caso alguém tenha o mesmo problema que o meu
21:00 Eu fiz a mesma coisa e não funcionou. Já tentei rodar várias vezes, o erro persiste, não sei o motivo (obs: estou usando um dispositivo real via USB)...
Muito bom...funciono corretamente... o unico problema é que fica dando esse warning "Animated: `useNativeDriver` was not specified. This is a required option and must be explicitly set to `true` or `false`" , tem como arrumar isso?
Parabéns mano, precisamos de pessoas como você.
Ensina de uma forma simples e descomplicada.
Gostei e estou aprendendo contigo. Continue...
Obrigado pelas dicas!!!
Cara, que tutorial excelente! Não sou muito de comentar em vídeos no UA-cam, mas esse ficou muito show! Passei a tarde interira procurando por um tutorial para criar uma tela de login e o seu foi o melhor que encontrei!
Quem estiver assistindo hoje e tentando fazer, vale a dica:
tem que indicar se a animação acontecerá utilizando drive nativo ou não- useNativeDrive.
por exemplo:
Animated.spring(offset.y, { toValue: 0, speed: 4, bounciness: 20, useNativeDriver: true })
e na parte do logo:
Animated.timing(logo.x,{toValue:130, duration:100, useNativeDriver: false})
caso contrário, não funcionará nas API 30 ou superior.
Nossa, me salvou muito, obrigado!!
MONSTRO SAGRADO !!!!
to no meio da instalação do react-native e tu ja esta me ajudando obg
Todas aulas que vejo suas são excelentes. Sou sincero em dizer que você é uma das pessoas que mais consegue passar o conteúdo de forma limpa e clara que já vi. Obrigado e parabéns pelo seu trabalho.
Que delícia ver um vídeo de programação sem enrolação. Uma benção não ter que acelerar o vídeo pra assistir! Parabéns! Muito claro, direto e didático!
Fico muito feliz que curte nosso conteúdo, tamo junto 🔥
Mateus, muito obrigado por este tutorial! 💚
Meu amg, React Native é lindo demais
Valeu demais, essa era a base que eu precisava, agora consigo desenvolver o restante
Excelente vídeo, terminei o projeto. Abaixo link no Github para quem quiser ver. Usei o expo para meu projeto. Inclusive adicionei no input de senha a configuração para ocultar as informações: secureTextEntry={true}
github.com/wbhaese/loginPageNative
Muito bom. Obrigado!
Vídeo aula clara , objetiva e direta muito bom , parabéns mano
Parabéns, eu tava com muita dificuldade em achar um conteúdo bom do React Native com o Firebase. Vi esse vídeo e logo comprei seu curso, estou desenvolvendo um app pra uma academia aqui da cidade, e depois que adquiri seu curso, o andamento dele começou a ir pra frente!!!!
Quando tem vontade de ensinar... fica assim!!! Parabéns!!!!
Caara. Muito obrigado. Quero começar com R.N e sua explicação vai me ajudar certamente!!!
1:30 O mano, eu fiquei 1 hora pra resolver o problema de subir a logo, porque tu colocou esse src, e nao precisa disso, já vai logo no assets: source={require('./assets/logo.png')}
Cara, eu perdi um tempao nisso aí. Mas que aula hein, ta de parabens!
nao fosse o covid ate te dava um abraço!!! abç do outro lado do atlântico!
Ótimo vídeo
fala galera lembrando que no video ele só põe o KeyboardAvoidView, mas é necessário importar o Platform e adicionar essa linha no Key...
>>
behavior={Platform.OS === "ios" ? "padding" : "height"}
se não não vai funfar no IOS.
Show!! Estou revisando o que já aprendi de JS e já quero começar a usar o React, os seus vídeos são ótimo e didáticos
Cara muito show eu estava custando a entender animações com react native, meus parabéns
Tamo junto :)
Cara acho muito show seus vídeos, me ajudam muito a aprender, parabéns
Samuel Maçal temo juntoo
Nos ensina a fazer esse login funcional.
Fico aguardando ansiosamente!!!
kra eu n sei o seu nivel de conhecimento na programação mas aparentemente o canal dele vai se focar no front mobile, é necessario fazer um backend com as funcionalidades como salvar informações no banco de dados e td mais, recomendo vc dar uma olhada em tutoriais de node, é a melhor forma de se trabalhar com o backend quando o assunto é integração com o React Native
Excepcional !! Qual programa você utiliza para gravar a tela do celular emulado ??
Cara vc é show, comprei seu curso e estou aproveitando cada aula. Parabéns!
Massaa!! Fico muito feliz que está evoluindo, vamo que vamo 🚀
Muito bom seus vídeos e sua didática, seu canal é muito FODAAA!! Já virei seu fã 💻🚀🙏🏾👊🏾
mano, se você fizer um curso de animações com React Native, tanto animações de components quanto de SVGs, utilizando typescript e/ou styled-components seria muito foda, curti bastante sua didática, vou ativar o sino e esperar você divulgar este curso ahahahah vlw man
Muito top D+ a aula e eu já queria aprender sobre estas animações há algum tempo.
por que que só da pra dar um like no video? merece uns 10 like de cada
Muito bom, me ajudou muito!❤️
O cara é um monstro !!! Vlw mano muito bom esse material, conhecimento TOP
Tamo junto
Sensacional parabéns cara vc abriu minha mente!!!
Só uma coisa a dizer, brabo
me ajudou bastante, to começando com react e ja ta sendo foda... continua assim!
Muito massa, eu comprei seu curso pela udemy muito bom.
nem sabia q tinha na udemy
www.udemy.com/course/crusoreactnative/#instructor-1
Top! Começando hj ... e vou começar vendo seus videos! Sou do Pascal ... vou apanhar pra caramba!
Muito show!!! Parabéns
Obrigado pelos ensinamentos, ótima didática, sucesso no canal amigo!
Aula incrível, mano! :D
Não pare de trazer conteúdo assim não ! Hehehe
Gostei conteúdo muito bom aprendi bastante
Muito bom mano, continua com esse estilo de vídeo!
podia ter feito uma animação na logo ia ficar bem legal ... fazer ela se encaixar ... podia usar svg... mas o tutorial ficou bem legal continua assim .. só tem que aumentar a frequencia de postagens..
nice ... video top estou aprendendo muito com você
Wanderson Wpbarcelos tamo junto ❤️
Show de bola hein!! Vou até rever depois!
Excelente video, parabens.Continue com o otimo trabalho
Sensacional, poderia ensinar a fazer conexão com o mapa do celular?
Vídeo muito bom, mano
Cara... muito bom mesmo!!!
Muito bom o vídeo!!! Parabéns!!!
Parabéns pelo vídeo mano... gostei
Excelente vídeo, ensina muito, parabéns
Ótima aula ! Acabei de comprar o seu curso !
Hudson Ramalho showw , tamo junto
Parabéns pela aula, muito boa mesmo! Valeu
Prof.Anderson Seixas ❤️
Mencionou problema de acessibilidade e propoz solução eu me inscrevo no canal.
É simples :)
Essa acessibilidade n deu certo no meu.
O teclado tá sobrepondo o campo
Muito bom, parabens pela conteudo
Achei o vídeo muito bom, parabéns.
Tive que atualizar alguns pontos, quem quiser conferir: github.com/joseclaudiojr/RN-animatedlogin
Alguns pontos: alterei o código para rodar corretamente no iOS, pois o KeyboardAvoidingView deve utilizar o behavior='padding', e a animação com width e height não funcionam para o módulo animated, tive que utilizar transform.scale. Aproveitei e migrei para o modo com classe do State do Hook (acho mais fácil de entender).
Valeu!
Muito bom, Parabens mestre !!!
Olá, teria como fazer um vídeo ou me recomendar um vídeo para mim fazer o código usando o firebase?
Obs: sou iniciante e estou estudando.
Fiz a tela completa agora preciso fazer o código que vai conectar com o Firebase e autenticação...
Muito obrigado!
Muito obrigada !!!! Seu vídeo está me ajudando muito !!!!!
Pode me tirar uma dúvida ?
eu consigo importar o Animated no expo ??
Sim sim pode, aqui tambem na documentação: docs.expo.io/versions/latest/react-native/animations/
Aula perfeita... Amigo, qual a diferença do seu curso na sua single page para o curso da Udemy ?
CARAA, conteudo topppp!
Faz um vídeo dando umas dicas de rádio Button, tava procurando umas liba boas, mas acabei eu mesmo fazendo com TochableOpacity, esse componente não tem no react native
Vídeo legal, como instalar o emulador android para ver o app?
Valeeu! Ajudou muito
Obrigado pela ajudaa!
O loco manja muito cara cria um discord pra reunir uma.turma da hora pra gente fazer um projeto junto
Parabéns, a título de contribuição, tem um bug na versão nova (Animated: `useNativeDriver` was not specified) em que resolvi adicionando a propriedade abaixo no corpo das duas animações:
useNativeDriver: true,
Eu fiz isso tbm, só q quando adiciono ele a animação da logo gera um novo erro (Style 'width' is not supported by native animated module) n consegui resolver
Me salvou, mano! Eu tinha lido algo relacionado que setava como "false", sempre dava erro. Tentei com "true" e deu certo! :D
@@tiagosouza956 Faça isso, mano:
useEffect(() => {
Animated.parallel([
Animated.spring(offset.y, {
useNativeDriver: true,
toValue: 0,
speed: 4
}),
Animated.timing(opacity, {
useNativeDriver: true,
toValue: 1,
duration: 400
})
]).start()
}, []);
Muito Obrigado
@@tiagosouza956 estou com o mesmo erro
Carai maluco e brabooooo
Ganhou + 1 like e + um inscrito.
Por que aos 19:30 você não teve que declarar as variáveis 'keyboardDidShowListener' e 'keyboardDidHideListener' com let antes das variáveis ? Você não importou essas variáveis, como o programa sabe quem são ?
O meu diz que é impossível encontrar a variável KeyboardDidShow.
pra qm quer saber como deixar o input de senha com bolinha eh so botar no input o prop 'secureTextEntry={true}'
Estou com uma duvida bem besta, qual o comando para mudar em tempo de execução a tela no dispositivo android. Digo alterou o código já muda no navvegador ou no celular?
Perfeito, mas fiquei com dúvida de como esse celular virtual apareceu :'), mas é genial :3
massa mano, faz os videos mostrando o rosto fica da hora
Pelo contrário, muitas vezes colocar o picture-in-picture da câmera diminui área de tela visível para o tutorial. É legal fazer como ele fez, colocar no início e no fim. Ficou muito bom.
Mano ...muito obrigado!
rapaiz, fiz igualzinho, so que meu logo ficou preso no topo, e nao sai, somente se eu remover o flex do container, ai ele gruda no formulario e nao se mexe também
Parabéns pelo vídeo. Baixei o codigo pelo github só para rodar e testar e não rodou. Após fazer um gitclone e rodar yarn start eu usei yarn run ios. Tem algo que fiz de errado?
Como eu faço para importar a logo? Outra logo?
Junior Franco so colocar outra logo na pasta e usar no lugar ;)
@@Sujeitoprogramador Verifica se não onde ela tá para voltar e achar a basta basta colocar '../../../assets/img/logo.png'
Valeu Pia, achei muito massa o tutorial, cara a unica coisa que não rolou foi o meu teclado quando esta aberto, nao esta subindo os inputs juntos, oq pode ser? estou usando expo... falou.
já achei na documentação, precisei colocar behavior="padding" enabled e funciono... valeu
ótimo video.
Poxan no meu msm com o KeyboardAvoidingView deu problema no teclado que fica sobrepondo o input
Curso 100% perfeito. Parabéns!!!!
Mas, não consegui deforma alguma minimizar o LOGO, no Motorola Z2 Play, segue o codigo:
import React from 'react';
import {KeyboardAvoidingView, TextInput, View, Image, StyleSheet, Text, TouchableOpacity, Animated, Keyboard} from 'react-native';
import {useState, useEffect} from 'react';
export default function App() {
const [offset] = useState(new Animated.ValueXY({x: 0, y: 200}));
const [opacity] = useState(new Animated.Value(0));
const [logo] = useState(new Animated.ValueXY({x: 150, y: 200}));
useEffect(()=> {
keyboardDidShowListener= Keyboard.addListener('KeyboardDidShow', keyboardDidShow());
keyboardDidHideListener= Keyboard.addListener('KeyboardDidHide', keyboardDidHide());
Animated.parallel([
Animated.spring(offset.y, { toValue: 0, speed: 4, bounciness: 25, useNativeDriver: true}),
Animated.timing(opacity, { toValue: 1, duration: 200, useNativeDriver: true}), ]).start();
},
[]);
function keyboardDidShow() {
Animated.parallel([
Animated.timing(logo.x, { toValue: 60, duration: 100, useNativeDriver: true}),
Animated.timing(logo.y, { toValue: 100, duration: 100, useNativeDriver: true}),
]).start(); }
function keyboardDidHide() {
Animated.parallel([
Animated.timing(logo.x, { toValue: 150, duration: 100, useNativeDriver: true}),
Animated.timing(logo.y, { toValue: 200, duration: 100, useNativeDriver: true}),
]).start(); }
return (
Ola, fiz tudo certinho ele estava dando certo até quando usamos os hooks useState e o useEffect por conta que não é possível usá-los dentro de uma class... Mudei a exportação para function assim como está no seu, porém agora ele me retorna um erro:
attempted to assign to readonly property ..... Já fiz milhões de pesquisas e ainda não achei o que posso fazer, alguém teve o mesmo problema?
estou com o mesmo erro, estou procurando para tentar ver o que é
estou usando o expo, e o app no celular fisico e no emulador até fecha quando tento abrir a aplicação agora kkk
Encontrei o que era, devemos colocar ao inves da view normal, devemos colocar ""
assim vai funcionar
Estou tendo problemas na hora de diminuir o tamanho da logo quando abro o teclado, aparece o erro useNativeDriver, já coloquei useNativeDriver: true em todos as partes que tem timing, porém não funciona.
Parabéns pelo conteúdo, me deparei com um erro relacionado ao width, aparentemente ele não é suportado pelo Animated. tentei usar o transform, scaleX e scaleY porém minha logo some. Como poderia resolver?
Encontrei o problema, aparentemente a escala do transform é diferente, defini os valores padrões da imagem para x: 1, y: 1 e para deixar menor mudei para 0.6 os dois valores.
Opa beleza? O width é suportado pelo animated normal igual fazemos, da uma olhada com calma, provavelmente pulou ou esqueceu de algo que fazemos no video :)
Quem estiver com o problema "useNativeDriver" quando executa é só inserir na animação useNativeDriver: true,
Ex:
Animated.timing(opacity,{
toValue: 1,
duration: 500,
useNativeDriver: true,
Massa
pode fazer um video de autenticaçao com firebase por favor
O meu apresenta uma mensagem quando é executado a aplicação.
Animated: 'useNativeDriver' was not specifi...
O que poderia ser?
ou iniciante programacao e verdade que o RN e naos complexo que Flutter?
Estou com esse erro
animated usenativedriver was not specified
Usando o expo na animação do container tive o seguinte erro: " Animated: `useNativeDriver` was not specified issue of ReactNativeBase Input
" para resolver o problema basta colocar a seguinte linha dentro das config do animated.spring : " useNativeDriver: true" espero ter ajudado caso alguém tenha o mesmo problema que o meu
muito obrigado!
ola nao sei nada sobre, desejo aprender criar App acessando base MySQL, o que devo ter instalado no meu windows 10 para seguir as aulas ?
tem como colocar um Math Randon em uma 'const' quero fazer uma autenticação de email srsrs deste já agradeço
Usa ESLint/Prettier?
21:00 Eu fiz a mesma coisa e não funcionou. Já tentei rodar várias vezes, o erro persiste, não sei o motivo (obs: estou usando um dispositivo real via USB)...
Cara, dá uma olhada nisso:
function keyboardDidShow(){
Animated.parallel([
Animated.timing(logo.x, {
toValue: Platform.Os == "ios" ? 130 : 50,
duration: 50,
}),
Animated.timing(logo.y, {
toValue: Platform.Os == "ios" ? 155 : 65,
duration: 50,
})
]).start();
Muito bom...funciono corretamente... o unico problema é que fica dando esse warning "Animated: `useNativeDriver` was not specified. This is a required option and must be explicitly set to `true` or `false`" , tem como arrumar isso?
no caso sou obrigado a colocar useNativeDriver: true
E possivel criar alterar essa aplicacao para expo?
Ensina pra Pc fazer layout de Pc de login
Ensina a fazer download no Visual Cose por favor
onde eu baixo esse programa que vc usa ?
Como faz para fazer os mesmos efeitos com styled-components ?