Examples update - latest versions used (#316)

* Update react and react native to the latest

The Example application needs to run on the latest of react, react
native and react native windows to ensure the compatibility.
This commit updates all of those to 17 and 0.65 for Example.

* Update Gradle configs to latest

The build tools of Gradle has been updated to 29 with 21 as a minimum.
Also this commit updates the Gradle wrapper to 6.5.

* Remove redundant includes from Windows Example

* Recreate and update the iOS example project

The iOS example project is recreated by:
* Removing flipper-boost
* Removing fmt
* Updating the pods
* adding required implementation for the latest native Flipper dependency

Full recreation was tested using the iOS v14.5

* Point the deps to node_modules of workspace

* Add react-native-codegen for iOS example

* Fix: Duplicate entry for UI.Xaml

The duplicated entry for Microsoft.UI.Xaml was the result of having
previous UI.Xaml imported in the project configuration file.
The fix is to apply the next version (which was also downloaded for the
ibrary package, but was conflicting with the example app dependencies).

* Restyle the example app

The layout and look of example app has been improved so it's now more
readable and easy to navigate between each scenario.
The changes are minor:
margin for slider has been removed, but whole scenario (single example)
has been wrapped into the styled view.

* Update Android example in the README

* Update Windows example in the README

* Update iOS example in the README

Author: BartoszKlonowski

.github/Examples/Slider-Android-Example.gif

@@ -22,7 +22,7 @@
 
 |iOS|Android|Windows|
 |:-:|:-:|:-:|
-|![iOS Screenshot](https://i.postimg.cc/dQTYzGD5/Screenshot-2019-03-25-at-11-24-59.png)|![Android Screenshot](https://i.postimg.cc/CKdtbVqc/Screenshot-2019-03-25-at-11-26-54.png)|![Windows Screenshot](example/sliderWindows.JPG)|
+|![iOS Screenshot](.github/Examples/Slider-iOS-Example.gif)|![Android Screenshot](.github/Examples/Slider-Android-Example.gif)|![Windows Screenshot](.github/Examples/Slider-Windows-Example.gif)|
 
 ## Installation & Usage
 

.github/Examples/Slider-Windows-Example.gif

@@ -15,8 +15,8 @@ export default class App extends Component<Props> {
         {examples
           .filter(e => !e.platform || e.platform === Platform.OS)
           .map((e, i) => (
-            <View key={`slider${i}`}>
-              <Text>{e.title}</Text>
+            <View key={`slider${i}`} style={styles.sliderWidget}>
+              <Text style={styles.instructions}>{e.title}</Text>
               {e.render()}
             </View>
           ))}
@@ -44,5 +44,9 @@ const styles = StyleSheet.create({
     textAlign: 'center',
     color: '#333333',
     marginBottom: 5,
+    fontSize: 20,
+  },
+  sliderWidget: {
+    marginVertical: 30,
   },
 });

.github/Examples/Slider-iOS-Example.gif

@@ -104,13 +104,13 @@ const styles = StyleSheet.create({
     width: 300,
     opacity: 1,
     height: 50,
-    marginTop: 50,
+    marginTop: 10,
   },
   text: {
     fontSize: 14,
     textAlign: 'center',
     fontWeight: '500',
-    margin: 10,
+    margin: 0,
   },
 });
 

README.md

@@ -2,17 +2,17 @@
 
 buildscript {
     ext {
-        buildToolsVersion = "28.0.3"
-        minSdkVersion = 16
-        compileSdkVersion = 28
-        targetSdkVersion = 28
+        buildToolsVersion = "29.0.3"
+        minSdkVersion = 21
+        compileSdkVersion = 29
+        targetSdkVersion = 29
     }
     repositories {
         google()
         jcenter()
     }
     dependencies {
-        classpath("com.android.tools.build:gradle:3.4.2")
+        classpath("com.android.tools.build:gradle:4.1.0")
 
         // NOTE: Do not place your application dependencies here; they belong
         // in the individual module build.gradle files

example/App.js

@@ -1,5 +1,5 @@
 distributionBase=GRADLE_USER_HOME
 distributionPath=wrapper/dists
-distributionUrl=https\://services.gradle.org/distributions/gradle-5.4.1-all.zip
+distributionUrl=https\://services.gradle.org/distributions/gradle-6.5-all.zip
 zipStoreBase=GRADLE_USER_HOME
 zipStorePath=wrapper/dists

example/SliderExample.js

@@ -1,41 +1,29 @@
-platform :ios, '9.0'
-$node_modules_path = '../../node_modules'
-
-require_relative "#{$node_modules_path}/@react-native-community/cli-platform-ios/native_modules"
+require_relative '../../node_modules/react-native/scripts/react_native_pods'
+require_relative '../../node_modules/@react-native-community/cli-platform-ios/native_modules'
 
+platform :ios, '11.0'
 
 target 'example' do
-  # Pods for example
-  pod 'FBLazyVector', :path => "#{$node_modules_path}/react-native/Libraries/FBLazyVector"
-  pod 'FBReactNativeSpec', :path => "#{$node_modules_path}/react-native/Libraries/FBReactNativeSpec"
-  pod 'RCTRequired', :path => "#{$node_modules_path}/react-native/Libraries/RCTRequired"
-  pod 'RCTTypeSafety', :path => "#{$node_modules_path}/react-native/Libraries/TypeSafety"
+  config = use_native_modules!
 
-  pod 'React', :path => "#{$node_modules_path}/react-native"
-  pod 'React-CoreModules', :path => "#{$node_modules_path}/react-native/React/CoreModules"
-  pod 'React-Core/DevSupport', :path => "#{$node_modules_path}/react-native/"
-  pod 'React-RCTActionSheet', :path => "#{$node_modules_path}/react-native/Libraries/ActionSheetIOS"
-  pod 'React-RCTAnimation', :path => "#{$node_modules_path}/react-native/Libraries/NativeAnimation"
-  pod 'React-RCTBlob', :path => "#{$node_modules_path}/react-native/Libraries/Blob"
-  pod 'React-RCTImage', :path => "#{$node_modules_path}/react-native/Libraries/Image"
-  pod 'React-RCTLinking', :path => "#{$node_modules_path}/react-native/Libraries/LinkingIOS"
-  pod 'React-RCTNetwork', :path => "#{$node_modules_path}/react-native/Libraries/Network"
-  pod 'React-RCTSettings', :path => "#{$node_modules_path}/react-native/Libraries/Settings"
-  pod 'React-RCTText', :path => "#{$node_modules_path}/react-native/Libraries/Text"
-  pod 'React-RCTVibration', :path => "#{$node_modules_path}/react-native/Libraries/Vibration"
-  pod 'React-Core/RCTWebSocket', :path => "#{$node_modules_path}/react-native/"
+  use_react_native!(
+    :path => config[:reactNativePath],
+    # to enable hermes on iOS, change `false` to `true` and then install pods
+    :hermes_enabled => false
+  )
 
-  pod 'React-cxxreact', :path => "#{$node_modules_path}/react-native/ReactCommon/cxxreact"
-  pod 'React-jsi', :path => "#{$node_modules_path}/react-native/ReactCommon/jsi"
-  pod 'React-jsiexecutor', :path => "#{$node_modules_path}/react-native/ReactCommon/jsiexecutor"
-  pod 'React-jsinspector', :path => "#{$node_modules_path}/react-native/ReactCommon/jsinspector"
-  pod 'ReactCommon/callinvoker', :path => "#{$node_modules_path}/react-native/ReactCommon"
-  pod 'ReactCommon/turbomodule/core', :path => "#{$node_modules_path}/react-native/ReactCommon"
-  pod 'Yoga', :path => "#{$node_modules_path}/react-native/ReactCommon/yoga"
+  target 'exampleTests' do
+    inherit! :complete
+    # Pods for testing
+  end
 
-  pod 'DoubleConversion', :podspec => "#{$node_modules_path}/react-native/third-party-podspecs/DoubleConversion.podspec"
-  pod 'glog', :podspec => "#{$node_modules_path}/react-native/third-party-podspecs/glog.podspec"
-  pod 'Folly', :podspec => "#{$node_modules_path}/react-native/third-party-podspecs/Folly.podspec"
+  # Enables Flipper.
+  #
+  # Note that if you have use_frameworks! enabled, Flipper will not work and
+  # you should disable the next line.
+  use_flipper!()
 
-  use_native_modules!
+  post_install do |installer|
+    react_native_post_install(installer)
+  end
 end