Next view disappear on Android

[EdouardMALOT]

react-native-dash work perfectly on iOS.

On android it works well when I have one , but when I have multiples , the dash is render correctly but the view just after the dash disappear after few ms (Without render function called again).

Do you have any idea ?

[obipawan]

Hey @LeDoudou Thanks for reporting. Could you please share your code? I'll have a look

[EdouardMALOT]

Yes, I can share you the modal I just updated with removing on android plateform

// @flow /eslint-env browser/ // // Modal summary // ------------- import React, { Component } from 'react'; import { View, Text, Image, StyleSheet, Modal, TouchableOpacity, Platform } from 'react-native'; import Dash from 'react-native-dash'; import _ from 'lodash';

import PetrolPumps from '../components/PetrolPumps'; import Colors from '../styles/colorDefinition'; import MapScreenTexts from '../texts/MapScreenTexts'; import AppStyles from '../styles/fontsDefinition'; import { TextInputMD } from '../components/common'; import { computePrice } from '../lib'; import Options, { NB_MAX_OPTION } from './Options';

type Props = { visible: boolean, tensVolume: number, fuelType: string, fuelPrices: Object, volumeLowestPrice: number, options: Object }

class ModalSummary extends Component {

constructor(props:Props) { super(props);

this.state = {
  comment: '',
  activeOptions: new Array(NB_MAX_OPTION).fill(false, 0, NB_MAX_OPTION),
};

}

state: { comment: string, activeOptions: Array, }

componentWillUpdate(nextProps, nextState) { //Check when Modal will become visible //------------------------------------ if (nextProps.visible && !this.props.visible) { const options = this.props.options.selected;

  const newArray = new Array(NB_MAX_OPTION).fill(false, 0, NB_MAX_OPTION);
  _.forEach(options, (option) => { newArray[option.optionId - 1] = true; });

  this.setState({ activeOptions: newArray });
}

}

validation() { //Get only checked options //------------------------ const { activeOptions } = this.state; const { options } = this.props;

  const optionList = activeOptions.map((option, id) => {
    if (option) {
      return options.list[id];
    }
    return undefined;
  }).filter(option => option);

this.props.updateOptions(optionList);     // Update redux state
this.props.onClosePress(true);

}

cancel() { //Close modal this.props.onClosePress(false); }

renderTitle() { const { fuelVolume } = this.props;

return (
  <View style={styles.titleContainer}>

    {/* TITLE */}
     <Text style={[AppStyles.textStrong, styles.modalTitle]}>
       {MapScreenTexts.SummaryTitle}
     </Text>

     {/* Fuel logo according to selected volume */}
       <View>
        <PetrolPumps
          volume={fuelVolume}
          maxVolume={this.props.volumeLowestPrice}
          hideSubTitle={false}
          selected
        />
       </View>

  </View>
);

}

renderCB() { return (

{/* CB logo */} {/* Card description */} {'5500 XXXX XXXX 9343'} {'Visa premier'}

</View>

); }

renderBillDetailLine(description, price) { return (

{description} { (Platform.OS === 'ios') && } { (Platform.OS !== 'ios') && } {`${price.toFixed(2)}${MapScreenTexts.priceSuffix}`}

);

}

renderBillDetails() { // Compute total //--------------

  //Options
    const { activeOptions } = this.state;
    const { options } = this.props;

    const optionTotal = _.sum(activeOptions.map((optionIsAvitve, id) => {
        if (optionIsAvitve && options.list[0]) {
          return options.list[id].Price;
        }
        return 0;
    }));

  //Fuel
    const {
      fuelVolume,
      fuelType,
      fuelPrices
    } = this.props;

    let fuelPrice = 0;
    if (fuelType && fuelPrices) {
      const order = computePrice(fuelVolume, fuelType, fuelPrices);
      fuelPrice = parseFloat(order.billPrice);
    }

    const total = optionTotal + fuelPrice;

    return (
      <View>
      {this.renderBillDetailLine(MapScreenTexts.optionBillTitle, optionTotal)}
      {this.renderBillDetailLine(MapScreenTexts.fuelBillTitle, fuelPrice)}

      {/* TOTAL */}
        <Text style={[styles.total, AppStyles.textStrong]}>
          {`${MapScreenTexts.total}  ${total.toFixed(2)}${MapScreenTexts.priceSuffix}`}
        </Text>

      </View>
    );

}

renderOptions() { const { options } = this.props; const { activeOptions } = this.state;

if (!options.list[0]) return;

return (
   options.list.map((option, id) => {
      const { Icon, Description, Price } = option;

      return (
        <Options
          key={id}
          optionIcon={Icon}
          optionName={Description}
          optionPrice={Price}
          activeOptions={activeOptions[id]}
          onChange={(checkbox) => {
                  const array = _.clone(activeOptions);
                  array[id] = checkbox.checked;
                  this.setState({ activeOptions: array });
                }
          }
        />
      );
    })
);

}

render() { const { visible } = this.props; const { comment } = this.state;

return (
   <Modal
     animationType={'fade'}
     transparent
     visible={visible}
     onRequestClose={() => null}
   >
    <View style={styles.modalBody}>
     <View style={styles.modalMsbBox}>

        <View style={{ marginHorizontal: 16 }}>
          {this.renderTitle()}
          {this.renderCB()}

          {/* Instruction input */}
              <View>
                <TextInputMD
                  fontBlack
                  label={MapScreenTexts.commentHolder}
                  value={comment}
                  onChangeText={(text) => { this.setState({ comment: text }); }}
                />
              </View>
        </View>

        {/* SEPARATOR */}
          { (Platform.OS === 'ios') &&
              <Dash
                style={{ marginVertical: 24 }}
                dashColor={Colors.verylightBlackWithOpacity}
                dashLength={3}
                dashGap={3}
                dashThickness={2}
              />
          }

          { (Platform.OS !== 'ios') &&
            <View
              style={{
                flex: 0,
                flexDirection: 'row',
                marginVertical: 24,
                height: 2,
                backgroundColor: Colors.verylightBlackWithOpacity
              }}
            />
          }

      <View style={{ marginHorizontal: 16 }}>
        {/* OPTIONS */}
          {this.renderOptions()}

        {/* Bill details*/}
          {this.renderBillDetails()}

        {/* Buttons */}
          <View style={styles.buttonsContainer}>
            <TouchableOpacity
              style={styles.button}
              onPress={this.cancel.bind(this)}
            >
              <Text style={AppStyles.textLight}>{MapScreenTexts.cancelBtn}</Text>
            </TouchableOpacity>

            <TouchableOpacity
              style={[styles.button, { backgroundColor: Colors.marine }]}
              onPress={this.validation.bind(this)}
            >
              <Text style={[AppStyles.textLight, { color: Colors.white }]}>
                {MapScreenTexts.confirmBtn}
              </Text>
            </TouchableOpacity>
          </View>

      </View>
   </View>
  </View>
 </Modal>
);

} }

const styles = StyleSheet.create({ modalBody: { flex: 1, backgroundColor: 'rgba(0,0,0,0.5)', justifyContent: 'center', alignItems: 'center', }, modalMsbBox: { backgroundColor: Colors.white, paddingVertical: 8, borderRadius: 2, }, titleContainer: { marginVertical: 16, paddingLeft: 8, flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', marginBottom: 24, }, CBContainer: { flexDirection: 'row', alignItems: 'center', marginTop: 8, }, billDetails: { flexDirection: 'row', alignItems: 'flex-end', paddingVertical: 4, }, total: { marginTop: 24, marginBottom: 16, }, buttonsContainer: { marginHorizontal: -8, flexDirection: 'row', justifyContent: 'flex-end', }, button: { paddingHorizontal: 16, paddingVertical: 10, marginLeft: 8, borderRadius: 2, } });

export default ModalSummary;

[obipawan]

Hello @LeDoudou, Apologies for the delay

Would it possible for you to provide a smaller reproducible snippet?

[obipawan]

closing as abandoned.

[Donhv]

same issue when next dash in android

[obipawan]

Hi @Donhv Thanks for reporting. Can you please share a minimum reproducible snippet of this problem? I'll be happy to re-open and have a look at it.

[Donhv]

Here is item in my flatlist (7 item): <Dash dashStyle={{width:1}} dashColor={Color.dashColor} dashThickness={1} style={{ width: 1, height: "100%", flexDirection: 'column' }} /> Height of each Dash is dynamic. And when i re-render flatlist Dash take a few ms to re-render

[Donhv]

here is gif. sometime, height of dash not update right both android & ios

[Donhv]

Hi @obipawan Any update for this?