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"