1import { B } from '@expo/html-elements';
2import React from 'react';
3import { StyleSheet, Switch, View, TextStyle, ViewStyle } from 'react-native';
4
5export default function TitleSwitch({
6  style,
7  titleStyle,
8  title,
9  value,
10  setValue,
11  disabled,
12}: {
13  style?: ViewStyle;
14  titleStyle?: TextStyle;
15  title?: string;
16  value: boolean;
17  disabled?: boolean;
18  setValue: (value: boolean) => void;
19}) {
20  const outputTitle = disabled ? `${title} (Disabled)` : title;
21  return (
22    <View style={[styles.container, style]}>
23      <B style={[styles.title, titleStyle]}>{outputTitle}</B>
24      <Switch disabled={disabled} value={value} onValueChange={value => setValue(value)} />
25    </View>
26  );
27}
28
29const styles = StyleSheet.create({
30  container: {
31    flexDirection: 'row',
32    alignItems: 'center',
33    marginVertical: 12,
34    justifyContent: 'space-between',
35  },
36  title: {
37    marginRight: 12,
38  },
39  text: {
40    marginVertical: 15,
41    maxWidth: '80%',
42    marginHorizontal: 10,
43  },
44});
45