Skip to content

Commit c749cec

Browse files
osdnkosdnk
authored
Add readme, eslint and example
1 parent 765cb43 commit c749cec

24 files changed

+7736
-183
lines changed

‎.eslintrc.js

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
module.exports = {
2+
"env": {
3+
"browser": true,
4+
"es6": true
5+
},
6+
"parser": "babel-eslint",
7+
'extends': [
8+
'eslint:recommended',
9+
'plugin:react/recommended'
10+
],
11+
"settings": {
12+
"react": {
13+
"pragma": "React",
14+
"version": "16.3",
15+
},
16+
},
17+
"parserOptions": {
18+
"ecmaFeatures": {
19+
"jsx": true
20+
},
21+
"ecmaVersion": 2018,
22+
"sourceType": "module"
23+
},
24+
"plugins": [
25+
"react"
26+
],
27+
"rules": {
28+
"indent": [
29+
"error",
30+
2
31+
],
32+
"max-len": [
33+
0,
34+
80,
35+
],
36+
"no-undef": [
37+
0
38+
],
39+
"linebreak-style": [
40+
"error",
41+
"unix"
42+
],
43+
"quotes": [
44+
"error",
45+
"single"
46+
],
47+
"semi": [
48+
"error",
49+
"never"
50+
],
51+
"react/prop-types": [
52+
0
53+
]
54+
}
55+
};

‎Example/.gitignore

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
node_modules/**/*
2+
.expo/*
3+
npm-debug.*
4+
*.jks
5+
*.p12
6+
*.key
7+
*.mobileprovision

‎Example/App.js

Lines changed: 96 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,96 @@
1+
import React from 'react';
2+
import { Text, View, FlatList, StyleSheet, TouchableOpacity, YellowBox } from 'react-native';
3+
import { createStackNavigator, createAppContainer } from 'react-navigation';
4+
5+
import Map from './Map';
6+
import BlurToolbar from './BlurToolbar';
7+
import Imperative from './Imperative';
8+
import Test from './Test';
9+
10+
const SCREENS = {
11+
map: {
12+
screen: Map,
13+
title: 'Apple Map',
14+
},
15+
toolbar: {
16+
screen: BlurToolbar,
17+
title: 'Blur Toolbar',
18+
},
19+
imperative: {
20+
screen: Imperative,
21+
title: 'Imperative managed view',
22+
},
23+
test: {
24+
screen: Test,
25+
title: 'Test',
26+
},
27+
};
28+
29+
class MainScreen extends React.Component {
30+
static navigationOptions = {
31+
title: 'Bottom Sheet Examples',
32+
};
33+
render() {
34+
const data = Object.keys(SCREENS).map(key => ({ key }));
35+
return (
36+
<FlatList
37+
style={styles.list}
38+
data={data}
39+
ItemSeparatorComponent={ItemSeparator}
40+
renderItem={props => (
41+
<MainScreenItem
42+
{...props}
43+
onPressItem={({ key }) => this.props.navigation.navigate(key)}
44+
/>
45+
)}
46+
/>
47+
);
48+
}
49+
}
50+
51+
const ItemSeparator = () => <View style={styles.separator} />;
52+
53+
class MainScreenItem extends React.Component {
54+
_onPress = () => this.props.onPressItem(this.props.item);
55+
render() {
56+
const { key } = this.props.item;
57+
return (
58+
<TouchableOpacity style={styles.button} onPress={this._onPress}>
59+
<Text style={styles.buttonText}>{SCREENS[key].title || key}</Text>
60+
</TouchableOpacity>
61+
);
62+
}
63+
}
64+
65+
const ExampleApp = createAppContainer(createStackNavigator(
66+
{
67+
Main: { screen: MainScreen },
68+
...SCREENS,
69+
},
70+
{
71+
initialRouteName: 'Main',
72+
}
73+
));
74+
75+
const styles = StyleSheet.create({
76+
list: {
77+
backgroundColor: '#EFEFF4',
78+
},
79+
separator: {
80+
height: 1,
81+
backgroundColor: '#DBDBE0',
82+
},
83+
buttonText: {
84+
backgroundColor: 'transparent',
85+
},
86+
button: {
87+
flex: 1,
88+
height: 60,
89+
padding: 10,
90+
flexDirection: 'row',
91+
alignItems: 'center',
92+
backgroundColor: '#fff',
93+
},
94+
});
95+
96+
export default ExampleApp;

‎Example/BlurToolbar.js

Lines changed: 133 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,133 @@
1+
import React from 'react';
2+
import { Image, StyleSheet, Text, TouchableWithoutFeedback, View } from 'react-native';
3+
import BottomSheet from 'reanimated-bottom-sheet';
4+
import Animated from 'react-native-reanimated'
5+
6+
7+
export default class Example extends React.Component {
8+
renderInner = () => (
9+
<View style={styles.panel}>
10+
<View style={styles.panelButton}>
11+
<Text style={styles.panelButtonTitle}>Copy</Text>
12+
</View>
13+
<View style={styles.panelButton}>
14+
<Text style={styles.panelButtonTitle}>Paste</Text>
15+
</View>
16+
<View style={styles.panelButton}>
17+
<Text style={styles.panelButtonTitle}>Crop</Text>
18+
</View>
19+
<View style={styles.panelButton}>
20+
<Text style={styles.panelButtonTitle}>Search</Text>
21+
</View>
22+
<View style={styles.panelButton}>
23+
<Text style={styles.panelButtonTitle}>Send</Text>
24+
</View>
25+
</View>
26+
);
27+
28+
renderHeader = () => (
29+
<View style={styles.header}/>
30+
)
31+
32+
fall = new Animated.Value(1)
33+
34+
render() {
35+
return (
36+
<View style={styles.container}>
37+
<BottomSheet
38+
snapPoints = {[500, 50]}
39+
renderContent = {this.renderInner}
40+
renderHeader = {this.renderHeader}
41+
initialSnap = {1}
42+
callbackNode={this.fall}
43+
enabledInnerScrolling={false}
44+
/>
45+
<Animated.View style={{ alignItems: 'center', opacity: Animated.add(0.1,Animated.multiply(this.fall, 0.9)) }}>
46+
<Text style={{ position: 'absolute', zIndex: 1 }}>
47+
Swipe up from very bottom
48+
</Text>
49+
<Image style={styles.map} source={require('./assets/map-bg.jpg')} />
50+
51+
</Animated.View>
52+
</View>
53+
)
54+
}
55+
}
56+
57+
const IMAGE_SIZE = 200;
58+
59+
const styles = StyleSheet.create({
60+
container: {
61+
flex: 1,
62+
backgroundColor: '#2c2c2f',
63+
},
64+
box: {
65+
width: IMAGE_SIZE,
66+
height: IMAGE_SIZE,
67+
},
68+
panelContainer: {
69+
position: 'absolute',
70+
top: 0,
71+
bottom: 0,
72+
left: 0,
73+
right: 0,
74+
},
75+
panel: {
76+
height: 600,
77+
padding: 20,
78+
backgroundColor: '#2c2c2fAA',
79+
paddingTop: 20,
80+
borderTopLeftRadius: 20,
81+
borderTopRightRadius: 20,
82+
shadowColor: '#000000',
83+
shadowOffset: { width: 0, height: 0 },
84+
shadowRadius: 5,
85+
shadowOpacity: 0.4,
86+
},
87+
header: {
88+
width: '100%',
89+
height: 50,
90+
},
91+
panelHeader: {
92+
alignItems: 'center',
93+
},
94+
panelHandle: {
95+
width: 40,
96+
height: 8,
97+
borderRadius: 4,
98+
backgroundColor: '#00000040',
99+
marginBottom: 10,
100+
},
101+
panelTitle: {
102+
fontSize: 27,
103+
height: 35,
104+
},
105+
panelSubtitle: {
106+
fontSize: 14,
107+
color: 'gray',
108+
height: 30,
109+
marginBottom: 10,
110+
},
111+
panelButton: {
112+
padding: 20,
113+
borderRadius: 10,
114+
backgroundColor: '#292929',
115+
alignItems: 'center',
116+
marginVertical: 10,
117+
},
118+
panelButtonTitle: {
119+
fontSize: 17,
120+
fontWeight: 'bold',
121+
color: 'white',
122+
},
123+
photo: {
124+
width: '100%',
125+
height: 225,
126+
marginTop: 30,
127+
},
128+
map: {
129+
height: '100%',
130+
width: '100%',
131+
},
132+
});
133+

0 commit comments

Comments
 (0)