diff --git a/Example/AnimatedSegmentControl/package.json b/Example/AnimatedSegmentControl/package.json index f9b32c5..81c5ec0 100644 --- a/Example/AnimatedSegmentControl/package.json +++ b/Example/AnimatedSegmentControl/package.json @@ -9,7 +9,7 @@ "dependencies": { "react": "16.8.3", "react-native": "0.59.10", - "react-native-animated-segment-control": "^1.0.8" + "react-native-animated-segment-control": "^1.0.9" }, "devDependencies": { "@babel/core": "^7.5.4", diff --git a/package.json b/package.json index 2d92fce..da2ac87 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "react-native-animated-segment-control", - "version": "1.0.8", + "version": "1.0.9", "description": "A custom `SegmentControl` component, pretty much similar to native's SegmentControl but with animation", "main": "index.js", "scripts": { diff --git a/src/SegmentControl/index.android.js b/src/SegmentControl/index.android.js deleted file mode 100644 index f01b3bb..0000000 --- a/src/SegmentControl/index.android.js +++ /dev/null @@ -1,172 +0,0 @@ -import React from 'react' -import PropTypes from 'prop-types' -import { View, Animated, ViewPropTypes, Easing } from 'react-native' - -import styles from './styles' -import Segment from './Segment' - -/** - * A custom `SegmentControl` component, pretty much similar to native's SegmentControl but with animation. - * Animates when changing the segment value. - */ -class SegmentControl extends React.Component { - constructor(props) { - super(props) - - this.state = { - selectedIndex: props.selectedIndex, - segmentDimension: { width: 0, height: 0 }, - activeSegmentPosition: { x: 0, y: 0 }, - positionAnimationValue: new Animated.Value(0) - } - } - - /** - * On segment change event. - * - * @param {Number} index - */ - onSegmentSelection = index => { - const animate = () => { - Animated.timing(this.state.positionAnimationValue, { - toValue: this.state.activeSegmentPosition.x, - duration: 150, - easing: Easing.ease, - useNativeDriver: true - }).start(() => this.props.onChange(index)) - } - - this.setState( - prevState => ({ - selectedIndex: index, - activeSegmentPosition: { x: -(this.state.segmentDimension.width * (this.props.values.length / 2 - 0.5)) + this.state.segmentDimension.width * index, y: prevState.activeSegmentPosition.y } - }), - animate - ) - } - - /** - * Invoked on mount and layout change of `segmentContainer` view. - * - * @param {Object} event - */ - segmentOnLayout = event => { - const { width, height } = event.nativeEvent.layout - const segmentWidth = (width - this.props.offsetHeight * 2) / this.props.values.length - - const animate = () => { - Animated.timing(this.state.positionAnimationValue, { - toValue: -(segmentWidth * (this.props.values.length / 2 - 0.5)) + segmentWidth * this.state.selectedIndex, - duration: 100 - }).start() - } - - this.setState(() => ({ - segmentDimension: { width: segmentWidth, height } - }), animate) - } - - render() { - const { style, disable, activeSegmentStyle, segmentControlStyle, selectedTextStyle, unSelectedTextStyle } = this.props - const { height } = this.state.segmentDimension - const segmentHeight = height - this.props.offsetHeight * 2 - - const isDisabled = disable ? 'none' : 'auto' - const extraStyles = disable ? styles.vivid : {} - - return ( - - - {this.props.values.map((segment, index) => ( - this.onSegmentSelection(index)} - /> - ))} - - - - ) - } -} - -SegmentControl.defaultProps = { - offsetHeight: 3, - selectedIndex: 0, - style: {}, - segmentControlStyle: {}, - activeSegmentStyle: {}, - selectedTextStyle: {}, - unSelectedTextStyle: {} -} - -SegmentControl.propTypes = { - /** - * Segment values that are rendered on the view itself. - */ - values: PropTypes.arrayOf(PropTypes.string).isRequired, - - /** - * To enable diable the segment control. Default value is `false`. - */ - disable: PropTypes.bool.isRequired, - - /** - * A callback function of segment index on change. Changed index is send on the callback as a param. - */ - onChange: PropTypes.func.isRequired, - - /** - * Index of the selected segment - */ - selectedIndex: PropTypes.number, - - /** - * Active Segment's offset height. - */ - offsetHeight: PropTypes.number, - - /** - * Styles props of main wrapper - */ - style: ViewPropTypes.style, - - /** - * Styles props of segment control - */ - segmentControlStyle: ViewPropTypes.style, - - /** - * Styles props of active segment - */ - activeSegmentStyle: ViewPropTypes.style, - - /** - * Selected Segment text style. - */ - selectedTextStyle: ViewPropTypes.style, - - /** - * Unselected Segment text style. - */ - unSelectedTextStyle: ViewPropTypes.style, -} - -export default SegmentControl diff --git a/src/SegmentControl/index.ios.js b/src/SegmentControl/index.js similarity index 100% rename from src/SegmentControl/index.ios.js rename to src/SegmentControl/index.js