Support for sticky headers

[fodjan-philip]

Whenever I'm trying to use KeyboardAwareScrollView with stickyHeaderIndices or KeyboardAwareSectionList with stickySectionHeadersEnabled, I get the following error:

couldn't find key offset in dynamic object

• getDouble (ReadableNativeMap.java)

• init (ValueAnimatedNode.java:31)

• createAnimatedNode (NativeAnimatedNodesManager.java:91)

• execute (NativeAnimatedModule.java:204)

• ...

Everything works as expected with React Native's SectionList and ScrollView. Am I missing something or is it currently not possible to use sticky headers with this library?

[tandat2209]

+1

[tandat2209]

Update. This happens on Android only

[realcjames]

+1

[murtraja]

+1

[ThienMD]

Same issue

[pavelaron]

I had the same issue. As I read in the documentation of react-native-keyboard-aware-scroll-view:

First, Android natively has this feature, you can easily enable it by setting windowSoftInputMode in AndroidManifest.xml. Check here.

Since I did not use features such as extraHeight, I used KeyboardAwareSectionList on iOS only and simply imported SectionList on Android.

[SaltySammy]

+1

[bearwmceo]

+1

[Manouli]

+1

[dancherb]

Silently failing on iOS for me - trying to get a header/footer that remains on top of the keyboard despite the scroll, while maintaining "scroll to input" ability.

[franciscailleAstus]

+1

[zjjjjjjjjjjd]

give up

[dancherb]

give up

Can confirm this solution worked for me

[salmandayal]

+1

[arbuzaicer]

Here is the solution You need to determine your sticky header and pass it as a prop inside For example I'm using my custom Container component with sticky header view:

 <KeyboardAwareScrollView
          bounces={false}
          enableOnAndroid
          nestedScrollEnabled={true}
          removeClippedSubviews={false}
          scrollEnabled={scrollEnabled}
          keyboardShouldPersistTaps={keyboardShouldPersistTaps}
          enableResetScrollToCoords={enableResetScrollToCoords}
          showsVerticalScrollIndicator={showsVerticalScrollIndicator}
          stickyHeaderIndices={StickyHeaderComponent ? [0] : undefined}> // here I'm telling that if I'll have some component - display it
          {StickyHeaderComponent ? StickyHeaderComponent : null} // and before all children's will be displayed - I just displaying my sticky header. And as it's the first children - it would be selected as this header. 

Inside my place of use:

  <Container
      withSafeArea
      StickyHeaderComponent={<RenderHeader />}>

[congduong97]

Hi everyone, my solution like that

<View style={[{position:'absolute',top:positionTop,zIndex:100,right:0,left:0,height:50},Common.backgroundLight]}> // wrap header view

useEffect(() => { Keyboard.addListener('keyboardDidShow',()=>{ console.log('quillFocus',quillFocus); if(Platform.OS === "android"){ if(quillFocus){ setPositionTop(hp(40)) } } }) if(!quillFocus){ if(positionTop === hp(40)){ LayoutAnimation.configureNext({ duration: 100, create: { type: "linear", property: "opacity" }, update: { type: "linear", property: "opacity" }, delete: { type: "linear", property: "opacity" } }); setPositionTop(0) } }

return () => {
  // Keyboard.removeAllListeners()
}

}, [quillFocus])

[hotaryuzaki]

Hi everyone, my solution like that

<View style={[{position:'absolute',top:positionTop,zIndex:100,right:0,left:0,height:50},Common.backgroundLight]}> // wrap header view

useEffect(() => { Keyboard.addListener('keyboardDidShow',()=>{ console.log('quillFocus',quillFocus); if(Platform.OS === "android"){ if(quillFocus){ setPositionTop(hp(40)) } } }) if(!quillFocus){ if(positionTop === hp(40)){ LayoutAnimation.configureNext({ duration: 100, create: { type: "linear", property: "opacity" }, update: { type: "linear", property: "opacity" }, delete: { type: "linear", property: "opacity" } }); setPositionTop(0) } }

return () => {
  // Keyboard.removeAllListeners()
}

}, [quillFocus])

is not clear how to use your useEffect, what is hp? positionTop? quillFocus?

[congduong97]

Hi everyone, my solution like that <View style={[{position:'absolute',top:positionTop,zIndex:100,right:0,left:0,height:50},Common.backgroundLight]}> // wrap header view useEffect(() => { Keyboard.addListener('keyboardDidShow',()=>{ console.log('quillFocus',quillFocus); if(Platform.OS === "android"){ if(quillFocus){ setPositionTop(hp(40)) } } }) if(!quillFocus){ if(positionTop === hp(40)){ LayoutAnimation.configureNext({ duration: 100, create: { type: "linear", property: "opacity" }, update: { type: "linear", property: "opacity" }, delete: { type: "linear", property: "opacity" } }); setPositionTop(0) } }

return () => {
  // Keyboard.removeAllListeners()
}

}, [quillFocus])

is not clear how to use your useEffect, what is hp? positionTop? quillFocus?

i worked with quill editor. you can refer below explain

import { widthPercentageToDP as wp, heightPercentageToDP as hp, } from 'react-native-responsive-screen' ........ <View style={[ { position: 'absolute', top: positionTop, zIndex: 100, right: 0, left: 0, height: 50, }, ]} > {renderHeader()} </View> .........

            <QuillEditor
              style={styles.editor}
              ref={_editor}
              onBlur={() => {
                setQuillFocus(false)
              }}
              onFocus={() => {
                setQuillFocus(true)
                outerScrollRef.current.scrollTo({
                  x: 0,
                  y: Dimensions.get('window').height / 3,
                  animated: true,
                })
              }}
      
              quill={{
                // not required just for to show how to pass this props
                placeholder: '',
                modules: {
                  toolbar: false, // this is default value
                },
                theme: 'snow', // this is default value
              }}
              webview={{
                scrollEnabled: false,
                nestedScrollEnabled: false,
              }}
            />