react-native-audio-waveform/example/src/styles.ts at 336ee37cf05c29a7f3411a7d89621437e29fa4d5 · SimformSolutionsPvtLtd/react-native-audio-waveform · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
import { StyleSheet } from 'react-native';
import { Colors, scale } from './theme';
import { useColorScheme } from 'react-native';

export type StyleSheetParams =
  | Partial<{
      currentUser: boolean;
      top: number;
      bottom: number;
    }>
  | undefined;

/**
 * A StyleSheet object that contains all of the application's styles.
 * @param {ThemeMode} theme - The theme of the application.
 * @returns {StyleSheet} - A StyleSheet object containing all of the application's styles.
 */
const styles = (params: StyleSheetParams = {}) =>
  StyleSheet.create({
    appContainer: {
      flex: 1,
      backgroundColor: useColorScheme() === 'dark' ? Colors.gray : Colors.white,
    },
    screenBackground: {
      flex: 1,
      paddingBottom: params.bottom,
    },
    container: {
      flex: 1,
      paddingTop: params.top,
      paddingHorizontal: scale(16),
      marginBottom: scale(24),
    },
    buttonContainer: {
      flexDirection: 'row',
      borderRadius: scale(10),
      alignItems: 'center',
      overflow: 'hidden',
      columnGap: scale(8),
      paddingHorizontal: scale(8),
      backgroundColor: params.currentUser ? Colors.darkGray : Colors.pink,
    },
    listItemContainer: {
      marginTop: scale(16),
      alignItems: params.currentUser ? 'flex-end' : 'flex-start',
    },
    listItemWidth: {
      width: '90%',
    },
    buttonImage: {
      height: scale(22),
      width: scale(22),
      tintColor: Colors.white,
      alignSelf: 'flex-end',
    },
    stopButton: {
      height: scale(22),
      width: scale(22),
      alignSelf: 'center',
    },
    pinkButtonImage: {
      height: scale(22),
      width: scale(22),
      tintColor: Colors.pink,
      alignSelf: 'flex-end',
    },
    staticWaveformView: {
      flex: 1,
      height: scale(75),
    },
    playBackControlPressable: {
      height: scale(30),
      width: scale(30),
      justifyContent: 'center',
    },
    recordAudioPressable: {
      height: scale(40),
      width: scale(40),
      padding: scale(8),
    },
    recordPauseResumeAudioPressable: {
      height: scale(40),
      width: scale(40),
      justifyContent: 'center',
    },
    liveWaveformContainer: {
      flexDirection: 'row',
      marginBottom: scale(8),
      borderRadius: scale(8),
      alignItems: 'center',
      paddingHorizontal: scale(16),
    },
    simformImage: {
      height: scale(50),
      width: scale(200),
    },
    liveWaveformView: {
      flex: 1,
      borderWidth: scale(0.5),
      borderRadius: scale(8),
      paddingHorizontal: scale(10),
    },
    buttonImageLive: {
      height: '100%',
      width: '100%',
      tintColor: Colors.pink,
    },
    simformImageContainer: {
      alignItems: 'center',
    },
    advancedOptionsContainer: {
      gap: scale(8),
    },
    advancedOptionItem: {
      alignItems: 'center',
      flexDirection: 'row',
    },
    advancedOptionItemTitle: {
      fontSize: scale(20),
      fontWeight: 'bold',
      color: Colors.pink,
      paddingLeft: scale(8),
    },
    speedBox: {
      height: scale(28),
      width: scale(28),
      borderRadius: scale(14),
      justifyContent: 'center',
      tintColor: Colors.white,
      marginRight: scale(5),
    },
    whiteBackground: {
      backgroundColor: Colors.white,
    },
    speed: {
      color: Colors.black,
      fontSize: scale(10),
      textAlign: 'center',
      fontWeight: '600',
    },
  });

export default styles;