Question 246726 in React native Question posted in
The official React Native documentation can be found here.

Sticky Menu using Scroll View in Expo React Native Web

I am trying to keep my top menu from scrolling with the rest of the page in my Expo React Native Web project, but after hours of troubleshooting, I can’t get the menu to be sticky. Please have a look at my current JSX setup and help me solve this issue:

<View style={{flex:1}}>
  <ScrollView stickyHeaderIndices={[0]} scrollEnabled={false} style={{flex:1, flexDirection: 'column'}}>
    <View style={{flexDirection: 'row', height:50, backgroundColor: 'lightgrey', alignItems: 'center', gap: 40, justifyContent: 'center'}}>
      <Text style={{marginLeft: 30}}>Logo</Text>
      <View style={{flex: 1}}></View>
      <Text>Test</Text>
      <Text>Test</Text>
      <Text>Test</Text>
      <Text>Test</Text>
      <Text>Test</Text>
      <View style={{flex: .1}}></View>
    </View>

    <View style={{flex:1}}>
      <ScrollView nestedScrollEnabled={true} showsVerticalScrollIndicator={true} style={{backgroundColor:'red', flex: 1}}>
        <View style={{backgroundColor:'green', height: 2000}}></View>
        <View style={{backgroundColor:'yellow', height: 2000}}></View>
      </ScrollView>
    </View>
  </ScrollView>
</View>
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    the solution that finally worked for me is:

    position: 'fixed'

  2. 0

    You can place the Menu Bar at the top using these sets of code below,

     <View style={{ flex: 1 }}>
      <View style={{ position: 'sticky', top: 0, backgroundColor: 'green', zIndex: 1 }}>
        <View style={{ flexDirection: 'row', height: 50, alignItems: 'center', justifyContent: 'center' }}>
          <Text style={{ marginLeft: 30 }}>Logo</Text>
          <View style={{ flex: 1 }}></View>
          <Text>Test</Text>
          <Text>Test</Text>
          <Text>Test</Text>
          <Text>Test</Text>
          <Text>Test</Text>
          <View style={{ flex: 0.1 }}></View>
        </View>
      </View>

      <ScrollView style={{ flex: 1 }}>
        <View style={{ backgroundColor: 'red', height: 2000 }}></View>
        <View style={{ backgroundColor: 'yellow', height: 2000 }}></View>
      </ScrollView>
    </View>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search