touch/click is disabled after two transition with 3 screen

[Piero87]

Hi,
If you have 3 screen, when you arrive on the third screen and go back on the second screen the touch is disabled, all the app is blocked, this is the example code:

import React, { Component } from 'react';
import { Text, View, Button, Image, StyleSheet } from 'react-native';
import { FluidNavigator, Transition } from 'react-navigation-fluid-transitions';

const LogoImage = props => (
  <Image source={{uri:'https://picsum.photos/100/100?image=56'}} style={props.style}/>
);
  
class Screen1 extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <Transition shared="logo">
          <LogoImage style={styles.largeLogo}/>
        </Transition>
        <Transition appear="horizontal">
          <Text style={styles.paragraph}>
            Welcome to this fantastic app!
          </Text>  
        </Transition>
        <Transition appear="horizontal">
          <Button title="Next" onPress={() => this.props.navigation.navigate("screen2")} />
        </Transition>
      </View>
    );
  }
}

class Screen2 extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <Transition shared="logo">
          <LogoImage style={styles.smallLogo}/>
        </Transition>
        <Transition appear="horizontal">
          <Text style={styles.paragraph}>
            <Text style={{fontWeight:'normal'}}>
              Now you should have a basic understanding of how this app works. 
              Please sign up and take part in this fantastic user experience!
            </Text>
          </Text>  
        </Transition>
        <Transition appear="horizontal">
          <Text style={styles.paragraph}>
              This is the last page of the onboarding.
          </Text>  
        </Transition>
        <Transition appear="horizontal">
          <Button title="Back" onPress={() => this.props.navigation.navigate("screen3")} />
        </Transition>
      </View>
    );
  }
}
class Screen3 extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <Transition shared="logo">
          <LogoImage style={styles.smallLogo}/>
        </Transition>
        <Transition appear="horizontal">
          <Text style={styles.paragraph}>
            <Text style={{fontWeight:'normal'}}>
              aaaaaaa
            </Text>
          </Text>  
        </Transition>
        <Transition appear="horizontal">
          <Text style={styles.paragraph}>
              bbbbb
          </Text>  
        </Transition>
        <Transition appear="horizontal">
          <Button title="Back" onPress={() => this.props.navigation.goBack()} />
        </Transition>
      </View>
    );
  }
}

export default Navigator = FluidNavigator({
  screen1: {screen: Screen1},
  screen2: {screen: Screen2},
  screen3: {screen: Screen3}
});

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'space-around',
    backgroundColor: '#ecf0f1',
  },
  largeLogo: {
    width: 200,
    height: 200,
    borderRadius: 100,
  },
  smallLogo: {
    width: 80,
    height: 80,
    borderRadius: 40,
  },
  paragraph: {
    margin: 24,
    fontSize: 15,
    fontWeight: 'bold',
    textAlign: 'center',
    color: '#34495e',
  },
});

[tberman]

if you are on android and using react-native-screens, there is a known bug with no fix. #197 has more details. Is this the same issue you are seeing?

[michaelkoelewijn]

if you are on android and using react-native-screens, there is a known bug with no fix. #197 has more details. Is this the same issue you are seeing?

Same issue here - not using react-native-screens

Using

• "react-native": "0.59.9",
• "react-navigation": "3.11.1",
• "react-navigation-fluid-transitions": "0.3.2",