Skip to content

Commit 33a5b6c

Browse files
committed
Convert SettingsScreen to SwiftUI components from @expo/ui/swift-ui
- Add new ListItem, ListItemSeparator, ListMenu components - Update SettingsScreen to use @expo/ui/swift-ui components (Host, Form, Section, Toggle, Button) - Maintain same functionality with SwiftUI-based UI
1 parent 141a74c commit 33a5b6c

4 files changed

Lines changed: 233 additions & 280 deletions

File tree

components/ListItem.jsx

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
import { useState } from 'react';
2+
import { Pressable } from 'react-native';
3+
4+
import useTheme from '../hooks/useTheme';
5+
6+
export default function ListItem({ style = {}, ...props }) {
7+
const { colors } = useTheme();
8+
const [pressed, setPressed] = useState(false);
9+
const styles = {
10+
paddingHorizontal: 15,
11+
paddingVertical: 13,
12+
backgroundColor: colors.background,
13+
flexDirection: 'row',
14+
justifyContent: 'space-between',
15+
alignItems: 'center',
16+
};
17+
18+
return (
19+
<Pressable
20+
disabled={!props.onPress || props.disabled}
21+
unstable_pressDelay={130}
22+
onPressIn={() => {
23+
setPressed(true);
24+
}}
25+
onPressOut={() => {
26+
setPressed(false);
27+
}}
28+
style={[
29+
styles,
30+
pressed && {
31+
backgroundColor: colors.fill,
32+
},
33+
style,
34+
]}
35+
{...props}
36+
/>
37+
);
38+
}

components/ListItemSeparator.jsx

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
import { StyleSheet } from 'react-native';
2+
3+
import Separator from './Separator';
4+
5+
export default function ListItemSeparator() {
6+
return (
7+
<Separator
8+
style={{
9+
marginLeft: 15,
10+
marginRight: 15,
11+
marginTop: -StyleSheet.hairlineWidth,
12+
}}
13+
/>
14+
);
15+
}

components/ListMenu.jsx

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
import { View } from 'react-native';
2+
3+
import ReadableWidthContainer from './ReadableWidthContainer';
4+
5+
export default function ListMenu(props) {
6+
return (
7+
<ReadableWidthContainer>
8+
<View
9+
{...props}
10+
style={{
11+
marginHorizontal: 15,
12+
borderRadius: 24,
13+
borderCurve: 'continuous',
14+
overflow: 'hidden',
15+
}}
16+
/>
17+
</ReadableWidthContainer>
18+
);
19+
}

0 commit comments

Comments
 (0)