How to assign value dynamically to TextInput using react native

Question

In my scenario, while focus on TextInput i am moving to another scene using navigator (using push)there i populate list,in that list selecting one value that value should be populated to the previous scene of TextInput In this case I am unable to set the selected value to the previous scene of TextInput.

I am sending the route object through out the navigator,But in my scenario selected value should be reassign to the previous scene of TextInput .Here TextInput event structure is like the below

nativeEvent:
{ target: 2175,
pageY: 164.5,
locationX: 131,
changedTouches: [ [Circular] ],
locationY: 16.5,
identifier: 1,
pageX: 146,
touches: [],
timestamp: 6887223.188515 },
target: undefined,
currentTarget: null,
path: undefined,
type: undefined,
eventPhase: undefined,
bubbles: undefined,
cancelable: undefined,
timeStamp: 1445839347722,
defaultPrevented: undefined,
isTrusted: undefined,
isDefaultPrevented: [Function],
isPropagationStopped: [Function],
_dispatchListeners: null,
_dispatchIDs: null }

Both of this not working .What is the correct way to assign the value to the textinput. The current object getting is ok, my problem is assigning the selected value to the TextInput.

Here i am following two approaches

approach1:-

var FirstComponent = React.createClass({
     render:function(){
             return(<TextInput value="" placeholder="Enter value" onFocus={getData.bind(this)} />)
      }
})

function getData(ev){
var target = ev;
      this.props.navigator.push({
          id:'SecondComponent',
          name:'SecondComponent',
          target:target, 
       })
}
var SecondComponent = React.createClass({
        render:function(){
               return(<TouchableHighlight onPress={fillData.bind(this,target, self.props.navigator,selectedText)}><Text>sample</Text></TouchableHighlight>)
        }
});
function fillData(target,nav,selectedText,ev){
target.value=selectedText
target.nativeEvent.target = selectedText
target.nativeEvent.target .text= selectedText// Here ' target ' is route object this
//Here target is root component this
//how to fill selectedText in FirstComponent TextInput value
}

Approach2:-

   var FirstComponent = React.createClass({
          getInitialState:function(){
            return {textValue:""};
        },
         render:function(){
                 return(<TextInput value={this.state.textValue} placeholder="Enter value" onFocus={getData.bind(this)} />)
          }
    })

    function getData(ev){
    var target = ev;
          this.props.navigator.push({
              id:'SecondComponent',
              name:'SecondComponent',
              target:target, 
           })
    }
    var SecondComponent = React.createClass({
            render:function(){
                   return(<TouchableHighlight onPress={fillData.bind(this,target, self.props.navigator,selectedText)}><Text>sample</Text></TouchableHighlight>)
            }
    });
    function fillData(target,nav,selectedText,ev){
         target.setState({textValue:selectedText})//i am getting undefined is not a function

    //Here target is root component this   
    //how to fill selectedText in FirstComponent TextInput value
    }

Answer 1

You could try to set the state using your event, and binding your <TextInput /> with the same property of your state in your new scene

eventCallback () {
  this.setState({ value: 'myvalue' })
}

And:

<TextInput
  onChangeText={(value) => this.setState({ value })}
  value={this.state.value}
/>

Don't know about your exact structure, but you could also pass props to your new route with the value of your input.