Transition doesn't re-render with conditional renders about react-native-transition HOT 12 OPEN

@mayukh94 thanks for your issue. At the moment, the transition is not updating based on the changes. I will look into this and try to fix this. It might take some. To solve your particular problem, you could encapsulate the specific <IconButton /> as a separate component which maintains it's internal state. Check example below.

class AvatarIcon extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      avatar: null,
    }
  }

  _selectImage() {
    var options = {
      title: 'Select Image',
      storageOptions: {
        skipBackup: true,
        path: 'images'
      }
    };

    ImagePicker.showImagePicker(options, (response) => {
      console.log('Response = ', response);

      if (response.didCancel) {
        console.log('User cancelled image picker');
      } else if (response.error) {
        console.log('ImagePicker Error: ', response.error);
      } else {
        let source = { uri: 'data:image/jpeg;base64,' + response.data };
        this.setState({
          avatar: source,
        });
      }
    });
  }

  render() {
    if (this.state.avatar) {
      return <Image style={styles.avatar} source={this.state.avatar} />
    }

    return (
      <IconButton
          icon={{name: "photo-camera", size: 32}}
          buttonStyle={{backgroundColor: "#397af8", borderRadius: 2,marginLeft: 50,height: 50, width: 200}}
          textStyle={{textAlign: 'center',color: "#000000"}}
          title={"Select Image"}
          onPress={() => this._selectImage()}/>
    );
  }
}

And then on your render function replace the conditional render with <AvatarIcon /> as shown below:

render() {
    return (

      <View style={{flex: 1,backgroundColor: '#ffffff'}}>
      <Transition>
<View style={{flex: 1,margin: 15,backgroundColor: '#ffffff',}}>
      <Text style={{fontSize: 20,fontWeight: 'bold',marginTop: 10,marginBottom: 20}}> Details of Package </Text>
      <AvatarIcon />


           <View style={{width: 300,
height: 50,position: 'absolute',
bottom: 10,
right: 10}}>
     <IconButton

          iconRight={{name: "arrow-forward", size: 32}}
          buttonStyle={{
borderRadius: 30,
backgroundColor: '#ee6e73',
}}
          textStyle={{textAlign: 'center'}}
          title={`NEXT`}
          onPress={this.switch}
/>
</View>
 </View>
 </Transition>
          </View>

     );
  }

You wouldn't be needing to maintain the state in SendScreen component after that.

Note: This is just a quick fix for your problem, as the Transition component isn't working as intended with conditional renders.

from react-native-transition.

Can you share with me the the entire Component code. I would like to check with my demo code to look into the problem.

from react-native-transition.

@syaau have updated the code

from react-native-transition.

@mayukh94 you seem to be using two Transition component here. When using multiple <Transition /> element, the Transition.show would affect the transition of the latest element mounted. I wasn't quite sure by looking at your code which Transition did you want to work on. So, I would recommend you use a ref on the transition and invoke show on that ref instead of Transition.show.

from react-native-transition.

@syaau didnt quite get you. I have only used the <Transition /> element in the render function and Transition.show for the view I want to transition to.

from react-native-transition.

Well that's weird, I have a <Transition /> tag within the switch method as well on code that I copy pasted from above.

from react-native-transition.

And which item doesn't re-render ? Is it after transition or even before transition ?

from react-native-transition.

this portion

  { this.state.avatarSource === null ?  
        <IconButton  
          icon={{name: "photo-camera", size: 32}}
          buttonStyle={{backgroundColor: "#397af8", borderRadius: 2,marginLeft: 50,height: 50, width: 200}}
          textStyle={{textAlign: 'center',color: "#000000"}}
          title={this.state.textBttn}
          onPress={() => this._selectImage()}/> : <Image style={styles.avatar} source={this.state.avatarSource} />
          }

after an image is selected avatarSource changes and the image should replace the icon button, which is not happening

I have tried it both after and before transition, not working in either case.

from react-native-transition.

yep that works. thanks for your help

from react-native-transition.

@syaau I'd like to make a pass at fixing this. Can you let me know what to take look at first?

from react-native-transition.

@realdoug The problem here is that, the Transition component stores the children on the state and renders it from there. I think you should be able to fix this bug, by hooking on to componentWillReceiveProps, update the child received from the props based on the id of the original child. This should work.

from react-native-transition.

Same issue! Does this problem be solved?

from react-native-transition.