Update example app to include static UI for adding tracks

Author: voidrender

example/App.tsx

@@ -1,26 +1,57 @@
 import React, { useState } from 'react';
-import { StyleSheet, View, Text } from 'react-native';
-import { AudioEngine } from 'react-native-audio-engine';
+import { Button, FlatList, SafeAreaView, StyleSheet, View } from 'react-native';
+import { TrackListItem } from './src';
 
-export const App = () => {
-    const [message, setMessage] = useState<string | undefined>();
+type TrackDetails = {
+    uri: string;
+};
 
-    AudioEngine.sampleMethod('howdy!', 123, message => {
-        setMessage(message);
-    });
+export const App = () => {
+    const [tracks, setTracks] = useState<TrackDetails[]>([
+        { uri: 'track 1' },
+        { uri: 'track 2' },
+    ]);
 
     return (
-        <View style={styles.container}>
-            <Text>{message ?? 'Waiting for NativeModule...'}</Text>
-        </View>
+        <SafeAreaView style={{ flex: 1 }}>
+            <FlatList
+                data={tracks}
+                renderItem={itemInfo => (
+                    <TrackListItem
+                        uri={itemInfo.item.uri}
+                        onSubmitEditing={text => {
+                            tracks[itemInfo.index].uri = text;
+                        }}
+                        onDelete={() => {
+                            tracks.splice(itemInfo.index, 1);
+                            setTracks([...tracks]);
+                        }}
+                    />
+                )}
+                keyExtractor={(item, index) => `${index}-${item}`}
+                style={styles.flatList}
+            />
+            <View style={styles.addTrackContainer}>
+                <Button
+                    title='Add Track'
+                    onPress={() => {
+                        tracks.push({ uri: '' });
+                        setTracks([...tracks]);
+                    }}
+                />
+            </View>
+        </SafeAreaView>
     );
 };
 
 const styles = StyleSheet.create({
-    container: {
+    flatList: {
         flex: 1,
-        justifyContent: 'center',
-        alignItems: 'center',
-        backgroundColor: '#F5FCFF',
+    },
+    addTrackContainer: {
+        flexShrink: 1,
+        paddingTop: 20,
+        borderTopWidth: 1,
+        borderTopColor: '#ccc',
     },
 });

example/src/TrackListItem.tsx

@@ -0,0 +1,34 @@
+import React from 'react';
+import { Button, StyleSheet, TextInput, View } from 'react-native';
+
+interface Props {
+    uri: string;
+    onSubmitEditing: (text: string) => void;
+    onDelete: () => void;
+}
+
+export const TrackListItem = ({ uri, onSubmitEditing, onDelete }: Props) => {
+    return (
+        <View style={styles.container}>
+            <TextInput
+                style={styles.input}
+                defaultValue={uri}
+                onSubmitEditing={e => onSubmitEditing(e.nativeEvent.text)}
+                autoCapitalize='none'
+            />
+            <Button title='Delete' onPress={onDelete} />
+        </View>
+    );
+};
+
+const styles = StyleSheet.create({
+    container: {
+        margin: 10,
+    },
+    input: {
+        borderWidth: 1,
+        borderColor: '#cccccc',
+        borderRadius: 4,
+        padding: 10,
+    },
+});

example/src/index.ts

@@ -0,0 +1 @@
+export * from './TrackListItem';