Can you do transitions in react-native with either inline styles or styled components

Question

Is it possible to do transitions in react native using StyleSheet or styled-components? I am trying the following with no luck.

import React from 'react'
import styled from 'styled-components/native'
import { Text, View, StyleSheet } from 'react-native'

export default class extends React.Component {
  render() {
    return (
      <Wrapper visible={visible}><Text>hello</Text>
    )
  }    
}

const Wrapper = styled.View`
  opacity: ${props => props.visible ? 1 : 0};
  transition: opacity 1s linear;
`

const styles = StyleSheet.create({
  wrapper: {
    opacity: 1,
    transition:'opacity 1s linear'
  }
});

Catherine

Answer 1

React Native does not support react style transitions in this way, instead try the RN Animated View library, it works very similarly (and uses inline styles/components):

https://facebook.github.io/react-native/docs/animated.html

Greig

Answer 2

React Native does support these kind of transitions, but only on the web. If you're rendering elsewhere, you'll need to use a different method.

Here's a quick example of how to do this in React Native Web:

<View style={condition ? style.true : style.false} />

true: { 
  opacity: 1, 
  transition:'0.5s, transform 0.5s' 
},
false: { 
  opacity: 0 
}

Pearcy

I tried it in the Expo Snack; it works on the web, but not the Android or iOS. The docs also don't mention such property. – Ridgeway

That's good to know. I've only tried this on React Native Web. I'll update my answer the reflect that. Thank you. – Pearcy

Answer 3

For a web platform (React Native Web), you can also play with the tag and applying your transitions there, for example:

return (
    <SafeAreaView>
        <YourComponent/>
        <style>
        {`
        * {
            transition: color 500ms linear;
            transition: background-color 500ms linear;
         }
        `}
        </style>
    </SafeAreaView>
);

Obsequies