react-native-training / react-native-animations

React Native Animations

React Native Animations

This repository contains the following branches:

1. Animated.timing animation

2. Animated.timing multiple animation

3. Animated.spring animation

4. Animated.parallel animation

5. Animated.sequence animation

6. Animated.stagger animation

react-native-animations's Issues

Error: Couldn't find preset "react-native" relative to directory

To fix this runtime error .babelrc needs to be created in the project directory.
The file text should read: { "presets": ["react-native"] }.

I keep getting this error 'Attempted to assign readonly property'

I followed the example apps in this repo, but i get this error. Can you Yelp me out please

import { StyleSheet, Text, AppRegistry, ImageBackground, Image, Animated, Easing, View } from 'react-native';
//import { Overlay} from "@shoutem/ui";
import { Item, Form, Input, Button, Icon} from 'native-base';
import style from './styles.js';
export default class App extends React.Component {

  constructor () {
    super();
      this.blur = new Animated.Value(0),
      this.slide = new Animated.Value(-100)
  }

  // React Lifecycle method, start an Animation
  componentDidMount () {
    Animated.sequence([
      Animated.timing(this.blur, {
        toValue: 2,
        duration: 1500
      }),
      Animated.timing(this.slide, {
        toValue: 0,
        easing: Easing.in(Easing.ease),
        duration: 2000
      })
    ]).start();
  }

  render() {
    //let { blur, slide } = this.state;
    return (
      <Animated.View>
      <ImageBackground blurRadius={this.blur} source={require('./src/img/bad.jpg')} style={style.backGroundImage}>
        <Image source={require('./src/img/Cubix.png')}/>
        <Animated.View style={{transform :[{translateY : this.slide}]}}>

        <Item style={style.input} rounded>
          <Icon style={{ color: 'white' }} active name='person'/>
          <Input style={{ color: 'white' }} placeholderTextColor="white" placeholder='Email' />
        </Item>

        <Item style={style.input} rounded>
          <Icon style={{ color: 'white' }} active name='lock' />
          <Input style={{ color: 'white' }} secureTextEntry={true} placeholderTextColor="white" placeholder='Password' />
        </Item>

        <Button block>
          <Text style={{color :'white'}}>Next</Text>
        </Button>      
          </Animated.View>
      </ImageBackground>
      </Animated.View>
    );
  }
}
AppRegistry.registerComponent('AwesomeProject', () => App);```