Skip to content

Commit 7b6b387

Browse files
V3RONV3RON
committed
fix: screens on Android
1 parent a67a71d commit 7b6b387

6 files changed

Lines changed: 81 additions & 247 deletions

File tree

‎example/screens/android/AndroidScreen.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ export default function AndroidScreen() {
77
return (
88
<ScreenLayout
99
title="Android Widgets"
10-
description="Build Android home screen widgets with React Native. Explore pinning, previews, charts, server-driven updates, theming, and asset handling."
10+
description="Build Android home screen widgets with React Native. Explore pinning, previews, charts, and server-driven updates."
1111
>
1212
<ActiveWidgetsAndroidCard />
1313
<ExampleSectionCards sections={ANDROID_WIDGET_SECTIONS} />

‎example/screens/android/tabs/OthersScreen.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ export default function OthersScreen() {
66
return (
77
<ScreenLayout
88
title="Other Examples"
9-
description="Explore general Voltra examples beyond Android widgets and ongoing notifications."
9+
description="Explore Voltra capabilities for Android including image handling, Material theming, and custom fonts."
1010
>
1111
<ExampleSectionCards sections={ANDROID_OTHER_SECTIONS} />
1212
</ScreenLayout>

‎example/screens/android/tabs/sections.ts‎

Lines changed: 16 additions & 65 deletions
Original file line numberDiff line numberDiff line change
@@ -8,20 +8,6 @@ export const ANDROID_WIDGET_SECTIONS: ExampleSection[] = [
88
'Request to pin widgets directly from your app. Show the Android system pin widget dialog without leaving your app.',
99
route: '/android-widgets/pin',
1010
},
11-
{
12-
id: 'image-preloading',
13-
title: 'Image Preloading',
14-
description:
15-
'Test image preloading for Android widgets. Download images to the app cache and verify they appear in your widgets.',
16-
route: '/android-widgets/image-preloading',
17-
},
18-
{
19-
id: 'image-fallback',
20-
title: 'Image Fallback',
21-
description:
22-
'Test the image fallback behavior using backgroundColor from styles. See how missing images render with different style properties.',
23-
route: '/android-widgets/image-fallback',
24-
},
2511
{
2612
id: 'preview-widgets',
2713
title: 'Widget Previews',
@@ -42,70 +28,35 @@ export const ANDROID_WIDGET_SECTIONS: ExampleSection[] = [
4228
'Serve dynamic widget content from a remote server using Voltra SSR. This example includes a sample widget server implementation.',
4329
route: '/android-widgets/server-driven',
4430
},
45-
{
46-
id: 'material-colors',
47-
title: 'Material Colors',
48-
description:
49-
'Test one Android widget through both client-side and server-side rendering, using Material dynamic colors from the current device theme.',
50-
route: '/android-widgets/material-colors',
51-
},
52-
{
53-
id: 'custom-fonts',
54-
title: 'Custom Fonts',
55-
description:
56-
'Render text with custom fonts in Android Glance widgets using bitmap rendering. Includes Pacifico and Press Start 2P demos.',
57-
route: '/android-widgets/custom-fonts',
58-
},
5931
]
6032

6133
export const ANDROID_OTHER_SECTIONS: ExampleSection[] = [
6234
{
63-
id: 'styling',
64-
title: 'Styling',
65-
description:
66-
'Explore Voltra styling properties including padding, margins, colors, borders, shadows, and typography.',
67-
route: '/testing-grounds/styling',
68-
},
69-
{
70-
id: 'positioning',
71-
title: 'Positioning',
72-
description:
73-
'Learn about static, relative, and absolute positioning modes. See how left, top, and zIndex properties work with visual examples.',
74-
route: '/testing-grounds/positioning',
75-
},
76-
{
77-
id: 'progress',
78-
title: 'Progress Indicators',
79-
description:
80-
'Explore linear and circular progress indicators. Test determinate, indeterminate, and timer-based modes with custom labels and styling.',
81-
route: '/testing-grounds/progress',
82-
},
83-
{
84-
id: 'components',
85-
title: 'Components',
35+
id: 'image-preloading',
36+
title: 'Image Preloading',
8637
description:
87-
'Explore all available Voltra components including Button, Text, VStack, HStack, ZStack, Image, and more.',
88-
route: '/testing-grounds/components',
38+
'Test image preloading for Android widgets. Download images to the app cache and verify they appear in your widgets.',
39+
route: '/android-widgets/image-preloading',
8940
},
9041
{
91-
id: 'flex-playground',
92-
title: 'Flex Layout Playground',
42+
id: 'image-fallback',
43+
title: 'Image Fallback',
9344
description:
94-
'Interactive playground for experimenting with flex layout properties. Test alignItems, justifyContent, flexDirection, spacing, and padding with live visual feedback.',
95-
route: '/testing-grounds/flex-playground',
45+
'Test the image fallback behavior using backgroundColor from styles. See how missing images render with different style properties.',
46+
route: '/android-widgets/image-fallback',
9647
},
9748
{
98-
id: 'chart-playground',
99-
title: 'Chart Playground',
49+
id: 'material-colors',
50+
title: 'Material Colors',
10051
description:
101-
'Explore all SwiftUI chart mark types: BarMark, LineMark, AreaMark, PointMark, RuleMark, and SectorMark. Randomize data to see animated transitions.',
102-
route: '/testing-grounds/chart-playground',
52+
'Test one Android widget through both client-side and server-side rendering, using Material dynamic colors from the current device theme.',
53+
route: '/android-widgets/material-colors',
10354
},
10455
{
105-
id: 'gradient-playground',
106-
title: 'Gradient Playground',
56+
id: 'custom-fonts',
57+
title: 'Custom Fonts',
10758
description:
108-
'Test CSS gradient strings as backgroundColor. Experiment with linear, radial, and conic gradients, direction and angle controls, color presets, stop positions, and borderRadius clipping.',
109-
route: '/testing-grounds/gradient-playground',
59+
'Render text with custom fonts in Android Glance widgets using bitmap rendering. Includes Pacifico and Press Start 2P demos.',
60+
route: '/android-widgets/custom-fonts',
11061
},
11162
]

‎example/screens/testing-grounds/components/ComponentsScreen.tsx‎

Lines changed: 20 additions & 59 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,12 @@
1-
import { Link } from 'expo-router'
1+
import { useRouter } from 'expo-router'
22
import React from 'react'
3-
import { FlatList, StyleSheet, Text, View } from 'react-native'
3+
import { StyleSheet, View } from 'react-native'
44
import { Voltra } from '@use-voltra/ios'
55
import { VoltraView } from '@use-voltra/ios-client'
66

77
import { Button } from '~/components/Button'
88
import { Card } from '~/components/Card'
9+
import { ScreenLayout } from '~/components/ScreenLayout'
910

1011
const IMAGE =
1112
'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'
@@ -296,69 +297,29 @@ const COMPONENTS_DATA = [
296297
]
297298

298299
export default function ComponentsScreen() {
299-
const renderHeader = () => (
300-
<>
301-
<Text style={styles.heading}>Components Showcase</Text>
302-
<Text style={styles.subheading}>
303-
Explore all available Voltra components. Each example demonstrates the component&apos;s functionality and
304-
styling capabilities within Live Activities.
305-
</Text>
306-
</>
307-
)
308-
309-
const renderItem = ({ item }: { item: (typeof COMPONENTS_DATA)[0] }) => (
310-
<Card key={item.id}>
311-
<Card.Title>{item.title}</Card.Title>
312-
<Card.Text>{item.description}</Card.Text>
313-
<View style={styles.exampleContainer}>{item.renderExample()}</View>
314-
</Card>
315-
)
316-
317-
const renderFooter = () => (
318-
<View style={styles.footer}>
319-
<Link href="/testing-grounds" asChild>
320-
<Button title="Back to Testing Grounds" variant="ghost" />
321-
</Link>
322-
</View>
323-
)
300+
const router = useRouter()
324301

325302
return (
326-
<View style={styles.container}>
327-
<FlatList
328-
style={[styles.scrollView]}
329-
contentContainerStyle={styles.content}
330-
data={COMPONENTS_DATA}
331-
keyExtractor={(item) => item.id}
332-
ListHeaderComponent={renderHeader}
333-
renderItem={renderItem}
334-
ListFooterComponent={renderFooter}
335-
/>
336-
</View>
303+
<ScreenLayout
304+
title="Components"
305+
description="Explore all available Voltra components including Button, Text, VStack, HStack, ZStack, Image, and more."
306+
>
307+
{COMPONENTS_DATA.map((item) => (
308+
<Card key={item.id}>
309+
<Card.Title>{item.title}</Card.Title>
310+
<Card.Text>{item.description}</Card.Text>
311+
<View style={styles.exampleContainer}>{item.renderExample()}</View>
312+
</Card>
313+
))}
314+
315+
<View style={styles.footer}>
316+
<Button title="Back" variant="ghost" onPress={() => router.back()} />
317+
</View>
318+
</ScreenLayout>
337319
)
338320
}
339321

340322
const styles = StyleSheet.create({
341-
container: {
342-
flex: 1,
343-
},
344-
scrollView: {
345-
flex: 1,
346-
},
347-
content: {
348-
paddingHorizontal: 20,
349-
paddingVertical: 24,
350-
},
351-
heading: {
352-
fontSize: 24,
353-
fontWeight: '700',
354-
color: '#FFFFFF',
355-
},
356-
subheading: {
357-
fontSize: 14,
358-
lineHeight: 20,
359-
color: '#CBD5F5',
360-
marginBottom: 8,
361-
},
362323
footer: {
363324
marginTop: 24,
364325
alignItems: 'center',

‎example/screens/testing-grounds/positioning/PositioningScreen.tsx‎

Lines changed: 23 additions & 62 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,10 @@
1-
import { Link } from 'expo-router'
1+
import { useRouter } from 'expo-router'
22
import React from 'react'
3-
import { FlatList, StyleSheet, Text, View } from 'react-native'
3+
import { StyleSheet, View } from 'react-native'
44

55
import { Button } from '~/components/Button'
66
import { Card } from '~/components/Card'
7+
import { ScreenLayout } from '~/components/ScreenLayout'
78

89
import {
910
AbsolutePositioningBasicExample,
@@ -63,72 +64,32 @@ const POSITIONING_DATA = [
6364
]
6465

6566
export default function PositioningScreen() {
66-
const renderHeader = () => (
67-
<>
68-
<Text style={styles.heading}>Positioning Examples</Text>
69-
<Text style={styles.subheading}>
70-
Explore Voltra&apos;s positioning modes: static (default), relative (offset from natural position), and absolute
71-
(center-based coordinates). Red dots mark reference points in absolute positioning examples.
72-
</Text>
73-
</>
74-
)
75-
76-
const renderItem = ({ item }: { item: (typeof POSITIONING_DATA)[0] }) => {
77-
const { Component } = item
78-
return (
79-
<Card key={item.id}>
80-
<Card.Title>{item.title}</Card.Title>
81-
<Card.Text>{item.description}</Card.Text>
82-
<Component />
83-
</Card>
84-
)
85-
}
86-
87-
const renderFooter = () => (
88-
<View style={styles.footer}>
89-
<Link href="/testing-grounds" asChild>
90-
<Button title="Back to Testing Grounds" variant="ghost" />
91-
</Link>
92-
</View>
93-
)
67+
const router = useRouter()
9468

9569
return (
96-
<View style={styles.container}>
97-
<FlatList
98-
style={[styles.scrollView]}
99-
contentContainerStyle={styles.content}
100-
data={POSITIONING_DATA}
101-
keyExtractor={(item) => item.id}
102-
ListHeaderComponent={renderHeader}
103-
renderItem={renderItem}
104-
ListFooterComponent={renderFooter}
105-
/>
106-
</View>
70+
<ScreenLayout
71+
title="Positioning"
72+
description="Learn about static, relative, and absolute positioning modes. See how left, top, and zIndex properties work with visual examples."
73+
>
74+
{POSITIONING_DATA.map((item) => {
75+
const { Component } = item
76+
return (
77+
<Card key={item.id}>
78+
<Card.Title>{item.title}</Card.Title>
79+
<Card.Text>{item.description}</Card.Text>
80+
<Component />
81+
</Card>
82+
)
83+
})}
84+
85+
<View style={styles.footer}>
86+
<Button title="Back" variant="ghost" onPress={() => router.back()} />
87+
</View>
88+
</ScreenLayout>
10789
)
10890
}
10991

11092
const styles = StyleSheet.create({
111-
container: {
112-
flex: 1,
113-
},
114-
scrollView: {
115-
flex: 1,
116-
},
117-
content: {
118-
paddingHorizontal: 20,
119-
paddingVertical: 24,
120-
},
121-
heading: {
122-
fontSize: 24,
123-
fontWeight: '700',
124-
color: '#FFFFFF',
125-
},
126-
subheading: {
127-
fontSize: 14,
128-
lineHeight: 20,
129-
color: '#CBD5F5',
130-
marginBottom: 8,
131-
},
13293
footer: {
13394
marginTop: 24,
13495
alignItems: 'center',

0 commit comments

Comments
 (0)