Skip to content

Commit 44c43cc

Browse files
dannyhwdannyhw
authored
fix: adjust lite ui animations and keyboard handling (#809)
* fix: adjust lite ui animations and keyboard handling * macos fixes * macos fixes * more macos and lite ui fixes * v10.0.2-alpha.0 * fix: expand key prop * fix: expand key prop * fix: unused imports * fix: portal * fix: drag down white space * v10.0.2-alpha.1 * update storybook version
1 parent 7604d1c commit 44c43cc

File tree

30 files changed

+829
-263
lines changed

30 files changed

+829
-263
lines changed

‎docs/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "docs",
3-
"version": "10.0.1",
3+
"version": "10.0.2-alpha.1",
44
"private": true,
55
"scripts": {
66
"docusaurus": "docusaurus",

‎examples/expo-example/.rnstorybook/index.tsx‎

Lines changed: 24 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,11 @@
11
import AsyncStorage from '@react-native-async-storage/async-storage';
22
import { LiteUI } from '@storybook/react-native-ui-lite';
3-
// import { StatusBar, View } from 'react-native';
4-
// import { SafeAreaView, SafeAreaProvider } from 'react-native-safe-area-context';
3+
import { StatusBar, View } from 'react-native';
4+
import { SafeAreaView, SafeAreaProvider } from 'react-native-safe-area-context';
55
import { view } from './storybook.requires';
66

77
const isScreenshotTesting = process.env.EXPO_PUBLIC_SCREENSHOT_TESTING === 'true';
8+
const isLiteUI = process.env.EXPO_PUBLIC_LITE_UI === 'true';
89

910
const StorybookUIRoot = view.getStorybookUI({
1011
shouldPersistSelection: true,
@@ -16,26 +17,27 @@ const StorybookUIRoot = view.getStorybookUI({
1617
host: 'localhost',
1718
port: 7007,
1819

19-
// CustomUIComponent: LiteUI,
20-
// CustomUIComponent: isScreenshotTesting
21-
// ? ({ children, story }) => {
22-
// return (
23-
// <SafeAreaProvider>
24-
// <SafeAreaView style={{ flex: 1 }}>
25-
// <StatusBar hidden />
26-
// <View
27-
// style={{ flex: 1 }}
28-
// accessibilityLabel={story?.id}
29-
// testID={story?.id}
30-
// accessible
31-
// >
32-
// {children}
33-
// </View>
34-
// </SafeAreaView>
35-
// </SafeAreaProvider>
36-
// );
37-
// }
38-
// : undefined,
20+
CustomUIComponent: isScreenshotTesting
21+
? ({ children, story }) => {
22+
return (
23+
<SafeAreaProvider>
24+
<SafeAreaView style={{ flex: 1 }}>
25+
<StatusBar hidden />
26+
<View
27+
style={{ flex: 1 }}
28+
accessibilityLabel={story?.id}
29+
testID={story?.id}
30+
accessible
31+
>
32+
{children}
33+
</View>
34+
</SafeAreaView>
35+
</SafeAreaProvider>
36+
);
37+
}
38+
: isLiteUI
39+
? LiteUI
40+
: undefined,
3941
});
4042

4143
export default StorybookUIRoot;

‎examples/expo-example/package.json‎

Lines changed: 11 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,14 @@
11
{
22
"name": "expo-example",
3-
"version": "10.0.1",
3+
"version": "10.0.2-alpha.1",
44
"private": true,
55
"main": "index.js",
66
"scripts": {
77
"android": "EXPO_PUBLIC_STORYBOOK_ENABLED=true expo start --android",
88
"ios": "EXPO_PUBLIC_STORYBOOK_ENABLED=true expo start --ios",
99
"web": "EXPO_PUBLIC_STORYBOOK_ENABLED=true expo start --web",
1010
"storybook": "EXPO_PUBLIC_STORYBOOK_ENABLED=true expo start -c",
11+
"storybook:lite": "EXPO_PUBLIC_STORYBOOK_ENABLED=true EXPO_PUBLIC_LITE_UI=true expo start -c",
1112
"storybook:test": "EXPO_PUBLIC_SCREENSHOT_TESTING=true EXPO_PUBLIC_STORYBOOK_ENABLED=true expo start -c",
1213
"storybook:web": "storybook dev -p 6006",
1314
"build-web-storybook": "storybook build",
@@ -29,15 +30,15 @@
2930
"@react-native-async-storage/async-storage": "2.2.0",
3031
"@react-native-community/datetimepicker": "8.4.4",
3132
"@react-native-community/slider": "5.0.1",
32-
"@storybook/addon-ondevice-actions": "^10.0.1",
33-
"@storybook/addon-ondevice-backgrounds": "^10.0.1",
34-
"@storybook/addon-ondevice-controls": "^10.0.1",
35-
"@storybook/addon-ondevice-notes": "^10.0.1",
33+
"@storybook/addon-ondevice-actions": "^10.0.2-alpha.1",
34+
"@storybook/addon-ondevice-backgrounds": "^10.0.2-alpha.1",
35+
"@storybook/addon-ondevice-controls": "^10.0.2-alpha.1",
36+
"@storybook/addon-ondevice-notes": "^10.0.2-alpha.1",
3637
"@storybook/addon-react-native-server": "^1.0.1",
37-
"@storybook/react": "^10.0.1",
38-
"@storybook/react-native": "^10.0.1",
39-
"@storybook/react-native-ui-lite": "^10.0.1",
40-
"@storybook/react-native-web-vite": "^10.0.1",
38+
"@storybook/react": "^10.0.2",
39+
"@storybook/react-native": "^10.0.2-alpha.1",
40+
"@storybook/react-native-ui-lite": "^10.0.2-alpha.1",
41+
"@storybook/react-native-web-vite": "^10.0.2",
4142
"babel-plugin-react-compiler": "^1.0.0",
4243
"expo": "^54.0.21",
4344
"expo-updates": "~29.0.12",
@@ -51,7 +52,7 @@
5152
"react-native-svg": "15.12.1",
5253
"react-native-web": "^0.21.2",
5354
"react-native-worklets": "^0.5.2",
54-
"storybook": "^10.0.1",
55+
"storybook": "^10.0.2",
5556
"storybook-addon-deep-controls": "^0.9.5",
5657
"ws": "^8.18.3"
5758
},

‎lerna.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
{
22
"npmClient": "yarn",
33
"registry": "https://registry.npmjs.org",
4-
"version": "10.0.1"
4+
"version": "10.0.2-alpha.1"
55
}

‎packages/ondevice-actions/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@storybook/addon-ondevice-actions",
3-
"version": "10.0.1",
3+
"version": "10.0.2-alpha.1",
44
"description": "Action Logger addon for react-native storybook",
55
"keywords": [
66
"storybook"

‎packages/ondevice-backgrounds/package.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@storybook/addon-ondevice-backgrounds",
3-
"version": "10.0.1",
3+
"version": "10.0.2-alpha.1",
44
"description": "A react-native storybook addon to show different backgrounds for your preview",
55
"keywords": [
66
"addon",
@@ -32,7 +32,7 @@
3232
"dev": "tsc --watch"
3333
},
3434
"dependencies": {
35-
"@storybook/react-native-theming": "^10.0.1"
35+
"@storybook/react-native-theming": "^10.0.2-alpha.1"
3636
},
3737
"devDependencies": {
3838
"typescript": "~5.9.3"

‎packages/ondevice-controls/package.json‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@storybook/addon-ondevice-controls",
3-
"version": "10.0.1",
3+
"version": "10.0.2-alpha.1",
44
"description": "Display storybook controls on your device.",
55
"keywords": [
66
"addon",
@@ -30,8 +30,9 @@
3030
"copyimages": "cross-env-shell cp -r src/components/color-picker/resources dist/components/color-picker/resources"
3131
},
3232
"dependencies": {
33-
"@storybook/react-native-theming": "^10.0.1",
34-
"@storybook/react-native-ui-common": "^10.0.1",
33+
"@gorhom/portal": "^1.0.14",
34+
"@storybook/react-native-theming": "^10.0.2-alpha.1",
35+
"@storybook/react-native-ui-common": "^10.0.2-alpha.1",
3536
"polished": "^4.3.1",
3637
"react-native-modal-datetime-picker": "^18.0.0",
3738
"tinycolor2": "^1.6.0"

‎packages/ondevice-controls/src/components/ModalPortal.tsx‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
import { Portal } from '@gorhom/portal';
2+
import { Modal, ModalProps, Platform, View } from 'react-native';
3+
4+
const modalSupported = Platform.OS !== 'macos';
5+
6+
export const ModalPortal = ({
7+
children,
8+
visible,
9+
usePortal,
10+
...props
11+
}: ModalProps & { usePortal?: boolean }) => {
12+
if (modalSupported && !usePortal) {
13+
return (
14+
<Modal visible={visible} {...props}>
15+
{children}
16+
</Modal>
17+
);
18+
}
19+
20+
if (!visible) return null;
21+
22+
return (
23+
<Portal hostName="storybook-lite-ui-root">
24+
<View
25+
style={{
26+
flex: 1,
27+
position: 'absolute',
28+
top: 0,
29+
left: 0,
30+
right: 0,
31+
bottom: 0,
32+
zIndex: 1000,
33+
}}
34+
>
35+
{children}
36+
</View>
37+
</Portal>
38+
);
39+
};

‎packages/ondevice-controls/src/components/SelectModal.tsx‎

Lines changed: 10 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,21 @@
11
// NOTE This is adapted from react-native-modal-selector https://github.com/peacechen/react-native-modal-selector/blob/master/index.js
22

3-
import { useState, useCallback, useRef, ReactNode, ComponentType, useMemo } from 'react';
3+
import { ComponentType, ReactNode, useCallback, useMemo, useState } from 'react';
44

55
import {
6-
View,
7-
Modal,
8-
Text,
96
FlatList,
107
ScrollView,
11-
TouchableOpacity,
12-
TouchableWithoutFeedback,
8+
StyleProp,
139
StyleSheet,
14-
ViewStyle,
10+
Text,
1511
TextStyle,
16-
StyleProp,
12+
TouchableOpacity,
13+
TouchableWithoutFeedback,
14+
View,
1715
ViewProps,
16+
ViewStyle,
1817
} from 'react-native';
18+
import { ModalPortal } from './ModalPortal';
1919

2020
const PADDING = 8;
2121
const BORDER_RADIUS = 5;
@@ -278,7 +278,6 @@ export const SelectModal = ({
278278
const initialItem = data.find((item) => String(keyExtractor(item)) === String(initValue));
279279
return initialItem ? [initialItem] : [];
280280
});
281-
const modalRef = useRef<Modal>(null);
282281

283282
const selectedItemsMap = useMemo(() => {
284283
if (multiselect) {
@@ -584,17 +583,16 @@ export const SelectModal = ({
584583

585584
return (
586585
<View style={style} {...passThruProps}>
587-
<Modal
586+
<ModalPortal
588587
transparent
589-
ref={modalRef}
590588
supportedOrientations={supportedOrientations}
591589
visible={modalVisible}
592590
onRequestClose={close}
593591
animationType={animationType}
594592
onDismiss={() => selectedItems.length > 0 && onChange?.(selectedItems)}
595593
>
596594
{renderOptionList()}
597-
</Modal>
595+
</ModalPortal>
598596

599597
{customSelector || (
600598
<TouchableOpacity

0 commit comments

Comments
 (0)