Skip to content

Commit 4ede392

Browse files
BesbashBesbash
committed
Added example
1 parent 6790b5b commit 4ede392

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

45 files changed

+16508
-0
lines changed

‎Example/.babelrc‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"presets": ["react-native"]
3+
}

‎Example/.buckconfig‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
2+
[android]
3+
target = Google Inc.:Google APIs:23
4+
5+
[maven_repositories]
6+
central = https://repo1.maven.org/maven2

‎Example/.flowconfig‎

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
[ignore]
2+
; We fork some components by platform
3+
.*/*[.]android.js
4+
5+
; Ignore "BUCK" generated dirs
6+
<PROJECT_ROOT>/\.buckd/
7+
8+
; Ignore unexpected extra "@providesModule"
9+
.*/node_modules/.*/node_modules/fbjs/.*
10+
11+
; Ignore duplicate module providers
12+
; For RN Apps installed via npm, "Libraries" folder is inside
13+
; "node_modules/react-native" but in the source repo it is in the root
14+
.*/Libraries/react-native/React.js
15+
16+
; Ignore polyfills
17+
.*/Libraries/polyfills/.*
18+
19+
; Ignore metro
20+
.*/node_modules/metro/.*
21+
22+
[include]
23+
24+
[libs]
25+
node_modules/react-native/Libraries/react-native/react-native-interface.js
26+
node_modules/react-native/flow/
27+
node_modules/react-native/flow-github/
28+
29+
[options]
30+
emoji=true
31+
32+
module.system=haste
33+
34+
munge_underscores=true
35+
36+
module.name_mapper='^[./a-zA-Z0-9$_-]+\.\(bmp\|gif\|jpg\|jpeg\|png\|psd\|svg\|webp\|m4v\|mov\|mp4\|mpeg\|mpg\|webm\|aac\|aiff\|caf\|m4a\|mp3\|wav\|html\|pdf\)$' -> 'RelativeImageStub'
37+
38+
module.file_ext=.js
39+
module.file_ext=.jsx
40+
module.file_ext=.json
41+
module.file_ext=.native.js
42+
43+
suppress_type=$FlowIssue
44+
suppress_type=$FlowFixMe
45+
suppress_type=$FlowFixMeProps
46+
suppress_type=$FlowFixMeState
47+
48+
suppress_comment=\\(.\\|\n\\)*\\$FlowFixMe\\($\\|[^(]\\|(\\(<VERSION>\\)? *\\(site=[a-z,_]*react_native[a-z,_]*\\)?)\\)
49+
suppress_comment=\\(.\\|\n\\)*\\$FlowIssue\\((\\(<VERSION>\\)? *\\(site=[a-z,_]*react_native[a-z,_]*\\)?)\\)?:? #[0-9]+
50+
suppress_comment=\\(.\\|\n\\)*\\$FlowFixedInNextDeploy
51+
suppress_comment=\\(.\\|\n\\)*\\$FlowExpectedError
52+
53+
[version]
54+
^0.67.0

‎Example/.gitattributes‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
*.pbxproj -text

‎Example/.gitignore‎

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
# OSX
2+
#
3+
.DS_Store
4+
5+
# Xcode
6+
#
7+
build/
8+
*.pbxuser
9+
!default.pbxuser
10+
*.mode1v3
11+
!default.mode1v3
12+
*.mode2v3
13+
!default.mode2v3
14+
*.perspectivev3
15+
!default.perspectivev3
16+
xcuserdata
17+
*.xccheckout
18+
*.moved-aside
19+
DerivedData
20+
*.hmap
21+
*.ipa
22+
*.xcuserstate
23+
project.xcworkspace
24+
25+
# Android/IntelliJ
26+
#
27+
build/
28+
.idea
29+
.gradle
30+
local.properties
31+
*.iml
32+
33+
# node.js
34+
#
35+
node_modules/
36+
npm-debug.log
37+
yarn-error.log
38+
39+
# BUCK
40+
buck-out/
41+
\.buckd/
42+
*.keystore
43+
44+
# fastlane
45+
#
46+
# It is recommended to not store the screenshots in the git repo. Instead, use fastlane to re-generate the
47+
# screenshots whenever they are needed.
48+
# For more information about the recommended setup visit:
49+
# https://docs.fastlane.tools/best-practices/source-control/
50+
51+
*/fastlane/report.xml
52+
*/fastlane/Preview.html
53+
*/fastlane/screenshots
54+
55+
# Bundle artifact
56+
*.jsbundle

‎Example/.watchmanconfig‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
{}

‎Example/App/App.js‎

Lines changed: 200 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,200 @@
1+
import React, { Component } from 'react';
2+
import {
3+
ScrollView,
4+
SafeAreaView,
5+
Text,
6+
View
7+
} from 'react-native';
8+
import styles from './styles/AppStyles';
9+
import SpinnerButton from 'react-native-spinner-button';
10+
// import SpinnerButton from './components/SpinnerButton';
11+
const colors = [
12+
'#893346',
13+
'#1aafb8',
14+
'#bf57c3',
15+
'#dead00',
16+
'#666666',
17+
'#4CA0F7',
18+
'#123456',
19+
'#F87217',
20+
];
21+
export default class App extends Component {
22+
constructor(props) {
23+
super(props);
24+
this.state = {
25+
defaultLoading: false,
26+
barLoading: false,
27+
dotLoading: false,
28+
materialLoading: false,
29+
pacmanLoading: false,
30+
pulseLoading: false,
31+
skypeLoading: false,
32+
uiAcivityLoading: false,
33+
waveLoading: false,
34+
};
35+
}
36+
render() {
37+
return (
38+
<SafeAreaView style={styles.safeArea}>
39+
<ScrollView>
40+
<View style={styles.container}>
41+
<SpinnerButton
42+
buttonStyle={[
43+
styles.buttonStyle,
44+
{ backgroundColor: colors[0] }
45+
]}
46+
isLoading={this.state.defaultLoading}
47+
onPress={() => {
48+
this.setState({ defaultLoading: true });
49+
setTimeout(() => {
50+
this.setState({ defaultLoading: false });
51+
}, 3000);
52+
}}
53+
indicatorCount={10}
54+
>
55+
<Text style={styles.buttonText}>Default Or Ball SpinnerButton</Text>
56+
</SpinnerButton>
57+
<SpinnerButton
58+
buttonStyle={[
59+
styles.buttonStyle,
60+
{ backgroundColor: colors[1] }
61+
]}
62+
isLoading={this.state.barLoading}
63+
spinnerType='BarIndicator'
64+
onPress={() => {
65+
this.setState({ barLoading: true });
66+
setTimeout(() => {
67+
this.setState({ barLoading: false });
68+
}, 3000);
69+
}}
70+
animationType={'flipInY'}
71+
>
72+
<Text style={styles.buttonText}>Bar SpinnerButton</Text>
73+
</SpinnerButton>
74+
<SpinnerButton
75+
buttonStyle={[
76+
styles.buttonStyle,
77+
{ backgroundColor: colors[2] }
78+
]}
79+
isLoading={this.state.dotLoading}
80+
indicatorCount={10}
81+
size={10}
82+
spinnerType='DotIndicator'
83+
onPress={() => {
84+
this.setState({ dotLoading: true });
85+
setTimeout(() => {
86+
this.setState({ dotLoading: false });
87+
}, 3000);
88+
}}
89+
animationType={'flipInX'}
90+
>
91+
<Text style={styles.buttonText}>Dot SpinnerButton</Text>
92+
</SpinnerButton>
93+
<SpinnerButton
94+
buttonStyle={[
95+
styles.buttonStyle,
96+
{ backgroundColor: colors[3] }
97+
]}
98+
isLoading={this.state.materialLoading}
99+
spinnerType='MaterialIndicator'
100+
onPress={() => {
101+
this.setState({ materialLoading: true });
102+
setTimeout(() => {
103+
this.setState({ materialLoading: false });
104+
}, 3000);
105+
}}
106+
>
107+
<Text style={styles.buttonText}>Material SpinnerButton</Text>
108+
</SpinnerButton>
109+
<SpinnerButton
110+
buttonStyle={[
111+
styles.buttonStyle,
112+
{ backgroundColor: colors[4] }
113+
]}
114+
isLoading={this.state.pacmanLoading}
115+
spinnerType='PacmanIndicator'
116+
onPress={() => {
117+
this.setState({ pacmanLoading: true });
118+
setTimeout(() => {
119+
this.setState({ pacmanLoading: false });
120+
}, 3000);
121+
}}
122+
>
123+
<Text style={styles.buttonText}>Pacman SpinnerButton</Text>
124+
</SpinnerButton>
125+
<SpinnerButton
126+
buttonStyle={[
127+
styles.buttonStyle,
128+
{ backgroundColor: colors[5] }
129+
]}
130+
isLoading={this.state.pulseLoading}
131+
spinnerType='PulseIndicator'
132+
onPress={() => {
133+
this.setState({ pulseLoading: true });
134+
setTimeout(() => {
135+
this.setState({ pulseLoading: false });
136+
}, 3000);
137+
}}
138+
>
139+
<Text style={styles.buttonText}>Pulse SpinnerButton</Text>
140+
</SpinnerButton>
141+
<SpinnerButton
142+
buttonStyle={[
143+
styles.buttonStyle,
144+
{ backgroundColor: colors[6] }
145+
]}
146+
isLoading={this.state.skypeLoading}
147+
spinnerType='SkypeIndicator'
148+
spinnerOptions={{
149+
maxScale: 2
150+
}}
151+
onPress={() => {
152+
this.setState({ skypeLoading: true });
153+
setTimeout(() => {
154+
this.setState({ skypeLoading: false });
155+
}, 3000);
156+
}}
157+
>
158+
<Text style={styles.buttonText}>Skype SpinnerButton</Text>
159+
</SpinnerButton>
160+
<SpinnerButton
161+
buttonStyle={[
162+
styles.buttonStyle,
163+
{ backgroundColor: colors[7] }
164+
]}
165+
isLoading={this.state.uiAcivityLoading}
166+
spinnerType='UIActivityIndicator'
167+
onPress={() => {
168+
this.setState({ uiAcivityLoading: true });
169+
setTimeout(() => {
170+
this.setState({ uiAcivityLoading: false });
171+
}, 3000);
172+
}}
173+
>
174+
<Text style={styles.buttonText}>UIActivity SpinnerButton</Text>
175+
</SpinnerButton>
176+
<SpinnerButton
177+
buttonStyle={[
178+
styles.buttonStyle,
179+
{ backgroundColor: colors[8] }
180+
]}
181+
isLoading={this.state.waveLoading}
182+
spinnerType='WaveIndicator'
183+
spinnerOptions={{
184+
waveMode: "outline"
185+
}}
186+
onPress={() => {
187+
this.setState({ waveLoading: true });
188+
setTimeout(() => {
189+
this.setState({ waveLoading: false });
190+
}, 3000);
191+
}}
192+
>
193+
<Text style={styles.buttonText}>Wave SpinnerButton</Text>
194+
</SpinnerButton>
195+
</View>
196+
</ScrollView>
197+
</SafeAreaView>
198+
);
199+
}
200+
}

‎Example/App/styles/AppStyles.js‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
import { StyleSheet } from 'react-native';
2+
3+
export default StyleSheet.create({
4+
safeArea: {
5+
backgroundColor: '#F5FCFF',
6+
},
7+
container: {
8+
flex: 1,
9+
// justifyContent: 'center',
10+
alignItems: 'center',
11+
backgroundColor: '#F5FCFF',
12+
},
13+
buttonText: {
14+
fontSize: 20,
15+
textAlign: 'center',
16+
color: 'white',
17+
paddingHorizontal: 20,
18+
},
19+
buttonStyle: {
20+
borderRadius: 10,
21+
margin: 20,
22+
},
23+
instructions: {
24+
textAlign: 'center',
25+
color: '#333333',
26+
marginBottom: 5,
27+
},
28+
});

‎Example/README.md‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
# react-native-spinner-button-demo
2+
3+
This is example of react-native-spinner-button

0 commit comments

Comments
 (0)