Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 6363780

Browse files
author
Timur Gibadullin
committed
Updated examples
1 parent b8253e4 commit 6363780

File tree

130 files changed

+22883
-8217
lines changed

Some content is hidden

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

130 files changed

+22883
-8217
lines changed

‎examples/Basic/.babelrc

Lines changed: 0 additions & 3 deletions
This file was deleted.

‎examples/Basic/.bundle/config

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
BUNDLE_PATH: "vendor/bundle"
2+
BUNDLE_FORCE_RUBY_PLATFORM: 1

‎examples/Basic/.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+
};

‎examples/Basic/.flowconfig

Lines changed: 35 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -5,44 +5,61 @@
55
; Ignore "BUCK" generated dirs
66
<PROJECT_ROOT>/\.buckd/
77

8-
; Ignore unexpected extra "@providesModule"
9-
.*/node_modules/.*/node_modules/fbjs/.*
8+
; Ignore polyfills
9+
node_modules/react-native/Libraries/polyfills/.*
1010

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
11+
; Flow doesn't support platforms
12+
.*/Libraries/Utilities/LoadingView.js
1513

16-
; Ignore polyfills
17-
.*/Libraries/polyfills/.*
14+
[untyped]
15+
.*/node_modules/@react-native-community/cli/.*/.*
1816

1917
[include]
2018

2119
[libs]
22-
node_modules/react-native/Libraries/react-native/react-native-interface.js
20+
node_modules/react-native/interface.js
2321
node_modules/react-native/flow/
2422

2523
[options]
2624
emoji=true
2725

28-
module.system=haste
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
2933

3034
munge_underscores=true
3135

32-
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'
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'
3338

3439
suppress_type=$FlowIssue
3540
suppress_type=$FlowFixMe
3641
suppress_type=$FlowFixMeProps
3742
suppress_type=$FlowFixMeState
38-
suppress_type=$FixMe
3943

40-
suppress_comment=\\(.\\|\n\\)*\\$FlowFixMe\\($\\|[^(]\\|(\\(>=0\\.\\(5[0-6]\\|[1-4][0-9]\\|[0-9]\\).[0-9]\\)? *\\(site=[a-z,_]*react_native[a-z,_]*\\)?)\\)
41-
suppress_comment=\\(.\\|\n\\)*\\$FlowIssue\\((\\(>=0\\.\\(5[0-6]\\|[1-4][0-9]\\|[0-9]\\).[0-9]\\)? *\\(site=[a-z,_]*react_native[a-z,_]*\\)?)\\)?:? #[0-9]+
42-
suppress_comment=\\(.\\|\n\\)*\\$FlowFixedInNextDeploy
43-
suppress_comment=\\(.\\|\n\\)*\\$FlowExpectedError
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
4454

45-
unsafe.enable_getters_and_setters=true
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
4663

4764
[version]
48-
^0.56.0
65+
^0.162.0

‎examples/Basic/.gitattributes

Lines changed: 0 additions & 1 deletion
This file was deleted.

‎examples/Basic/.gitignore

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,6 @@ DerivedData
2020
*.hmap
2121
*.ipa
2222
*.xcuserstate
23-
project.xcworkspace
2423

2524
# Android/IntelliJ
2625
#
@@ -29,6 +28,7 @@ build/
2928
.gradle
3029
local.properties
3130
*.iml
31+
*.hprof
3232

3333
# node.js
3434
#
@@ -40,6 +40,7 @@ yarn-error.log
4040
buck-out/
4141
\.buckd/
4242
*.keystore
43+
!debug.keystore
4344

4445
# fastlane
4546
#
@@ -51,3 +52,9 @@ buck-out/
5152
*/fastlane/report.xml
5253
*/fastlane/Preview.html
5354
*/fastlane/screenshots
55+
56+
# Bundle artifact
57+
*.jsbundle
58+
59+
# CocoaPods
60+
/ios/Pods/

‎examples/Basic/.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+
};

‎examples/Basic/.ruby-version

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

‎examples/Basic/App.js

Lines changed: 72 additions & 89 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,25 @@
11
/**
22
* Sample React Native App
3-
* httpss://github.com/facebook/react-native
4-
* @flow
3+
* https://github.com/facebook/react-native
4+
*
5+
* @format
56
*/
67

7-
import React, {Component} from 'react';
8+
import React, {useCallback,useEffect,useMemo,useRef} from 'react';
89
import {
910
Animated,
10-
Easing,
11+
Image,
1112
StyleSheet,
1213
Text,
13-
Image,
14+
Platform,
15+
Easing,
1416
View,
1517
Dimensions,
16-
Platform,
1718
} from 'react-native';
1819
import SortableList from 'react-native-sortable-list';
1920

2021
const window = Dimensions.get('window');
2122

22-
2323
const data = {
2424
0: {
2525
image: 'https://placekitten.com/200/240',
@@ -63,126 +63,112 @@ const data = {
6363
},
6464
};
6565

66-
export default class Basic extends Component {
67-
render() {
68-
return (
69-
<View style={styles.container}>
70-
<Text style={styles.title}>React Native Sortable List</Text>
71-
<SortableList
72-
style={styles.list}
73-
contentContainerStyle={styles.contentContainer}
74-
data={data}
75-
renderRow={this._renderRow} />
76-
</View>
77-
);
78-
}
79-
80-
_renderRow = ({data, active}) => {
81-
return <Row data={data} active={active} />
82-
}
83-
}
66+
function Row(props) {
67+
const {active, data} = props;
8468

85-
class Row extends Component {
86-
87-
constructor(props) {
88-
super(props);
89-
90-
this._active = new Animated.Value(0);
91-
92-
this._style = {
69+
const activeAnim = useRef(new Animated.Value(0));
70+
const style = useMemo(
71+
() => ({
9372
...Platform.select({
9473
ios: {
95-
transform: [{
96-
scale: this._active.interpolate({
97-
inputRange: [0, 1],
98-
outputRange: [1, 1.1],
99-
}),
100-
}],
101-
shadowRadius: this._active.interpolate({
74+
transform: [
75+
{
76+
scale: activeAnim.current.interpolate({
77+
inputRange: [0, 1],
78+
outputRange: [1, 1.07],
79+
}),
80+
},
81+
],
82+
shadowRadius: activeAnim.current.interpolate({
10283
inputRange: [0, 1],
10384
outputRange: [2, 10],
10485
}),
10586
},
10687

10788
android: {
108-
transform: [{
109-
scale: this._active.interpolate({
110-
inputRange: [0, 1],
111-
outputRange: [1, 1.07],
112-
}),
113-
}],
114-
elevation: this._active.interpolate({
89+
transform: [
90+
{
91+
scale: activeAnim.current.interpolate({
92+
inputRange: [0, 1],
93+
outputRange: [1, 1.07],
94+
}),
95+
},
96+
],
97+
elevation: activeAnim.current.interpolate({
11598
inputRange: [0, 1],
11699
outputRange: [2, 6],
117100
}),
118101
},
119-
})
120-
};
121-
}
122-
123-
componentDidUpdate(prevProps) {
124-
if (this.props.active !== prevProps.active) {
125-
Animated.timing(this._active, {
126-
duration: 300,
127-
easing: Easing.bounce,
128-
toValue: Number(this.props.active),
129-
}).start();
130-
}
131-
}
132-
133-
render() {
134-
const {data, active} = this.props;
135-
136-
return (
137-
<Animated.View style={[
138-
styles.row,
139-
this._style,
140-
]}>
141-
<Image source={{uri: data.image}} style={styles.image} />
142-
<Text style={styles.text}>{data.text}</Text>
143-
</Animated.View>
144-
);
145-
}
102+
}),
103+
}),
104+
[],
105+
);
106+
useEffect(() => {
107+
Animated.timing(activeAnim.current, {
108+
duration: 300,
109+
easing: Easing.bounce,
110+
toValue: Number(active),
111+
useNativeDriver: true,
112+
}).start();
113+
}, [active]);
114+
115+
return (
116+
<Animated.View style={[styles.row, style]}>
117+
<Image source={{uri: data.image}} style={[styles.image]} />
118+
<Text style={styles.text}>{data.text}</Text>
119+
</Animated.View>
120+
);
146121
}
147122

123+
const App = () => {
124+
const renderRow = useCallback(({data, active}) => {
125+
return <Row data={data} active={active} />;
126+
}, []);
127+
128+
return (
129+
<View style={styles.container}>
130+
<Text style={styles.title}>React Native Sortable List</Text>
131+
<SortableList
132+
style={styles.list}
133+
contentContainerStyle={styles.contentContainer}
134+
data={data}
135+
renderRow={renderRow}
136+
/>
137+
</View>
138+
);
139+
};
140+
148141
const styles = StyleSheet.create({
149142
container: {
150143
flex: 1,
151144
justifyContent: 'center',
152145
alignItems: 'center',
153146
backgroundColor: '#eee',
154-
155147
...Platform.select({
156148
ios: {
157149
paddingTop: 20,
158150
},
159151
}),
160152
},
161-
162153
title: {
163154
fontSize: 20,
164155
paddingVertical: 20,
165156
color: '#999999',
166157
},
167-
168158
list: {
169159
flex: 1,
170160
},
171-
172161
contentContainer: {
173162
width: window.width,
174-
175163
...Platform.select({
176164
ios: {
177165
paddingHorizontal: 30,
178166
},
179-
180167
android: {
181168
paddingHorizontal: 0,
182-
}
183-
})
169+
},
170+
}),
184171
},
185-
186172
row: {
187173
flexDirection: 'row',
188174
alignItems: 'center',
@@ -193,8 +179,6 @@ const styles = StyleSheet.create({
193179
marginTop: 7,
194180
marginBottom: 12,
195181
borderRadius: 4,
196-
197-
198182
...Platform.select({
199183
ios: {
200184
width: window.width - 30 * 2,
@@ -203,24 +187,23 @@ const styles = StyleSheet.create({
203187
shadowOffset: {height: 2, width: 2},
204188
shadowRadius: 2,
205189
},
206-
207190
android: {
208191
width: window.width - 30 * 2,
209192
elevation: 0,
210193
marginHorizontal: 30,
211194
},
212-
})
195+
}),
213196
},
214-
215197
image: {
216198
width: 50,
217199
height: 50,
218200
marginRight: 30,
219201
borderRadius: 25,
220202
},
221-
222203
text: {
223204
fontSize: 24,
224205
color: '#222222',
225206
},
226207
});
208+
209+
export default App;

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /