Skip to content

Commit d6492a6

Browse files
danstepanovdanstepanov
committed
[WIP] remove deprecated nativewindui components
1 parent 8c71863 commit d6492a6

File tree

10 files changed

+10
-522
lines changed

10 files changed

+10
-522
lines changed

‎.changeset/red-adults-swim.md

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'create-expo-stack': patch
3+
---
4+
5+
remove deprecated nativewindui components

‎cli/src/commands/create-expo-stack.ts

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -213,12 +213,9 @@ const command: GluegunCommand = {
213213
'action-sheet',
214214
'activity-indicator',
215215
'activity-view',
216-
'alert',
217216
'avatar',
218217
'bottom-sheet',
219-
'context-menu',
220218
'date-picker',
221-
'dropdown-menu',
222219
'picker',
223220
'progress-indicator',
224221
'ratings-indicator',

‎cli/src/templates/base/package.json.ejs

Lines changed: 0 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -57,12 +57,6 @@
5757
<% if (props.stylingPackage?.options.selectedComponents.includes('action-sheet')) { %>
5858
"@expo/react-native-action-sheet": "^4.0.1",
5959
<% } %>
60-
<% if (props.stylingPackage?.options.selectedComponents.includes('context-menu') || props.stylingPackage?.options.selectedComponents.includes('dropdown-menu')) { %>
61-
"zeego": "^1.9.1",
62-
"react-native-ios-context-menu": "^2.5.0",
63-
"react-native-ios-utilities": "^4.4.0",
64-
"@react-native-menu/menu": "^1.0.3",
65-
<% } %>
6660
<% if (props.stylingPackage?.options.selectedComponents.includes('ratings-indicator')) { %>
6761
"expo-store-review": "~7.0.2",
6862
<% } %>

‎cli/src/templates/packages/nativewindui/drawer/app/(drawer)/index.tsx.ejs

Lines changed: 1 addition & 164 deletions
Original file line numberDiff line numberDiff line change
@@ -4,11 +4,7 @@ import { FlashList } from '@shopify/flash-list';
44
import { cssInterop } from 'nativewind';
55
import * as React from 'react';
66
import {
7-
<% if (props.stylingPackage?.options.selectedComponents.includes('alert')) { %>
8-
Alert,
9-
<% } %>
107
<% if (
11-
props.stylingPackage?.options.selectedComponents.includes('alert') ||
128
props.stylingPackage?.options.selectedComponents.includes('action-sheet') ||
139
props.stylingPackage?.options.selectedComponents.includes('activity-view') ||
1410
props.stylingPackage?.options.selectedComponents.includes('bottom-sheet')
@@ -17,12 +13,9 @@ import {
1713
ButtonProps,
1814
<% } %>
1915
Linking,
20-
<% if (props.stylingPackage?.options.selectedComponents.includes('alert') || props.stylingPackage?.options.selectedComponents.includes('bottom-sheet')) { %>
16+
<% if (props.stylingPackage?.options.selectedComponents.includes('bottom-sheet')) { %>
2117
Platform,
2218
<% } %>
23-
<% if (props.stylingPackage?.options.selectedComponents.includes('dropdown-menu')) { %>
24-
Pressable,
25-
<% } %>
2619
<% if (props.stylingPackage?.options.selectedComponents.includes('activity-view')) { %>
2720
Share,
2821
<% } %>
@@ -37,12 +30,6 @@ import { Icon } from '@roninoss/icons';
3730
<% if (props.stylingPackage?.options.selectedComponents.includes('ratings-indicator')) { %>
3831
import * as StoreReview from 'expo-store-review';
3932
<% } %>
40-
<% if (props.stylingPackage?.options.selectedComponents.includes('context-menu')) { %>
41-
import * as ContextMenu from 'zeego/context-menu';
42-
<% } %>
43-
<% if (props.stylingPackage?.options.selectedComponents.includes('dropdown-menu')) { %>
44-
import * as DropdownMenu from 'zeego/dropdown-menu';
45-
<% } %>
4633
4734
import { Container } from '~/components/Container';
4835
<% if (props.stylingPackage?.options.selectedComponents.includes('activity-indicator')) { %>
@@ -112,7 +99,6 @@ cssInterop(FlashList, {
11299
contentContainerClassName: 'contentContainerStyle',
113100
});
114101
<% if (
115-
props.stylingPackage?.options.selectedComponents.includes('alert') ||
116102
props.stylingPackage?.options.selectedComponents.includes('action-sheet') ||
117103
props.stylingPackage?.options.selectedComponents.includes('activity-view') ||
118104
props.stylingPackage?.options.selectedComponents.includes('bottom-sheet')
@@ -281,99 +267,6 @@ const COMPONENTS: ComponentItem[] = [
281267
}
282268
},
283269
<% } %>
284-
<% if (props.stylingPackage?.options.selectedComponents.includes('context-menu')) { %>
285-
{
286-
name: 'Context Menu',
287-
component: function ContextMenuExample() {
288-
const [isChecked, setIsChecked] = React.useState(true);
289-
return (
290-
<View>
291-
<ContextMenu.Root style={{ borderRadius: 12 }}>
292-
<ContextMenu.Trigger>
293-
<View className='w-full h-36 rounded-xl border border-foreground border-dashed justify-center items-center'>
294-
<Text>Press and hold me</Text>
295-
</View>
296-
</ContextMenu.Trigger>
297-
<ContextMenu.Content>
298-
<ContextMenu.Label children='Label 1' />
299-
<ContextMenu.Item key='item-1'>
300-
<ContextMenu.ItemTitle>Item 1</ContextMenu.ItemTitle>
301-
</ContextMenu.Item>
302-
<ContextMenu.Group>
303-
<ContextMenu.Item key='item-2'>
304-
<ContextMenu.ItemTitle>Item 2</ContextMenu.ItemTitle>
305-
</ContextMenu.Item>
306-
<ContextMenu.CheckboxItem
307-
key='checkbox-example'
308-
value={isChecked}
309-
onValueChange={(val) => {
310-
setIsChecked(val === 'on');
311-
}}
312-
>
313-
<ContextMenu.ItemTitle>Item 3</ContextMenu.ItemTitle>
314-
<ContextMenu.ItemIndicator />
315-
</ContextMenu.CheckboxItem>
316-
</ContextMenu.Group>
317-
<ContextMenu.Separator />
318-
</ContextMenu.Content>
319-
</ContextMenu.Root>
320-
</View>
321-
);
322-
},
323-
},
324-
<% } %>
325-
<% if (props.stylingPackage?.options.selectedComponents.includes('dropdown-menu')) { %>
326-
{
327-
name: 'Dropdown Menu',
328-
component: function DropdownMenuExample() {
329-
const { colors } = useColorScheme();
330-
const [menu, setMenu] = React.useState<'primary' | 'destructive'>('primary');
331-
332-
return (
333-
<View className='items-center'>
334-
<DropdownMenu.Root>
335-
<DropdownMenu.Trigger>
336-
<Pressable className='flex-row items-center gap-1.5 android:gap-3'>
337-
<Text>
338-
Selected: <Text style={{ color: colors[menu] }}>{menu}</Text>
339-
</Text>
340-
<View className='pl-0.5 opacity-70'>
341-
<Icon
342-
name='chevron-down'
343-
color={colors.foreground}
344-
size={21}
345-
/>
346-
</View>
347-
</Pressable>
348-
</DropdownMenu.Trigger>
349-
<DropdownMenu.Content>
350-
<DropdownMenu.CheckboxItem
351-
key='destructive'
352-
value={menu === 'destructive'}
353-
onValueChange={() => {
354-
setMenu('destructive');
355-
}}
356-
>
357-
<DropdownMenu.ItemIndicator />
358-
<DropdownMenu.ItemTitle children='destructive' />
359-
</DropdownMenu.CheckboxItem>
360-
<DropdownMenu.CheckboxItem
361-
key='primary'
362-
value={menu === 'primary'}
363-
onValueChange={() => {
364-
setMenu('primary');
365-
}}
366-
>
367-
<DropdownMenu.ItemIndicator />
368-
<DropdownMenu.ItemTitle children='primary' />
369-
</DropdownMenu.CheckboxItem>
370-
</DropdownMenu.Content>
371-
</DropdownMenu.Root>
372-
</View>
373-
);
374-
},
375-
},
376-
<% } %>
377270
<% if (props.stylingPackage?.options.selectedComponents.includes('progress-indicator')) { %>
378271
{
379272
name: 'Progress Indicator',
@@ -410,62 +303,6 @@ const COMPONENTS: ComponentItem[] = [
410303
},
411304
},
412305
<% } %>
413-
<% if (props.stylingPackage?.options.selectedComponents.includes('alert')) { %>
414-
{
415-
name: 'Alert',
416-
component: function AlertExample() {
417-
const { colors } = useColorScheme();
418-
return (
419-
<View className='items-center'>
420-
<DefaultButton
421-
color={colors.destructive}
422-
onPress={() => {
423-
if (Platform.OS === 'ios') {
424-
Alert.prompt(
425-
'Delete account?',
426-
'Enter your password to delete your account.',
427-
[
428-
{
429-
text: 'Cancel',
430-
onPress: () => console.log('Cancel Pressed'),
431-
style: 'cancel',
432-
},
433-
{
434-
text: 'Delete',
435-
style: 'destructive',
436-
onPress: () => console.log('Delete Pressed'),
437-
},
438-
],
439-
'secure-text',
440-
'',
441-
'default'
442-
);
443-
} else {
444-
Alert.alert(
445-
'Delete account?',
446-
'Enter your password to delete your account.',
447-
[
448-
{
449-
text: 'Cancel',
450-
onPress: () => console.log('Cancel Pressed'),
451-
style: 'cancel',
452-
},
453-
{
454-
text: 'Delete',
455-
style: 'destructive',
456-
onPress: () => console.log('Delete Pressed'),
457-
},
458-
]
459-
);
460-
}
461-
}}
462-
title='Delete account'
463-
/>
464-
</View>
465-
);
466-
},
467-
},
468-
<% } %>
469306
<% if (props.stylingPackage?.options.selectedComponents.includes('action-sheet')) { %>
470307
{
471308
name: 'Action Sheet',

0 commit comments

Comments
 (0)