CODEWITHSUNDEEP
reactjsreact-native
Mag
Mag

Reputation: 297

Animate paddingLeft React Native

i am trying animate paddingLeft property on IOS it isn't work

state = {
    paddingAnimation: new Animated.Value(40),
}; 
animate(){
    let {paddingAnimation} = this.state;
    Animated.timing( paddingAnimation, { toValue: 100, duration: 100}).start();
}
In Render
<AnimatedInputText style={[styles.search, {margin: paddingAnimation}]}>

It works on Android but not in IOS. Any solutions ?

Upvotes: 1

Views: 9247

Answers (1)

TheCodeTalker
TheCodeTalker

Reputation: 705

You want to Animate padding left then use paddingLeft not margin example

import {
  View,
  Text,
  StyleSheet,Animated,
} from "react-native";


   this.state = {paddingAnimation: new Animated.Value(40),}
   componentWillMount()
              {
                Animated.timing( this.state.paddingAnimation, { toValue: 100, duration: 1000}).start();

          }
    render() {
        return (
          <View style={styles.container}>
            <Animated.Text style={[{paddingLeft: this.state.paddingAnimation}]}>
            LoginForm
              </Animated.Text>
    </View>
    });

it will work in both Animated.Text To animate . Animated exports the following animatable components using the above wrapper:

Animated.Image
Animated.ScrollView
Animated.Text
Animated.View

if you want to create your own use this 
Animated.createAnimatedComponent()

Upvotes: 2

Related Questions