CarlosWGama

Flatlist

Feb 10th, 2023 (edited)
218
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. import { useState } from 'react';
  2. import { Button, StyleSheet, Text, TextInput, View } from 'react-native';
  3.  
  4. //COmponente de Mensagem
  5. export type Mensagem = {
  6.   mensagem: string;
  7.   autor: string;
  8.   esquerda?: boolean;
  9. }
  10.  
  11. export interface IMensagem {
  12.   msg: Mensagem;
  13. }
  14.  
  15. export function Mensagem({msg}: IMensagem) {
  16.   return (
  17.     <View style={[stylesMensagem.container, {alignItems: msg.esquerda ? 'flex-start' : 'flex-end'}]}>
  18.       <Text style={{fontSize: 15, fontWeight: 'bold'}}>{msg.autor}</Text>
  19.       <Text style={{color: 'white', fontSize: 13}}>{msg.mensagem}</Text>
  20.     </View>
  21.   )
  22. }
  23.  
  24. const stylesMensagem = StyleSheet.create({
  25.     container: {
  26.       margin: 10,
  27.       backgroundColor: 'tomato',
  28.       borderRadius: 10,
  29.       padding: 5
  30.     }
  31. });
  32.  
  33. //APP PRINCIPAL
  34. export default function App() {
  35.  
  36.   const [ texto, setTexto ] = useState('');
  37.   const [ mensagens, setMensagens ] = useState<Mensagem[]>([
  38.     {autor: 'Carlos', mensagem: 'Fazendo teste', esquerda: true}
  39.   ])
  40.  
  41.   const enviarMensagem = () => {
  42.     const novasMensagens = [...mensagens];
  43.     novasMensagens.push({autor: 'Você', mensagem: texto})
  44.     setMensagens(novasMensagens);
  45.     setTexto('');
  46.   }
  47.  
  48.   return (
  49.     <View style={{flex: 1, padding: 10}}>
  50.       <View style={{flex:1}}>
  51.         <Mensagem msg={{autor: 'Carlos', mensagem: 'Blablabla', esquerda: true}} />
  52.  
  53.       </View>
  54.      
  55.  
  56.       <View style={styles.containerMensagem}>
  57.         <TextInput value={texto} style={styles.input} onChangeText={(texto) => setTexto(texto)} placeholder="Digite sua mensagem"/>
  58.         <Button title="Enviar" onPress={enviarMensagem} />
  59.       </View>
  60.     </View>
  61.   );
  62. }
  63.  
  64. const styles = StyleSheet.create({
  65.   containerMensagem: {flexDirection:'row'},
  66.   input: { flex: 1, padding: 2, backgroundColor: 'lightgrey'}
  67.  
  68. });
  69.  
  70.  
Add Comment
Please, Sign In to add comment