Vfrdtyky

I have a UI similar to the image below:

The Title section (the section in dark blue) is supposed to be fixed and the Body section is scrollable.

The height of the Title section would be dynamic as there can be 4 - 5 bullet points retrieved from the server.

My task is to start reducing the height of the Title section when the user starts scrolling upwards to read the content that's present beneath until the point where the user can only read the title in the header. Also, when the user starts scrolling downwards to the point where he/she can see the heading Body, I am supposed to start increasing the height so that he can again start seeing all the bullet points.

This feature is more of like hiding/showing the header on the scroll. But, the title will always be visible.

I have written the below-written code to achieve the same:

import React from 'react';

import {

  View,

  Text,

  ScrollView,

  TouchableOpacity,

  Linking,

  Image,

  Animated,

} from 'react-native';



class App extends React.PureComponent<Props, States> {

  constructor() {

    super();



    this.state = {

      headerHeight: 0,

      headerTitleHeight: 0,

    };



    this.scrollY = new Animated.Value(0);

  }



  render() {

    const { navigation, pending, macroFeed } = this.props;

    const { headerHeight, headerTitleHeight } = this.state;



    const { themeDetails } = navigation.state.params;

    const {

      title, bullet1, bullet2, bullet3,

    } = themeDetails;



    let headerStyle = {};



    if (headerHeight) {

      headerStyle = {

        height: this.scrollY.interpolate({

          inputRange: [0, headerHeight - headerTitleHeight],

          outputRange: [headerHeight, headerTitleHeight],

          extrapolate: 'clamp',

        }),

      };

    }



    const sortedMacroFeed = _.sortBy(macroFeed, (o) => moment(o.date).format('YYYYMMDD')).reverse().slice(0, 5);



    if (pending) {

      return (

        <View style={styles.maxFlex}>

          <LoadingSpinner

            size="large"

            containerStyle={styles.loadingSpinner}

          />

        </View>

      );

    }



    return (

      <View

        style={styles.maxFlex}

      >

        <Animated.View

          style={[styles.headerWrapper, headerStyle]}

          onLayout={(event) => {

            this.setState({

              headerHeight: event.nativeEvent.layout.height,

            });

          }}

        >

          <View style={styles.macroBgWrapper}>

            <Image source={themeDetails.imgUrl} style={styles.macroBg} />

            <View style={styles.macroBgOverlay} />

          </View>



          <View 

            style={styles.header}

          onLayout={(event) => {

            this.setState({

              headerTitleHeight: event.nativeEvent.layout.height,

            });

          }}

          >

            <TouchableOpacity onPress={() => navigation.goBack()}>

              <View>

                <Icon name="ios-arrow-back" size={32} style={styles.backIcon} />

              </View>

            </TouchableOpacity>



            <View style={styles.titleWrap}>

              <Text style={styles.headerTitle}>

                {title}

              </Text>

            </View>

          </View>



          <View style={styles.bulletWrapper}>

            {

              !!bullet1 && (

                <View style={styles.column}>

                  <View style={styles.row}>

                    <View style={styles.bullet}>

                      <Text style={styles.buttetListText}>

                        {'u2022'}

                        {' '}

                      </Text>

                    </View>

                    <View style={styles.bulletText}>

                      <Text style={styles.buttetListText}>

                        {bullet1}

                      </Text>

                    </View>

                  </View>

                </View>

              )

            }



            {

              !!bullet2 && (

                <View style={styles.column}>

                  <View style={styles.row}>

                    <View style={styles.bullet}>

                      <Text style={styles.buttetListText}>

                        {'u2022'}

                        {' '}

                      </Text>

                    </View>

                    <View style={styles.bulletText}>

                      <Text style={styles.buttetListText}>

                        {bullet2}

                      </Text>

                    </View>

                  </View>

                </View>

              )

            }



            {

              !!bullet3 && (

                <View style={styles.column}>

                  <View style={styles.row}>

                    <View style={styles.bullet}>

                      <Text style={styles.buttetListText}>

                        {'u2022'}

                        {' '}

                      </Text>

                    </View>

                    <View style={styles.bulletText}>

                      <Text style={styles.buttetListText}>

                        {bullet3}

                      </Text>

                    </View>

                  </View>

                </View>

              )

            }



            {

              !bullet1 && !bullet2 && !bullet3 && (

                <View style={styles.noBulletWrapper}>

                  <Text style={styles.noBulletPoints}>

                    No description found.

                  </Text>

                </View>

              )

            }

          </View>

        </Animated.View>



        <ScrollView

          style={styles.maxFlex}

          showsVerticalScrollIndicator={false}

          onScroll={Animated.event([

            { nativeEvent: { contentOffset: { y: this.scrollY } } },

          ])}

          scrollEventThrottle={16}

        >

          <View style={[styles.section, styles.wrapGutter]}>

            <Text style={styles.sectionTitle}>

              Recent Headlines

            </Text>



            {

              sortedMacroFeed.map((feed) => (

                <View key={feed.id} style={styles.newsSection}>

                  <Text style={styles.newsHours}>

                    {moment(feed.date).fromNow()} | {feed.author}

                  </Text>



                  <Text style={styles.newsTitle}>

                    {feed.title}



                    <Text onPress={() => this.openWebView(feed.url)}>

                      <EvilIcons name="external-link" size={16} style={styles.externalLinkIcon} />

                    </Text>

                  </Text>

                </View>

              ))

            }

          </View>



          <View style={styles.section}>

            <View style={[styles.wrapGutter, styles.sectionTitleWrap]}>

              <Text style={styles.sectionTitle}>

                Exposure

              </Text>



              <View style={styles.totalNavWrap}>

                <Text style={styles.totalNav}>

                  $467M

                </Text>



                <Text style={styles.totalNavLabel}>

                  Total NaV (all portfolios)

                </Text>

              </View>

            </View>



            <Tabs

              tabsData={TABS_DATA}

              renderTabContent={this.renderTabContent}

              tabName="title"

              hideIfOneTab

            />

          </View>

        </ScrollView>

      </View>

    );

  }

}

If you have observed I am trying to retrieve the dynamic height of the title section using onLayout.

This code only works one way i.e when I scroll up. The height of the title section reduces to the point where only the title can be seen and the bullet points get hidden. But after that, I cannot scroll down. The height gets permanently reduced.

Now, if I change the below-given code:

let headerStyle = {};



if (headerHeight) {

  headerStyle = {

    height: this.scrollY.interpolate({

      inputRange: [0, headerHeight - headerTitleHeight],

      outputRange: [headerHeight, headerTitleHeight],

      extrapolate: 'clamp',

    }),

  };

}

to

const headerStyle = {

    height: this.scrollY.interpolate({

      inputRange: [0, 240],

      outputRange: [300, 60],

      extrapolate: 'clamp',

    }),

};

everything seems to work fine. Basically, if I stop retrieving the value of the height dynamically and provide a static value like 240 or something, everything seems to work fine.

But, animation on scroll stops if I accept dynamic height. Any help to solve this would be much appreciated. Thanks in anticipation.

I found the issue. So, if you observe the line:

        <Animated.View

          style={[styles.headerWrapper, headerStyle]}

          onLayout={(event) => {

              this.setState({

                headerHeight: event.nativeEvent.layout.height,

              });

          }}

        >

onLayout used to setState as soon as the headerHeight value changed on the scroll. Due to which the height of the header used to reduce and scrolling the content down was not possible.

I changed the code to:

        <Animated.View

          style={[styles.headerWrapper, headerStyle]}

          onLayout={(event) => {

            if (!this.state.headerHeight) {

              this.setState({

                headerHeight: event.nativeEvent.layout.height,

              });

            }

          }}

        >

Now, everything works fine.