oblador / react-native-animatable

Standard set of easy to use animations and declarative transitions for React Native
MIT License
9.82k stars 701 forks source link

Styled Components ThemeProvider isn't working with react-native-animatable #285

Open ZahraMirali opened 5 years ago

ZahraMirali commented 5 years ago

I have a Text component created with Styled Components. It works correctly without React Native Animatable because it has access to my theme but when I use in with createAnimatableComponent it doesn't recognize theme and it doesn't work correctly. it's Animation works fine. my Problem is with it's Style (props.theme)

My App.js:

<ThemeProvider theme={lightTheme}>
<AnimatedText animate={'bounceInRight'} >It Is an Animated Text</AnimatedText>
</ThemeProvider>

My AnimatedText.js:

import * as Animatable from 'react-native-animatable';
import Text from "./Text.style";
class AnimateText extends React.Component {
    render () {
        return (
            <Text
                {...this.props}
            />
        )
    }
}
const AnimatedText = Animatable.createAnimatableComponent(AnimateText);
export default AnimatedText;

My Text.style.js:

import styled from "styled-components/native";
const TextStyle = styled.Text`
  font-size: ${props => props.theme.fontSize};
`;
export default TextStyle;