Alle <Pressable style={({pressed}) => ({...})}> ersetzt — style-Funktion
droppt auf Android (New Arch) intermittierend width/height, führt zu 0×0
unsichtbaren Elementen. TouchableOpacity mit activeOpacity ist stabil.
Außerdem übrige Pressables (plain style) aus components/ und app/
migriert sowie zwei überschüssige </View>-Tags in chat.tsx + RoomCard.tsx
entfernt die TS-Fehler verursacht haben.
64 Dateien, typecheck sauber.
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
62 lines
1.6 KiB
TypeScript
62 lines
1.6 KiB
TypeScript
import { TouchableOpacity, Text, View } from 'react-native';
|
|
import { TTS_PROVIDER_LABEL, type TtsProvider, useTtsProvider } from '../../lib/ttsProvider';
|
|
|
|
const PROVIDERS: TtsProvider[] = ['openai', 'gemini', 'elevenlabs', 'cartesia', 'google-cloud'];
|
|
|
|
export function TtsProviderToggle() {
|
|
const [current, set] = useTtsProvider();
|
|
return (
|
|
<View
|
|
style={{
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
gap: 6,
|
|
paddingHorizontal: 12,
|
|
paddingVertical: 6,
|
|
}}
|
|
>
|
|
<Text
|
|
style={{
|
|
fontSize: 9,
|
|
color: '#9ca3af',
|
|
textTransform: 'uppercase',
|
|
letterSpacing: 0.5,
|
|
marginRight: 4,
|
|
}}
|
|
>
|
|
TTS
|
|
</Text>
|
|
{PROVIDERS.map((p) => {
|
|
const active = p === current;
|
|
return (
|
|
<TouchableOpacity
|
|
key={p}
|
|
onPress={() => { void set(p); }}
|
|
hitSlop={6}
|
|
activeOpacity={0.7}
|
|
style={{
|
|
paddingHorizontal: 10,
|
|
paddingVertical: 4,
|
|
borderRadius: 999,
|
|
backgroundColor: active ? '#1f2937' : '#e5e7eb',
|
|
borderWidth: 1.5,
|
|
borderColor: active ? '#1f2937' : '#9ca3af',
|
|
}}
|
|
>
|
|
<Text
|
|
style={{
|
|
fontSize: 10,
|
|
fontFamily: 'Nunito_700Bold',
|
|
color: active ? '#ffffff' : '#374151',
|
|
}}
|
|
>
|
|
{TTS_PROVIDER_LABEL[p]}
|
|
</Text>
|
|
</TouchableOpacity>
|
|
);
|
|
})}
|
|
</View>
|
|
);
|
|
}
|