feat: add Chat example

example/src/App.tsx

@@ -7,11 +7,13 @@ import { Article } from './Screens/Article';
 import { Contacts } from './Screens/Contacts';
 import { Albums } from './Screens/Albums';
 import { useState } from 'react';
+import { Chat } from './Screens/Chat';
 
 const items: TabViewItems = [
   { key: 'article', title: 'Article', icon: 'document.fill', badge: '!' },
   { key: 'albums', title: 'Albums', icon: 'square.grid.2x2.fill', badge: '5' },
   { key: 'contacts', title: 'Contacts', icon: 'person.fill' },
+  { key: 'chat', title: 'Chat', icon: 'keyboard' },
 ];
 
 export default function App() {
@@ -38,6 +40,7 @@ export default function App() {
       <Article onClick={goToAlbums} />
       <Albums />
       <Contacts />
+      <Chat />
     </TabView>
   );
 }

example/src/Screens/Chat.tsx

@@ -0,0 +1,114 @@
+import {
+  Image,
+  Platform,
+  ScrollView,
+  type ScrollViewProps,
+  StyleSheet,
+  Text,
+  TextInput,
+  View,
+} from 'react-native';
+
+const MESSAGES = [
+  'okay',
+  'sudo make me a sandwich',
+  'what? make it yourself',
+  'make me a sandwich',
+];
+
+export function Chat({
+  bottom = true,
+  ...rest
+}: Partial<ScrollViewProps & { bottom: boolean }>) {
+  return (
+    <View style={styles.container}>
+      <ScrollView
+        style={styles.inverted}
+        contentContainerStyle={styles.content}
+        {...rest}
+      >
+        {MESSAGES.map((text, i) => {
+          const odd = i % 2;
+
+          return (
+            <View
+              key={i}
+              style={[odd ? styles.odd : styles.even, styles.inverted]}
+            >
+              <Image
+                style={styles.avatar}
+                source={
+                  odd
+                    ? require('../../assets/avatar-2.png')
+                    : require('../../assets/avatar-1.png')
+                }
+              />
+              <View
+                style={[
+                  styles.bubble,
+                  { backgroundColor: odd ? 'blue' : 'white' },
+                ]}
+              >
+                <Text style={{ color: odd ? 'white' : 'blue' }}>{text}</Text>
+              </View>
+            </View>
+          );
+        })}
+      </ScrollView>
+      <TextInput
+        style={[styles.input, { backgroundColor: 'white', color: 'black' }]}
+        placeholderTextColor={'#B0B0B0'}
+        placeholder="Write a message"
+        underlineColorAndroid="transparent"
+      />
+      {bottom ? (
+        <View
+          style={[styles.spacer, Platform.OS !== 'android' && { height: 80 }]}
+        />
+      ) : null}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: '#F2F2F2',
+  },
+  inverted: {
+    transform: [{ scaleY: -1 }],
+  },
+  content: {
+    padding: 16,
+  },
+  even: {
+    flexDirection: 'row',
+  },
+  odd: {
+    flexDirection: 'row-reverse',
+  },
+  avatar: {
+    marginVertical: 8,
+    marginHorizontal: 6,
+    height: 40,
+    width: 40,
+    borderRadius: 20,
+    borderColor: 'rgba(0, 0, 0, .16)',
+    borderWidth: StyleSheet.hairlineWidth,
+  },
+  bubble: {
+    marginVertical: 8,
+    marginHorizontal: 6,
+    paddingVertical: 12,
+    paddingHorizontal: 16,
+    borderRadius: 20,
+  },
+  input: {
+    height: 48,
+    paddingVertical: 12,
+    paddingHorizontal: 24,
+  },
+  spacer: {
+    backgroundColor: '#fff',
+  },
+});