feat(sample): merge ios and android samples (#3015)

* chore: split components

examples/basic/ios/Podfile.lock

@@ -75,9 +75,9 @@ PODS:
   - hermes-engine/Pre-built (0.72.5)
   - libevent (2.1.12)
   - OpenSSL-Universal (1.1.1100)
-  - PromisesObjC (2.3.1)
-  - PromisesSwift (2.3.1):
-    - PromisesObjC (= 2.3.1)
+  - PromisesObjC (2.2.0)
+  - PromisesSwift (2.2.0):
+    - PromisesObjC (= 2.2.0)
   - RCT-Folly (2021.07.22.00):
     - boost
     - DoubleConversion
@@ -691,8 +691,8 @@ SPEC CHECKSUMS:
   hermes-engine: f6cf92a471053245614d9d8097736f6337d5b86c
   libevent: 4049cae6c81cdb3654a443be001fb9bdceff7913
   OpenSSL-Universal: ebc357f1e6bc71fa463ccb2fe676756aff50e88c
-  PromisesObjC: c50d2056b5253dadbd6c2bea79b0674bd5a52fa4
-  PromisesSwift: 28dca69a9c40779916ac2d6985a0192a5cb4a265
+  PromisesObjC: 09985d6d70fbe7878040aa746d78236e6946d2ef
+  PromisesSwift: cf9eb58666a43bbe007302226e510b16c1e10959
   RCT-Folly: 424b8c9a7a0b9ab2886ffe9c3b041ef628fd4fb1
   RCTRequired: df81ab637d35fac9e6eb94611cfd20f0feb05455
   RCTTypeSafety: 4636e4a36c7c2df332bda6d59b19b41c443d4287
@@ -733,4 +733,4 @@ SPEC CHECKSUMS:
 
 PODFILE CHECKSUM: 6899e375fcfa0d3a42aa6cb55266008b8f7419cb
 
-COCOAPODS: 1.13.0
+COCOAPODS: 1.12.1

examples/basic/ios/videoplayer.xcodeproj/project.pbxproj

@@ -525,7 +525,7 @@
 					"-lc++",
 				);
 				PRODUCT_BUNDLE_IDENTIFIER = "org.reactjs.native.example.$(PRODUCT_NAME:rfc1034identifier)";
-        		PRODUCT_NAME = videoplayer;
+				PRODUCT_NAME = videoplayer;
 				SWIFT_VERSION = 5.0;
 				VERSIONING_SYSTEM = "apple-generic";
 			};
@@ -602,10 +602,7 @@
 				);
 				OTHER_LDFLAGS = (
 					"$(inherited)",
-					"-Wl",
-					"-ld_classic",
 					" ",
-					"-Wl -ld_classic ",
 				);
 				REACT_NATIVE_PATH = "${PODS_ROOT}/../../node_modules/react-native";
 				SDKROOT = iphoneos;
@@ -678,10 +675,7 @@
 				);
 				OTHER_LDFLAGS = (
 					"$(inherited)",
-					"-Wl",
-					"-ld_classic",
 					" ",
-					"-Wl -ld_classic ",
 				);
 				REACT_NATIVE_PATH = "${PODS_ROOT}/../../node_modules/react-native";
 				SDKROOT = iphoneos;

examples/basic/ios/videoplayer.xcworkspace/xcshareddata/IDEWorkspaceChecks.plist

@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
+<plist version="1.0">
+<dict>
+	<key>IDEDidComputeMac32BitWarning</key>
+	<true/>
+</dict>
+</plist>

examples/basic/src/MultiValueControl.tsx

@@ -0,0 +1,67 @@
+import React from 'react';
+
+import {
+  StyleSheet,
+  Text,
+  TextStyle,
+  TouchableOpacity,
+  View,
+} from 'react-native';
+
+/*
+* MultiValueControl displays a list clickable text view
+*/
+
+interface MultiValueControlType {
+  // a list a string or number to be displayed
+  values: Array<string | number>
+  // The selected value in values
+  selected?: string | number
+  // callback to press onPress
+  onPress: (arg: string | number) => any
+}
+
+const MultiValueControl = ({ values, selected, onPress }: MultiValueControlType) => {
+  const selectedStyle: TextStyle = StyleSheet.flatten([
+    styles.option,
+    {fontWeight: 'bold'},
+  ]);
+
+  const unselectedStyle: TextStyle = StyleSheet.flatten([
+    styles.option,
+    {fontWeight: 'normal'},
+  ]);
+
+    return <View style={styles.container}>
+      {values.map((value: string | number) => {
+          const _style = value === selected ? selectedStyle : unselectedStyle
+          return (
+            <TouchableOpacity
+              key={value}
+              onPress={() => {
+                onPress?.(value)
+              }}>
+            <Text style={_style}>{value}</Text>
+            </TouchableOpacity>)
+        })}
+      </View>
+}
+
+const styles = StyleSheet.create({
+  option: {
+    alignSelf: 'center',
+    fontSize: 11,
+    color: 'white',
+    paddingLeft: 2,
+    paddingRight: 2,
+    lineHeight: 12,
+  },
+  container: {
+    flex: 1,
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+});
+
+export default MultiValueControl;

examples/basic/src/ToggleControl.tsx

@@ -0,0 +1,68 @@
+import React from 'react';
+
+import {
+  StyleSheet,
+  Text,
+  TextStyle,
+  TouchableOpacity,
+  View,
+} from 'react-native';
+
+/*
+* ToggleControl displays a 2 states clickable text
+*/
+
+interface ToggleControlType {
+  // boolean indicating if text is selected state
+  isSelected?: boolean
+  // value of text when selected
+  selectedText?: string
+  // value of text when NOT selected
+  unselectedText?: string
+  // default text if no only one text field is needed
+  text?: string
+  // callback called when pressing the component
+  onPress: () => any
+}
+
+const ToggleControl = ({ isSelected, selectedText, unselectedText, text, onPress }: ToggleControlType) => {
+  const selectedStyle: TextStyle = StyleSheet.flatten([
+    styles.controlOption,
+    {fontWeight: 'bold'},
+  ]);
+
+  const unselectedStyle: TextStyle = StyleSheet.flatten([
+    styles.controlOption,
+    {fontWeight: 'normal'},
+  ]);
+
+    const style = isSelected ? selectedStyle : unselectedStyle;
+    const _text = text ? text : isSelected ? selectedText : unselectedText;
+    return (
+      <View style={styles.resizeModeControl}>
+      <TouchableOpacity
+        onPress={onPress}>
+        <Text style={style}>{_text}</Text>
+      </TouchableOpacity>
+      </View>
+    );
+}
+
+const styles = StyleSheet.create({
+  controlOption: {
+    alignSelf: 'center',
+    fontSize: 11,
+    color: 'white',
+    paddingLeft: 2,
+    paddingRight: 2,
+    lineHeight: 12,
+  },
+  resizeModeControl: {
+    flex: 1,
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+});
+
+export default ToggleControl;