DevsNotes é um app similar ao bloco de notas, desenvolvi para colocar meu conhecimento em prática tendo como resultado um app simples e ao mesmo tempo funcional e com um layout agradável.
Nessa tela fiz uma condição baseada no conteúdo do array list. Se list tiver alguma anotação salva, então será listada, caso não tenha nenhuma anotação, aparecerá uma tela de aviso.
Nessa tela fiz uma condição baseada no parâmetro enviado, que é o index da anotação. Caso ao navegar para tela tenha um index passado no parâmetro, o app irá identificar que o usuário quer editar a anotação que ele selecionou. Caso não haja nenhum valor no parâmetro, o app entende que o usuário quer criar uma nova anotação. No momento que o usuário salva sua anotação, ele é redirecionado para a tela de listagem.
Com essa condição, eu consigo utilizar a mesma tela, tanto para editar uma anotação, quanto para criar.
Para essa funcionalidade utilizei o Modal do react native, que é acionado ao manter um toque pressionado na anotação. Nele coloquei duas ações:
Excluir: identifico qual o index da anotação pressionada, e com isso utilizo o filter() para receber apenas os index que são diferentes do selecionado, e com isso a anotação vai sumir da lista, dando o efeito de exclusão.
Cancelar: apenas modifica a variável modalVisible para false, assim fechando o modal.
Para persistir os dados utilizei o redux persist junto com o AsyncStorage. Criei o arquivo NotesReducer que nele fiz todas as ações do app, que são: adicionar, editar e deletar.
- react-redux
- redux
- redux-persist
- styled-components
- @react-native-community/async-storage