feat: add SegmentedControl for android (#65)

* 1.3.0 * feat: add android component

Author: Naturalclar

index.d.ts

@@ -10,7 +10,7 @@ import {
  Constructor,
 } from 'react-native';
 
-export interface SegmentedControlIOSProps extends ViewProps {
+export interface SegmentedControlProps extends ViewProps {
  /**
  * If false the user won't be able to interact with the control. Default value is true.
  */
@@ -72,11 +72,11 @@ export interface SegmentedControlIOSProps extends ViewProps {
  * (iOS 13 only)
  * Overrides the control's appearance irrespective of the OS theme
  */
- appearance?: 'dark' | 'light'
+ appearance?: 'dark' | 'light';
 }
 
 /**
- * Use `SegmentedControlIOS` to render a UISegmentedControl iOS.
+ * Use `SegmentedControl` to render a UISegmentedControl iOS.
  *
  * #### Programmatically changing selected index
  *
@@ -86,7 +86,7 @@ export interface SegmentedControlIOSProps extends ViewProps {
  * selects a value and changes the index, as shown in the example below.
  *
  * ````
- * <SegmentedControlIOS
+ * <SegmentedControl
  * values={['One', 'Two']}
  * selectedIndex={this.state.selectedIndex}
  * onChange={(event) => {
@@ -95,9 +95,10 @@ export interface SegmentedControlIOSProps extends ViewProps {
  * />
  * ````
  */
-declare class SegmentedControlIOSComponent extends React.Component<
- SegmentedControlIOSProps
+
+declare class SegmentedControlComponent extends React.Component<
+ SegmentedControlProps
 > {}
-declare const SegmentedControlIOSBase: Constructor<NativeMethodsMixin> &
- typeof SegmentedControlIOSComponent;
-export default class SegmentedControlIOS extends SegmentedControlIOSBase {}
+declare const SegmentedControlBase: Constructor<NativeMethodsMixin> &
+ typeof SegmentedControlComponent;
+export default class SegmentedControl extends SegmentedControlBase {}

js/RNCSegmentedControlNativeComponent.js

@@ -5,83 +5,14 @@
  * LICENSE file in the root directory of this source tree.
  *
  * @flow
- * @format
  */
 'use strict';
 
 import {requireNativeComponent} from 'react-native';
-
-import type {ViewProps} from 'react-native/Libraries/Components/View/ViewPropTypes';
-import type {SyntheticEvent} from 'react-native/Libraries/Types/CoreEventTypes';
 import type {NativeComponent} from 'react-native/Libraries/Renderer/shims/ReactNative';
-import type {ColorValue} from 'react-native/Libraries/StyleSheet/StyleSheetTypes';
-
-type Event = SyntheticEvent<
- $ReadOnly<{|
- value: number,
- selectedSegmentIndex: number,
- |}>,
->;
-
-export type SegmentedControlIOSProps = $ReadOnly<{|
- ...ViewProps,
- /**
- * The labels for the control's segment buttons, in order.
- */
- values?: $ReadOnlyArray<string>,
- /**
- * The index in `props.values` of the segment to be (pre)selected.
- */
- selectedIndex?: ?number,
- /**
- * Callback that is called when the user taps a segment;
- * passes the segment's value as an argument
- */
- onValueChange?: ?(value: number) => mixed,
- /**
- * Callback that is called when the user taps a segment;
- * passes the event as an argument
- */
- onChange?: ?(event: Event) => mixed,
- /**
- * If false the user won't be able to interact with the control.
- * Default value is true.
- */
- enabled?: boolean,
- /**
- * Accent color of the control.
- */
- tintColor?: ?ColorValue,
- /**
- * Text color of the control.
- * NOTE: this prop will only work for iOS >= 13
- */
- textColor?: ?ColorValue,
- /**
- * Text color of the control when selected.
- * NOTE: this prop will only work for iOS >= 13
- */
- activeTextColor?: ?ColorValue,
- /**
- * Background color of the control.
- * NOTE: this prop will only work for iOS >= 13
- */
- backgroundColor?: ?ColorValue,
- /**
- * If true, then selecting a segment won't persist visually.
- * The `onValueChange` callback will still work as expected.
- */
- momentary?: ?boolean,
- /**
- * (iOS 13 only)
- * Overrides the control's appearance irrespective of the OS theme
- */
- appearance?: 'dark' | 'light',
-|}>;
+import type {SegmentedControlProps} from './types';
 
-type NativeSegmentedControlIOS = Class<
- NativeComponent<SegmentedControlIOSProps>,
->;
+type NativeSegmentedControlIOS = Class<NativeComponent<SegmentedControlProps>>;
 
 module.exports = ((requireNativeComponent(
  'RNCSegmentedControl',

js/SegmentedControlIOS.android.js

@@ -1,40 +1,77 @@
 /**
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- *
  * @flow
  */
 
 'use strict';
 
 import * as React from 'react';
-import {StyleSheet, Text, View} from 'react-native';
+import {StyleSheet, View} from 'react-native';
+import {SegmentedControlTab} from './SegmentedControlTab';
 
-const DummySegmentedControlIOS = (props: *) => (
- <View style={[styles.dummy, props.style]}>
- <Text style={styles.text}>
- SegmentedControlIOS is not supported on this platform!
- </Text>
- </View>
-);
+import type {SegmentedControlProps} from './types';
+const SegmentedControl = ({
+ style,
+ onChange,
+ onValueChange,
+ enabled = true,
+ selectedIndex,
+ activeTextColor,
+ values,
+ tintColor,
+ textColor,
+ backgroundColor,
+}: SegmentedControlProps) => {
+ const handleChange = (index: number) => {
+ // mocks iOS's nativeEvent
+ const event = {
+ nativeEvent: {
+ value: values[index],
+ selectedSegmentIndex: index,
+ },
+ };
+ onChange && onChange(event);
+ onValueChange && onValueChange(values[index]);
+ };
+ return (
+ <View
+ style={[
+ styles.default,
+ style,
+ backgroundColor && {backgroundColor},
+ !enabled && styles.disabled,
+ ]}>
+ {values.map((value, index) => {
+ return (
+ <SegmentedControlTab
+ enabled={enabled}
+ selected={selectedIndex === index}
+ key={index}
+ value={value}
+ tintColor={tintColor}
+ textColor={textColor}
+ activeTextColor={activeTextColor}
+ onSelect={() => {
+ handleChange(index);
+ }}
+ />
+ );
+ })}
+ </View>
+ );
+};
 
 const styles = StyleSheet.create({
- dummy: {
- width: 120,
- height: 50,
- backgroundColor: '#ffbcbc',
- borderWidth: 1,
- borderColor: 'red',
- alignItems: 'center',
- justifyContent: 'center',
+ default: {
+ flexDirection: 'row',
+ justifyContent: 'space-evenly',
+ alignContent: 'center',
+ height: 28,
+ backgroundColor: '#eee',
+ borderRadius: 5,
  },
- text: {
- color: '#333333',
- margin: 5,
- fontSize: 10,
+ disabled: {
+ opacity: 0.4,
  },
 });
 
-export default DummySegmentedControlIOS;
+export default SegmentedControl;

js/SegmentedControlIOS.ios.js

@@ -14,9 +14,8 @@ import {StyleSheet} from 'react-native';
 
 import type {SyntheticEvent} from 'react-native/Libraries/Types/CoreEventTypes';
 
-import RNCSegmentedControlNativeComponent, {
- type SegmentedControlIOSProps,
-} from './RNCSegmentedControlNativeComponent';
+import RNCSegmentedControlNativeComponent from './RNCSegmentedControlNativeComponent';
+import type {SegmentedControlProps} from './types';
 
 type Event = SyntheticEvent<
  $ReadOnly<{|
@@ -26,7 +25,7 @@ type Event = SyntheticEvent<
 >;
 
 type Props = $ReadOnly<{|
- ...SegmentedControlIOSProps,
+ ...SegmentedControlProps,
  forwardedRef: ?React.Ref<typeof RNCSegmentedControlNativeComponent>,
 |}>;
 
@@ -83,11 +82,11 @@ const styles = StyleSheet.create({
 });
 
 const SegmentedControlIOSWithRef = React.forwardRef<
- SegmentedControlIOSProps,
+ SegmentedControlProps,
  RNCSegmentedControlNativeComponent,
 >(
  (
- props: SegmentedControlIOSProps,
+ props: SegmentedControlProps,
  forwardedRef: ?React.Ref<typeof RNCSegmentedControlNativeComponent>,
  ) => {
  return <SegmentedControlIOS {...props} forwardedRef={forwardedRef} />;

js/SegmentedControlTab.js

@@ -0,0 +1,77 @@
+/**
+ * @flow
+ */
+
+'use strict';
+
+import * as React from 'react';
+import {StyleSheet, View, Text, TouchableOpacity} from 'react-native';
+
+type Props = $ReadOnly<{|
+ value: string,
+ tintColor?: string,
+ textColor?: string,
+ activeTextColor?: string,
+ onSelect: () => void,
+ selected: Boolean,
+ enabled: Boolean,
+|}>;
+
+export const SegmentedControlTab = ({
+ onSelect,
+ value,
+ enabled,
+ selected,
+ tintColor,
+ textColor,
+ activeTextColor,
+}: Props) => {
+ const getColor = () => {
+ if (selected && activeTextColor) {
+ return activeTextColor;
+ }
+ if (textColor) {
+ return textColor;
+ }
+ if (tintColor) {
+ return tintColor;
+ }
+ return 'black';
+ };
+ const color = getColor();
+
+ const getBackgroundColor = () => {
+ if (selected && tintColor) {
+ return tintColor;
+ }
+ return 'white';
+ };
+ return (
+ <TouchableOpacity
+ style={styles.container}
+ disabled={!enabled}
+ onPress={onSelect}>
+ <View
+ style={[
+ styles.default,
+ selected && {backgroundColor: getBackgroundColor()},
+ ]}>
+ <Text style={[{color}, selected && styles.activeText]}>{value}</Text>
+ </View>
+ </TouchableOpacity>
+ );
+};
+
+const styles = StyleSheet.create({
+ container: {flex: 1, borderRadius: 5},
+ default: {
+ flex: 1,
+ justifyContent: 'center',
+ alignItems: 'center',
+ margin: 2,
+ borderRadius: 5,
+ },
+ activeText: {
+ fontWeight: '700',
+ },
+});