Skip to content

Commit 89f035f

Browse files
kuraydevkuraydev
committed
new: Library is completed. Need to test and documentation
1 parent 8262cd8 commit 89f035f

6 files changed

Lines changed: 299 additions & 72 deletions

File tree

‎example/App.tsx‎

Lines changed: 28 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,30 @@
1+
import React from "react";
2+
import {
3+
SafeAreaView,
4+
ScrollView,
5+
StatusBar,
6+
StyleSheet,
7+
Text,
8+
useColorScheme,
9+
View,
10+
} from "react-native";
11+
import SwitchButton from "./lib/SwitchButton";
112

2-
import React from 'react';
3-
import {
4-
SafeAreaView,
5-
ScrollView,
6-
StatusBar,
7-
StyleSheet,
8-
Text,
9-
useColorScheme,
10-
View,
11-
} from 'react-native';
12-
import SwitchButton from './lib/SwitchButton';
13+
const App = () => {
14+
return (
15+
<SafeAreaView style={{ flex: 1, margin: 32 }}>
16+
<SwitchButton
17+
inactiveImageSource={require("./assets/notification.png")}
18+
activeImageSource={require("./assets/notification-3.png")}
19+
text="Notification"
20+
textStyle={{
21+
color: "#757575",
22+
fontWeight: "600",
23+
}}
24+
onPress={(isActive: boolean) => console.log(isActive)}
25+
/>
26+
</SafeAreaView>
27+
);
28+
};
1329

14-
const App = () => {
15-
16-
17-
return (
18-
<SafeAreaView style={{flex:1, margin:32 }}>
19-
<SwitchButton inactiveImageSource={require("./assets/notification.png")} activeImageSource={require("./assets/notification-3.png")} />
20-
</SafeAreaView>
21-
);
22-
};
23-
24-
25-
export default App;
30+
export default App;

‎example/lib/SwitchButton.style.ts‎

Lines changed: 18 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,37 @@
1-
import { ViewStyle, TextStyle, StyleSheet } from "react-native";
1+
import { ViewStyle, TextStyle, StyleSheet, ImageStyle } from "react-native";
22

33
interface Style {
44
container: ViewStyle;
5+
textContainerStyle: ViewStyle;
56
}
67

78
export const _containerStyle = (backgroundColor: any): ViewStyle => ({
8-
width:50,
9+
width: 50,
910
height: 50,
1011
backgroundColor: backgroundColor,
1112
alignItems: "center",
1213
justifyContent: "center",
13-
borderRadius:25,
14+
borderRadius: 25,
1415
shadowRadius: 8,
1516
shadowOpacity: 0.3,
1617
shadowColor: "#757575",
1718
shadowOffset: {
18-
width: 0,
19-
height: 0,
19+
width: 0,
20+
height: 0,
2021
},
21-
})
22+
});
23+
24+
export const _imageStyle = (animatedTintColor: any): ImageStyle => ({
25+
width: 30,
26+
height: 30,
27+
tintColor: animatedTintColor,
28+
});
2229

2330
export default StyleSheet.create<Style>({
2431
container: {
25-
26-
}
32+
alignItems: "center",
33+
},
34+
textContainerStyle: {
35+
marginTop: 8,
36+
},
2737
});

‎example/lib/SwitchButton.tsx‎

Lines changed: 71 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,52 +1,68 @@
11
import React from "react";
2-
import { View, StyleProp, Image, Text, Animated, ViewStyle, ImageSourcePropType } from "react-native";
3-
import RNBounceable from "@freakycoder/react-native-bounceable"
2+
import {
3+
View,
4+
StyleProp,
5+
Image,
6+
Text,
7+
Animated,
8+
ViewStyle,
9+
ImageSourcePropType,
10+
TextStyle,
11+
ImageStyle,
12+
} from "react-native";
13+
import RNBounceable from "@freakycoder/react-native-bounceable";
414
/**
515
* ? Local Imports
616
*/
7-
import styles, {_containerStyle} from "./SwitchButton.style";
17+
import styles, { _containerStyle, _imageStyle } from "./SwitchButton.style";
818

919
const AnimatedRNBounceable = Animated.createAnimatedComponent(RNBounceable);
1020

11-
1221
const MAIN_COLOR = "#f1bb7b";
1322
const ORIGINAL_COLOR = "#fff";
1423
const TINT_COLOR = "#f1bb7b";
1524
const ORIGINAL_VALUE = 0;
1625
const ANIMATED_VALUE = 1;
1726

1827
type CustomStyleProp = StyleProp<ViewStyle> | Array<StyleProp<ViewStyle>>;
28+
type CustomTextStyleProp = StyleProp<TextStyle> | Array<StyleProp<TextStyle>>;
29+
type CustomImageStyleProp =
30+
| StyleProp<ImageStyle>
31+
| Array<StyleProp<ImageStyle>>;
1932

2033
interface ISwitchButtonProps {
2134
style?: CustomStyleProp;
35+
textStyle?: CustomTextStyleProp;
36+
imageStyle?: CustomImageStyleProp;
37+
textContainerStyle?: CustomTextStyleProp;
2238
activeImageSource: ImageSourcePropType;
2339
inactiveImageSource: ImageSourcePropType;
40+
text?: string;
2441
mainColor?: string;
25-
originalColor?: string;
2642
tintColor?: string;
43+
disableText?: boolean;
44+
originalColor?: string;
45+
onPress: (isActive: boolean) => void;
2746
}
2847

2948
interface IState {
30-
isActive: boolean;
49+
isActive: boolean;
3150
}
3251

33-
3452
export default class SwitchButton extends React.Component<
3553
ISwitchButtonProps,
3654
IState
3755
> {
3856
interpolatedColor: Animated.Value;
3957

40-
4158
constructor(props: ISwitchButtonProps) {
4259
super(props);
4360
this.interpolatedColor = new Animated.Value(ORIGINAL_VALUE);
4461
this.state = {
45-
isActive: false
62+
isActive: false,
4663
};
4764
}
4865

49-
5066
showOriginColor = () => {
5167
Animated.timing(this.interpolatedColor, {
5268
duration: 350,
@@ -63,7 +79,24 @@ export default class SwitchButton extends React.Component<
6379
}).start();
6480
};
6581

66-
render() {
82+
handlePress = () => {
83+
this.setState({ isActive: !this.state.isActive }, () => {
84+
this.state.isActive ? this.showFocusColor() : this.showOriginColor();
85+
this.props.onPress && this.props.onPress(this.state.isActive);
86+
});
87+
};
88+
89+
/* -------------------------------------------------------------------------- */
90+
/* Render Methods */
91+
/* -------------------------------------------------------------------------- */
92+
93+
renderBounceableButton = () => {
94+
const {
95+
style,
96+
imageStyle,
97+
activeImageSource,
98+
inactiveImageSource,
99+
} = this.props;
67100
const mainColor = this.props.mainColor || MAIN_COLOR;
68101
const originalColor = this.props.originalColor || ORIGINAL_COLOR;
69102
const tintColor = this.props.tintColor || TINT_COLOR;
@@ -75,21 +108,36 @@ export default class SwitchButton extends React.Component<
75108
inputRange: [ORIGINAL_VALUE, ANIMATED_VALUE],
76109
outputRange: [tintColor, originalColor],
77110
});
111+
return (
112+
<AnimatedRNBounceable
113+
style={[_containerStyle(animatedBackgroundColor), style]}
114+
onPress={this.handlePress}
115+
>
116+
<Animated.Image
117+
source={this.state.isActive ? activeImageSource : inactiveImageSource}
118+
style={[_imageStyle(animatedTintColor), imageStyle]}
119+
/>
120+
</AnimatedRNBounceable>
121+
);
122+
};
78123

79-
const { style, activeImageSource, inactiveImageSource } = this.props;
124+
renderText = () => {
125+
const { text, textStyle, textContainerStyle } = this.props;
80126
return (
81-
<View style={{alignItems: "center",
82-
}}>
83-
<AnimatedRNBounceable style={[_containerStyle(animatedBackgroundColor), style]} onPress={() => {this.setState({isActive: !this.state.isActive}, () => {
84-
this.state.isActive ? this.showFocusColor() : this.showOriginColor()
85-
})}} >
86-
<Animated.Image source={this.state.isActive ? activeImageSource : inactiveImageSource} style={{ height: 30, width: 30, tintColor: animatedTintColor }} />
87-
</AnimatedRNBounceable>
88-
<View style={{marginTop: 8}}>
89-
<Text>Notification</Text>
127+
!this.props.disableText && (
128+
<View style={[styles.textContainerStyle, textContainerStyle]}>
129+
<Text style={textStyle}>{text}</Text>
90130
</View>
131+
)
132+
);
133+
};
134+
135+
render() {
136+
return (
137+
<View style={styles.container}>
138+
{this.renderBounceableButton()}
139+
{this.renderText()}
91140
</View>
92141
);
93142
}
94-
};
95-
143+
}

‎example/package-lock.json‎

Lines changed: 20 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎lib/SwitchButton.style.ts‎

Lines changed: 30 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,37 @@
1-
import { ViewStyle, TextStyle, StyleSheet } from "react-native";
1+
import { ViewStyle, TextStyle, StyleSheet, ImageStyle } from "react-native";
22

33
interface Style {
44
container: ViewStyle;
5+
textContainerStyle: ViewStyle;
56
}
67

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+
730
export default StyleSheet.create<Style>({
8-
container: {},
31+
container: {
32+
alignItems: "center",
33+
},
34+
textContainerStyle: {
35+
marginTop: 8,
36+
},
937
});

0 commit comments

Comments
 (0)