Files
react-navigation/packages/stack/src/views/StackView/StackViewCard.js
Brent Vatne b9bc7b147d Merge pull request #5 from react-navigation/useScreens
Use ScreenContainer and Screen components in stack - currently they fallback to RN's View
2018-08-14 08:56:00 -07:00

52 lines
1.1 KiB
JavaScript

import React from 'react';
import { StyleSheet } from 'react-native';
import { Screen } from './screens';
import createPointerEventsContainer from './createPointerEventsContainer';
const EPS = 1e-5;
/**
* Component that renders the scene as card for the <StackView />.
*/
class Card extends React.Component {
render() {
const {
children,
pointerEvents,
style,
position,
scene: { index },
} = this.props;
const active = position.interpolate({
inputRange: [index, index + 1 - EPS, index + 1],
outputRange: [1, 1, 0],
extrapolate: 'clamp',
});
return (
<Screen
pointerEvents={pointerEvents}
ref={this.props.onComponentRef}
style={[styles.main, style]}
active={active}
>
{children}
</Screen>
);
}
}
const styles = StyleSheet.create({
main: {
...StyleSheet.absoluteFillObject,
backgroundColor: '#E9E9EF',
shadowColor: 'black',
shadowOffset: { width: 0, height: 0 },
shadowOpacity: 0.2,
shadowRadius: 5,
},
});
Card = createPointerEventsContainer(Card);
export default Card;