feat: if cardStyle has flexed specified, set the same value on P… (#206)

* feat: if cardStyle has flexed specified, set the same value on PointerEventsView

* Stop producing empty object if no override is needed

* Change produced false to undefined

* Update cardStyle to handle arrays

* Update code to use StyleSheet.flatten

* Use better styling

* Update snapshots
This commit is contained in:
Tomasz Czajęcki
2019-09-10 22:51:58 +02:00
parent 4c012ad1ea
commit f4c8078da8
5 changed files with 69 additions and 0 deletions

View File

@@ -0,0 +1,50 @@
import React from 'react';
import { View, Text, StyleSheet, Dimensions } from 'react-native';
import Animated from 'react-native-reanimated';
const HEIGHT = Dimensions.get('screen').height;
const { interpolate } = Animated;
const DragLimitedToModal = () => (
<View style={styles.modal}>
<Text style={styles.text}>Adjusts to the size of text</Text>
</View>
);
DragLimitedToModal.navigationOptions = {
gestureDirection: 'vertical',
gestureResponseDistance: { vertical: HEIGHT },
cardTransparent: true,
cardStyleInterpolator: ({ current }) => {
const translateY = interpolate(current.progress, {
inputRange: [0, 1],
outputRange: [HEIGHT, 0],
});
return {
cardStyle: {
transform: [{ translateY }],
flex: undefined,
},
containerStyle: {
alignItems: 'center',
justifyContent: 'center',
},
};
},
};
const styles = StyleSheet.create({
modal: {
padding: 30,
borderRadius: 15,
backgroundColor: '#000',
},
text: {
fontSize: 18,
color: '#fff',
},
});
export default DragLimitedToModal;