feat: add web support (#67)

* feat: add web support

* fix: flow error

* chore: move typescript typing

* fix: fix typing

Author: Naturalclar

example/.gitignore

@@ -57,3 +57,7 @@ buck-out/
 
 # CocoaPods
 /ios/Pods/
+
+# expo generated files
+.expo
+web-build

example/App.js

@@ -7,7 +7,7 @@
 
 import React from 'react';
 import {StyleSheet, ScrollView, Text, View} from 'react-native';
-import SegmentedControlIOS from '@react-native-community/segmented-control';
+import SegmentedControl from '@react-native-community/segmented-control';
 
 export default class App extends React.Component<{}, $FlowFixMeState> {
   state = {
@@ -21,30 +21,28 @@ export default class App extends React.Component<{}, $FlowFixMeState> {
       <ScrollView contentContainerStyle={styles.container}>
         <View style={styles.segmentContainer}>
           <Text style={styles.text}>Segmented controls can have values</Text>
-          <SegmentedControlIOS values={['One', 'Two']} />
+          <SegmentedControl values={['One', 'Two']} />
         </View>
 
         <View style={styles.segmentSection}>
-          <SegmentedControlIOS
-            values={['One', 'Two', 'Three', 'Four', 'Five']}
-          />
+          <SegmentedControl values={['One', 'Two', 'Three', 'Four', 'Five']} />
         </View>
 
         <View style={styles.segmentSection}>
           <Text style={styles.text}>
             Segmented controls can have pre-selected values
           </Text>
-          <SegmentedControlIOS values={['One', 'Two']} selectedIndex={0} />
+          <SegmentedControl values={['One', 'Two']} selectedIndex={0} />
         </View>
 
         <View style={styles.segmentSection}>
           <Text style={styles.text}>Segmented controls can be momentary</Text>
-          <SegmentedControlIOS values={['One', 'Two']} momentary={true} />
+          <SegmentedControl values={['One', 'Two']} momentary={true} />
         </View>
 
         <View style={styles.segmentSection}>
           <Text style={styles.text}>Segmented controls can be disabled</Text>
-          <SegmentedControlIOS
+          <SegmentedControl
             enabled={false}
             values={['One', 'Two']}
             selectedIndex={1}
@@ -53,22 +51,24 @@ export default class App extends React.Component<{}, $FlowFixMeState> {
 
         <View style={styles.segmentContainer}>
           <Text style={styles.text}>Custom colors can be provided</Text>
-          <SegmentedControlIOS
+          <SegmentedControl
             tintColor="#ff0000"
             values={['One', 'Two', 'Three', 'Four']}
             selectedIndex={0}
             backgroundColor="#0000ff"
+            activeTextColor="white"
           />
         </View>
         <View style={styles.segmentContainer}>
-          <SegmentedControlIOS
+          <SegmentedControl
             tintColor="#00ff00"
             values={['One', 'Two', 'Three']}
             selectedIndex={1}
+            activeTextColor="black"
           />
         </View>
         <View style={styles.segmentSection}>
-          <SegmentedControlIOS
+          <SegmentedControl
             textColor="#ff00ff"
             values={['One', 'Two']}
             selectedIndex={1}
@@ -78,7 +78,7 @@ export default class App extends React.Component<{}, $FlowFixMeState> {
         <View>
           <Text style={styles.text}>Custom colors can be provided</Text>
           <View style={styles.segmentContainer}>
-            <SegmentedControlIOS
+            <SegmentedControl
               values={this.state.values}
               selectedIndex={this.state.selectedIndex}
               onChange={this._onChange}

example/app.json

@@ -1,4 +1,7 @@
 {
   "name": "example",
-  "displayName": "example"
-}
+  "displayName": "example",
+  "expo": {
+    "platforms": ["web"]
+  }
+}

example/babel.config.js

@@ -1,3 +1,3 @@
 module.exports = {
-  presets: ['module:metro-react-native-babel-preset'],
+  presets: ['babel-preset-expo'],
 };

example/index.web.js

@@ -0,0 +1,9 @@
+// Entry point for react-native-web
+import App from './App';
+import {AppRegistry} from 'react-native';
+import {name as appName} from './app.json';
+
+AppRegistry.registerComponent(appName, () => App);
+AppRegistry.runApplication(appName, {
+  rootTag: document.getElementById('root'),
+});

example/ios/Podfile.lock

@@ -182,7 +182,7 @@ PODS:
     - React-cxxreact (= 0.61.5)
     - React-jsi (= 0.61.5)
   - React-jsinspector (0.61.5)
-  - react-native-segmented-control (1.0.2):
+  - react-native-segmented-control (1.3.0):
     - React
   - React-RCTActionSheet (0.61.5):
     - React-Core/RCTActionSheetHeaders (= 0.61.5)
@@ -326,7 +326,7 @@ SPEC CHECKSUMS:
   React-jsi: cb2cd74d7ccf4cffb071a46833613edc79cdf8f7
   React-jsiexecutor: d5525f9ed5f782fdbacb64b9b01a43a9323d2386
   React-jsinspector: fa0ecc501688c3c4c34f28834a76302233e29dc0
-  react-native-segmented-control: 2843178bfa06561a328b7f3999d4fb1af315b11b
+  react-native-segmented-control: 64a281fade11306631dccd3bbeac6e55b5ab362f
   React-RCTActionSheet: 600b4d10e3aea0913b5a92256d2719c0cdd26d76
   React-RCTAnimation: 791a87558389c80908ed06cc5dfc5e7920dfa360
   React-RCTBlob: d89293cc0236d9cb0933d85e430b0bbe81ad1d72

example/package.json

@@ -5,17 +5,21 @@
   "scripts": {
     "android": "react-native run-android",
     "ios": "react-native run-ios",
-    "start": "react-native start"
+    "start": "react-native start",
+    "web": "expo start --web"
   },
   "dependencies": {
+    "@react-native-community/segmented-control": "file:../",
+    "expo": "^37.0.7",
     "react": "16.9.0",
+    "react-dom": "16.9.0",
     "react-native": "0.61.5",
-    "@react-native-community/segmented-control": "file:../"
+    "react-native-web": "^0.12.2"
   },
   "devDependencies": {
     "@babel/core": "^7.6.2",
     "@babel/runtime": "^7.6.2",
-    "metro-react-native-babel-preset": "^0.56.0"
+    "babel-preset-expo": "^8.1.0"
   },
   "jest": {
     "preset": "react-native"