_release(evt, gestureState) {
const shadowStyle = {
opacity:1,
shadowColor: "#000",
shadowOpacity: 0,
shadowRadius: 0,
shadowOffset: {
height: 0,
width: 0,
}
};
if ((-1 < this.finalTopIndex) && (this.finalTopIndex <5) && (-1 < this.finalLeftIndex) && this.finalLeftIndex < 3) {
let box = this.refs["box" + this.finalIndex];
let top = this.finalTopIndex*this._width;
let left = this.finalLeftIndex*this._width;
box.setNativeProps({
style: {top,left,...shadowStyle},
});
LayoutAnimation.configureNext(this.animations);
} else {
console.log(this.topIndex,this.leftIndex)
let box = this.refs["box" + this.index];
let top = this.topIndex*this._width;
let left = this.leftIndex*this._width;
box.setNativeProps({
style: {top,left,...shadowStyle},
});
LayoutAnimation.configureNext(this.animations);
}
}
_endMove(evt, gestureState) {
this.finalTopIndex = Math.floor(this.top / this._width + 0.5);
this.finalLeftIndex = Math.floor(this.left / this._width + 0.5);
if ((-1 < this.finalTopIndex) && (this.finalTopIndex <5) && (-1 < this.finalLeftIndex) && this.finalLeftIndex < 3) {
this.finalIndex = this.finalTopIndex*3 + this.finalLeftIndex;
let days = this.state.days;
let movedBox = days[this.index];
days.splice(this.index, 1);
days.splice(this.finalIndex, 0, movedBox);
this.setState({
days
})
if (this.finalIndex != this.index) {
this.index = this.finalIndex;
this.setState({
selected: this.finalIndex,
});
}
LayoutAnimation.configureNext(this.animations);
} else {
let box = this.refs["box" + this.index];
let top = this.topIndex*this._width;
let left = this.leftIndex*this._width;
LayoutAnimation.configureNext(this.animations);
}
}
scrollEvent(e) {
const offset = e.nativeEvent.contentOffset.y;
if (offset > 100) {
LayoutAnimation.configureNext(LayoutAnimation.Presets.spring);
this.setState({br: 100, right: WINDOW_WIDTH - 75, scrolled: true})
} else if(offset < 100) {
LayoutAnimation.configureNext(LayoutAnimation.Presets.spring);
this.setState({br: 3, right: 25, scrolled: false})
}
}
onScrollChange({nativeEvent}) {
if (nativeEvent.contentOffset.y > this.props.headerHeight) {
if (this.state.headerPos === -this.props.headerHeight) {
LayoutAnimation.configureNext(LayoutAnimation.Presets.spring);
this.setState({headerPos: 0});
}
} else {
if (this.state.headerPos === 0) {
LayoutAnimation.configureNext(LayoutAnimation.Presets.spring);
this.setState({headerPos: -this.props.headerHeight});
}
}
}
onPanResponderRelease: (evt, gestureState) => {
// The user has released all touches while this view is the
// responder. This typically means a gesture has succeeded
LayoutAnimation.configureNext(LayoutAnimation.create(600, LayoutAnimation.Types.easeInEaseOut, LayoutAnimation.Properties.Opacity))
if (this.getContentOffSet(gestureState.dy) <= (headerHeight - 20) /2 ) {
this.stopAtTop = true
this.state.scrollTop.setValue(0)
} else {
this.stopAtTop = false
this.state.scrollTop.setValue(headerHeight)
}
},
keyboardDidHide (e) {
// Animation types easeInEaseOut/linear/spring
LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut)
this.setState({
visibleHeight: Metrics.screenHeight
})
}
handler(){
LayoutAnimation.spring();
this.setState({
w:this.state.w+15,
h:this.state.h+15
});
}
toggleAccountMenu(){
LayoutAnimation.configureNext(LayoutAnimation.Presets.easeIn);
this.setState({animationOutBuffer : this.state.animationOutBuffer ? false : true});
this.timer = setTimeout(() => {
this.setState({showAccountMenu: this.state.showAccountMenu ? false : true});
}, 400);
}
backToCollections(){
LayoutAnimation.configureNext(LayoutAnimation.Presets.easeIn);
this.setState({animationOutBuffer : this.state.animationOutBuffer ? false : true});
this.timer = setTimeout(() => {
this.componentDidMount();
}, 400);
}
zoomViewSpring(){
LayoutAnimation.configureNext(LayoutAnimation.Presets.spring, this.callback());
this.setState({
width: this.state.width > w_width ? w_width : this.state.width + 50,
height: this.state.height > 240 ? 280 : this.state.height + 40
});
}
_onMove(position: Point): void {
const newKeys = moveToClosest(this.state, position);
if (newKeys !== this.state.keys) {
LayoutAnimation.easeInEaseOut(); // animates layout update as one batch (step3: uncomment)
this.setState({keys: newKeys});
}
}
_onChange(state){
const {story} = state;
const comments = (story && story.comments) || [];
LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
this.setState({
data: story,
dataSource: this.state.dataSource.cloneWithRows(comments),
loading: state.storyLoading,
error: state.storyError,
});
if (isAndroid && story && story.url){
const externalLink = !/^item/i.test(story.url);
const url = externalLink ? story.url : `https://news.ycombinator.com/item?id=${story.id}`;
ChromeCustomTabsClient.mayLaunchUrl(url);
}
/* Note:
Title update doesn't work yet due to https://github.com/facebook/react-native/issues/476
Hopefully this works https://github.com/bjornco/react-native/commit/5fcb2a8673a2c17f4fdb03327008397a10a9c53a
*/
if (state.story && state.story.title){
var route = this.props.navigator.navigationContext.currentRoute;
if (!route) return;
if (route.title != state.story.title){
const {story} = state;
route.title = story.title;
if (!route.rightButtonIcon) route.rightButtonIcon = require('../images/share-icon.png');
route.onRightButtonPress = showActivity.bind(null, `https://news.ycombinator.com/item?id=${story.id}`, story.title);
this.props.navigator.replace(route);
}
}
}
export default ( React : Object ) => rs( React ).compose({
init () {
UIManager.setLayoutAnimationEnabledExperimental && UIManager.setLayoutAnimationEnabledExperimental(true);
this.state = {
big: false,
};
},
_onPress () {
LayoutAnimation.spring();
this.setState({ big: ! this.state.big });
},
render () {
const { big } = this.state;
return (
<View style={styles.container}>
<View style={styles.filler} />
<TouchableWithoutFeedback onPress={e => this._onPress()}>
<View style={[ big && styles.flex ]}>
<Text style={styles.text}>Click Me</Text>
</View>
</TouchableWithoutFeedback>
<View style={styles.filler} />
</View>
);
},
});
return new Promise(resolve => {
LayoutAnimation.configureNext({
duration: 300,
update: { type: 'easeInEaseOut' },
delete: { type: 'easeInEaseOut', property: 'opacity' }
}, resolve);
});
handlePressOut() {
const result = (basicWidth - this.state.innerCircle.width < 10) && (basicWidth - this.state.innerCircle.width > -5)
let message = result ? 'success' : ''
this.setState({ pressed: false, txt: message })
if(result) {
this.borderOut()
}else {
let callback = this.resetTarget.bind(this)
let animated = LayoutAnimation.Presets.easeInEaseOut
animated.duration = 300
LayoutAnimation.configureNext(animated, callback);
this.setState({
txt: 'failiure',
innerCircle: {
height: pupilDiameter,
width: pupilDiameter,
borderRadius: 25
},
targetCircle: {
height: basicWidth,
width: basicWidth,
borderRadius: basicWidth/2,
borderColor: 'red',
borderWidth: 5,
}
})
}
}
onKeyboardChange(event) {
if (!this.scrollView) {
return;
}
if (!event) {
this.scrollView.scrollTo({
x: 0,
y: 0,
animated: true
});
return;
}
const {duration, easing, endCoordinates} = event;
const height = this.relativeKeyboardHeight(endCoordinates);
if (duration && easing) {
LayoutAnimation.configureNext({
duration,
update: {
duration,
type: LayoutAnimation.Types[easing] || 'keyboard'
}
});
}
this.scrollView.scrollTo({
x: 0,
y: height,
animated: true
});
}
keyboardWillHide(e){
LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
this.setState({
bottomSize: 0
})
}
onToggleRecord = () => {
LayoutAnimation.easeInEaseOut();
this.setState({
showOnline: this.state.showRecord ? false : this.state.showOnline,
showRecord: !this.state.showRecord,
});
}
componentWillReceiveProps(nextProps) {
const duration = 450
if (nextProps.isStickied != this.props.isStickied) {
this.setState({ isStickied: nextProps.isStickied })
const toValue = nextProps.isStickied ? 0.05 : 1
Animated.timing(
this.animation,
{
toValue: toValue,
duration: duration,
easing: Easing.ease
}
).start()
LayoutAnimation.configureNext({
duration: duration,
create: {
type: LayoutAnimation.Types.linear,
property: LayoutAnimation.Properties.opacity,
},
update: {
type: LayoutAnimation.Types.easeInEaseOut,
},
})
}
}
deleteProduct(product){
LayoutAnimation.configureNext(LayoutAnimation.Presets.spring);
//key flag to animate out the deleted row
this.deletedProductIdAndSize = product.id + product.size
this.setState({
scrollEnabled: false,
dataSource: this.ds.cloneWithRows(this.state.products)
});
this.timer = setTimeout(() => {
DB.write(() => {
let cartItem = DB.objects('Cart').filtered('id = "'+product.id+'" AND size = "'+product.size+'"');
DB.delete(cartItem);
let newCart = DB.objects('Cart').sorted('date', true);
this.props.updateCart(newCart);
if(newCart.length > 0){
LayoutAnimation.configureNext(LayoutAnimation.Presets.spring);
this.setState({
products: newCart,
dataSource: this.ds.cloneWithRows(newCart)
});
}
});
}, 500);
}
componentWillUpdate(nextProps, nextState) {
const { render } = this.state;
if (render !== nextState.render) {
LayoutAnimation.easeInEaseOut();
}
}
onCellPress = (index, number, fixed) => {
if (!this.inited || this.solved) return;
if (isNumber(number)) {
if (isNumber(this.hightlightIndex))
this.cells[this.hightlightIndex].setHighlight(false);
if (isNumber(this.hightlightNumber))
this.setHighlight(this.hightlightNumber, false);
this.setHighlight(number, true);
this.hightlightNumber = number;
this.setState({
index: -1,
});
return;
}
if (index != this.state.index) {
LayoutAnimation.easeInEaseOut();
this.setState({ index });
}
if (isNumber(this.hightlightIndex))
this.cells[this.hightlightIndex].setHighlight(false);
this.cells[index].setHighlight(true);
this.hightlightIndex = index;
if (isNumber(this.hightlightNumber)) {
this.setHighlight(this.hightlightNumber, false);
this.hightlightNumber = null;
}
}
toggle() {
LayoutAnimation.spring();
this.setState({
boxWidth: this.state.boxWidth !== 200 ? 200 : 100,
boxHeight: this.state.boxHeight !== 100 ? 100 : 200
});
}
}, () => {
LayoutAnimation.spring()
// this.state.rowScale.setValue(0.9)
// Animated.timing(this.state.rowScale, {
// toValue: 1,
// duration: 300
// }).start()
})
resetKeyboardSpace () {
LayoutAnimation.configureNext(animations.keyboard.layout.spring)
this.commentsView && this.commentsView.setNativeProps({
style: {
height: contentHeight
}
})
}
updateKeyboardSpace (e) {
LayoutAnimation.configureNext(animations.keyboard.layout.spring)
this.commentsView && this.commentsView.setNativeProps({
style: {
height: contentHeight - e.endCoordinates.height
}
})
}
keyboardDidHide = (e) => {
// Animation types easeInEaseOut/linear/spring
LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut)
this.setState({
visibleHeight: Metrics.screenHeight,
topLogo: {width: Metrics.screenWidth}
})
}
addToOrder(item) {
order = this.state.basket;
order.push(item);
LayoutAnimation.configureNext(LayoutAnimation.Presets.spring);
this.setState({
basket: order,
});
}
this.props.validateActivity(info, (success, message) => {
if (success) {
console.log("Success!");
} else {
LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
this.setState({errorCode: message, loading: false});
}
});
module.exports = function(animation) {
var _animation = layoutAnimationConfigs[animation];
if (!_animation) {
_animation = layoutAnimationConfigs[DEFAULT_ANIMATION];
}
LayoutAnimation.configureNext(_animation);
}