Preview update v2.1.0

example/src/App.tsx

@@ -19,7 +19,6 @@ import React, {
 import {
   ActivityIndicator,
   Image,
-  ImageBackground,
   Linking,
   Pressable,
   ScrollView,
@@ -32,7 +31,7 @@ import {
   SafeAreaProvider,
   useSafeAreaInsets,
 } from 'react-native-safe-area-context';
-import { Gifs, Icons } from './assets';
+import { Icons } from './assets';
 import {
   generateAudioList,
   playbackSpeedSequence,
@@ -81,13 +80,7 @@ const RenderListItem = React.memo(
     return (
       <View key={item.path} style={[styles.listItemContainer]}>
         <View style={styles.listItemWidth}>
-          <ImageBackground
-            source={
-              item.fromCurrentUser
-                ? Gifs.audioBackground1
-                : Gifs.audioBackground2
-            }
-            style={[styles.buttonContainer]}>
+          <View style={[styles.buttonContainer]}>
             <Pressable
               disabled={isLoading}
               onPress={handleButtonAction}
@@ -116,7 +109,7 @@ const RenderListItem = React.memo(
               candleSpace={2}
               candleWidth={4}
               scrubColor={Colors.white}
-              waveColor={Colors.gray}
+              waveColor={Colors.lightWhite}
               candleHeightScale={4}
               onPlayerStateChange={state => {
                 setPlayerState(state);
@@ -152,7 +145,7 @@ const RenderListItem = React.memo(
             ) : (
               <Image style={styles.speedBox} source={Icons.logo} />
             )}
-          </ImageBackground>
+          </View>
         </View>
       </View>
     );
@@ -263,9 +256,7 @@ const AppContainer = () => {
         translucent
       />
       <GestureHandlerRootView style={styles.appContainer}>
-        <ImageBackground
-          source={Gifs.appBackground}
-          style={styles.screenBackground}>
+        <View style={styles.screenBackground}>
           <View style={styles.container}>
             <View style={styles.simformImageContainer}>
               <Image
@@ -288,7 +279,7 @@ const AppContainer = () => {
             </ScrollView>
           </View>
           <LivePlayerComponent setList={setList} />
-        </ImageBackground>
+        </View>
       </GestureHandlerRootView>
     </View>
   );

example/src/assets/index.ts

@@ -1,3 +1,2 @@
 export * from './audio';
-export * from './gifs';
 export * from './icons';

example/src/styles.ts

@@ -36,6 +36,7 @@ const styles = (params: StyleSheetParams = {}) =>
       overflow: 'hidden',
       columnGap: scale(8),
       paddingHorizontal: scale(8),
+      backgroundColor: params.currentUser ? Colors.darkGray : Colors.pink,
     },
     listItemContainer: {
       marginTop: scale(16),
@@ -47,6 +48,7 @@ const styles = (params: StyleSheetParams = {}) =>
     buttonImage: {
       height: scale(22),
       width: scale(22),
+      tintColor: Colors.white,
       alignSelf: 'flex-end',
     },
     staticWaveformView: {
@@ -97,6 +99,8 @@ const styles = (params: StyleSheetParams = {}) =>
       width: scale(28),
       borderRadius: scale(14),
       justifyContent: 'center',
+      tintColor: Colors.white,
+      marginRight: scale(5),
     },
     whiteBackground: {
       backgroundColor: Colors.white,

example/src/theme/Colors.ts

@@ -1,12 +1,15 @@
 const colors = {
   white: '#ffffff',
+  lightWhite: '#ffffff80',
   black: '#000000',
   blue: '#05259b',
   gray: '#808080',
+  darkGray: '#303437',
   transparent: 'transparent',
   waveStickBackground: '#989898',
   waveStickCompleteBackground: '#7b7b7b',
   pink: '#DD5F68',
+  lightPink: '#FFE5E8',
 };
 
 export default colors;