status-im
/
react-native
mirror of https://github.com/status-im/react-native.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

Full width styling for quick actions 

Summary: - Used absolute positioning to render full-width quick actions

Reviewed By: fkgozali

Differential Revision: D3302467

fbshipit-source-id: cdcac88b20eff7a71be1ab8bb39e6888216dad84
This commit is contained in:
Fred Liu 2016-05-17 01:35:47 -07:00 committed by Facebook Github Bot 3
parent a52e684121
commit 12fcacb58f
3 changed files with 9 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
Libraries/Experimental/SwipeableRow/SwipeableQuickActionButton.js
View File

@ -78,8 +78,8 @@ const styles = StyleSheet.create({
width: 76, width: 76,
}, },
image: { image: {
height: 30, height: 33,
width: 30, width: 33,
}, },
text: { text: {
color: '#ffffff', color: '#ffffff',

1
Libraries/Experimental/SwipeableRow/SwipeableQuickActions.js
View File

@ -61,7 +61,6 @@ const SwipeableQuickActions = React.createClass({
const styles = StyleSheet.create({ const styles = StyleSheet.create({
background: { background: {
alignSelf: 'flex-end',
flex: 1, flex: 1,
flexDirection: 'row', flexDirection: 'row',
justifyContent: 'flex-end', justifyContent: 'flex-end',

18
Libraries/Experimental/SwipeableRow/SwipeableRow.js
View File

@ -122,13 +122,7 @@ const SwipeableRow = React.createClass({
}, },
render(): ReactElement { render(): ReactElement {
const slideoutStyle = [ const slideoutStyle = [styles.slideOutContainer];
styles.slideOutContainer,
{
right: -this.state.scrollViewWidth,
width: this.state.scrollViewWidth,
},
];
if (Platform.OS === 'ios') { if (Platform.OS === 'ios') {
slideoutStyle.push({opacity: this.state.isSwipeableViewRendered ? 1 : 0}); slideoutStyle.push({opacity: this.state.isSwipeableViewRendered ? 1 : 0});
} }
@ -244,8 +238,7 @@ const SwipeableRow = React.createClass({
_onLayoutChange(event: Object): void { _onLayoutChange(event: Object): void {
const width = event.nativeEvent.layout.width; const width = event.nativeEvent.layout.width;
if (width && width !== this.state.scrollViewWidth) {
if (width !== this.state.scrollViewWidth) {
this.setState({ this.setState({
scrollViewWidth: width, scrollViewWidth: width,
}); });
@ -259,9 +252,12 @@ const styles = StyleSheet.create({
flexDirection: 'row', flexDirection: 'row',
}, },
slideOutContainer: { slideOutContainer: {
bottom: 0,
flex: 1, flex: 1,
flexDirection: 'column', left: 0,
alignItems: 'flex-end', position: 'absolute',
right: 0,
top: 0,
}, },
}); });