diff --git a/src/Divider/Divider.tsx b/src/Divider/Divider.tsx new file mode 100644 index 0000000..fb578f7 --- /dev/null +++ b/src/Divider/Divider.tsx @@ -0,0 +1,36 @@ +import React from 'react'; +import { View } from 'react-native'; +import Animated, { Easing } from 'react-native-reanimated'; +import { timing } from 'react-native-redash'; + +import styles from './DividerStyles'; + +export interface DividerProps { + hide?: boolean; +} + +function _Divider({ hide = false }: DividerProps): JSX.Element { + const opacity = React.useRef(new Animated.Value(hide ? 0 : 1)); + + Animated.useCode(() => { + return Animated.set( + opacity.current, + timing({ + from: hide ? 0 : 1, + to: hide ? 1 : 0, + easing: Easing.linear, + duration: 200, + }), + ); + }, [hide]); + + return ( + + + + ); +} + +export const Divider = React.memo(_Divider); diff --git a/src/Divider/DividerStyles.ts b/src/Divider/DividerStyles.ts new file mode 100644 index 0000000..b00efc8 --- /dev/null +++ b/src/Divider/DividerStyles.ts @@ -0,0 +1,17 @@ +import { StyleSheet } from 'react-native'; + +const styles = StyleSheet.create({ + dividerContainer: { + paddingTop: 7, + paddingBottom: 7, + zIndex: 0, + }, + divider: { + height: '100%', + width: 1, + borderWidth: 0, + backgroundColor: 'rgba(120, 120, 120, 0.2)', + }, +}); + +export default styles; diff --git a/src/Divider/index.ts b/src/Divider/index.ts new file mode 100644 index 0000000..1f84888 --- /dev/null +++ b/src/Divider/index.ts @@ -0,0 +1 @@ +export * from './Divider'; diff --git a/src/SegmentedControl/SegmentedControl.tsx b/src/SegmentedControl/SegmentedControl.tsx index 7fba0c5..879db33 100644 --- a/src/SegmentedControl/SegmentedControl.tsx +++ b/src/SegmentedControl/SegmentedControl.tsx @@ -7,6 +7,7 @@ import { import Animated, { Easing } from 'react-native-reanimated'; import { timing } from 'react-native-redash'; +import { Divider } from '../Divider'; import { Segment, SegmentProps } from '../Segment'; import { SegmentedContext } from '../SegmentedContext'; import { clamp } from '../utils'; @@ -133,6 +134,8 @@ export const SegmentedControl = ({ handleChangeValue(name); }; + const currentIndex = _map?.[_activeName || ''] ?? -1; + return ( )} - {values.map((child, index) => ( - - {index > 0 && ( - - - - )} - {{ - ...child, - props: { - disabled, - inactiveTintColor, - activeTintColor, - ...child.props, - }, - }} - - ))} + {values.map((child, index) => { + return ( + + {index > 0 && ( + + )} + {{ + ...child, + props: { + disabled, + inactiveTintColor, + activeTintColor, + ...child.props, + }, + }} + + ); + })} diff --git a/src/SegmentedControl/SegmentedControlStyles.ts b/src/SegmentedControl/SegmentedControlStyles.ts index a6ad12d..c1bceda 100644 --- a/src/SegmentedControl/SegmentedControlStyles.ts +++ b/src/SegmentedControl/SegmentedControlStyles.ts @@ -28,17 +28,6 @@ const styles = StyleSheet.create({ shadowOpacity: 0.5, shadowRadius: 2, }, - dividerContainer: { - paddingTop: 7, - paddingBottom: 7, - zIndex: 0, - }, - divider: { - height: '100%', - width: 1, - borderWidth: 0, - backgroundColor: 'rgba(120, 120, 120, 0.2)', - }, }); export default styles;