CODEWITHSUNDEEP
cssreact-native
Tanmoy Sarker
Tanmoy Sarker

Reputation: 1266

Convert css keyframe to react native

I am working on a react native app where i want to do a number animation like odometer. So, i have got a css code for that but i'm not being able to convert the css into react native. Here's the css code i have now:

export default class LuckySpin extends Component{
  render() {
    return (
          <View style={styles.odometer}>
            <View style={styles.digit}>
              <View style={styles.digitcontainerdigitthousand}>1 0 9 8 7 6 5 4 3 2 1</View>
            </View>
            <View style={styles.digit} style="width: 0.1rem;">
              <View class="digit-container"></View>
            </View>
            <View style={styles.digit}>
              <View style={styles.digitcontainerdigithundred}>0 9 8 7 6 5 4 3 2 1 0</View>
            </View>
            <View style={styles.digit}>
              <View style={styles.digitcontainerdigitten}>6 5 4 3 2 1 0 9 8 7 6</View>
            </View>
            <View style={styles.digit}>
              <View style={styles.digit-container-digit-one}>5 4 3 2 1 0 9 8 7 6 5</View>
            </View>
          </View>
          
        </Content>
      </Container>
    );
  }
}

const styles = StyleSheet.create({
  p :{
    paddingTop: '3rem',
    textAlign: 'center',
    fontSize: '2.5vw',
  },
  odometer: {
    height: '1.5em',
    width: '100%',
    paddingTop: '1rem',
    color: '#000',
    textAlign: 'center',
    display: 'inline-block',
    background: '#fff',
    fontSize: '4vw',
    fontWeight: '500px',
  },
  digit: {
    margin: '-0.5vw',
    display: 'inline-block',
    height: '1.5em',
    width: '0.59em',
    overflow: 'hidden',
  },
  digitcontainerdigitthousand :{
    lineheight: '1.5em',
    animation: slide 5s infinite ease,
    
  },
  
  digitcontainerdigithundred :{
    lineheight: '1.5em',
    animation: slide 5s infinite  ease-out,
  },
  
  digitcontainerdigitten: {
    lineheight: '1.5em',
    animation: slide 5s infinite ease-in-out,
  },
  
  digitcontainerdigitone: {
    lineheight: '1.5em',
    animation: slide 5s infinite linear,
  },
  
  @keyframes slide : {
    0% {
      transform: translateY('-10em'),
    }
    40% {
      transform: translateY(0),
    }
      100% {
      transform: translateY(0),
    }
  }

});

The animation property and keyframe in css is throwing the error now. How can i convert those to react native to show the exact animation?

Upvotes: 2

Views: 2841

Answers (1)

Andus
Andus

Reputation: 1731

According to my understanding in React Native you use <Animated.View/> in combine of Animated.Timing() to make animation. You might want to dig into this: https://facebook.github.io/react-native/docs/animations.

Also, bear in mind that StyleSheet is a different thing from CSS so there's probably no keyframes on it.

And you might want to provide a link to what kind of animation exactly you want to achieve.

Cheers

Upvotes: 2

Related Questions