Problem on scrollview if layout has navigation bar

[webdevsyd]

Hello Guys

I'm having an issue in this grid library if my layout has navigation bar. When I scroll at the end of the page, the content is cut, but if I remove the navigation bar I can see the whole content of my layout. I'm using nativebase navigation UI.

Has anyone encounter this?

[idibidiart]

Hi,

I'll try to repro on Monday. I had introduced Grid component and did not test for that scenario. Will fix soon. Sorry about that.

In the meantime, could you post your JSX here?

[webdevsyd]

Hi @idibidiart

Here's my jsx:

For the NavigationBarIcons component basically its just a normal jsx code found in the native base documentation.

return (
      <View>
        <NavigationBarIcons
          title='Booking Details'
        />
        <Grid>{({state, setState}) => (
          <Row fullHeight>
            <ScrollView keyboardShouldPersistTaps={'always'}
              style={{backgroundColor: WHITE_COLOR, flexGrow: 1}}>
              <Row>
                <Col size={100}>
                  <Row style={[util.p12]}>
                    <Col size={30} hAlign='center'>
                      <Thumbnail large resizeMode='contain' source={require('../../assets/images/mickey.png')} />
                    </Col>
                    <Col size={70}>
                      <Text style={[text.textMedium, text.mainColorText, util.text18]}>St. Claire Medical Center</Text>
                      <Text style={[text.textRegular, text.blackColorText, util.text14]}>Multi Specialty Hospital</Text>
                      <Text style={[text.textLight, text.subTextColor, util.text14]}>1838 Dian Street Balanian Makati City</Text>
                    </Col>
                  </Row>
                  <Row style={[util.p12]}>
                    <Col size={100}>
                      <Text style={[text.textMedium, text.mainColorText, util.text18, util.mb5]}>Overview</Text>
                    </Col>
                    <Col size={100}>
                      <Text style={[text.subTextColor, util.text14,{lineHeight: 24}]}>
                        St. Clare's Medical Center is a Multi Speciality clinic in Palanan,
                        Makati. The clinic is visited by multi speciality like Dr. Emmanuel Pagala,
                        Dr. Christopher G De Lasalas and Dr. Sofia Khristina T. Batto.
                        The timings of St. Clare's Medical Center are: Mon to Sat: 8:00 AM-8:00 PM.
                        Some of the services provided by the clinic are: Newborn Jaundice,
                        Lip Augmentation, Pediatric Adolescent Gynecology,
                        Normal Vaginal Delivery (NVD) and Gastritis Treatment.
                      </Text>
                    </Col>
                  </Row>
                  <Row style={[util.p12, util.pt0]}>
                    <Col size={100}>
                      <Text style={[text.textMedium, text.mainColorText, util.text18, util.mb5]}>Timings</Text>
                    </Col>
                    <Col size={100}>
                      <Row>
                        <Col size={40}>
                          <Text style={[text.textMedium, text.blackColorText, util.text14]}>Monday - Friday</Text>
                        </Col>
                        <Col size={60}>
                          <Text style={[text.textLight, text.blackColorText, util.text14, {marginTop: 3}]}>8:00 am - 8:00 pm</Text>
                        </Col>
                      </Row>
                    </Col>
                  </Row>
                  <Row vAlign='center' style={bookingDetails.sectionHeader}>
                    <Col size={100}>
                      <Text style={[text.subTextColor, util.text14]}>Set Schedule</Text>
                    </Col>
                  </Row>
                  <Row vAlign='center' size={5} style={bookingDetails.sectionContent}>
                    <Col size={50} hAlign='left'>
                      <Text style={[text.blackColorText, util.text14]}>Date</Text>
                    </Col>
                    <Col size={50} hAlign='right'>
                      <Text style={[text.mainColorText, util.text14, text.textMedium]}>December 1, 2017</Text>
                    </Col>
                  </Row>
                  <Row vAlign='center' size={5} style={bookingDetails.sectionContent}>
                    <Col size={50} hAlign='left'>
                      <Text style={[text.blackColorText, util.text14]}>Time</Text>
                    </Col>
                    <Col size={50} hAlign='right'>
                      <Text style={[text.mainColorText, util.text14, text.textMedium]}>9:00 am</Text>
                    </Col>
                  </Row>
                  <Row vAlign='center' style={bookingDetails.sectionHeader}>
                    <Col size={100}>
                      <Text style={[text.subTextColor, util.text14]}>Choose a Service</Text>
                    </Col>
                  </Row>
                  <Row vAlign='center' size={5} style={bookingDetails.sectionContent}>
                    <Col size={50} hAlign='left'>
                      <Text style={[text.blackColorText, util.text14]}>Consultation</Text>
                    </Col>
                    <Col size={50} hAlign='right'>
                      <Text style={[text.mainColorText, util.text14, text.textMedium]}>Php 1,500.00</Text>
                    </Col>
                  </Row>
                  <Row vAlign='center' style={bookingDetails.sectionHeader}>
                    <Col size={100}>
                      <Text style={[text.subTextColor, util.text14]}>Additional Information</Text>
                    </Col>
                  </Row>
                  <Row vAlign='center' style={bookingDetails.sectionContent}>
                    <Col size={100}>
                      <Text style={[text.subTextColor, util.text14,{lineHeight: 24}]}>
                        Choose a Service Choose a Service Choose a Service Choose a Service Choose a Service
                        Choose a Service Choose a Service Choose a Service Choose a Service Choose a Service
                        Choose a Service Choose a Service Choose a Service Choose a Service Choose a Service
                        Choose a Service Choose a Service Choose a Service Choose a Service Choose a Service
                        Choose a Service Choose a Service Choose a Service Choose a Service Choose a Service
                        Choose a Service Choose a Service Choose a Service Choose a Service Choose a Service
                      </Text>
                    </Col>
                  </Row>
                </Col>
              </Row>
            </ScrollView>
          </Row>
        )}</Grid>
      </View>

[idibidiart]

@webdevsyd

Hi I fixed this but I need to clarify something (already fixed in Readme)

I had previously stated in the Readme that Grid is needed to respond to orientation layout changes but by that I meant it is needed ONLY if you need to re-run the render() function (to react with Javascript and update the layout that way) BUT you do not need it for simply having a row with width 50% get wider when the device is rotated to landscape mode. It will get wider by itself without help from this library because RN knows how to update percentage specified dimensions, without re-running the render() function.

However, your scenario is legitimate in that you should be able to put Grid (whether it's required or not) above a ScrollView and have some Nav bar in it if you like and have the ScrollView behave normally (i.e. able to reach the very end)

By the way, best practice is to have the Grid at the very top (so the Native Base nav should be inside of it not outside) so that it's guaranteed that it catches orientation change, but it doesn't matter as fas as the point of this discussion.

v0.37.0 is out on NPM and fixes the issue but I recommend getting rid of Grid unless you plan to react in Javascript to orientation change and re-run render() with a different state.

Closing. Thank you.

P.S. If you use React 16.0.0 / RN 0.50.0+ you don't have to wrap children needlessly, and you can return multiple children so the Grid can be the topmost component with ScrollView and Native Base nav as its children. Otherwise, you can wrap ScrollView with a Col with style={{flex: 1}}. This requirement is imposed by ScrollView and has nothing to do with this grid. It's best to upgrade to latest RN and avoid extra wrapping elements.

[webdevsyd]

Hi @idibidiart seems the update that you did is working with me. However if do not have a navigation bar in my screen there's a white space at the bottom of the screen:

Here's my jsx:

<Grid>{({state, setState}) => (
        <Row fullHeight>
          <Content keyboardShouldPersistTaps={'always'} contentContainerStyle={{padding: 10}} style={styles.blueContainer}>
            <Row style={login.logoContainer} size={30}>
              <Col size={100} hAlign='center'><Image resizeMode='contain' source={LOGO} /></Col>
            </Row>
            <Row hAlign='center'size={70}>
              <Col smSize={100} mdSize={70} lgSize={60} xlSize={50}>
                <Row hAlign='center'>
                  <Col size={100}>
                    <Item style={[form.inputItem,util.mb15]}>
                      <Input
                        returnKeyType='done'
                        placeholder='Email address'
                        style={form.input}
                        placeholderTextColor={WHITE_COLOR}
                      />
                    </Item>
                  </Col>
                </Row>
                <Row>
                  <Col size={100}>
                    <Item style={form.inputItem}>
                      <Input
                        returnKeyType='done'
                        placeholder='Password'
                        secureTextEntry
                        style={form.input}
                        placeholderTextColor={WHITE_COLOR}
                      />
                    </Item>
                  </Col>
                </Row>
                <Row style={util.mt30}>
                  <Col size={100}>
                    <Button block style={form.loginButton} onPress={() => this.onPressLogin()}>
                      <Text>Login</Text>
                    </Button>
                  </Col>
                </Row>
                <Row style={util.mt10}>
                  <Col size={100}>
                    <Button iconLeft bordered block style={form.facebookButton}>
                      <FontAwesome name='facebook' color={WHITE_COLOR} size={20} />
                      <Text style={text.whiteColorText}>Connect with Facebook</Text>
                    </Button>
                  </Col>
                </Row>
                <Row style={util.mt30}>
                  <Col size={50} hAlign='left'>
                    <TouchableOpacity style={form.nativeButton} onPress={() => this.onPressForgotPassword()}>
                      <Text style={text.whiteColorText}>Forgot Password?</Text>
                    </TouchableOpacity>
                  </Col>
                  <Col size={50} hAlign='right'>
                    <TouchableOpacity style={form.nativeButton} onPress={() => this.onPressSignUp()}>
                      <Text style={text.whiteColorText}>Sign Up</Text>
                    </TouchableOpacity>
                  </Col>
                </Row>
              </Col>
            </Row>
          </Content>
        </Row>
      )}</Grid>

[idibidiart]

Please remove the Native Script “Content” element. I haven’t had any time to look at the code in their Content element. It’s causing a lot of weird issues. You shouldn’t need it.

[smooJitter]

@idibidiart the “content” element in native base is an implementation of a scroll-view.. so I guess the top content should wrap the top level row.

[idibidiart]

Ok thanks for that

so use Grid then a regular ScrollView right under it. Don’t wrap ScrollView in a Row. It needs to be wrapped with Column with “flex: 1” as I stated before which is the same as Grid. You could use a Column with flex:1 if you don’t need the Grid for dynamic reaction to orientation change (like the aspectRatio feature or if you’re re-rendering the layout)

Pretty sure it will just work with Grid then normal ScrollView right under it. You can try it with Content too, just remove the Row between Grid and Content.

[smooJitter]

I’m still having trouble with scroll view.

This works (full screen)

<Column size={100}>
   <Row size={25}>…</Row>
   <Row size={75}>…</Row>
</Column>

But this doesn’t (the rows collapse to fit the content)

<Column size={100} style={{ flex: 1 }}>
    <ScrollView>
       <Row size={25}>…</Row>
       <Row size={75}>…</Row>
    </ScrollView>
</Column>

Similarly, the rows collapse to fit the content.

<ScrollView> 
  <Column size={100}>
     <Row size={25}>…</Row>
     <Row size={75}>…</Row>
  </Column>
</ScrollView >