Upgrade example to 0.70 and use typescript (#427)

* feat: upgrade example to rn 0.70 & typescript

* fix: remove explicit typing

* Temporarily disable Windows example build

Until react-native-windows is released with v0.70 we should not include it.
So to keep the checks green and to avoid false-negative check on Windows
build, the `build-Windows-app` job has been disabled.

* fix: typo in SliderExamle

* fix: bring back vertical slider example

* fix: add all config files and comment out windows config

* feat: remove flipper from example

* feat: change entry and config files to .ts or .json

* feat: remove index.web.ts

React native web support was removed here: ddffbca

Co-authored-by: BartoszKlonowski <[email protected]>

Author: okwasniewski

.github/workflows/ReactNativeSlider-CI.yml

@@ -198,19 +198,20 @@ jobs:
         working-directory: example/ios
 
 
-  build-Windows-app:
-    name: Build example app Windows
-    runs-on: windows-latest
-    needs: [verify]
-    steps:
-      - name: Ensure the cross-platform Git on Windows
-        run: git config --global core.autocrlf false
-
-      - name: Checkout repository
-        uses: actions/checkout@v3
-
-      - name: Install dependencies
-        run: npm install
-
-      - name: Build the Windows OS app
-        run: cd example; npx react-native run-windows --arch x64 --no-launch --no-deploy --logging
+#  Disabled until Windows Example app is added with v0.70
+#  build-Windows-app:
+#    name: Build example app Windows
+#    runs-on: windows-latest
+#    needs: [verify]
+#    steps:
+#      - name: Ensure the cross-platform Git on Windows
+#        run: git config --global core.autocrlf false
+#
+#      - name: Checkout repository
+#        uses: actions/checkout@v3
+#
+#      - name: Install dependencies
+#        run: npm install
+#
+#      - name: Build the Windows OS app
+#        run: cd example; npx react-native run-windows --arch x64 --no-launch --no-deploy --logging

example/.eslintrc.js

@@ -1,4 +1,16 @@
 module.exports = {
   root: true,
   extends: '@react-native-community',
+  parser: '@typescript-eslint/parser',
+  plugins: ['@typescript-eslint'],
+  overrides: [
+    {
+      files: ['*.ts', '*.tsx'],
+      rules: {
+        '@typescript-eslint/no-shadow': ['error'],
+        'no-shadow': 'off',
+        'no-undef': 'off',
+      },
+    },
+  ],
 };

example/.flowconfig

@@ -30,6 +30,7 @@ build/
 local.properties
 *.iml
 *.hprof
+.cxx/
 
 # node.js
 #

example/.gitignore

@@ -0,0 +1 @@
+16

example/.node-version

@@ -0,0 +1,51 @@
+import React from 'react';
+import {Platform, ScrollView, StyleSheet, Text, View} from 'react-native';
+import {examples} from './SliderExample';
+
+const App = () => {
+  return (
+    <ScrollView
+      style={styles.scrollView}
+      contentContainerStyle={styles.container}>
+      <Text testID="testTextId" style={styles.title}>
+        {'<Slider />'}
+      </Text>
+      {examples
+        .filter(e => !e.platform || e.platform === Platform.OS)
+        .map((e, i) => (
+          <View key={`slider${i}`} style={styles.sliderWidget}>
+            <Text style={styles.instructions}>{e.title}</Text>
+            {e.render()}
+          </View>
+        ))}
+    </ScrollView>
+  );
+};
+
+export default App;
+
+const styles = StyleSheet.create({
+  scrollView: {
+    backgroundColor: '#F5FCFF',
+  },
+  container: {
+    justifyContent: 'center',
+    alignItems: 'center',
+    paddingVertical: 20,
+  },
+  title: {
+    fontSize: 20,
+    textAlign: 'center',
+    width: '100%',
+    marginVertical: 20,
+  },
+  instructions: {
+    textAlign: 'center',
+    color: '#333333',
+    marginBottom: 5,
+    fontSize: 20,
+  },
+  sliderWidget: {
+    marginVertical: 30,
+  },
+});