React Native - How to get Y Offset Value of a view from ScrollView?

I am trying to get the scroll position of a view. But the value for Y offset to page which is not related to the view's position.

ScrollView Hierarchy:

<ScrollView>   - MyComponent1   - MyComponent2     - SubView1        - SubView2          - <View> (Added ref to this view and passing Y offset value through props)   - MyComponent3  </ScrollView> 

SubView2 Component:

this.myComponent.measure( (fx, fy, width, height, px, py) => {    console.log('Component width is: ' + width)    console.log('Component height is: ' + height)    console.log('X offset to frame: ' + fx)    console.log('Y offset to frame: ' + fy)    console.log('X offset to page: ' + px)    console.log('Y offset to page: ' + py)     this.props.moveScrollToParticularView(py) })  <View ref={view => { this.myComponent = view; }}> 

I have checked the exact position of a SubView2 view on onScroll method. But did match with the measure value. I can figure it out the measure value is wrong.

Is it ScrollView hierarchy problem?

1 Answers

Answers 1

View component has a property called onLayout. You can use this property to get the position of that component.

onLayout

Invoked on mount and layout changes with:

{nativeEvent: { layout: {x, y, width, height}}} 

This event is fired immediately once the layout has been calculated, but the new layout may not yet be reflected on the screen at the time the event is received, especially if a layout animation is in progress.

Update

onLayout prop gives a position to the parent component. This means to find the position of SubView2, you need to get total of all the parent components (MyComponent2 + SubView1 + SubView2).

Sample

export default class App extends Component {   state = {     position: 0,   };   _onLayout = ({ nativeEvent: { layout: { x, y, width, height } } }) => {     this.setState(prevState => ({       position: prevState.position + y     }));   };   componentDidMount() {     setTimeout(() => {       // This will scroll the view to SubView2       this.scrollView.scrollTo({x: 0, y: this.state.position, animated: true})     }, 5000);   }   render() {     return (       <ScrollView style={styles.container} ref={(ref) => this.scrollView = ref}>         <View style={styles.view}>           <Text>{'MyComponent1'}</Text>         </View>         <View style={[styles.view, { backgroundColor: 'blue'}]} onLayout={this._onLayout}>           <Text>{'MyComponent2'}</Text>           <View style={[styles.view, , { backgroundColor: 'green'}]} onLayout={this._onLayout}>             <Text>{'SubView1'}</Text>             <View style={[styles.view, { backgroundColor: 'yellow'}]} onLayout={this._onLayout}>               <Text>{'SubView2'}</Text>             </View>           </View>         </View>       </ScrollView>     );   } }  

Read More

ListView inside ScrollView with DrawerLayout

I've got a layout with ScrollView that has a ListView inside. Everything works fine, but if I open DrawerLayout, ScrollView will be scrolled a little. Just look at these screenshots.

Here I open DrawerLayout

Then I close DrawerLayout.

As you can see it is scrolled a little. How to fix this? This is my xml:

<?xml version="1.0" encoding="utf-8"?> <android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"     xmlns:tools="http://schemas.android.com/tools"     android:id="@+id/menuLayout"     android:layout_width="match_parent"     android:layout_height="match_parent"      >      <RelativeLayout         xmlns:tools="http://schemas.android.com/tools"         android:layout_width="match_parent"         android:layout_height="match_parent" >          <ProgressBar             android:id="@+id/progressWheelBar"             style="?android:attr/progressBarStyleLarge"             android:layout_width="wrap_content"             android:layout_height="wrap_content"             android:layout_centerHorizontal="true"             android:layout_centerVertical="true" />          <TextView             android:id="@+id/noDataTextView"             android:layout_width="wrap_content"             android:layout_height="wrap_content"             android:layout_centerHorizontal="true"             android:layout_centerVertical="true"             android:text="@string/noData"             android:textAppearance="?android:attr/textAppearanceSmall"             android:visibility="gone" />          <LinearLayout             android:id="@+id/actionBarLayout"             android:layout_width="match_parent"             android:layout_height="wrap_content"             android:background="@color/transparent"             android:orientation="vertical" >              <RelativeLayout                 android:id="@+id/innerActionBarLayout"                 android:layout_width="match_parent"                 android:layout_height="55dp"                 android:background="@color/material_blue_500" >                  <ImageButton                     android:id="@+id/menuButton"                     android:layout_width="36dp"                     android:layout_height="36dp"                     android:layout_alignParentLeft="true"                     android:layout_centerVertical="true"                     android:layout_marginLeft="5dp"                     android:background="@null"                     android:src="@drawable/ic_menu_white_24dp" />                  <TextView                     android:id="@+id/title"                     android:layout_width="wrap_content"                     android:layout_height="wrap_content"                     android:layout_centerVertical="true"                     android:layout_marginLeft="16dp"                     android:layout_toRightOf="@+id/menuButton"                     android:textColor="@color/white"                      android:textSize="18sp" />             </RelativeLayout>         </LinearLayout>          <ScrollView             android:id="@+id/mainScrollView"             android:layout_width="fill_parent"             android:layout_height="fill_parent"             android:layout_below="@+id/actionBarLayout"             android:fillViewport="true"              android:scrollbars="none"             >              <LinearLayout                 android:layout_width="fill_parent"                 android:layout_height="wrap_content"                 android:orientation="vertical" >                  <!-- Here goes the frame layout with a listview inside -->                 <FrameLayout                     android:id="@+id/container"                     android:layout_width="match_parent"                     android:layout_height="match_parent"                     android:visibility="gone"                     tools:context="ru.tenet.ttk.MainActivity" />             </LinearLayout>         </ScrollView>          <RelativeLayout             android:layout_width="match_parent"             android:layout_height="2dp"             android:layout_alignParentLeft="true"             android:layout_below="@+id/actionBarLayout"             android:background="@drawable/shadow_down" />      </RelativeLayout>      <LinearLayout         android:layout_width="250dp"         android:layout_height="match_parent"         android:layout_gravity="left|start"         android:background="@color/white"         android:orientation="vertical"         android:clickable="true" >          <ListView             android:id="@+id/menuListView"             android:layout_width="match_parent"             android:layout_height="wrap_content"             android:listSelector="@drawable/list_selector"             android:layout_marginTop="15dp"             android:divider="@null" />     </LinearLayout>  </android.support.v4.widget.DrawerLayout> 

5 Answers

Answers 1

Your best bet would be to use the RecyclerView and define a headerRow to show your title.

Answers 2

It is hard to give a definite answer because you haven't posted your code. One reason could be that you have a "windowActionBarOverlay=true" style setting in your activity. Due to that setting, the content of the activity starts right at the beginning of the page and falls behind the ActionBar.

Besides, as commenters above have stated, do you actually need a ListView inside of a ScrollView? ListView itself is a ScrollView.

Best if you post the code of your Drawer activity and the content activity.

Answers 3

You can use VerticalScrollview... http://stackoverflow.com/a/37497211/6334037

If the problem still occurs... then something wrong with your code. Please post your code when you close drawer.

Answers 4

Simple solution is using headerView - ListView.addHeaderView(); I think you don't need to use ScrollView & just add container as headerView

Answers 5

Assign a DrawerListener to DrawerLayout, and in onDrawerClosed event scroll the scrollView to top.

mDrawer.setDrawerListener(new DrawerListener() {         @Override         public void onDrawerSlide(View view, float v) {          }          @Override         public void onDrawerOpened(View view) {          }          @Override         public void onDrawerClosed(View view) {             mScrollView.fullScroll(ScrollView.FOCUS_UP);         }          @Override         public void onDrawerStateChanged(int i) {          }     }); 

Read More

React Native: 2 scroll views with 2 sticky headers

I am trying to create a day-view with times on the left side, and a top header of people. Currently I can get the left OR the top header to stick, but not both.

How do you get 2 sticky headers?

My render looks like this:

  <ScrollView style={{height: 600}}>     <ScrollView horizontal={true}>       <View style={styles.column}>         <View style={{ flex: 1, flexDirection: 'row', width}}>           {header}         </View>          <View style={styles.row}>           <View style={[styles.container, { width, marginLeft: 40 }]}>             {this.generateRows()}           </View>         </View>        </View>     </ScrollView>     <View style={{backgroundColor: 'white', position: 'absolute', top: 0, bottom: 0, left: 0, }}>       <View style={{ flex: 1, flexDirection: 'row'}}>         <View style={styles.row}>           <Text></Text>         </View>       </View>       <View style={{height: 1000, width: 40 }}>         {this.generateRowLabels()}       </View>     </View>   </ScrollView> 

1 Answers

Answers 1

Can you try changing the top-level ScrollView to View/FlexBox with flexDirection as 'column'? This will cause the inner ScrollViews to fit into the window size.

Read More