Skip to content

Commit 708a840

Browse files
arqexarqex
committed
Fixes playground for mobile browsers
1 parent 91fdd02 commit 708a840

11 files changed

Lines changed: 50 additions & 62 deletions

File tree

‎playground/src/examples/HandleTouches.js‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import React, { Component } from 'react';
22
import { StyleSheet, FlatList, TouchableOpacity, Text } from 'react-native';
33
import Interactable from 'react-native-interactable';
4+
import Screen from '../Screen'
45

56
export default class HandleTouches extends Component {
67

@@ -15,10 +16,11 @@ export default class HandleTouches extends Component {
1516
);
1617
}
1718
renderRow = (data) => {
19+
let move = Screen.width / 4 * 3
1820
return (
1921
<Interactable.View
2022
horizontalOnly={true}
21-
snapPoints={[{x: 360},{x: 0},{x: -360}]}>
23+
snapPoints={[{x: move},{x: 0},{x: -move}]}>
2224
<TouchableOpacity style={styles.card} onPress={this.onCardPress}>
2325
<TouchableOpacity style={styles.button} onPress={this.onButtonPress.bind(this, 'A')}>
2426
<Text style={{textAlign: 'center'}}>Button A</Text>

‎playground/src/examples/SwipeableCard.js‎

Lines changed: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,21 @@
11
import React, { Component } from 'react';
22
import { StyleSheet, View } from 'react-native';
33
import Interactable from 'react-native-interactable';
4+
import Screen from '../Screen'
45

56
export default class SwipeableCard extends Component {
67
render() {
8+
let move = Screen.width / 4 * 3
79
return (
810
<View style={styles.container}>
911

1012
<Interactable.View
1113
key="first"
1214
horizontalOnly={true}
1315
snapPoints={[
14-
{x: 360},
16+
{x: move},
1517
{x: 0, damping: 0.5},
16-
{x: -360}
18+
{x: -move}
1719
]}>
1820
<View style={styles.card} />
1921
</Interactable.View>
@@ -22,9 +24,9 @@ export default class SwipeableCard extends Component {
2224
key="second"
2325
horizontalOnly={true}
2426
snapPoints={[
25-
{x: 360},
27+
{x: move},
2628
{x: 0},
27-
{x: -360}
29+
{x: -move}
2830
]}>
2931
<View style={styles.card} />
3032
</Interactable.View>
@@ -33,9 +35,9 @@ export default class SwipeableCard extends Component {
3335
key="third"
3436
horizontalOnly={true}
3537
snapPoints={[
36-
{x: 360},
38+
{x: move},
3739
{x: 0, damping: 0.8},
38-
{x: -360}
40+
{x: -move}
3941
]}>
4042
<View style={styles.card} />
4143
</Interactable.View>

‎playground/src/real-life-examples/CollapsibleCalendar.js‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
import React, { Component } from 'react';
22
import { StyleSheet, View, Dimensions, Image, Text, Animated } from 'react-native';
33
import Interactable from 'react-native-interactable';
4+
import Screen from '../Screen'
45

5-
const Screen = Dimensions.get('window');
66
const Calendar = {
7-
width: 480 - 16,
8-
height: (480 -16) / 944 * 793
7+
width: Screen.width - 16,
8+
height: (Screen.width -16) / 944 * 793
99
}
1010

1111
export default class CollapsibleFilter extends Component {

‎playground/src/real-life-examples/CollapsibleFilter.js‎

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,7 @@
11
import React, { Component } from 'react';
2-
import { StyleSheet, View, Dimensions, Image, Text, Animated, TouchableOpacity } from 'react-native';
2+
import { StyleSheet, View, Image, Text, Animated, TouchableOpacity } from 'react-native';
33
import Interactable from 'react-native-interactable';
4-
5-
const Screen = Dimensions.get('window');
4+
import Screen from '../Screen'
65

76
export default class CollapsibleFilter extends Component {
87
constructor(props) {
@@ -147,7 +146,7 @@ const styles = StyleSheet.create({
147146
color: 'white'
148147
},
149148
photo: {
150-
width: 480-40,
149+
width: Screen.width-40,
151150
height: 190,
152151
marginBottom: 20
153152
}

‎playground/src/real-life-examples/MapPanel.js‎

Lines changed: 9 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,14 @@
11
import React, { Component } from 'react';
2-
import { StyleSheet, View, Dimensions, Image, Text, Animated, TouchableOpacity } from 'react-native';
2+
import { StyleSheet, View, Image, Text, Animated, TouchableOpacity } from 'react-native';
33
import Interactable from 'react-native-interactable';
4+
import Screen from '../Screen'
45

5-
const Screen = {
6-
width: 480,
7-
height: Dimensions.get('window').height - 75
8-
}
6+
const height = Screen.height - 75
97

108
export default class MapPanel extends Component {
119
constructor(props) {
1210
super(props);
13-
this._deltaY = new Animated.Value(Screen.height-100);
11+
this._deltaY = new Animated.Value(height-100);
1412
}
1513
render() {
1614
return (
@@ -25,16 +23,16 @@ export default class MapPanel extends Component {
2523
style={[styles.panelContainer, {
2624
backgroundColor: 'black',
2725
opacity: this._deltaY.interpolate({
28-
inputRange: [0, Screen.height-100],
26+
inputRange: [0, height-100],
2927
outputRange: [0.5, 0],
3028
extrapolateRight: 'clamp'
3129
})
3230
}]} />
3331
<Interactable.View
3432
verticalOnly={true}
35-
snapPoints={[{y: 40}, {y: Screen.height-300}, {y: Screen.height-100}]}
33+
snapPoints={[{y: 40}, {y: height-300}, {y: height-100}]}
3634
boundaries={{top: -300}}
37-
initialPosition={{y: Screen.height-100}}
35+
initialPosition={{y: height-100}}
3836
animatedValueY={this._deltaY}>
3937
<View style={styles.panel}>
4038
<View style={styles.panelHeader}>
@@ -73,7 +71,7 @@ const styles = StyleSheet.create({
7371
right: 0
7472
},
7573
panel: {
76-
height: Screen.height + 300,
74+
height: height + 300,
7775
padding: 20,
7876
backgroundColor: '#f7f5eee8',
7977
borderTopLeftRadius: 20,
@@ -121,7 +119,7 @@ const styles = StyleSheet.create({
121119
marginTop: 30
122120
},
123121
map: {
124-
height: Screen.height,
122+
height: height,
125123
width: Screen.width
126124
}
127125
});

‎playground/src/real-life-examples/NotifPanel.js‎

Lines changed: 8 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,9 @@
11
import React, { Component } from 'react';
22
import { StyleSheet, View, Dimensions, Image, Text, Platform } from 'react-native';
33
import Interactable from 'react-native-interactable';
4+
import Screen from '../Screen'
45

5-
const Screen = {
6-
width: 480,
7-
height: Dimensions.get('window').height - 75
8-
}
6+
let height = Screen.height - 75
97

108
export default class NotifPanel extends Component {
119
render() {
@@ -21,16 +19,16 @@ export default class NotifPanel extends Component {
2119
<View style={styles.panelContainer}>
2220
<Interactable.View
2321
verticalOnly={true}
24-
snapPoints={[{y: 0, tension: 0, damping: 1}, {y: -Screen.height + 80}]}
25-
gravityPoints={[{y: 0, strength: 220, falloff: Screen.height*8, damping: 0.7, influenceArea: {top: (-Screen.height + 80) * 0.5}}]}
26-
initialPosition={{y: -Screen.height + 80}}
27-
boundaries={{top: -Screen.height, bottom: 0, bounce: 2, haptics: true}}>
22+
snapPoints={[{y: 0, tension: 0, damping: 1}, {y: -height + 80}]}
23+
gravityPoints={[{y: 0, strength: 220, falloff: height*8, damping: 0.7, influenceArea: {top: (-height + 80) * 0.5}}]}
24+
initialPosition={{y: -height + 80}}
25+
boundaries={{top: -height, bottom: 0, bounce: 2, haptics: true}}>
2826
<View style={styles.panel}>
2927
<Text style={styles.panelHeader}>Today</Text>
3028
<Notification title='First Notification' body='This is the body of the first notification' />
3129
<Notification title='Second Notification' body='This is the body of the 2nd notification' />
3230
<Notification title='Third Notification' body='This is the body of the 3rd notification' />
33-
{Screen.height <= 500-75 ? false :
31+
{height <= 500-75 ? false :
3432
<View>
3533
<Text style={styles.panelHeader}>Yesterday</Text>
3634
<Notification title='Fourth Notification' body='This is the body of the 4th notification' />
@@ -78,7 +76,7 @@ const styles = StyleSheet.create({
7876
right: 0
7977
},
8078
panel: {
81-
height: Screen.height + 2,
79+
height: height + 2,
8280
backgroundColor: '#182e43f0',
8381
padding: 15,
8482
paddingTop: 30,

‎playground/src/real-life-examples/NowCard.js‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,7 @@ import React, { Component } from 'react';
22
import { StyleSheet, View, Dimensions, Image, Text, Animated } from 'react-native';
33
import Slider from 'react-native-slider';
44
import Interactable from 'react-native-interactable';
5-
6-
const Screen = Dimensions.get('window');
5+
import Screen from '../Screen'
76

87
export default class NowCard extends Component {
98
constructor(props) {
@@ -15,15 +14,16 @@ export default class NowCard extends Component {
1514
};
1615
}
1716
render() {
17+
let move = Screen.width / 6 * 5
1818
return (
1919
<View style={styles.container}>
2020

2121
<Interactable.View
2222
horizontalOnly={true}
2323
snapPoints={[
24-
{x: 360},
24+
{x: move},
2525
{x: 0, damping: 1-this.state.damping, tension: this.state.tension},
26-
{x: -360}
26+
{x: -move}
2727
]}
2828
animatedValueX={this._deltaX}>
2929
<Animated.View style={[styles.card, {
@@ -81,7 +81,7 @@ const styles = StyleSheet.create({
8181
backgroundColor: '#efefef',
8282
},
8383
card: {
84-
width: 480 - 40,
84+
width: Screen.width - 40,
8585
backgroundColor: 'white',
8686
borderRadius: 6,
8787
marginHorizontal: 20,
@@ -93,7 +93,7 @@ const styles = StyleSheet.create({
9393
elevation: 4
9494
},
9595
image: {
96-
width: 480 - 40,
96+
width: Screen.width - 40,
9797
height: Screen.height <= 500 ? 70 : 150
9898
},
9999
header: {
@@ -119,7 +119,7 @@ const styles = StyleSheet.create({
119119
playground: {
120120
marginTop: Screen.height <= 500 ? 10 : 40,
121121
padding: 20,
122-
width: 480 - 40,
122+
width: Screen.width - 40,
123123
backgroundColor: '#459FED',
124124
alignItems: 'stretch'
125125
},

‎playground/src/real-life-examples/RealChatHeads.js‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,10 @@
11
import React, { Component } from 'react';
2-
import { StyleSheet, View, Image, Animated, Dimensions } from 'react-native';
2+
import { StyleSheet, View, Image, Animated } from 'react-native';
33
import Interactable from 'react-native-interactable';
4+
import Screen from '../Screen'
45

5-
const widthFactor = 480 / 375;
6-
const heightFactor = (Dimensions.get('window').height - 75) / 667;
6+
const widthFactor = Screen.width / 375;
7+
const heightFactor = (Screen.height - 75) / 667;
78

89
const showSecondFace = true;
910

‎playground/src/real-life-examples/RowActions1.js‎

Lines changed: 2 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -2,11 +2,7 @@ import React, { Component } from 'react';
22
import { StyleSheet, View, Text, Animated, TouchableOpacity, TouchableHighlight, Dimensions } from 'react-native';
33
import Slider from 'react-native-slider';
44
import Interactable from 'react-native-interactable';
5-
6-
const Screen = {
7-
width: 480,
8-
height: Dimensions.get('window').height
9-
}
5+
import Screen from '../Screen'
106

117
export default class RowActions1 extends Component {
128
constructor(props) {
@@ -244,7 +240,7 @@ const styles = StyleSheet.create({
244240
playground: {
245241
marginTop: Screen.height <= 500 ? 0 : 80,
246242
padding: 20,
247-
width: 480 - 40,
243+
width: Screen.width - 40,
248244
backgroundColor: '#459FED',
249245
alignItems: 'stretch',
250246
alignSelf: 'center'

‎playground/src/real-life-examples/RowActions2.js‎

Lines changed: 2 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,8 @@
11
import React, { Component } from 'react';
2-
import { StyleSheet, View, Image, Text, Animated, TouchableOpacity, Dimensions } from 'react-native';
2+
import { StyleSheet, View, Image, Text, Animated, TouchableOpacity } from 'react-native';
33
import Slider from 'react-native-slider';
44
import Interactable from 'react-native-interactable';
5-
6-
const Screen = {
7-
width: 480,
8-
height: Dimensions.get('window')
9-
}
5+
import Screen from '../Screen'
106

117
export default class RowActions2 extends Component {
128
constructor(props) {

0 commit comments

Comments
 (0)