Custom React Native component doesn't animate - react-native

Question

So I've created a custom component in React Native, which just wraps a TouchableOpacity and turns it into a nice button component. Though when I use an animated version of the component (through createAnimatedComponent) it does not move, anyone know why?
const AnimatedMainButton = Animated.createAnimatedComponent(MainButton);
...
render() {
return <AnimatedMainButton style={{transform: [{translateX: 100}]}} />
}
...
import React, { Component } from 'react';
import {
Text,
View,
StyleSheet,
TouchableOpacity,
} from 'react-native';
export default class MainButton extends Component {
static propTypes = {
title: React.PropTypes.string.isRequired,
onPress: React.PropTypes.func.isRequired,
color: React.PropTypes.string,
textColor: React.PropTypes.string,
};
static defaultProps = {
color: '#FFFFFF',
textColor: '#000000',
};
render() {
const { title, onPress, color, textColor } = this.props;
return (
<TouchableOpacity style={[styles.mainbutton, {backgroundColor: color}]} onPress={onPress}>
<Text style={[styles.mainbuttontext, {color: textColor}]}>{title}</Text>
</TouchableOpacity>
)
}
}
const styles = StyleSheet.create({
mainbutton: {
width: '80%',
height: 60,
alignItems: 'center',
justifyContent: 'center',
borderRadius: 10,
shadowColor: '#000000',
shadowOffset: { width: 0, height: 10 },
shadowOpacity: 0.8,
shadowRadius: 20,
elevation: 5,
},
mainbuttontext: {
fontSize: 40,
fontFamily: 'DroidSerif',
},
});

Answer 1

You need to pass down the style to the elements contained within the custom component. duh! Otherwise any transformations done by AnimatedComponent, or parents of, won't reach the native base components.
return (
<TouchableOpacity style={[this.props.style, ...