CODEWITHSUNDEEP
javascriptandroidreactjsreact-native
Riccoh
Riccoh

Reputation: 401

react native dynamic ref

I am trying to get some measurement from specific views to see where the view is located. After that I want to implement a scrollto function.

I am using this code for the handle:

_handleItemClicked = (index) => () => {
  this.sectionItem[index].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)
  })
}

And I am using this code for the view

renderItem = ({item, index, section}) => (
            <TouchableNativeFeedback ref={view => { this.sectionItem[index] = view; }} onPress={this._handleItemClicked(index)}>
               <View style={styles.itemrow} >
                 <View style={{width:80,marginLeft:10,height:30}}><Text style={{textAlign:'right',color:'#000',opacity:0.9,fontSize:18,marginTop:4}}>{item.title}</Text></View>
                 </View>
               </View>
             </TouchableNativeFeedback>
);

I tried some other methods but so far no luck. I'm always ending with some error. This time its undefined which is not a object.

looking forward to the answers.

Upvotes: 2

Views: 2302

Answers (1)

iangohye
iangohye

Reputation: 46

Try this instead:

ref = { view => ( this[`sectionItem${index}`] = view ) }

I am guessing its trying to find sectionItem in scope, but unable to, giving you the undefined error.

If you do it like the above, it puts a ref with an index in this.

Upvotes: 3

Related Questions