feat: Improve UI of the demo app

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 (
     <View style={styles.sectionContainer}>
-      <Text
-        style={[
-          styles.sectionTitle,
-          {
-            color: isDarkMode ? Colors.white : Colors.black,
-          },
-        ]}
-      >
-        {title}
-      </Text>
-      <Text
-        style={[
-          styles.sectionDescription,
-          {
-            color: isDarkMode ? Colors.light : Colors.dark,
-          },
-        ]}
-      >
-        {children}
-      </Text>
+      <Text style={styles.sectionTitle}>{title}</Text>
+      <Text style={styles.sectionDescription}>{children}</Text>
     </View>
   );
 };
 
 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 (
-    <SafeAreaView style={backgroundStyle}>
-      <StatusBar barStyle={isDarkMode ? 'light-content' : 'dark-content'} />
-      <ScrollView
-        contentInsetAdjustmentBehavior="automatic"
-        style={backgroundStyle}
-        testID="ScrollView"
-      >
-        <Header />
-        <View
-          style={{
-            backgroundColor: isDarkMode ? Colors.black : Colors.white,
-          }}
-        >
-          <View>
-            {!isLoaded && !isLoading && (
-              <Pressable
-                testID="Pressable"
-                onPress={() => setIsLoading(true)}
-                onLongPress={() => setIsLongPressed(true)}
-              >
-                <Text>PressMe</Text>
-              </Pressable>
-            )}
-
-            {isLoading && <ActivityIndicator />}
-
-            {isLongPressed && !isLoading && !isLoaded && (
-              <Text>Long Pressed</Text>
-            )}
-
-            {!isLoading && isLoaded && (
-              <View>
-                <Text>Some content and a TextInput</Text>
-
-                <TextInput
-                  testID="TextInput"
-                  placeholder="Type something here"
-                  onChangeText={setText}
-                  value={text}
-                  style={styles.textInput}
-                />
-              </View>
-            )}
-          </View>
-          <Section title="Step One">
-            Edit <Text style={styles.highlight}>App.tsx</Text> to change this
-            screen and then come back to see your edits.
-          </Section>
-          <Section title="See Your Changes">
-            <ReloadInstructions />
-          </Section>
-          <Section title="Debug">
-            <DebugInstructions />
-          </Section>
-          <Section title="Learn More">
-            Read the docs to discover what to do next:
-          </Section>
-          <LearnMoreLinks />
-        </View>
-      </ScrollView>
-    </SafeAreaView>
+    <ScrollView
+      contentInsetAdjustmentBehavior="automatic"
+      style={styles.container}
+      contentContainerStyle={styles.contentContainer}
+      testID="ScrollView"
+    >
+      <StatusBar barStyle="dark-content" />
+
+      <Image source={require('./assets/logo.png')} style={styles.logo} />
+
+      <View style={styles.header}>
+        {!isLoaded && !isLoading && (
+          <Pressable
+            testID="Pressable"
+            onPress={() => setIsLoading(true)}
+            onLongPress={() => setIsLongPressed(true)}
+            style={styles.button}
+          >
+            <Text style={styles.buttonText}>Press Me</Text>
+            <Text style={styles.buttonArrow}>&#8594;</Text>
+          </Pressable>
+        )}
+
+        {isLoading && <ActivityIndicator />}
+
+        {isLongPressed && !isLoading && !isLoaded && (
+          <Text style={styles.textLongPressed}>Long Pressed!</Text>
+        )}
+
+        {!isLoading && isLoaded && (
+          <>
+            <Text style={styles.textInputLabel}>This is a label *</Text>
+
+            <TextInput
+              testID="TextInput"
+              placeholder="Type something here"
+              onChangeText={setText}
+              value={text}
+              style={styles.textInput}
+            />
+          </>
+        )}
+      </View>
+
+      <Section title="Setup">
+        Install <Text style={styles.highlight}>react-native-owl</Text> 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.
+      </Section>
+
+      <Section title="Baseline Screenshots">
+        Generate, validate and commit the baseline images. These will be used
+        for the comparison, every time you run the tests suite.
+      </Section>
+
+      <Section title="Generated Report">
+        If your tests are failing, you can view the generated report which will
+        display any differences between the baselines and fresh screenshots.
+      </Section>
+
+      <Section title="Scroll Content">
+        This text is in place only for demo purposes.
+      </Section>
+
+      <Section title="Scroll-to-end Content">
+        This text is in place only for demo purposes.
+      </Section>
+    </ScrollView>
   );
 };
 
+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',
   },
 });
 

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) => {