Infinite scrolling and other questions

[jdnichollsc]

Hi guys,

Thanks for these examples, a grid with dynamic columns is a very important component for mobile apps. I have some questions with the second example (Reponsive Tiles for Universal Apps):

1. Is possible implement infinite scrolling like the FlatList component?
2. What's props.state.layout? because it's undefined and I'm getting issues with the props.state.layout.grid

Thanks in advance, Nicholls

[jdnichollsc]

I'm getting other issue:

• Device: iPhone 6 - iOS 11.1
• Orientation: Portrait mode

Error: C++ exception in 'nativeFlushQueueImmediate'

Overflow during conversion: "16674997633781072000"

This error is located at:
    in RCTView (at View.js:113)
    in View (at Row.js:184)
    in Row (at index.js:134)
    in RCTView (at View.js:113)
    in View (at Column.js:215)
    in Column (at index.js:133)
    in RCTView (at View.js:113)
    in View (at Row.js:184)
    in Row (at index.js:129)
    in RCTView (at View.js:113)
    in View (at createAnimatedComponent.js:134)
    in AnimatedComponent (at TouchableOpacity.js:239)
    in TouchableOpacity (at index.js:128)
    in RCTScrollContentView (at ScrollView.js:748)
    in RCTScrollView (at ScrollView.js:856)
    in ScrollView (at index.js:127)
    in RCTView (at View.js:113)
    in View (at Row.js:184)
    in Row (at index.js:126)
    in RCTView (at View.js:113)
    in View (at Grid.js:46)
    in Grid (at index.js:124)
    in RCTScrollContentView (at ScrollView.js:748)
    in RCTScrollView (at ScrollView.js:856)
    in ScrollView (at KeyboardAwareScrollView.js:27)
    in KeyboardAwareScrollView (at Content.js:10)
    in Content (at connectStyle.js:384)
    in Styled(Content) (at index.js:123)
    in RCTView (at View.js:113)
    in View (at Container.js:15)
    in Container (at connectStyle.js:384)
    in Styled(Container) (at index.js:99)
    in ProductList (at SceneView.js:31)
    in SceneView (at CardStack.js:405)
    in RCTView (at View.js:113)
    in View (at createAnimatedComponent.js:134)
    in AnimatedComponent (at Card.js:26)
    in Card (at PointerEventsContainer.js:55)
    in Container (at CardStack.js:436)
    in RCTView (at View.js:113)
    in View (at CardStack.js:365)
    in RCTView (at View.js:113)
    in View (at CardStack.js:364)
    in CardStack (at CardStackTransitioner.js:97)
    in RCTView (at View.js:113)
    in View (at Transitioner.js:187)
    in Transitioner (at CardStackTransitioner.js:49)
    in CardStackTransitioner (at StackNavigator.js:60)
    in Unknown (at createNavigator.js:52)
    in Navigator (at createNavigationContainer.js:216)
    in NavigationContainer (at App.js:38)
    in RCTView (at View.js:113)
    in View (at Root.js:14)
    in Root (at connectStyle.js:384)
    in Styled(Root) (at App.js:37)
    in Unknown (at renderApplication.js:35)
    in RCTView (at View.js:113)
    in View (at AppContainer.js:102)
    in RCTView (at View.js:113)
    in View (at AppContainer.js:122)
    in AppContainer (at renderApplication.js:34)

enqueueNativeCall
    MessageQueue.js:231:39
fn
    NativeModules.js:107:38
commitUpdate
    ReactNativeFiber-dev.js:3052:58
commitWork
    ReactNativeFiber-dev.js:2148:92
commitAllHostEffects
    ReactNativeFiber-dev.js:2443:31
_invokeGuardedCallback
    ReactNativeFiber-dev.js:73:23
invokeGuardedCallback
    ReactNativeFiber-dev.js:47:40
commitAllWork
    ReactNativeFiber-dev.js:2478:40
workLoop
    ReactNativeFiber-dev.js:2555:68
_invokeGuardedCallback
    ReactNativeFiber-dev.js:73:23
invokeGuardedCallback
    ReactNativeFiber-dev.js:47:40
performWork
    ReactNativeFiber-dev.js:2593:41
scheduleUpdateImpl
    ReactNativeFiber-dev.js:2728:101
enqueueSetState
    ReactNativeFiber-dev.js:1514:90
setState
    react.development.js:218:31
callback
    Grid.js:36:8
<unknown>
    Grid.js:58:38
_callTimer
    JSTimers.js:156:15
callTimers
    JSTimers.js:411:17
__callFunction
    MessageQueue.js:302:47
<unknown>
    MessageQueue.js:116:26
__guard
    MessageQueue.js:265:6
callFunctionReturnFlushedQueue
    MessageQueue.js:115:17

And my code is:

<Content>
  <Grid>{
    ({state, setState}) => (
      <Row fullHeight style={{backgroundColor: 'lightgray'}}> 
        <ScrollView removeClippedSubviews={true}>
            <TouchableOpacity activeOpacity={1}>
              <Row>
                {
                  this.state.products.map((item) => {
                    return (
                      <Col key={item.id} ref={(col) => item.element = col} smSize={sizes.sm} mdSize={sizes.md} lgSize={sizes.lg} xlSize={sizes.xl}>
                        <Row 
                          smSizePoints={state.layout.grid ? state.layout.grid.height / 2 : 0} 
                          mdSizePoints={state.layout.grid ? state.layout.grid.width / 2 : 0} 
                          lgSizePoints={state.layout.grid ? state.layout.grid.width / 3 : 0} 
                          xlSizePoints={state.layout.grid ? state.layout.grid.width / 4 : 0}
                          alignLines="stretch">
                          <Col fullWidth hAlign='center'> 
                            <ListThumb
                              navigation={navigation}
                              brand={item.brand}
                              price={item.price}
                              discount={item.discount}
                              discountedPrice={item.sale_price}
                              id={item.id}
                              description={ item.title.length > 25 ? `${item.title.substring(0, 25)} ...` : item.title }
                              imageSource={item.image_link}
                            />
                          </Col>
                        </Row>
                      </Col>
                    )
                  })
                }
              </Row>
            </TouchableOpacity>
        </ScrollView>
      </Row>)
    }
  </Grid>
</Content>

Thanks in advance!

[idibidiart]

Hi @jdnichollsc

Please use the latest 0.39.0

The example should run without the Native Base 'Content' wrapping everything. I haven't tested with that, but don't see why it would fail. Try putting Grid as parent of Content and see if that fixes it. If not I'll have to look at the code for the Native Base 'Content' component to see what they're doing, but it shouldn't matter...

There is no props.state inside Grid. Grid passes you state, and state.grid.layout is never undefined. It's initially an empty object then gets defined on updated render.

I'll keep this open for now.

[jdnichollsc]

Excellent, removing the Content element fix that issue! But I have other issue, I can't see 2 columns in portrait mode:

But I have the suggested configuration:

smSizePoints={state.layout.grid ? state.layout.grid.width / 2 : 0} 
mdSizePoints={state.layout.grid ? state.layout.grid.width / 2 : 0} 
lgSizePoints={state.layout.grid ? state.layout.grid.width / 3 : 0} 
xlSizePoints={state.layout.grid ? state.layout.grid.width / 4 : 0}

What do you think @idibidiart? Thanks in advance!

[idibidiart]

I need to see the whole JSX

If you're using this example >> https://github.com/idibidiart/react-native-responsive-grid/blob/master/UniversalTiles.md << the snippet of code you posted is actually for how many rows fit vertically in the screen. The number of columns is determined by percentage-based sizing on the columns, e.g. smSize, mdSize etc. The rows need an absolute size in Points since the container is the ScrollView and that's what the math you pasted is about.

[jdnichollsc]

mmm the issue with the columns was fixed using: const sizes = {sm: 50...

[jdnichollsc]

@idibidiart one question, exist any example using infinite scrolling? Is it possible? Thanks in advance!

[idibidiart]

Yes I think Example #5 or whichever has the FlatList component but I have not done an example that combines universal tiles with FlatList. If you can’t sort it out, I’ll work on such combined example but I can’t promise when... should be a good addition tho

[jdnichollsc]

Any suggestion to integrate the FlatList component? :) Thanks very much for the examples, are beautiful and very useful!

[jdnichollsc]

I can't see any way to integrate FlatList with the Grid component, any suggestion is really appreciated 👍 My code is:

<Grid>{
  ({state, setState}) => (
    <Row fullHeight style={{backgroundColor: 'lightgray'}}> 
      <ScrollView removeClippedSubviews={true}>
          <TouchableOpacity activeOpacity={1}>
            <Row>
              <FlatList
                data={this.state.products}
                keyExtractor={(item, index) => index}
                renderItem={({ item }) => {
                  return (
                    <Col key={item.id} ref={(col) => item.element = col} smSize={sizes.sm} mdSize={sizes.md} lgSize={sizes.lg} xlSize={sizes.xl}>
                      <Row 
                        smSizePoints={state.layout.grid ? state.layout.grid.width / 2 : 0} 
                        mdSizePoints={state.layout.grid ? state.layout.grid.width / 2 : 0} 
                        lgSizePoints={state.layout.grid ? state.layout.grid.width / 3 : 0} 
                        xlSizePoints={state.layout.grid ? state.layout.grid.width / 4 : 0}
                        alignLines="stretch">
                        <Col fullWidth hAlign='center'> 
                          <ListThumb width=""
                            navigation={navigation}
                            brand={item.brand}
                            price={item.price}
                            discount={item.discount}
                            discountedPrice={item.sale_price}
                            id={item.id}
                            description={ item.title.length > 25 ? `${item.title.substring(0, 25)} ...` : item.title }
                            imageSource={item.image_link}
                          />
                        </Col>
                      </Row>
                    </Col>
                  )
                }}
              />
            </Row>
          </TouchableOpacity>
      </ScrollView>
    </Row>
  )}
</Grid>

Thanks in advance!

[idibidiart]

To start, don’t need to have ScrollView around FlatList.

I do not have an answer until I sit down and write it. But I can tell u if you’re doing something wrong.