bluewallet/react-native-sortable-list
bluewallet/react-native-sortable-list
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update examples

Browse Source
This commit is contained in:
Timur Gibadullin 2017-11-16 23:25:17 +03:00
parent 97e82800b1
commit ebbf4e5933
30 changed files with 2606 additions and 2061 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

48
examples/Basic/.flowconfig Normal file
View File

@ -0,0 +1,48 @@
[ignore]
; We fork some components by platform
.*/*[.]android.js
; Ignore "BUCK" generated dirs
<PROJECT_ROOT>/\.buckd/
; Ignore unexpected extra "@providesModule"
.*/node_modules/.*/node_modules/fbjs/.*
; Ignore duplicate module providers
; For RN Apps installed via npm, "Libraries" folder is inside
; "node_modules/react-native" but in the source repo it is in the root
.*/Libraries/react-native/React.js
; Ignore polyfills
.*/Libraries/polyfills/.*
[include]
[libs]
node_modules/react-native/Libraries/react-native/react-native-interface.js
node_modules/react-native/flow/
[options]
emoji=true
module.system=haste
munge_underscores=true
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'
suppress_type=$FlowIssue
suppress_type=$FlowFixMe
suppress_type=$FlowFixMeProps
suppress_type=$FlowFixMeState
suppress_type=$FixMe
suppress_comment=\\(.\\|\n\\)*\\$FlowFixMe\\($\\|[^(]\\|(\\(>=0\\.\\(5[0-6]\\|[1-4][0-9]\\|[0-9]\\).[0-9]\\)? *\\(site=[a-z,_]*react_native[a-z,_]*\\)?)\\)
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]+
suppress_comment=\\(.\\|\n\\)*\\$FlowFixedInNextDeploy
suppress_comment=\\(.\\|\n\\)*\\$FlowExpectedError
unsafe.enable_getters_and_setters=true
[version]
^0.56.0

8
examples/Basic/.gitignore vendored
View File

@ -46,8 +46,8 @@ buck-out/
# It is recommended to not store the screenshots in the git repo. Instead, use fastlane to re-generate the
# screenshots whenever they are needed.
# For more information about the recommended setup visit:
# https://github.com/fastlane/fastlane/blob/master/fastlane/docs/Gitignore.md
# https://docs.fastlane.tools/best-practices/source-control/
fastlane/report.xml
fastlane/Preview.html
fastlane/screenshots
*/fastlane/report.xml
*/fastlane/Preview.html
*/fastlane/screenshots

226
examples/Basic/App.js Normal file
View File

@ -0,0 +1,226 @@
/**
* Sample React Native App
* httpss://github.com/facebook/react-native
* @flow
*/
import React, { Component } from 'react';
import {
Animated,
Easing,
StyleSheet,
Text,
Image,
View,
Dimensions,
Platform,
} from 'react-native';
import SortableList from 'react-native-sortable-list';
const window = Dimensions.get('window');
const data = {
0: {
image: 'https://placekitten.com/200/240',
text: 'Chloe',
},
1: {
image: 'https://placekitten.com/200/201',
text: 'Jasper',
},
2: {
image: 'https://placekitten.com/200/202',
text: 'Pepper',
},
3: {
image: 'https://placekitten.com/200/203',
text: 'Oscar',
},
4: {
image: 'https://placekitten.com/200/204',
text: 'Dusty',
},
5: {
image: 'https://placekitten.com/200/205',
text: 'Spooky',
},
6: {
image: 'https://placekitten.com/200/210',
text: 'Kiki',
},
7: {
image: 'https://placekitten.com/200/215',
text: 'Smokey',
},
8: {
image: 'https://placekitten.com/200/220',
text: 'Gizmo',
},
9: {
image: 'https://placekitten.com/220/239',
text: 'Kitty',
},
};
export default class Basic extends Component {
render() {
return (
<View style={styles.container}>
<Text style={styles.title}>React Native Sortable List</Text>
<SortableList
style={styles.list}
contentContainerStyle={styles.contentContainer}
data={data}
renderRow={this._renderRow} />
</View>
);
}
_renderRow = ({data, active}) => {
return <Row data={data} active={active} />
}
}
class Row extends Component {
constructor(props) {
super(props);
this._active = new Animated.Value(0);
this._style = {
...Platform.select({
ios: {
transform: [{
scale: this._active.interpolate({
inputRange: [0, 1],
outputRange: [1, 1.1],
}),
}],
shadowRadius: this._active.interpolate({
inputRange: [0, 1],
outputRange: [2, 10],
}),
},
android: {
transform: [{
scale: this._active.interpolate({
inputRange: [0, 1],
outputRange: [1, 1.07],
}),
}],
elevation: this._active.interpolate({
inputRange: [0, 1],
outputRange: [2, 6],
}),
},
})
};
}
componentWillReceiveProps(nextProps) {
if (this.props.active !== nextProps.active) {
Animated.timing(this._active, {
duration: 300,
easing: Easing.bounce,
toValue: Number(nextProps.active),
}).start();
}
}
render() {
const {data, active} = this.props;
return (
<Animated.View style={[
styles.row,
this._style,
]}>
<Image source={{uri: data.image}} style={styles.image} />
<Text style={styles.text}>{data.text}</Text>
</Animated.View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#eee',
...Platform.select({
ios: {
paddingTop: 20,
},
}),
},
title: {
fontSize: 20,
paddingVertical: 20,
color: '#999999',
},
list: {
flex: 1,
},
contentContainer: {
width: window.width,
...Platform.select({
ios: {
paddingHorizontal: 30,
},
android: {
paddingHorizontal: 0,
}
})
},
row: {
flexDirection: 'row',
alignItems: 'center',
backgroundColor: '#fff',
padding: 16,
height: 80,
flex: 1,
marginTop: 7,
marginBottom: 12,
borderRadius: 4,
...Platform.select({
ios: {
width: window.width - 30 * 2,
shadowColor: 'rgba(0,0,0,0.2)',
shadowOpacity: 1,
shadowOffset: {height: 2, width: 2},
shadowRadius: 2,
},
android: {
width: window.width - 30 * 2,
elevation: 0,
marginHorizontal: 30,
},
})
},
image: {
width: 50,
height: 50,
marginRight: 30,
borderRadius: 25,
},
text: {
fontSize: 24,
color: '#222222',
},
});

4
examples/Basic/__tests__/index.ios.js → examples/Basic/__tests__/App.js
View File

@ -1,12 +1,12 @@
import 'react-native';
import React from 'react';
import Index from '../index.ios.js';
import App from '../App';
// Note: test renderer must be required after react-native.
import renderer from 'react-test-renderer';
it('renders correctly', () => {
const tree = renderer.create(
<Index />
<App />
);
});

12
examples/Basic/__tests__/index.android.js
View File

@ -1,12 +0,0 @@
import 'react-native';
import React from 'react';
import Index from '../index.android.js';
// Note: test renderer must be required after react-native.
import renderer from 'react-test-renderer';
it('renders correctly', () => {
const tree = renderer.create(
<Index />
);
});

4
examples/Basic/android/app/build.gradle
View File

@ -72,6 +72,10 @@ import com.android.build.OutputFile
* ]
*/
project.ext.react = [
entryFile: "index.js"
]
apply from: "../../node_modules/react-native/react.gradle"
/**

5
examples/Basic/android/app/src/main/java/com/basic/MainApplication.java
View File

@ -25,6 +25,11 @@ public class MainApplication extends Application implements ReactApplication {
new MainReactPackage()
);
}
@Override
protected String getJSMainModuleName() {
return "index";
}
};
@Override

1
examples/Basic/index.android.js
View File

@ -1 +0,0 @@
import './index.js';

1
examples/Basic/index.ios.js
View File

@ -1 +0,0 @@
import './index.js';

231
examples/Basic/index.js
View File

@ -1,229 +1,4 @@
/**
* Sample React Native App
* httpss://github.com/facebook/react-native
* @flow
*/
import { AppRegistry } from 'react-native';
import App from './App';
import React, { Component } from 'react';
import {
Animated,
Easing,
AppRegistry,
StyleSheet,
Text,
Image,
View,
Dimensions,
Platform,
} from 'react-native';
import SortableList from 'react-native-sortable-list';
const window = Dimensions.get('window');
const data = {
0: {
image: 'https://placekitten.com/200/240',
text: 'Chloe',
},
1: {
image: 'https://placekitten.com/200/201',
text: 'Jasper',
},
2: {
image: 'https://placekitten.com/200/202',
text: 'Pepper',
},
3: {
image: 'https://placekitten.com/200/203',
text: 'Oscar',
},
4: {
image: 'https://placekitten.com/200/204',
text: 'Dusty',
},
5: {
image: 'https://placekitten.com/200/205',
text: 'Spooky',
},
6: {
image: 'https://placekitten.com/200/210',
text: 'Kiki',
},
7: {
image: 'https://placekitten.com/200/215',
text: 'Smokey',
},
8: {
image: 'https://placekitten.com/200/220',
text: 'Gizmo',
},
9: {
image: 'https://placekitten.com/220/239',
text: 'Kitty',
},
};
class Basic extends Component {
render() {
return (
<View style={styles.container}>
<Text style={styles.title}>React Native Sortable List</Text>
<SortableList
style={styles.list}
contentContainerStyle={styles.contentContainer}
data={data}
renderRow={this._renderRow} />
</View>
);
}
_renderRow = ({data, active}) => {
return <Row data={data} active={active} />
}
}
class Row extends Component {
constructor(props) {
super(props);
this._active = new Animated.Value(0);
this._style = {
...Platform.select({
ios: {
transform: [{
scale: this._active.interpolate({
inputRange: [0, 1],
outputRange: [1, 1.1],
}),
}],
shadowRadius: this._active.interpolate({
inputRange: [0, 1],
outputRange: [2, 10],
}),
},
android: {
transform: [{
scale: this._active.interpolate({
inputRange: [0, 1],
outputRange: [1, 1.07],
}),
}],
elevation: this._active.interpolate({
inputRange: [0, 1],
outputRange: [2, 6],
}),
},
})
};
}
componentWillReceiveProps(nextProps) {
if (this.props.active !== nextProps.active) {
Animated.timing(this._active, {
duration: 300,
easing: Easing.bounce,
toValue: Number(nextProps.active),
}).start();
}
}
render() {
const {data, active} = this.props;
return (
<Animated.View style={[
styles.row,
this._style,
]}>
<Image source={{uri: data.image}} style={styles.image} />
<Text style={styles.text}>{data.text}</Text>
</Animated.View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#eee',
...Platform.select({
ios: {
paddingTop: 20,
},
}),
},
title: {
fontSize: 20,
paddingVertical: 20,
color: '#999999',
},
list: {
flex: 1,
},
contentContainer: {
width: window.width,
...Platform.select({
ios: {
paddingHorizontal: 30,
},
android: {
paddingHorizontal: 0,
}
})
},
row: {
flexDirection: 'row',
alignItems: 'center',
backgroundColor: '#fff',
padding: 16,
height: 80,
flex: 1,
marginTop: 7,
marginBottom: 12,
borderRadius: 4,
...Platform.select({
ios: {
width: window.width - 30 * 2,
shadowColor: 'rgba(0,0,0,0.2)',
shadowOpacity: 1,
shadowOffset: {height: 2, width: 2},
shadowRadius: 2,
},
android: {
width: window.width - 30 * 2,
elevation: 0,
marginHorizontal: 30,
},
})
},
image: {
width: 50,
height: 50,
marginRight: 30,
borderRadius: 25,
},
text: {
fontSize: 24,
color: '#222222',
},
});
AppRegistry.registerComponent('Basic', () => Basic);
AppRegistry.registerComponent('Basic', () => App);

37
examples/Basic/ios/Basic.xcodeproj/project.pbxproj
View File

@ -36,6 +36,7 @@
2DCD954D1E0B4F2C00145EB5 /* BasicTests.m in Sources */ = {isa = PBXBuildFile; fileRef = 00E356F21AD99517003FC87E /* BasicTests.m */; };
5E9157361DD0AC6A00FF2AA8 /* libRCTAnimation.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 5E9157331DD0AC6500FF2AA8 /* libRCTAnimation.a */; };
832341BD1AAA6AB300B99B32 /* libRCTText.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 832341B51AAA6A8300B99B32 /* libRCTText.a */; };
ADBDB9381DFEBF1600ED6528 /* libRCTBlob.a in Frameworks */ = {isa = PBXBuildFile; fileRef = ADBDB9271DFEBF0700ED6528 /* libRCTBlob.a */; };
/* End PBXBuildFile section */
/* Begin PBXContainerItemProxy section */
@ -228,6 +229,13 @@
remoteGlobalIDString = 58B5119B1A9E6C1200147676;
remoteInfo = RCTText;
};
ADBDB9261DFEBF0700ED6528 /* PBXContainerItemProxy */ = {
isa = PBXContainerItemProxy;
containerPortal = ADBDB91F1DFEBF0600ED6528 /* RCTBlob.xcodeproj */;
proxyType = 2;
remoteGlobalIDString = 358F4ED71D1E81A9004DF814;
remoteInfo = RCTBlob;
};
/* End PBXContainerItemProxy section */
/* Begin PBXFileReference section */
@ -255,6 +263,7 @@
5E91572D1DD0AC6500FF2AA8 /* RCTAnimation.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RCTAnimation.xcodeproj; path = "../node_modules/react-native/Libraries/NativeAnimation/RCTAnimation.xcodeproj"; sourceTree = "<group>"; };
78C398B01ACF4ADC00677621 /* RCTLinking.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RCTLinking.xcodeproj; path = "../node_modules/react-native/Libraries/LinkingIOS/RCTLinking.xcodeproj"; sourceTree = "<group>"; };
832341B01AAA6A8300B99B32 /* RCTText.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RCTText.xcodeproj; path = "../node_modules/react-native/Libraries/Text/RCTText.xcodeproj"; sourceTree = "<group>"; };
ADBDB91F1DFEBF0600ED6528 /* RCTBlob.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RCTBlob.xcodeproj; path = "../node_modules/react-native/Libraries/Blob/RCTBlob.xcodeproj"; sourceTree = "<group>"; };
/* End PBXFileReference section */
/* Begin PBXFrameworksBuildPhase section */
@ -270,6 +279,8 @@
isa = PBXFrameworksBuildPhase;
buildActionMask = 2147483647;
files = (
ADBDB9381DFEBF1600ED6528 /* libRCTBlob.a in Frameworks */,
5E9157361DD0AC6A00FF2AA8 /* libRCTAnimation.a in Frameworks */,
146834051AC3E58100842450 /* libReact.a in Frameworks */,
5E9157361DD0AC6A00FF2AA8 /* libRCTAnimation.a in Frameworks */,
00C302E51ABCBA2D00DB3ED1 /* libRCTActionSheet.a in Frameworks */,
@ -411,6 +422,7 @@
3DAD3EAB1DF850E9000B6D8A /* libcxxreact.a */,
3DAD3EAD1DF850E9000B6D8A /* libjschelpers.a */,
3DAD3EAF1DF850E9000B6D8A /* libjschelpers.a */,
3DAD3EA31DF850E9000B6D8A /* libReact-tvOS.a */,
);
name = Products;
sourceTree = "<group>";
@ -439,6 +451,7 @@
5E91572D1DD0AC6500FF2AA8 /* RCTAnimation.xcodeproj */,
146833FF1AC3E56700842450 /* React.xcodeproj */,
00C302A71ABCB8CE00DB3ED1 /* RCTActionSheet.xcodeproj */,
ADBDB91F1DFEBF0600ED6528 /* RCTBlob.xcodeproj */,
00C302B51ABCB90400DB3ED1 /* RCTGeolocation.xcodeproj */,
00C302BB1ABCB91800DB3ED1 /* RCTImage.xcodeproj */,
78C398B01ACF4ADC00677621 /* RCTLinking.xcodeproj */,
@ -471,6 +484,7 @@
indentWidth = 2;
sourceTree = "<group>";
tabWidth = 2;
usesTabs = 0;
};
83CBBA001A601CBA00E9B192 /* Products */ = {
isa = PBXGroup;
@ -483,6 +497,14 @@
name = Products;
sourceTree = "<group>";
};
ADBDB9201DFEBF0600ED6528 /* Products */ = {
isa = PBXGroup;
children = (
ADBDB9271DFEBF0700ED6528 /* libRCTBlob.a */,
);
name = Products;
sourceTree = "<group>";
};
/* End PBXGroup section */
/* Begin PBXNativeTarget section */
@ -602,6 +624,10 @@
ProductGroup = 5E91572E1DD0AC6500FF2AA8 /* Products */;
ProjectRef = 5E91572D1DD0AC6500FF2AA8 /* RCTAnimation.xcodeproj */;
},
{
ProductGroup = ADBDB9201DFEBF0600ED6528 /* Products */;
ProjectRef = ADBDB91F1DFEBF0600ED6528 /* RCTBlob.xcodeproj */;
},
{
ProductGroup = 00C302B61ABCB90400DB3ED1 /* Products */;
ProjectRef = 00C302B51ABCB90400DB3ED1 /* RCTGeolocation.xcodeproj */;
@ -748,10 +774,10 @@
remoteRef = 3DAD3E981DF850E9000B6D8A /* PBXContainerItemProxy */;
sourceTree = BUILT_PRODUCTS_DIR;
};
3DAD3EA31DF850E9000B6D8A /* libReact.a */ = {
3DAD3EA31DF850E9000B6D8A /* libReact-tvOS.a */ = {
isa = PBXReferenceProxy;
fileType = archive.ar;
path = libReact.a;
path = "libReact-tvOS.a";
remoteRef = 3DAD3EA21DF850E9000B6D8A /* PBXContainerItemProxy */;
sourceTree = BUILT_PRODUCTS_DIR;
};
@ -825,6 +851,13 @@
remoteRef = 832341B41AAA6A8300B99B32 /* PBXContainerItemProxy */;
sourceTree = BUILT_PRODUCTS_DIR;
};
ADBDB9271DFEBF0700ED6528 /* libRCTBlob.a */ = {
isa = PBXReferenceProxy;
fileType = archive.ar;
path = libRCTBlob.a;
remoteRef = ADBDB9261DFEBF0700ED6528 /* PBXContainerItemProxy */;
sourceTree = BUILT_PRODUCTS_DIR;
};
/* End PBXReferenceProxy section */
/* Begin PBXResourcesBuildPhase section */

2
examples/Basic/ios/Basic/AppDelegate.m
View File

@ -18,7 +18,7 @@
{
NSURL *jsCodeLocation;
jsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index.ios" fallbackResource:nil];
jsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index" fallbackResource:nil];
RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation
moduleName:@"Basic"

6
examples/Basic/ios/Basic/Images.xcassets/Contents.json Normal file
View File

@ -0,0 +1,6 @@
{
"info" : {
"version" : 1,
"author" : "xcode"
}
}

9
examples/Basic/package.json
View File

@ -3,11 +3,12 @@
"version": "0.0.1",
"private": true,
"scripts": {
"start": "node node_modules/react-native/local-cli/cli.js start"
"start": "node node_modules/react-native/local-cli/cli.js start",
"test": "jest"
},
"dependencies": {
"react": "16.0.0-alpha.12",
"react-native": "0.46.3",
"react-native-sortable-list": "../.."
"react": "16.0.0",
"react-native": "0.50.3",
"react-native-sortable-list": "0.0.17"
}
}

1496
examples/Basic/yarn.lock
View File

File diff suppressed because it is too large Load Diff

48
examples/Horizontal/.flowconfig Normal file
View File

@ -0,0 +1,48 @@
[ignore]
; We fork some components by platform
.*/*[.]android.js
; Ignore "BUCK" generated dirs
<PROJECT_ROOT>/\.buckd/
; Ignore unexpected extra "@providesModule"
.*/node_modules/.*/node_modules/fbjs/.*
; Ignore duplicate module providers
; For RN Apps installed via npm, "Libraries" folder is inside
; "node_modules/react-native" but in the source repo it is in the root
.*/Libraries/react-native/React.js
; Ignore polyfills
.*/Libraries/polyfills/.*
[include]
[libs]
node_modules/react-native/Libraries/react-native/react-native-interface.js
node_modules/react-native/flow/
[options]
emoji=true
module.system=haste
munge_underscores=true
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'
suppress_type=$FlowIssue
suppress_type=$FlowFixMe
suppress_type=$FlowFixMeProps
suppress_type=$FlowFixMeState
suppress_type=$FixMe
suppress_comment=\\(.\\|\n\\)*\\$FlowFixMe\\($\\|[^(]\\|(\\(>=0\\.\\(5[0-6]\\|[1-4][0-9]\\|[0-9]\\).[0-9]\\)? *\\(site=[a-z,_]*react_native[a-z,_]*\\)?)\\)
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]+
suppress_comment=\\(.\\|\n\\)*\\$FlowFixedInNextDeploy
suppress_comment=\\(.\\|\n\\)*\\$FlowExpectedError
unsafe.enable_getters_and_setters=true
[version]
^0.56.0

8
examples/Horizontal/.gitignore vendored
View File

@ -46,8 +46,8 @@ buck-out/
# It is recommended to not store the screenshots in the git repo. Instead, use fastlane to re-generate the
# screenshots whenever they are needed.
# For more information about the recommended setup visit:
# https://github.com/fastlane/fastlane/blob/master/fastlane/docs/Gitignore.md
# https://docs.fastlane.tools/best-practices/source-control/
fastlane/report.xml
fastlane/Preview.html
fastlane/screenshots
*/fastlane/report.xml
*/fastlane/Preview.html
*/fastlane/screenshots

223
examples/Horizontal/App.js Normal file
View File

@ -0,0 +1,223 @@
/**
* Sample React Native App
* httpss://github.com/facebook/react-native
* @flow
*/
import React, { Component } from 'react';
import {
Animated,
Easing,
StyleSheet,
Text,
Image,
View,
Dimensions,
Platform,
} from 'react-native';
import SortableList from 'react-native-sortable-list';
const window = Dimensions.get('window');
const data = {
0: {
image: 'https://placekitten.com/200/240',
text: 'Chloe',
},
1: {
image: 'https://placekitten.com/200/201',
text: 'Jasper',
},
2: {
image: 'https://placekitten.com/200/202',
text: 'Pepper',
},
3: {
image: 'https://placekitten.com/200/203',
text: 'Oscar',
},
4: {
image: 'https://placekitten.com/200/204',
text: 'Dusty',
},
5: {
image: 'https://placekitten.com/200/205',
text: 'Spooky',
},
6: {
image: 'https://placekitten.com/200/210',
text: 'Kiki',
},
7: {
image: 'https://placekitten.com/200/215',
text: 'Smokey',
},
8: {
image: 'https://placekitten.com/200/220',
text: 'Gizmo',
},
9: {
image: 'https://placekitten.com/220/239',
text: 'Kitty',
},
};
export default class Horizontal extends Component {
render() {
return (
<View style={styles.container}>
<Text style={styles.title}>React Native Sortable List</Text>
<SortableList
horizontal
style={styles.list}
contentContainerStyle={styles.contentContainer}
data={data}
renderRow={this._renderRow} />
</View>
);
}
_renderRow = ({data, active}) => {
return <Row data={data} active={active} />
}
}
class Row extends Component {
constructor(props) {
super(props);
this._active = new Animated.Value(0);
this._style = {
...Platform.select({
ios: {
transform: [{
scale: this._active.interpolate({
inputRange: [0, 1],
outputRange: [1, 1.1],
}),
}],
shadowRadius: this._active.interpolate({
inputRange: [0, 1],
outputRange: [2, 10],
}),
},
android: {
transform: [{
scale: this._active.interpolate({
inputRange: [0, 1],
outputRange: [1, 1.07],
}),
}],
elevation: this._active.interpolate({
inputRange: [0, 1],
outputRange: [2, 6],
}),
},
})
};
}
componentWillReceiveProps(nextProps) {
if (this.props.active !== nextProps.active) {
Animated.timing(this._active, {
duration: 300,
easing: Easing.bounce,
toValue: Number(nextProps.active),
}).start();
}
}
render() {
const {data, active} = this.props;
return (
<Animated.View style={[
styles.row,
this._style,
]}>
<Image source={{uri: data.image}} style={styles.image} />
<Text style={styles.text}>{data.text}</Text>
</Animated.View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#eee',
...Platform.select({
ios: {
paddingTop: 20,
},
}),
},
title: {
fontSize: 20,
paddingVertical: 20,
color: '#999999',
},
list: {
height: 210,
width: window.width,
},
contentContainer: {
...Platform.select({
ios: {
paddingVertical: 30,
},
android: {
paddingVertical: 0,
}
})
},
row: {
flexDirection: 'column',
alignItems: 'center',
backgroundColor: '#fff',
padding: 16,
width: 110,
height: 150,
marginHorizontal: 10,
borderRadius: 4,
...Platform.select({
ios: {
shadowColor: 'rgba(0,0,0,0.2)',
shadowOpacity: 1,
shadowOffset: {height: 2, width: 2},
shadowRadius: 2,
},
android: {
elevation: 0,
marginHorizontal: 30,
},
})
},
image: {
width: 50,
height: 50,
marginBottom: 15,
borderRadius: 25,
},
text: {
fontSize: 18,
color: '#222222',
},
});

4
examples/Horizontal/__tests__/index.ios.js → examples/Horizontal/__tests__/App.js
View File

@ -1,12 +1,12 @@
import 'react-native';
import React from 'react';
import Index from '../index.ios.js';
import App from '../App';
// Note: test renderer must be required after react-native.
import renderer from 'react-test-renderer';
it('renders correctly', () => {
const tree = renderer.create(
<Index />
<App />
);
});

12
examples/Horizontal/__tests__/index.android.js
View File

@ -1,12 +0,0 @@
import 'react-native';
import React from 'react';
import Index from '../index.android.js';
// Note: test renderer must be required after react-native.
import renderer from 'react-test-renderer';
it('renders correctly', () => {
const tree = renderer.create(
<Index />
);
});

4
examples/Horizontal/android/app/build.gradle
View File

@ -72,6 +72,10 @@ import com.android.build.OutputFile
* ]
*/
project.ext.react = [
entryFile: "index.js"
]
apply from: "../../node_modules/react-native/react.gradle"
/**

5
examples/Horizontal/android/app/src/main/java/com/horizontal/MainApplication.java
View File

@ -25,6 +25,11 @@ public class MainApplication extends Application implements ReactApplication {
new MainReactPackage()
);
}
@Override
protected String getJSMainModuleName() {
return "index";
}
};
@Override

1
examples/Horizontal/index.android.js
View File

@ -1 +0,0 @@
import './index.js';

1
examples/Horizontal/index.ios.js
View File

@ -1 +0,0 @@
import './index.js';

228
examples/Horizontal/index.js
View File

@ -1,226 +1,4 @@
/**
* Sample React Native App
* httpss://github.com/facebook/react-native
* @flow
*/
import { AppRegistry } from 'react-native';
import App from './App';
import React, { Component } from 'react';
import {
Animated,
Easing,
AppRegistry,
StyleSheet,
Text,
Image,
View,
Dimensions,
Platform,
} from 'react-native';
import SortableList from 'react-native-sortable-list';
const window = Dimensions.get('window');
const data = {
0: {
image: 'https://placekitten.com/200/240',
text: 'Chloe',
},
1: {
image: 'https://placekitten.com/200/201',
text: 'Jasper',
},
2: {
image: 'https://placekitten.com/200/202',
text: 'Pepper',
},
3: {
image: 'https://placekitten.com/200/203',
text: 'Oscar',
},
4: {
image: 'https://placekitten.com/200/204',
text: 'Dusty',
},
5: {
image: 'https://placekitten.com/200/205',
text: 'Spooky',
},
6: {
image: 'https://placekitten.com/200/210',
text: 'Kiki',
},
7: {
image: 'https://placekitten.com/200/215',
text: 'Smokey',
},
8: {
image: 'https://placekitten.com/200/220',
text: 'Gizmo',
},
9: {
image: 'https://placekitten.com/220/239',
text: 'Kitty',
},
};
class Horizontal extends Component {
render() {
return (
<View style={styles.container}>
<Text style={styles.title}>React Native Sortable List</Text>
<SortableList
horizontal
style={styles.list}
contentContainerStyle={styles.contentContainer}
data={data}
renderRow={this._renderRow} />
</View>
);
}
_renderRow = ({data, active}) => {
return <Row data={data} active={active} />
}
}
class Row extends Component {
constructor(props) {
super(props);
this._active = new Animated.Value(0);
this._style = {
...Platform.select({
ios: {
transform: [{
scale: this._active.interpolate({
inputRange: [0, 1],
outputRange: [1, 1.1],
}),
}],
shadowRadius: this._active.interpolate({
inputRange: [0, 1],
outputRange: [2, 10],
}),
},
android: {
transform: [{
scale: this._active.interpolate({
inputRange: [0, 1],
outputRange: [1, 1.07],
}),
}],
elevation: this._active.interpolate({
inputRange: [0, 1],
outputRange: [2, 6],
}),
},
})
};
}
componentWillReceiveProps(nextProps) {
if (this.props.active !== nextProps.active) {
Animated.timing(this._active, {
duration: 300,
easing: Easing.bounce,
toValue: Number(nextProps.active),
}).start();
}
}
render() {
const {data, active} = this.props;
return (
<Animated.View style={[
styles.row,
this._style,
]}>
<Image source={{uri: data.image}} style={styles.image} />
<Text style={styles.text}>{data.text}</Text>
</Animated.View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#eee',
...Platform.select({
ios: {
paddingTop: 20,
},
}),
},
title: {
fontSize: 20,
paddingVertical: 20,
color: '#999999',
},
list: {
height: 210,
width: window.width,
},
contentContainer: {
...Platform.select({
ios: {
paddingVertical: 30,
},
android: {
paddingVertical: 0,
}
})
},
row: {
flexDirection: 'column',
alignItems: 'center',
backgroundColor: '#fff',
padding: 16,
width: 110,
height: 150,
marginHorizontal: 10,
borderRadius: 4,
...Platform.select({
ios: {
shadowColor: 'rgba(0,0,0,0.2)',
shadowOpacity: 1,
shadowOffset: {height: 2, width: 2},
shadowRadius: 2,
},
android: {
elevation: 0,
marginHorizontal: 30,
},
})
},
image: {
width: 50,
height: 50,
marginBottom: 15,
borderRadius: 25,
},
text: {
fontSize: 18,
color: '#222222',
},
});
AppRegistry.registerComponent('Horizontal', () => Horizontal);
AppRegistry.registerComponent('Horizontal', () => App);

37
examples/Horizontal/ios/Horizontal.xcodeproj/project.pbxproj
View File

@ -36,6 +36,7 @@
2DCD954D1E0B4F2C00145EB5 /* HorizontalTests.m in Sources */ = {isa = PBXBuildFile; fileRef = 00E356F21AD99517003FC87E /* HorizontalTests.m */; };
5E9157361DD0AC6A00FF2AA8 /* libRCTAnimation.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 5E9157331DD0AC6500FF2AA8 /* libRCTAnimation.a */; };
832341BD1AAA6AB300B99B32 /* libRCTText.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 832341B51AAA6A8300B99B32 /* libRCTText.a */; };
ADBDB9381DFEBF1600ED6528 /* libRCTBlob.a in Frameworks */ = {isa = PBXBuildFile; fileRef = ADBDB9271DFEBF0700ED6528 /* libRCTBlob.a */; };
/* End PBXBuildFile section */
/* Begin PBXContainerItemProxy section */
@ -228,6 +229,13 @@
remoteGlobalIDString = 58B5119B1A9E6C1200147676;
remoteInfo = RCTText;
};
ADBDB9261DFEBF0700ED6528 /* PBXContainerItemProxy */ = {
isa = PBXContainerItemProxy;
containerPortal = ADBDB91F1DFEBF0600ED6528 /* RCTBlob.xcodeproj */;
proxyType = 2;
remoteGlobalIDString = 358F4ED71D1E81A9004DF814;
remoteInfo = RCTBlob;
};
/* End PBXContainerItemProxy section */
/* Begin PBXFileReference section */
@ -255,6 +263,7 @@
5E91572D1DD0AC6500FF2AA8 /* RCTAnimation.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RCTAnimation.xcodeproj; path = "../node_modules/react-native/Libraries/NativeAnimation/RCTAnimation.xcodeproj"; sourceTree = "<group>"; };
78C398B01ACF4ADC00677621 /* RCTLinking.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RCTLinking.xcodeproj; path = "../node_modules/react-native/Libraries/LinkingIOS/RCTLinking.xcodeproj"; sourceTree = "<group>"; };
832341B01AAA6A8300B99B32 /* RCTText.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RCTText.xcodeproj; path = "../node_modules/react-native/Libraries/Text/RCTText.xcodeproj"; sourceTree = "<group>"; };
ADBDB91F1DFEBF0600ED6528 /* RCTBlob.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RCTBlob.xcodeproj; path = "../node_modules/react-native/Libraries/Blob/RCTBlob.xcodeproj"; sourceTree = "<group>"; };
/* End PBXFileReference section */
/* Begin PBXFrameworksBuildPhase section */
@ -270,6 +279,8 @@
isa = PBXFrameworksBuildPhase;
buildActionMask = 2147483647;
files = (
ADBDB9381DFEBF1600ED6528 /* libRCTBlob.a in Frameworks */,
5E9157361DD0AC6A00FF2AA8 /* libRCTAnimation.a in Frameworks */,
146834051AC3E58100842450 /* libReact.a in Frameworks */,
5E9157361DD0AC6A00FF2AA8 /* libRCTAnimation.a in Frameworks */,
00C302E51ABCBA2D00DB3ED1 /* libRCTActionSheet.a in Frameworks */,
@ -411,6 +422,7 @@
3DAD3EAB1DF850E9000B6D8A /* libcxxreact.a */,
3DAD3EAD1DF850E9000B6D8A /* libjschelpers.a */,
3DAD3EAF1DF850E9000B6D8A /* libjschelpers.a */,
3DAD3EA31DF850E9000B6D8A /* libReact-tvOS.a */,
);
name = Products;
sourceTree = "<group>";
@ -439,6 +451,7 @@
5E91572D1DD0AC6500FF2AA8 /* RCTAnimation.xcodeproj */,
146833FF1AC3E56700842450 /* React.xcodeproj */,
00C302A71ABCB8CE00DB3ED1 /* RCTActionSheet.xcodeproj */,
ADBDB91F1DFEBF0600ED6528 /* RCTBlob.xcodeproj */,
00C302B51ABCB90400DB3ED1 /* RCTGeolocation.xcodeproj */,
00C302BB1ABCB91800DB3ED1 /* RCTImage.xcodeproj */,
78C398B01ACF4ADC00677621 /* RCTLinking.xcodeproj */,
@ -471,6 +484,7 @@
indentWidth = 2;
sourceTree = "<group>";
tabWidth = 2;
usesTabs = 0;
};
83CBBA001A601CBA00E9B192 /* Products */ = {
isa = PBXGroup;
@ -483,6 +497,14 @@
name = Products;
sourceTree = "<group>";
};
ADBDB9201DFEBF0600ED6528 /* Products */ = {
isa = PBXGroup;
children = (
ADBDB9271DFEBF0700ED6528 /* libRCTBlob.a */,
);
name = Products;
sourceTree = "<group>";
};
/* End PBXGroup section */
/* Begin PBXNativeTarget section */
@ -602,6 +624,10 @@
ProductGroup = 5E91572E1DD0AC6500FF2AA8 /* Products */;
ProjectRef = 5E91572D1DD0AC6500FF2AA8 /* RCTAnimation.xcodeproj */;
},
{
ProductGroup = ADBDB9201DFEBF0600ED6528 /* Products */;
ProjectRef = ADBDB91F1DFEBF0600ED6528 /* RCTBlob.xcodeproj */;
},
{
ProductGroup = 00C302B61ABCB90400DB3ED1 /* Products */;
ProjectRef = 00C302B51ABCB90400DB3ED1 /* RCTGeolocation.xcodeproj */;
@ -748,10 +774,10 @@
remoteRef = 3DAD3E981DF850E9000B6D8A /* PBXContainerItemProxy */;
sourceTree = BUILT_PRODUCTS_DIR;
};
3DAD3EA31DF850E9000B6D8A /* libReact.a */ = {
3DAD3EA31DF850E9000B6D8A /* libReact-tvOS.a */ = {
isa = PBXReferenceProxy;
fileType = archive.ar;
path = libReact.a;
path = "libReact-tvOS.a";
remoteRef = 3DAD3EA21DF850E9000B6D8A /* PBXContainerItemProxy */;
sourceTree = BUILT_PRODUCTS_DIR;
};
@ -825,6 +851,13 @@
remoteRef = 832341B41AAA6A8300B99B32 /* PBXContainerItemProxy */;
sourceTree = BUILT_PRODUCTS_DIR;
};
ADBDB9271DFEBF0700ED6528 /* libRCTBlob.a */ = {
isa = PBXReferenceProxy;
fileType = archive.ar;
path = libRCTBlob.a;
remoteRef = ADBDB9261DFEBF0700ED6528 /* PBXContainerItemProxy */;
sourceTree = BUILT_PRODUCTS_DIR;
};
/* End PBXReferenceProxy section */
/* Begin PBXResourcesBuildPhase section */

2
examples/Horizontal/ios/Horizontal/AppDelegate.m
View File

@ -18,7 +18,7 @@
{
NSURL *jsCodeLocation;
jsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index.ios" fallbackResource:nil];
jsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index" fallbackResource:nil];
RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation
moduleName:@"Horizontal"

6
examples/Horizontal/ios/Horizontal/Images.xcassets/Contents.json Normal file
View File

@ -0,0 +1,6 @@
{
"info" : {
"version" : 1,
"author" : "xcode"
}
}

13
examples/Horizontal/package.json
View File

@ -1,13 +1,14 @@
{
"name": "Horizontal",
"name": "Horizontal",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "node node_modules/react-native/local-cli/cli.js start"
"start": "node node_modules/react-native/local-cli/cli.js start",
"test": "jest"
},
"dependencies": {
"react": "16.0.0-alpha.12",
"react-native": "0.46.3",
"react-native-sortable-list": "file:../.."
"react": "16.0.0",
"react-native": "0.50.3",
"react-native-sortable-list": "0.0.17"
}
}
}

1985
examples/Horizontal/yarn.lock
View File

File diff suppressed because it is too large Load Diff