Why animation does not work? - animation

Question

Why animation does not work?
All code
import React, { Component } from 'react';
import {
AppRegistry,
View,
Image,
StyleSheet,
WebView,
Linking,
TouchableOpacity,
Animated,
Keyboard,
TextInput,
KeyboardAvoidingView
} from 'react-native';
import {
Button,
Text,
Container,
Card,
CardItem,
Body,
Content,
Header,
Title,
Left,
Icon,
Right,
Form,
Picker,
Item
} from 'native-base';
import { Actions } from 'react-native-router-flux';
import { styles, colors, paddings, fonts } from '../styles';
import DefaultInput from "./DefaultInput";
import validate from "./Validation";
import ModalComponent from "./Modal";
import ModalDropdown from 'react-native-modal-dropdown';
import { LinearGradient } from 'expo';
import CheckBox from 'react-native-check-box';
class CheckIn extends Component {
constructor(props) {
super(props);
this.inputMarginTop = new Animated.Value(8);
}
componentWillMount () {
this.keyboardWillShowSub = Keyboard.addListener('keyboardWillShow', this.keyboardWillShow);
this.keyboardWillHideSub = Keyboard.addListener('keyboardWillHide', this.keyboardWillHide);
}
componentWillUnmount() {
this.keyboardWillShowSub.remove();
this.keyboardWillHideSub.remove();
}
keyboardWillShow = (event) => {
Animated.timing(this.inputMarginTop, {
duration: event.duration,
toValue: 2,
}).start();
};
keyboardWillHide = (event) => {
Animated.timing(this.inputMarginTop, {
duration: event.duration,
toValue: 8,
}).start();
};
render() {
console.log(this.inputMarginTop._value);
return (
<View style={{height: '100%', alignItems: 'center', flexDirection: 'column'}}>
<TextInput
style={{width: '90%', height: 20, borderWidth:1, marginTop: 100}}
/>
<View style={{width: '90%'}}>
<Animated.Text style={{marginLeft: 10, marginBottom: 8, marginTop: `${this.inputMarginTop}%`}}>Имя</Animated.Text>
</View>
</View>
);
}
}
export default CheckIn;
Important parts of the code
this.inputMarginTop = new Animated.Value(8);
<View style={{width: '90%'}}>
<Animated.Text style={{marginLeft: 10, marginBottom: 8, marginTop: `${this.inputMarginTop}%`}}>Имя</Animated.Text>
</View>
Why animation does not work? Why animation does not work? Why animation does not work? Why animation does not work? Why animation does not work? Why animation does not work? Why animation does not work? Why animation does not work? Why animation does not work? Why animation does not work?

Answer 1

Fist of all, which device are you running on? if it is Android, then it will not work, find it here https://facebook.github.io/react-native/docs/keyboard.html
keyboardWillShow as well as keyboardWillHide are generally not
available on Android since there is no native corresponding event.
If it is iOS, then you should use Animated.View instead of Animated.Text.
Try the following code:
<Animated.View style={{width: '90%', marginLeft: 10, marginBottom: 8, marginTop: `${this.inputMarginTop}%`}}>
<Text>Имя</Text>
</Animated.View>
Generally, for Text component, you should move all the position/layout related style to its parent View, the style in Text is normally related to font itself, like color, fontSize, fontStyle etc.
Also try console.log(event.duration) to make sure the event contains duration which is not 0.