react native ref not working in dynamic adding rows - react-native

Question

I am creating spreadsheet in react native and i want to append columns if we click on add button, but when i used ref in dynamic cols it gives error. here is my code .. please tell me how i can use ref so it will not give me error. following is the error that i receive when i use ref ..
import React, { Component } from 'react';
import {
StyleSheet,
View,
TouchableOpacity,
Text,
TextInput,
ScrollView
} from 'react-native';
import Icon from 'react-native-vector-icons/FontAwesome';
var unique=1;
export default class Sheet extends Component {
constructor(props) {
super(props);
this.state = {
currentRowNo:1,
serialNo:1,
rows:this.props.species.length,
breaker:true,
appendRows:[],
index:1
}
}
rendercol(rowNo)
{
const col=[];
var serialNo=this.state.index;
col.push(<View key="rowNum" style={styles.column}><View style={[styles.fixCellWidth,{backgroundColor:"#f2f2f2"}]}><Text style={{fontSize:20}}>{rowNo}</Text></View></View>);
for (var j=serialNo;j<=this.state.rows+serialNo-1;j++)
{
col.push(<TouchableOpacity style={styles.fixCellWidth} key={"key_"+j}><Text style={{fontSize:16}} onPress={this.changeValue.bind(this,j)} ref={"red"+j}>{console.log(this.props.action.bind(this,j))}</Text></TouchableOpacity>);
}
return <View key={"Row"+rowNo}>{col}</View>;
}
changeValue(val)
{
this.props.changeVal(val);
}
addRow(){
this.state.appendRows.push(
this.rendercol(this.state.index)
)
this.setState({
index: this.state.index + 1,
appendRows: this.state.appendRows
})
}
render()
{
var _scrollView: ScrollView;
const row=[];
const sheet=[];
sheet.push(<View key="headRow" style={styles.column}><View style={[styles.fixCellWidth,{backgroundColor:"#f2f2f2"}]}><Text style={{fontSize:20}}>S./#</Text></View></View>);
this.props.species.map((option) => {
sheet.push(<View key={option.code} style={styles.column}><View style={[styles.fixCellWidth,{backgroundColor:"#f2f2f2"}]}><Text style={{fontSize:20}}>{option.code}</Text></View></View>);
});
sheet.push(<TouchableOpacity key="rowAdd" style={styles.column} onPress={this.addRow.bind(this)}><View style={[styles.fixCellWidth,{backgroundColor:"green"}]}><Icon name="plus" style={[styles.icon,styles.fontWhite]}/></View></TouchableOpacity>);
return (
<ScrollView
ref={(scrollView) => { _scrollView = scrollView; }}
automaticallyAdjustContentInsets={false}
horizontal={false}
style={{height:650,paddingBottom:10}}>
<View style={styles.column}>
<View>{sheet}</View>
<ScrollView
ref={(scrollView) => { _scrollView = scrollView; }}
automaticallyAdjustContentInsets={false}
horizontal={true}
style={[styles.scrollFull]}>
{this.state.appendRows}
</ScrollView>
</View>
</ScrollView>
);
}
}

Answer 1

You are repeating ref assignation in your render function:
return (
<ScrollView
ref={(scrollView) => { _scrollView = scrollView; }} // <- here
automaticallyAdjustContentInsets={false}
horizontal={false}
style={{height:650,paddingBottom:10}}>
<View style={styles.column}>
<View>{sheet}</View>
<ScrollView
ref={(scrollView) => { _scrollView = scrollView; }} // <- here
automaticallyAdjustContentInsets={false}
horizontal={true}
style={[styles.scrollFull]}>
{this.state.appendRows}
</ScrollView>
</View>
</ScrollView>
);
But that is not the problem. The problem is that you are creating refs outside render method of the component, to be specific in your rendercol function. Here is the error explanation: https://gist.github.com/jimfb/4faa6cbfb1ef476bd105.
You can add rows using state, look at this approach: Append TextInput component one after another when press button in React Native

Answer 2

import React, { Component } from 'react';
import { View, Text, Platform, StyleSheet, TouchableOpacity,TouchableHighlight, Animated, ScrollView, Image } from 'react-native';
let index = 0
export default class App extends Component {
constructor(context) {
super(context);
this.state = {
rows: []
}
}
_addRow(){
this.state.rows.push(index++)
this.setState({ rows: this.state.rows })
}
render() {
let CheckIndex = i => {
if((i % 2) == 0) {
return styles.gray
}
}
let rows = this.state.rows.map((r, i) => {
return <View key={ i } style={[styles.row, CheckIndex(i)]}>
<Text >Row { r }, Index { i }</Text>
</View>
})
return (
<View style={styles.container}>
<TouchableHighlight onPress={ () => this._addRow() } style={styles.button}>
<Text>Add new row</Text>
</TouchableHighlight>
{ rows }
</View>
);
}
}
var styles = StyleSheet.create({
container: {
flex: 1,
marginTop: 60,
},
gray: {
backgroundColor: '#efefef'
},
row: {
height:40,
alignItems: 'center',
justifyContent: 'center',
borderBottomColor: '#ededed',
borderBottomWidth: 1
},
button: {
alignItems: 'center',
justifyContent: 'center',
height:55,
backgroundColor: '#ededed',
marginBottom:10
}
});