Skip to content

Commit 4886ede

Browse files
naveenvignesh5naveenvignesh5
committed
feat: add multiple tint color option, add example code
1 parent 1bf6e64 commit 4886ede

Some content is hidden

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

62 files changed

+10153
-39
lines changed

‎.npmignore‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,2 @@
1-
ScreenShots/*
1+
ScreenShots/*
2+
Example

‎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/.eslintrc.js‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
module.exports = {
2+
root: true,
3+
extends: '@react-native-community',
4+
};

‎Example/.flowconfig‎

Lines changed: 65 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
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 polyfills
9+
node_modules/react-native/Libraries/polyfills/.*
10+
11+
; Flow doesn't support platforms
12+
.*/Libraries/Utilities/LoadingView.js
13+
14+
[untyped]
15+
.*/node_modules/@react-native-community/cli/.*/.*
16+
17+
[include]
18+
19+
[libs]
20+
node_modules/react-native/interface.js
21+
node_modules/react-native/flow/
22+
23+
[options]
24+
emoji=true
25+
26+
exact_by_default=true
27+
28+
format.bracket_spacing=false
29+
30+
module.file_ext=.js
31+
module.file_ext=.json
32+
module.file_ext=.ios.js
33+
34+
munge_underscores=true
35+
36+
module.name_mapper='^react-native/\(.*\)$' -> '<PROJECT_ROOT>/node_modules/react-native/\1'
37+
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\)$' -> '<PROJECT_ROOT>/node_modules/react-native/Libraries/Image/RelativeImageStub'
38+
39+
suppress_type=$FlowIssue
40+
suppress_type=$FlowFixMe
41+
suppress_type=$FlowFixMeProps
42+
suppress_type=$FlowFixMeState
43+
44+
[lints]
45+
sketchy-null-number=warn
46+
sketchy-null-mixed=warn
47+
sketchy-number=warn
48+
untyped-type-import=warn
49+
nonstrict-import=warn
50+
deprecated-type=warn
51+
unsafe-getters-setters=warn
52+
unnecessary-invariant=warn
53+
signature-verification-failure=warn
54+
55+
[strict]
56+
deprecated-type
57+
nonstrict-import
58+
sketchy-null
59+
unclear-type
60+
unsafe-getters-setters
61+
untyped-import
62+
untyped-type-import
63+
64+
[version]
65+
^0.162.0

‎Example/.gitignore‎

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
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+
24+
# Android/IntelliJ
25+
#
26+
build/
27+
.idea
28+
.gradle
29+
local.properties
30+
*.iml
31+
*.hprof
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+
!debug.keystore
44+
45+
# fastlane
46+
#
47+
# It is recommended to not store the screenshots in the git repo. Instead, use fastlane to re-generate the
48+
# screenshots whenever they are needed.
49+
# For more information about the recommended setup visit:
50+
# https://docs.fastlane.tools/best-practices/source-control/
51+
52+
*/fastlane/report.xml
53+
*/fastlane/Preview.html
54+
*/fastlane/screenshots
55+
56+
# Bundle artifact
57+
*.jsbundle
58+
59+
# CocoaPods
60+
/ios/Pods/

‎Example/.prettierrc.js‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
module.exports = {
2+
bracketSpacing: false,
3+
jsxBracketSameLine: true,
4+
singleQuote: true,
5+
trailingComma: 'all',
6+
arrowParens: 'avoid',
7+
};

‎Example/.watchmanconfig‎

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

‎Example/App.js‎

Lines changed: 140 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,140 @@
1+
import React, {Component} from 'react';
2+
import {StyleSheet, Text, View, Button, Alert, TextInput} from 'react-native';
3+
4+
import OTPTextView from 'react-native-otp-textinput';
5+
6+
const styles = StyleSheet.create({
7+
container: {
8+
flex: 1,
9+
justifyContent: 'center',
10+
alignItems: 'center',
11+
backgroundColor: '#F5FCFF',
12+
padding: 5,
13+
},
14+
welcome: {
15+
fontSize: 20,
16+
textAlign: 'center',
17+
margin: 10,
18+
},
19+
instructions: {
20+
fontSize: 22,
21+
fontWeight: '500',
22+
textAlign: 'center',
23+
color: '#333333',
24+
marginBottom: 20,
25+
},
26+
textInputContainer: {
27+
marginBottom: 20,
28+
},
29+
roundedTextInput: {
30+
borderRadius: 10,
31+
borderWidth: 4,
32+
},
33+
buttonWrapper: {
34+
flexDirection: 'row',
35+
justifyContent: 'space-around',
36+
marginBottom: 20,
37+
width: '60%',
38+
},
39+
textInput: {
40+
height: 40,
41+
width: '80%',
42+
borderColor: '#000',
43+
borderWidth: 1,
44+
padding: 10,
45+
fontSize: 16,
46+
letterSpacing: 5,
47+
marginBottom: 10,
48+
textAlign: 'center',
49+
},
50+
buttonStyle: {
51+
marginHorizontal: 20,
52+
},
53+
});
54+
55+
export default class App extends Component {
56+
state = {
57+
otpInput: '',
58+
inputText: '',
59+
};
60+
61+
alertText = () => {
62+
const {otpInput = ''} = this.state;
63+
if (otpInput) {
64+
Alert.alert(otpInput);
65+
}
66+
};
67+
68+
clear = () => {
69+
this.input1.clear();
70+
};
71+
72+
updateOtpText = () => {
73+
// will automatically trigger handleOnTextChange callback passed
74+
this.input1.setValue(this.state.inputText);
75+
};
76+
77+
render() {
78+
return (
79+
<View style={styles.container}>
80+
<Text style={styles.instructions}>react-native-otp-textinput</Text>
81+
<OTPTextView
82+
ref={e => (this.input1 = e)}
83+
containerStyle={styles.textInputContainer}
84+
handleTextChange={text => this.setState({otpInput: text})}
85+
inputCount={4}
86+
keyboardType="numeric"
87+
/>
88+
<TextInput
89+
maxLength={4}
90+
onChangeText={e => this.setState({inputText: e})}
91+
style={styles.textInput}
92+
/>
93+
<View style={styles.buttonWrapper}>
94+
<Button title="Clear" onPress={this.clear} />
95+
<Button
96+
style={styles.buttonStyle}
97+
title="Update"
98+
onPress={this.updateOtpText}
99+
/>
100+
<Button
101+
style={styles.buttonStyle}
102+
title="Submit"
103+
onPress={this.alertText}
104+
/>
105+
</View>
106+
<Text style={styles.instructions}>Customizations</Text>
107+
<OTPTextView
108+
handleTextChange={e => {}}
109+
containerStyle={styles.textInputContainer}
110+
textInputStyle={styles.roundedTextInput}
111+
inputCount={5}
112+
inputCellLength={2}
113+
/>
114+
<OTPTextView
115+
handleTextChange={e => {}}
116+
containerStyle={styles.textInputContainer}
117+
textInputStyle={styles.roundedTextInput}
118+
defaultValue="1234"
119+
/>
120+
<OTPTextView
121+
handleTextChange={e => {}}
122+
containerStyle={styles.textInputContainer}
123+
textInputStyle={[styles.roundedTextInput, {borderRadius: 100}]}
124+
tintColor="#000"
125+
/>
126+
<OTPTextView
127+
handleTextChange={e => {}}
128+
containerStyle={styles.textInputContainer}
129+
tintColor={['#FF0000', '#FFFF00', '#00FF00', '#0000FF']}
130+
/>
131+
<OTPTextView
132+
handleTextChange={e => {}}
133+
containerStyle={styles.textInputContainer}
134+
tintColor="#000"
135+
offTintColor={['#FF0000', '#FFFF00', '#00FF00', '#0000FF']}
136+
/>
137+
</View>
138+
);
139+
}
140+
}

‎Example/README.md‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
### `react-native-otp-textinput` - Example
2+
3+
Example project for react-native-otp-textinput with various use case scenarios

‎Example/__tests__/App-test.js‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
/**
2+
* @format
3+
*/
4+
5+
import 'react-native';
6+
import React from 'react';
7+
import App from '../App';
8+
9+
// Note: test renderer must be required after react-native.
10+
import renderer from 'react-test-renderer';
11+
12+
it('renders correctly', () => {
13+
renderer.create(<App />);
14+
});

0 commit comments

Comments
 (0)