Transition doesn't re-render with conditional renders

[mayukh94]

component code:

import React from 'react';
import { 
  AppRegistry,
  View,
  StyleSheet,
  DatePickerAndroid,
  TextInput,
  ScrollView, 
  FlatList,
  Image,
} from 'react-native';
import { Button as IconButton } from 'react-native-elements';

import { createTransition,SlideLeft} from 'react-native-transition';

const Transition = createTransition(SlideLeft);

var ImagePicker = require('react-native-image-picker');


class SendScreen extends React.Component {
    constructor(props) {
    super(props);
      this.state = {
      avatarSource: null,
      textBttn : "Select Image"
          };
  } 

   async  _onPressButton() {
    try { 
  const {action, year, month, day} = await DatePickerAndroid.open({
    date: new Date(2020, 4, 25)
  });
  if (action !== DatePickerAndroid.dismissedAction) {
    // Selected year, month (0-11), day
  }
} catch ({code, message}) {
  console.warn('Cannot open date picker', message);
}
  } 

switch = () => {
    Transition.show(
     <View style={{flex: 1,backgroundColor: '#ffffff'}}>
      <View style={{flex: 1,margin: 15,backgroundColor: '#ffffff'}}>
      <Text style={{fontSize: 20,fontWeight: 'bold',marginTop: 8,marginBottom: 20}}> Pickup & Drop Locations </Text>
       <Item regular style={{margin: 10,elevation: 1,height:50,marginRight: 0,shadowColor: '#000000',
    shadowOffset: {
      width: 0,
      height: 3
    },
    shadowRadius: 4,
    shadowOpacity: 1.0}}>
            <Input placeholder='FROM: CITY OR COUNTRY' style={{fontSize: 14}}onChangeText={(text) => this.setState({text})}
        />
          </Item>
      <Item regular style={{margin: 10,elevation: 1,height:50,marginRight: 0,shadowColor: '#000000',
    shadowOffset: {
      width: 0,
      height: 3
    },
    shadowRadius: 4,
    shadowOpacity: 0.1}}>
            <Input placeholder='TO: CITY OR COUNTRY' style={{fontSize: 14}}onChangeText={(text) => this.setState({text})}
        />
          </Item>
     
   <IconButton
          
          icon={{name: "date-range", size: 32}}
          buttonStyle={{backgroundColor: "#397af8", borderRadius: 8, margin: 15}}
          textStyle={{textAlign: 'center'}}
          title={`ENTER DATE`}
          onPress={this._onPressButton}/>

     <View style={{width: 300,
height: 50,position: 'absolute',
bottom: 10,
right: 10}}>     
     <IconButton
          
          icon={{name: "arrow-forward", size: 32}}
          buttonStyle={{
borderRadius: 30,
backgroundColor: '#ee6e73',
}}
          textStyle={{textAlign: 'center'}}
          title={`NEXT`}
          iconRight={true}
          onPress={this.switch}
/>
</View>
          </View>
          </View>

    );
  }

  _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({
      avatarSource: source,
      textBttn: "Selected"
    });
  console.log("state = "+this.state.avatarSource);
  console.log("state = "+this.state.textBttn);
  }
});
  }

  static navigationOptions = {
    title: 'SEND ANYTHING ANYWHERE'
  };
 
  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>
      { 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} />
          }
   
          
           <View style={{width: 300,
height: 50,position: 'absolute',
bottom: 10,
right: 10}}>     
     <IconButton
          
          icon={{name: "arrow-forward", size: 32}}
          buttonStyle={{
borderRadius: 30,
backgroundColor: '#ee6e73',
}}
          textStyle={{textAlign: 'center'}}
          title={`NEXT`}
          iconRight={true}
          onPress={this.switch}
/>
</View>
 </View>
 </Transition>
          </View>

     );


  }
}

My issue is that the view doesn't re-render when the image is selected, however on removing Transition it is working perfectly. Any ideas why?

[syaau]

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

[mayukh94]

@syaau have updated the code

[syaau]

@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.

[mayukh94]

@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.

[syaau]

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

[syaau]

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

[mayukh94]

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.

[syaau]

@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.

[mayukh94]

yep that works. thanks for your help

[realdoug]

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

[syaau]

@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.

[jamessawyer]

Same issue! Does this problem be solved?