How to stick custom header in React Native

Question

I am working on app where I have worked on app header . I have created custom component for header . Now I want to achieve stick header when user scroll down then I want to stick top header . Could someone please help me how to solve this issue .

Code

      <View>
        <Header navigation={navigation} newToken={this.state.token} />
        <SearchBar
          input={(value) => {
            this.onChangeTextDelayed(value);
            this.setState({
              subCategoriesShow: true,
              pharmLoader: true,
              inputValue: value,
              queries: [],
            });
          }}
          handleBlur={() => this.setState({ subCategoriesShow: false })}
        />
      </View>

sefa · Accepted Answer · 2020-07-03 23:04:33Z

1

You can do it by view and a scroll view.

<View style={{flex: 1, display: 'flex'}}>
    <View>
        <Header {...props}/>
    </View>
    <ScrollView style={{flex: 1}}>
        ... other things
    </ScrollView>
</View>

If this doesn't work you can try with

<ScrollView contentContainerStyle={{flex: 1}}>

instead of

<ScrollView style={{flex: 1}}>

answered Jul 3, 2020 at 23:04

sefa

5144 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Jonas Over a year ago

I just want to stick header , I have other contents too . I want to be stick up with header

sefa Over a year ago

@Jonas Maybe there is an issue with your container components. There is a working snack example snack.expo.io/JW7y!BQR_

Collectives™ on Stack Overflow

How to stick custom header in React Native

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related