Skip to content

Commit 6b011de

Browse files
WrathChaosWrathChaos
committed
new: isActive prop is available now
1 parent 1720cee commit 6b011de

File tree

6 files changed

+222
-3
lines changed

6 files changed

+222
-3
lines changed

‎README.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -68,6 +68,7 @@ should work of the example project.
6868
| text | string | undefined | set the text of the button |
6969
| activeImageSource | Image Source | undefined | set the active image source |
7070
| inactiveImageSource | Image Source | undefined | set the inactive image source |
71+
| isActive | boolean | false | set the active state initially |
7172
| onPress | function | default | set your own logic for onPress functionality |
7273
| mainColor | string | #f1bb7b | change the main animated color |
7374
| originalColor | string | #fff | change the original/default animated color |

‎example/App.tsx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ import {
88
useColorScheme,
99
View,
1010
} from "react-native";
11-
import SwitchButton from "@freakycoder/react-native-switch-button";
11+
import SwitchButton from "./lib/SwitchButton";
1212

1313
const App = () => {
1414
return (
@@ -35,7 +35,7 @@ const App = () => {
3535
color: "#f1bb7b",
3636
fontWeight: "600",
3737
}}
38-
onPress={(isActive: boolean) => console.log(isActive)}
38+
onPress={(isActive: boolean) => alert(isActive)}
3939
/>
4040
<SwitchButton
4141
inactiveImageSource={require("./assets/fingerprint.png")}
@@ -50,6 +50,7 @@ const App = () => {
5050
onPress={(isActive: boolean) => console.log(isActive)}
5151
/>
5252
<SwitchButton
53+
isActive
5354
inactiveImageSource={require("./assets/location-pin.png")}
5455
mainColor="#fc583b"
5556
tintColor="#fc583b"

‎example/lib/SwitchButton.style.ts‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
import { ViewStyle, TextStyle, StyleSheet, ImageStyle } from "react-native";
2+
3+
interface Style {
4+
container: ViewStyle;
5+
textContainerStyle: ViewStyle;
6+
}
7+
8+
export const _containerStyle = (backgroundColor: any): ViewStyle => ({
9+
width: 50,
10+
height: 50,
11+
backgroundColor: backgroundColor,
12+
alignItems: "center",
13+
justifyContent: "center",
14+
borderRadius: 25,
15+
shadowRadius: 8,
16+
shadowOpacity: 0.3,
17+
shadowColor: "#757575",
18+
shadowOffset: {
19+
width: 0,
20+
height: 0,
21+
},
22+
});
23+
24+
export const _imageStyle = (animatedTintColor: any): ImageStyle => ({
25+
width: 30,
26+
height: 30,
27+
tintColor: animatedTintColor,
28+
});
29+
30+
export default StyleSheet.create<Style>({
31+
container: {
32+
alignItems: "center",
33+
},
34+
textContainerStyle: {
35+
marginTop: 8,
36+
},
37+
});

‎example/lib/SwitchButton.tsx‎

Lines changed: 161 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,161 @@
1+
import * as React from "react";
2+
import {
3+
View,
4+
Text,
5+
Animated,
6+
ViewStyle,
7+
StyleProp,
8+
TextStyle,
9+
ImageStyle,
10+
ImageSourcePropType,
11+
} from "react-native";
12+
import RNBounceable from "@freakycoder/react-native-bounceable";
13+
/**
14+
* ? Local Imports
15+
*/
16+
import styles, { _containerStyle, _imageStyle } from "./SwitchButton.style";
17+
18+
const AnimatedRNBounceable = Animated.createAnimatedComponent(RNBounceable);
19+
20+
const MAIN_COLOR = "#f1bb7b";
21+
const ORIGINAL_COLOR = "#fff";
22+
const TINT_COLOR = "#f1bb7b";
23+
const ORIGINAL_VALUE = 0;
24+
const ANIMATED_VALUE = 1;
25+
26+
type CustomStyleProp = StyleProp<ViewStyle> | Array<StyleProp<ViewStyle>>;
27+
type CustomTextStyleProp = StyleProp<TextStyle> | Array<StyleProp<TextStyle>>;
28+
type CustomImageStyleProp =
29+
| StyleProp<ImageStyle>
30+
| Array<StyleProp<ImageStyle>>;
31+
32+
interface ISwitchButtonProps {
33+
style?: CustomStyleProp;
34+
textStyle?: CustomTextStyleProp;
35+
imageStyle?: CustomImageStyleProp;
36+
textContainerStyle?: CustomTextStyleProp;
37+
activeImageSource: ImageSourcePropType;
38+
inactiveImageSource: ImageSourcePropType;
39+
text?: string;
40+
mainColor?: string;
41+
tintColor?: string;
42+
isActive?: boolean;
43+
disableText?: boolean;
44+
originalColor?: string;
45+
onPress: (isActive: boolean) => void;
46+
}
47+
48+
interface IState {
49+
isActive: boolean;
50+
}
51+
52+
export default class SwitchButton extends React.Component<
53+
ISwitchButtonProps,
54+
IState
55+
> {
56+
interpolatedColor: Animated.Value;
57+
58+
constructor(props: ISwitchButtonProps) {
59+
super(props);
60+
this.interpolatedColor = new Animated.Value(ORIGINAL_VALUE);
61+
this.state = {
62+
isActive: false,
63+
};
64+
}
65+
66+
componentDidMount() {
67+
this.handleActiveState();
68+
}
69+
70+
handleActiveState = () => {
71+
if (this.props.isActive) {
72+
this.setState({ isActive: !this.state.isActive }, () => {
73+
this.state.isActive ? this.showFocusColor() : this.showOriginColor();
74+
});
75+
}
76+
};
77+
78+
showOriginColor = () => {
79+
Animated.timing(this.interpolatedColor, {
80+
duration: 350,
81+
toValue: ORIGINAL_VALUE,
82+
useNativeDriver: false,
83+
}).start();
84+
};
85+
86+
showFocusColor = () => {
87+
Animated.timing(this.interpolatedColor, {
88+
duration: 450,
89+
toValue: ANIMATED_VALUE,
90+
useNativeDriver: false,
91+
}).start();
92+
};
93+
94+
handlePress = () => {
95+
this.setState({ isActive: !this.state.isActive }, () => {
96+
this.state.isActive ? this.showFocusColor() : this.showOriginColor();
97+
this.props.onPress && this.props.onPress(this.state.isActive);
98+
});
99+
};
100+
101+
/* -------------------------------------------------------------------------- */
102+
/* Render Methods */
103+
/* -------------------------------------------------------------------------- */
104+
105+
renderBounceableButton = () => {
106+
const {
107+
style,
108+
imageStyle,
109+
activeImageSource,
110+
inactiveImageSource,
111+
} = this.props;
112+
const mainColor = this.props.mainColor || MAIN_COLOR;
113+
const originalColor = this.props.originalColor || ORIGINAL_COLOR;
114+
const tintColor = this.props.tintColor || TINT_COLOR;
115+
const _animatedBGColorOutputRange = this.state.isActive
116+
? [mainColor, originalColor]
117+
: [originalColor, mainColor];
118+
const _animatedTintColorOutputRange = this.state.isActive
119+
? [originalColor, tintColor]
120+
: [tintColor, originalColor];
121+
let animatedBackgroundColor = this.interpolatedColor.interpolate({
122+
inputRange: [ORIGINAL_VALUE, ANIMATED_VALUE],
123+
outputRange: [originalColor, mainColor],
124+
});
125+
let animatedTintColor = this.interpolatedColor.interpolate({
126+
inputRange: [ORIGINAL_VALUE, ANIMATED_VALUE],
127+
outputRange: [tintColor, originalColor],
128+
});
129+
return (
130+
<AnimatedRNBounceable
131+
style={[_containerStyle(animatedBackgroundColor), style]}
132+
onPress={this.handlePress}
133+
>
134+
<Animated.Image
135+
source={this.state.isActive ? activeImageSource : inactiveImageSource}
136+
style={[_imageStyle(animatedTintColor), imageStyle]}
137+
/>
138+
</AnimatedRNBounceable>
139+
);
140+
};
141+
142+
renderText = () => {
143+
const { text, textStyle, textContainerStyle } = this.props;
144+
return (
145+
!this.props.disableText && (
146+
<View style={[styles.textContainerStyle, textContainerStyle]}>
147+
<Text style={textStyle}>{text}</Text>
148+
</View>
149+
)
150+
);
151+
};
152+
153+
render() {
154+
return (
155+
<View style={styles.container}>
156+
{this.renderBounceableButton()}
157+
{this.renderText()}
158+
</View>
159+
);
160+
}
161+
}

‎lib/SwitchButton.tsx‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -39,6 +39,7 @@ interface ISwitchButtonProps {
3939
text?: string;
4040
mainColor?: string;
4141
tintColor?: string;
42+
isActive?: boolean;
4243
disableText?: boolean;
4344
originalColor?: string;
4445
onPress: (isActive: boolean) => void;
@@ -62,6 +63,18 @@ export default class SwitchButton extends React.Component<
6263
};
6364
}
6465

66+
componentDidMount() {
67+
this.handleActiveState();
68+
}
69+
70+
handleActiveState = () => {
71+
if (this.props.isActive) {
72+
this.setState({ isActive: !this.state.isActive }, () => {
73+
this.state.isActive ? this.showFocusColor() : this.showOriginColor();
74+
});
75+
}
76+
};
77+
6578
showOriginColor = () => {
6679
Animated.timing(this.interpolatedColor, {
6780
duration: 350,
@@ -99,6 +112,12 @@ export default class SwitchButton extends React.Component<
99112
const mainColor = this.props.mainColor || MAIN_COLOR;
100113
const originalColor = this.props.originalColor || ORIGINAL_COLOR;
101114
const tintColor = this.props.tintColor || TINT_COLOR;
115+
const _animatedBGColorOutputRange = this.state.isActive
116+
? [mainColor, originalColor]
117+
: [originalColor, mainColor];
118+
const _animatedTintColorOutputRange = this.state.isActive
119+
? [originalColor, tintColor]
120+
: [tintColor, originalColor];
102121
let animatedBackgroundColor = this.interpolatedColor.interpolate({
103122
inputRange: [ORIGINAL_VALUE, ANIMATED_VALUE],
104123
outputRange: [originalColor, mainColor],

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@freakycoder/react-native-switch-button",
3-
"version": "0.1.0",
3+
"version": "0.1.1",
44
"description": "Animated switch button with fully customizable React Native Component",
55
"main": "./build/dist/SwitchButton.js",
66
"repository": "[email protected]:WrathChaos/react-native-switch-button.git",

0 commit comments

Comments
 (0)