diff --git a/example/.owl/baseline/android/entered-text.png b/example/.owl/baseline/android/entered-text.png index 075f6606..6e8339ab 100644 Binary files a/example/.owl/baseline/android/entered-text.png and b/example/.owl/baseline/android/entered-text.png differ diff --git a/example/.owl/baseline/android/initial.png b/example/.owl/baseline/android/initial.png index 79479ef0..f27c9f09 100644 Binary files a/example/.owl/baseline/android/initial.png and b/example/.owl/baseline/android/initial.png differ diff --git a/example/.owl/baseline/android/long-press.png b/example/.owl/baseline/android/long-press.png index 6ab8e230..c3696751 100644 Binary files a/example/.owl/baseline/android/long-press.png and b/example/.owl/baseline/android/long-press.png differ diff --git a/example/.owl/baseline/android/scroll-to-end.png b/example/.owl/baseline/android/scroll-to-end.png index d5529077..8baa7915 100644 Binary files a/example/.owl/baseline/android/scroll-to-end.png and b/example/.owl/baseline/android/scroll-to-end.png differ diff --git a/example/.owl/baseline/android/scroll-to.png b/example/.owl/baseline/android/scroll-to.png index fd173e66..3f470409 100644 Binary files a/example/.owl/baseline/android/scroll-to.png and b/example/.owl/baseline/android/scroll-to.png differ diff --git a/example/.owl/baseline/android/test-input.png b/example/.owl/baseline/android/test-input.png index 4b85ecb9..8ead484a 100644 Binary files a/example/.owl/baseline/android/test-input.png and b/example/.owl/baseline/android/test-input.png differ diff --git a/example/.owl/baseline/ios/entered-text.png b/example/.owl/baseline/ios/entered-text.png index c059c5cf..e368f34b 100644 Binary files a/example/.owl/baseline/ios/entered-text.png and b/example/.owl/baseline/ios/entered-text.png differ diff --git a/example/.owl/baseline/ios/initial.png b/example/.owl/baseline/ios/initial.png index a18d6099..a2e2ef3a 100644 Binary files a/example/.owl/baseline/ios/initial.png and b/example/.owl/baseline/ios/initial.png differ diff --git a/example/.owl/baseline/ios/long-press.png b/example/.owl/baseline/ios/long-press.png index 503df8b7..4db27bd8 100644 Binary files a/example/.owl/baseline/ios/long-press.png and b/example/.owl/baseline/ios/long-press.png differ diff --git a/example/.owl/baseline/ios/scroll-to-end.png b/example/.owl/baseline/ios/scroll-to-end.png index 5c9e10de..8490228e 100644 Binary files a/example/.owl/baseline/ios/scroll-to-end.png and b/example/.owl/baseline/ios/scroll-to-end.png differ diff --git a/example/.owl/baseline/ios/scroll-to.png b/example/.owl/baseline/ios/scroll-to.png index 9e77206c..a0d7d51d 100644 Binary files a/example/.owl/baseline/ios/scroll-to.png and b/example/.owl/baseline/ios/scroll-to.png differ diff --git a/example/.owl/baseline/ios/test-input.png b/example/.owl/baseline/ios/test-input.png index e8a8f973..4c8ecafb 100644 Binary files a/example/.owl/baseline/ios/test-input.png and b/example/.owl/baseline/ios/test-input.png differ diff --git a/example/App.tsx b/example/App.tsx index b069a739..620829d6 100644 --- a/example/App.tsx +++ b/example/App.tsx @@ -1,74 +1,28 @@ -/** - * Sample React Native App - * https://github.com/facebook/react-native - * - * Generated with the TypeScript template - * https://github.com/react-native-community/react-native-template-typescript - * - * @format - */ - import React from 'react'; import { ActivityIndicator, + Image, Pressable, - SafeAreaView, ScrollView, StatusBar, StyleSheet, Text, TextInput, - useColorScheme, View, } from 'react-native'; -import { - Colors, - DebugInstructions, - Header, - LearnMoreLinks, - ReloadInstructions, -} from 'react-native/Libraries/NewAppScreen'; - const Section: React.FC<{ title: string; }> = ({ children, title }) => { - const isDarkMode = useColorScheme() === 'dark'; return ( - - {title} - - - {children} - + {title} + {children} ); }; const App = () => { - const [isDarkMode, setIsDarkMode] = React.useState( - useColorScheme() === 'dark' - ); - - const backgroundStyle = { - backgroundColor: isDarkMode ? Colors.darker : Colors.lighter, - }; - const [text, setText] = React.useState(''); const [isLongPressed, setIsLongPressed] = React.useState(false); const [isLoading, setIsLoading] = React.useState(false); @@ -84,74 +38,118 @@ const App = () => { }, [isLoading]); return ( - - - -
- - - {!isLoaded && !isLoading && ( - setIsLoading(true)} - onLongPress={() => setIsLongPressed(true)} - > - PressMe - - )} - - {isLoading && } - - {isLongPressed && !isLoading && !isLoaded && ( - Long Pressed - )} - - {!isLoading && isLoaded && ( - - Some content and a TextInput - - - - )} - -
- Edit App.tsx to change this - screen and then come back to see your edits. -
-
- -
-
- -
-
- Read the docs to discover what to do next: -
- - - - + + + + + + + {!isLoaded && !isLoading && ( + setIsLoading(true)} + onLongPress={() => setIsLongPressed(true)} + style={styles.button} + > + Press Me + → + + )} + + {isLoading && } + + {isLongPressed && !isLoading && !isLoaded && ( + Long Pressed! + )} + + {!isLoading && isLoaded && ( + <> + This is a label * + + + + )} + + +
+ Install react-native-owl and + follow the instructions in the documentation to complete the setup. Note + that you will have to do some platform specific setup for iOS & Android. +
+ +
+ Generate, validate and commit the baseline images. These will be used + for the comparison, every time you run the tests suite. +
+ +
+ If your tests are failing, you can view the generated report which will + display any differences between the baselines and fresh screenshots. +
+ +
+ This text is in place only for demo purposes. +
+ +
+ This text is in place only for demo purposes. +
+ ); }; +const colors = { + SLATE_200: '#e2e8f0', + SLATE_500: '#64748b', + GRAY_800: '#1f2937', +}; + const styles = StyleSheet.create({ + container: { + flex: 1, + backgroundColor: colors.SLATE_200, + }, + contentContainer: { + paddingTop: 40, + paddingHorizontal: 40, + }, + logo: { + width: 175, + height: 175, + alignSelf: 'center', + }, + header: { + marginVertical: 35, + }, + button: { + flexDirection: 'row', + justifyContent: 'space-between', + alignItems: 'center', + borderWidth: 2, + paddingVertical: 7.5, + paddingHorizontal: 20, + borderRadius: 20, + }, + buttonText: { + fontSize: 16, + fontWeight: '600', + }, + buttonArrow: { + fontSize: 20, + }, sectionContainer: { - marginTop: 32, - paddingHorizontal: 24, + marginBottom: 32, }, sectionTitle: { fontSize: 24, @@ -161,12 +159,27 @@ const styles = StyleSheet.create({ marginTop: 8, fontSize: 18, fontWeight: '400', + color: colors.GRAY_800, }, - highlight: { - fontWeight: '700', + textLongPressed: { + marginTop: 35, + fontSize: 20, + fontStyle: 'italic', + textAlign: 'center', + }, + textInputLabel: { + fontWeight: '600', + marginBottom: 5, + paddingHorizontal: 20, }, textInput: { borderWidth: 1, + paddingVertical: 12, + paddingHorizontal: 20, + borderRadius: 20, + }, + highlight: { + fontWeight: '700', }, }); diff --git a/example/assets/logo@1x.png b/example/assets/logo@1x.png new file mode 100644 index 00000000..c35a2227 Binary files /dev/null and b/example/assets/logo@1x.png differ diff --git a/example/assets/logo@2x.png b/example/assets/logo@2x.png new file mode 100644 index 00000000..9738cf6e Binary files /dev/null and b/example/assets/logo@2x.png differ diff --git a/example/assets/logo@3x.png b/example/assets/logo@3x.png new file mode 100644 index 00000000..7196428d Binary files /dev/null and b/example/assets/logo@3x.png differ diff --git a/lib/cli/run.ts b/lib/cli/run.ts index edbb4d3e..aef6add7 100644 --- a/lib/cli/run.ts +++ b/lib/cli/run.ts @@ -38,10 +38,14 @@ export const runIOS = async (config: Config, logger: Logger) => { const launchCommand = `xcrun simctl launch ${simulator} ${bundleId}`; await execa.command(launchCommand, { stdio }); + await waitFor(1000); + // Workaround to force the virtual home button's color to become consistent const appearanceCommand = `xcrun simctl ui ${simulator} appearance`; await execa.command(`${appearanceCommand} dark`, { stdio, cwd }); + await waitFor(500); await execa.command(`${appearanceCommand} light`, { stdio, cwd }); + await waitFor(500); }; export const restoreIOSUI = async (config: Config, logger: Logger) => {