Section seems to add separator to elements that aren't <Cell> about react-native-tableview-simple HOT 14 CLOSED

I don't have my USB adapter handy so it would have to be another time. I'll try to let you know if I remember :)

from react-native-tableview-simple.

Separators are added for all children inside a Section, because you can develop your own version of Cell.

Is there a particular reason you hide the component, instead of rendering it only when needed? (https://reactjs.org/docs/conditional-rendering.html)

...
<Section>
 {renderCell && <Cell />}
</Section>
...

from react-native-tableview-simple.

This is my code. I was unclear in my wording. I am conditionally hiding the DatePicker, but it seems like Section is evaluating the DatePicker as being another Cell, thereby adding a Separator to the bottom of the last Cell which is seen in the picture.

<ScrollView ref={list => this.list = list} style={{ backgroundColor: '#eff0f4', paddingBottom: 100 }}>
        <TableView>
          <Section>
            <Cell
              title="Hele dagen"
              cellAccessoryView={
                <Switch 
                  value={this.state.wholeday}
                  onValueChange={val => this.setState({wholeday: val, activeId: null})} />
              } />
            <Cell
              isDisabled={this.state.wholeday}
              title="Starter"
              cellAccessoryView={
                <Text style={{ color: (this.state.wholeday || this.state.firstTime) ? 'gray' : 'black' }}>
                  { this.state.firstTime
                    ? 'Velg tidspunkt...'
                    : moment(this.state.startTime).format('LT')
                  }
                </Text>
              }
              onPress={() => this.setState({activeId: 'start', firstTime: false})} />
            {this.state.activeId === 'start' &&
              <View>
                <DatePicker
                  style={{ backgroundColor: 'white' }}
                  mode="time"
                  date={this.state.startTime}
                  onDateChange={date => this.setState({ startTime: date })}
                />
              </View>
            }
            <Cell
              isDisabled={this.state.wholeday}
              title="Slutter"
              cellAccessoryView={
                <Text style={{ color: (this.state.wholeday || this.state.firstTime) ? 'gray' : 'black' }}>
                  { this.state.firstTime
                    ? 'Velg tidspunkt...'
                    : moment(this.state.endTime).format('LT')
                  }
                </Text>
              }
              onPress={() => {
                this.setState({ activeId: 'stop', firstTime: false})
                this.list.scrollToEnd({animated: true})
              }}/>
            {this.state.activeId === 'stop' &&
              <DatePicker
                style={{ backgroundColor: 'white' }}
                mode="time"
                date={this.state.endTime}
                onDateChange={date => this.setState({ endTime: date })}
              />
            }
          </Section>
          <Button
            disabled={this.state.firstTime && this.state.wholeday === false}
            title="Fullfør"
            onPress={() => this.props.handlePeriodSelection({
              startTime: this.state.startTime,
              endTime: this.state.endTime 
            })}/>
          <View style={{height: 30}} />
        </TableView>
      </ScrollView>

from react-native-tableview-simple.

Ah. Got it!
Seems to be related to: facebook/react#7685

Will look into it

from react-native-tableview-simple.

Could you please check, if your issues are fixed with v0.17.3?

from react-native-tableview-simple.

This is where it's at updated to v0.17.3.

First View (Hele dagen) is correct with Separator added,
Second View (Starter) is correct with Separator added,
then the third View (Slutter) is incorrectly rendered, adding a separator to the bottom that should not be there.

from react-native-tableview-simple.

I did some digging. So as you can see from the code, i also have a false equation above the last Cell. This causes the index of the last Cell to be 3 instead of 2. Thus, not hiding the separator.

from react-native-tableview-simple.

Ahh. So it's because you have an empty child between and not as the last one

from react-native-tableview-simple.

That's correct, or they both start out as false.

The DatePickers didn't render when i put them as the contentView in a cell, that's why they aren't cells.

from react-native-tableview-simple.

Removed the usage of React.Children.map. Can you verify, that this fixed your issue?
Thanks for your help, @hegelstad!

from react-native-tableview-simple.

Looks like the build haven't been pushed to npm yet? @Purii

from react-native-tableview-simple.

Done 👍

from react-native-tableview-simple.

Well, it works quite well now!

However, there is still one bug..

As you can see from my code, the cells have onPresses that conditionally shows the DatePicker beneath each cell respectively when pressed.

When i press the first cell (Starter), the first cell is rendered correctly with separators.
However, when I press the second cell (Slutter), there is no separator between the cell and the DatePicker (as it is when pressing the first cell) as seen in the picture above.

However, when pressing the second cell a second time while the DatePicker is open already, the separator is then added. I think this suggests some kind of timing error or failure to re-render?

For now I am just gonna add a separator manually above the bottom DatePicker.

Thanks for assisting me and for building this beauty!

from react-native-tableview-simple.

Can you verify, that this also happens on a physical device?
I had some similar issues with the simulator

from react-native-tableview-simple.