https://github.com/victor-lis/message-app-ui
https://github.com/victor-lis/message-app-ui
react-native tsx ui
Last synced: 6 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/victor-lis/message-app-ui
- Owner: Victor-Lis
- Created: 2024-01-25T23:58:46.000Z (over 1 year ago)
- Default Branch: master
- Last Pushed: 2024-01-27T22:17:52.000Z (over 1 year ago)
- Last Synced: 2024-10-12T10:12:03.025Z (12 months ago)
- Topics: react-native, tsx, ui
- Language: TypeScript
- Homepage:
- Size: 228 KB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Message App UI
Honestamente minha ideia inicial nem era postar esse "projeto" ou dar esse nome, acabei apenas vendo o vídeo [Flatlist com Scroll Inverso no React Native](https://www.youtube.com/watch?v=fpAlf1vPCE4&t=60s) do [Rodrigo Gonçalves](https://www.youtube.com/@orodrigogo) e como migrei do JS para o TS recemente achei que seria um projeto simples e bacana para fazer essa "passada" em React Native.
De fato consigo ver muitas vantagens em trabalhar com TS/TSX desde a facilidade na hora de entender a arquitetura do projeto, segurança, entender melhor a função de cada variável, entre outras utilizadades...
## Aprendizados
- Trabalhar com TS em React Native;
## Message Component
Embora esse trecho não tenha sido falado no vídeo, eu acabei construindo esse componente para ir testando o TS/TSX e já vinha criando essa opnião.
Agora consolidei, realmente o TS facilita bastante nesse trabalho com arrays e objetos, sendo mais fácil acessar os elementos dentro deles, nesse caso passei via props um elemento de um array e TS facilitou acessar suas propriedades.
```javascript
import { View, Text, StyleSheet, StyleProp, TextStyle } from "react-native";
import { MessageProps } from "../../@types/message";
export default function Message(
{
item,
messageStyle
}:{
item: MessageProps,
messageStyle: StyleProp,
}) {
return (
{item.message}
);
}
const styles = StyleSheet.create({
})
```
## Screenshots
### Enviando mensagem
### Recebendo mensagem
## Autores
- [@Victor-Lis](https://www.github.com/Victor-Lis)