Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- import { useState } from 'react';
- import { Button, StyleSheet, Text, TextInput, View } from 'react-native';
- //COmponente de Mensagem
- export type Mensagem = {
- mensagem: string;
- autor: string;
- esquerda?: boolean;
- }
- export interface IMensagem {
- msg: Mensagem;
- }
- export function Mensagem({msg}: IMensagem) {
- return (
- <View style={[stylesMensagem.container, {alignItems: msg.esquerda ? 'flex-start' : 'flex-end'}]}>
- <Text style={{fontSize: 15, fontWeight: 'bold'}}>{msg.autor}</Text>
- <Text style={{color: 'white', fontSize: 13}}>{msg.mensagem}</Text>
- </View>
- )
- }
- const stylesMensagem = StyleSheet.create({
- container: {
- margin: 10,
- backgroundColor: 'tomato',
- borderRadius: 10,
- padding: 5
- }
- });
- //APP PRINCIPAL
- export default function App() {
- const [ texto, setTexto ] = useState('');
- const [ mensagens, setMensagens ] = useState<Mensagem[]>([
- {autor: 'Carlos', mensagem: 'Fazendo teste', esquerda: true}
- ])
- const enviarMensagem = () => {
- const novasMensagens = [...mensagens];
- novasMensagens.push({autor: 'Você', mensagem: texto})
- setMensagens(novasMensagens);
- setTexto('');
- }
- return (
- <View style={{flex: 1, padding: 10}}>
- <View style={{flex:1}}>
- <Mensagem msg={{autor: 'Carlos', mensagem: 'Blablabla', esquerda: true}} />
- </View>
- <View style={styles.containerMensagem}>
- <TextInput value={texto} style={styles.input} onChangeText={(texto) => setTexto(texto)} placeholder="Digite sua mensagem"/>
- <Button title="Enviar" onPress={enviarMensagem} />
- </View>
- </View>
- );
- }
- const styles = StyleSheet.create({
- containerMensagem: {flexDirection:'row'},
- input: { flex: 1, padding: 2, backgroundColor: 'lightgrey'}
- });
Add Comment
Please, Sign In to add comment