fix: RN 70+ and Expo support

.github/workflows/demo-expo-app.yml

@@ -0,0 +1,149 @@
+name: Demo Expo App
+
+on: [pull_request]
+
+jobs:
+  run-visual-regression-ios:
+    runs-on: macos-11
+    # Disable the Expo example test for now, as I'm getting a XCode 65 error which I havent been able to resolve yet.
+    # The tests do run locally, so I'm not sure what the issue is.
+    if: ${{ false }}
+
+    steps:
+      - uses: actions/checkout@v2
+
+      - name: Get Runner Information
+        run: /usr/bin/xcodebuild -version
+
+      - name: Get yarn cache directory path
+        id: yarn-cache-dir-path
+        run: echo "::set-output name=dir::$(yarn cache dir)"
+
+      - uses: actions/cache@v3
+        id: yarn-cache # use this to check for `cache-hit` (`steps.yarn-cache.outputs.cache-hit != 'true'`)
+        with:
+          path: ${{ steps.yarn-cache-dir-path.outputs.dir }}
+          key: ${{ runner.os }}-expo-yarn-${{ hashFiles('**/yarn.lock') }}
+          restore-keys: |
+            ${{ runner.os }}-expo-yarn-
+
+      - name: Install Dependencies (Library)
+        run: yarn install --frozen-lockfile
+        working-directory: ./
+
+      - name: Compile the library
+        run: yarn build
+        working-directory: ./
+
+      - name: Install Dependencies (Example Expo App)
+        run: yarn install --frozen-lockfile
+        working-directory: ./ExpoExample
+
+      - name: Install CocoaPods Gem
+        run: gem install cocoapods -v 1.11.0
+
+      - uses: actions/cache@v2
+        with:
+          path: ./example/ios/Pods
+          key: ${{ runner.os }}-expo-pods-${{ hashFiles('**/Podfile.lock') }}
+          restore-keys: |
+            ${{ runner.os }}-expo-pods-
+
+      - name: Expo prebuild
+        run: yarn expo prebuild --platform ios
+        working-directory: ./ExpoExample
+
+      - uses: futureware-tech/simulator-action@v1
+        with:
+          model: 'iPhone 13 Pro'
+          os_version: '>=15.0'
+
+      - name: Run Owl Build
+        run: yarn owl:build:ios
+        working-directory: ./ExpoExample
+
+      - name: Run Owl Test
+        run: yarn owl:test:ios
+        working-directory: ./ExpoExample
+
+      - name: Store screenshots and report as artifacts
+        uses: actions/upload-artifact@v2
+        if: failure()
+        with:
+          name: owl-results
+          path: ExpoExample/.owl
+
+  run-visual-regression-android:
+    runs-on: macos-11
+    if: ${{ false }}
+
+    steps:
+      - uses: actions/checkout@v2
+
+      - name: Get yarn cache directory path
+        id: yarn-cache-dir-path
+        run: echo "::set-output name=dir::$(yarn cache dir)"
+
+      - uses: actions/cache@v2
+        id: yarn-cache # use this to check for `cache-hit` (`steps.yarn-cache.outputs.cache-hit != 'true'`)
+        with:
+          path: ${{ steps.yarn-cache-dir-path.outputs.dir }}
+          key: ${{ runner.os }}-expo-yarn-${{ hashFiles('**/yarn.lock') }}
+          restore-keys: |
+            ${{ runner.os }}-expo-yarn-
+
+      - name: Install Dependencies (Library)
+        run: yarn install --frozen-lockfile
+        working-directory: ./
+
+      - name: Compile the library
+        run: yarn build
+        working-directory: ./
+
+      - name: Install Dependencies (Example Expo App)
+        run: yarn install --frozen-lockfile
+        working-directory: ./ExpoExample
+
+      - name: Expo prebuild
+        run: yarn expo prebuild --platform android
+        working-directory: ./ExpoExample
+
+      - uses: actions/cache@v2
+        with:
+          path: |
+            ~/.gradle/caches
+            ~/.gradle/wrapper
+          key: ${{ runner.os }}-expo-gradle-${{ hashFiles('**/*.gradle*', '**/gradle-wrapper.properties') }}
+          restore-keys: |
+            ${{ runner.os }}-expo-gradle-
+
+      - name: SKDs - download required images
+        run: $ANDROID_HOME/tools/bin/sdkmanager "system-images;android-30;default;x86_64"
+
+      - name: SDKs - accept licenses
+        run: y | $ANDROID_HOME/tools/bin/sdkmanager --licenses
+
+      - name: Emulator - Create
+        run: $ANDROID_HOME/tools/bin/avdmanager create avd -n Pixel_API_30 --device 'Nexus 5X' --package "system-images;android-30;default;x86_64" --sdcard 512M
+
+      - name: Emulator - Boot
+        run: $ANDROID_HOME/emulator/emulator -memory 4096 -avd Pixel_API_30 -wipe-data -no-window -gpu swiftshader_indirect -no-snapshot -noaudio -no-boot-anim &
+
+      - name: ADB Wait For Device
+        run: adb wait-for-any-device
+        timeout-minutes: 3
+
+      - name: Run Owl Build
+        run: yarn owl:build:android
+        working-directory: ./ExpoExample
+
+      - name: Run Owl Test
+        run: yarn owl:test:android
+        working-directory: ./ExpoExample
+
+      - name: Store screenshots as artifacts
+        uses: actions/upload-artifact@v2
+        if: failure()
+        with:
+          name: owl-screenshots
+          path: ExpoExample/.owl

.gitignore

@@ -58,3 +58,7 @@ typings/
 
 # generated js
 dist/
+
+# Expo Example prebuild generated files
+ExpoExample/android
+ExpoExample/ios

ExpoExample/.gitignore

@@ -0,0 +1,17 @@
+node_modules/
+.expo/
+dist/
+npm-debug.*
+*.jks
+*.p8
+*.p12
+*.key
+*.mobileprovision
+*.orig.*
+web-build/
+
+# macOS
+.DS_Store
+
+# Temporary files created by Metro to check the health of the file watcher
+.metro-health-check*

ExpoExample/.owl/.gitignore

@@ -0,0 +1,4 @@
+# generated by react-native-owl
+diff/
+latest/
+report/

ExpoExample/App.tsx

@@ -0,0 +1,188 @@
+import React from 'react';
+import {
+  ActivityIndicator,
+  Image,
+  Pressable,
+  ScrollView,
+  StatusBar,
+  StyleSheet,
+  Text,
+  TextInput,
+  View,
+} from 'react-native';
+
+const Section: React.FC<
+  React.PropsWithChildren<{
+    title: string;
+  }>
+> = ({ children, title }) => {
+  return (
+    <View style={styles.sectionContainer}>
+      <Text style={styles.sectionTitle}>{title}</Text>
+      <Text style={styles.sectionDescription}>{children}</Text>
+    </View>
+  );
+};
+
+const App = () => {
+  const [text, setText] = React.useState('');
+  const [isLongPressed, setIsLongPressed] = React.useState(false);
+  const [isLoading, setIsLoading] = React.useState(false);
+  const [isLoaded, setIsLoaded] = React.useState(false);
+
+  React.useEffect(() => {
+    if (isLoading) {
+      setTimeout(() => {
+        setIsLoading(false);
+        setIsLoaded(true);
+      }, 1500);
+    }
+  }, [isLoading]);
+
+  return (
+    <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: {
+    marginBottom: 32,
+  },
+  sectionTitle: {
+    fontSize: 24,
+    fontWeight: '600',
+  },
+  sectionDescription: {
+    marginTop: 8,
+    fontSize: 18,
+    fontWeight: '400',
+    color: colors.GRAY_800,
+  },
+  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',
+  },
+});
+
+export default App;