How to send data in react native?

-2

How to send data from screen to other and save it in card i did not find the way.
im using footer by navigation and router flux for the other buttons .

i tried Action.hometab({name:this.state.name})

asked Nov 23 '18 at 21:46

Ali Alsaggaf

235

add a comment |

-2

How to send data from screen to other and save it in card i did not find the way.
im using footer by navigation and router flux for the other buttons .

i tried Action.hometab({name:this.state.name})

asked Nov 23 '18 at 21:46

Ali Alsaggaf

235

add a comment |

-2

How to send data from screen to other and save it in card i did not find the way.
im using footer by navigation and router flux for the other buttons .

i tried Action.hometab({name:this.state.name})

asked Nov 23 '18 at 21:46

Ali Alsaggaf

235

How to send data from screen to other and save it in card i did not find the way.
im using footer by navigation and router flux for the other buttons .

i tried Action.hometab({name:this.state.name})

react-native react-native-router-flux

asked Nov 23 '18 at 21:46

Ali Alsaggaf

235

asked Nov 23 '18 at 21:46

Ali Alsaggaf

235

asked Nov 23 '18 at 21:46

Ali Alsaggaf

235

asked Nov 23 '18 at 21:46

Ali Alsaggaf

235

asked Nov 23 '18 at 21:46

Ali Alsaggaf

235

add a comment |

2 Answers
2

active

oldest

votes

I recommend you use react-navigation. with that you can pass props like this.

this.props.navigation.navigate('Screen2', {data: 'some-stuff'})

and you can access data in other screen like this.

this.props.navigation.state.params('data')

answered Nov 24 '18 at 0:38

gamingumar

19926

i tried this giving error undefined is not a function

– Ali Alsaggaf
Nov 24 '18 at 11:00

@AliAlsaggaf can you share the code? - first thing you need to check is associated with react navigation routes - if it has no route key then you need to pas navigation props to that component.

– gamingumar
Nov 26 '18 at 20:03

i sheared the codes up you can check it

– Ali Alsaggaf
Dec 7 '18 at 14:04

add a comment |

First page

    import React, { Component } from "react";

import { Container,Content,Button,Input,Item,Form,Textarea,Text} from "native-base";

import styles from "./styles";

import firebase from "firebase";

import { Actions } from 'react-native-router-flux';

import PorsonTab from './PorsonTab'



class NewStr extends Component {



  componentDidMount() {

    var that = this;



    var date = new Date().getDate(); 

    var month = new Date().getMonth() + 1; 

    var year = new Date().getFullYear(); 

    var hours = new Date().getHours(); 

    var min = new Date().getMinutes(); 





    that.setState({ date: date + '/' + month + '/' + year + ' ' + hours + ':' + min, }); }



     test = () => {

      firebase.database().ref().child('users').push(

        { name:this.state.name,story: this.state.story,time2:this.state.date }),

        Actions.sentmsg();

        this.props.navigation.navigate('PorsonTab', {name:this.state.name})



      }





    state = {name: "",story: "",time2:""}



  render() {



    return (

      <Container style={styles.container}>





        <Content padder>

          <Form>

            <Item regular>

              <Input onChangeText = {name => this.setState({name})}  placeholder="عنوان القصة" />

            </Item>

          </Form>

          <Text/>

          <Text/>





          <Textarea onChangeText = {story => this.setState({story})} rowSpan={5} bordered placeholder="محتوى الرسالة يجيب الا تقل عن 100 كلمة" />

            <Text/>

            <Text/>

            <Text/>

            <Text/>

            <Text/>

            <Button block primary style={styles.mb15} 

            onPress={this.test.bind(this)} >

            <Text>نشر</Text>

          </Button>





        </Content>

      </Container>

    );

  }

}



export default NewStr;

Second page

import {Container,Text,Content,Card,CardItem,Body} from 'native-base';

import {Icon} from 'native-base';

import React,  {Component} from 'react';

import styles from "./styles";



















export default class PorsonTab extends Component {



    static navigationOptions = {

        tabBarIcon: ({tintColor}) => {

            return < Icon name='md-contacts' style={{color:tintColor}}/>

        }

    }



 render(){



     return(

        <Container style={styles.container }  >

        <Content padder >

             <Card style={styles.mb1} >

            <CardItem  header bordered style={styles.mbitem} >

              <Text  style={{flex:1,textAlign:'center'}}> {this.props.navigation.state.params('name')}</Text>

            </CardItem>



              <Body>

                <Text style={{flex:1,textAlign:'center'}}>

                  1

                </Text>

              </Body>



          </Card>



             </Content>

             </Container>



     );

 }

}

answered Nov 24 '18 at 11:10

Ali Alsaggaf

235

add a comment |

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53453254%2fhow-to-send-data-in-react-native%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

2 Answers
2

active

oldest

votes

2 Answers
2

active

oldest

votes

I recommend you use react-navigation. with that you can pass props like this.

this.props.navigation.navigate('Screen2', {data: 'some-stuff'})

and you can access data in other screen like this.

this.props.navigation.state.params('data')

answered Nov 24 '18 at 0:38

gamingumar

19926

i tried this giving error undefined is not a function

– Ali Alsaggaf
Nov 24 '18 at 11:00

@AliAlsaggaf can you share the code? - first thing you need to check is associated with react navigation routes - if it has no route key then you need to pas navigation props to that component.

– gamingumar
Nov 26 '18 at 20:03

i sheared the codes up you can check it

– Ali Alsaggaf
Dec 7 '18 at 14:04

add a comment |

I recommend you use react-navigation. with that you can pass props like this.

this.props.navigation.navigate('Screen2', {data: 'some-stuff'})

and you can access data in other screen like this.

this.props.navigation.state.params('data')

answered Nov 24 '18 at 0:38

gamingumar

19926

i tried this giving error undefined is not a function

– Ali Alsaggaf
Nov 24 '18 at 11:00

@AliAlsaggaf can you share the code? - first thing you need to check is associated with react navigation routes - if it has no route key then you need to pas navigation props to that component.

– gamingumar
Nov 26 '18 at 20:03

i sheared the codes up you can check it

– Ali Alsaggaf
Dec 7 '18 at 14:04

add a comment |

I recommend you use react-navigation. with that you can pass props like this.

this.props.navigation.navigate('Screen2', {data: 'some-stuff'})

and you can access data in other screen like this.

this.props.navigation.state.params('data')

answered Nov 24 '18 at 0:38

gamingumar

19926

I recommend you use react-navigation. with that you can pass props like this.

this.props.navigation.navigate('Screen2', {data: 'some-stuff'})

and you can access data in other screen like this.

this.props.navigation.state.params('data')

answered Nov 24 '18 at 0:38

gamingumar

19926

answered Nov 24 '18 at 0:38

gamingumar

19926

answered Nov 24 '18 at 0:38

gamingumar

19926

answered Nov 24 '18 at 0:38

gamingumar

19926

i tried this giving error undefined is not a function

– Ali Alsaggaf
Nov 24 '18 at 11:00

@AliAlsaggaf can you share the code? - first thing you need to check is associated with react navigation routes - if it has no route key then you need to pas navigation props to that component.

– gamingumar
Nov 26 '18 at 20:03

i sheared the codes up you can check it

– Ali Alsaggaf
Dec 7 '18 at 14:04

add a comment |

i tried this giving error undefined is not a function

– Ali Alsaggaf
Nov 24 '18 at 11:00

@AliAlsaggaf can you share the code? - first thing you need to check is associated with react navigation routes - if it has no route key then you need to pas navigation props to that component.

– gamingumar
Nov 26 '18 at 20:03

i sheared the codes up you can check it

– Ali Alsaggaf
Dec 7 '18 at 14:04

i tried this giving error undefined is not a function

– Ali Alsaggaf
Nov 24 '18 at 11:00

@AliAlsaggaf can you share the code? - first thing you need to check is associated with react navigation routes - if it has no route key then you need to pas navigation props to that component.

– gamingumar
Nov 26 '18 at 20:03

i sheared the codes up you can check it

– Ali Alsaggaf
Dec 7 '18 at 14:04

add a comment |

First page

    import React, { Component } from "react";

import { Container,Content,Button,Input,Item,Form,Textarea,Text} from "native-base";

import styles from "./styles";

import firebase from "firebase";

import { Actions } from 'react-native-router-flux';

import PorsonTab from './PorsonTab'



class NewStr extends Component {



  componentDidMount() {

    var that = this;



    var date = new Date().getDate(); 

    var month = new Date().getMonth() + 1; 

    var year = new Date().getFullYear(); 

    var hours = new Date().getHours(); 

    var min = new Date().getMinutes(); 





    that.setState({ date: date + '/' + month + '/' + year + ' ' + hours + ':' + min, }); }



     test = () => {

      firebase.database().ref().child('users').push(

        { name:this.state.name,story: this.state.story,time2:this.state.date }),

        Actions.sentmsg();

        this.props.navigation.navigate('PorsonTab', {name:this.state.name})



      }





    state = {name: "",story: "",time2:""}



  render() {



    return (

      <Container style={styles.container}>





        <Content padder>

          <Form>

            <Item regular>

              <Input onChangeText = {name => this.setState({name})}  placeholder="عنوان القصة" />

            </Item>

          </Form>

          <Text/>

          <Text/>





          <Textarea onChangeText = {story => this.setState({story})} rowSpan={5} bordered placeholder="محتوى الرسالة يجيب الا تقل عن 100 كلمة" />

            <Text/>

            <Text/>

            <Text/>

            <Text/>

            <Text/>

            <Button block primary style={styles.mb15} 

            onPress={this.test.bind(this)} >

            <Text>نشر</Text>

          </Button>





        </Content>

      </Container>

    );

  }

}



export default NewStr;

Second page

import {Container,Text,Content,Card,CardItem,Body} from 'native-base';

import {Icon} from 'native-base';

import React,  {Component} from 'react';

import styles from "./styles";



















export default class PorsonTab extends Component {



    static navigationOptions = {

        tabBarIcon: ({tintColor}) => {

            return < Icon name='md-contacts' style={{color:tintColor}}/>

        }

    }



 render(){



     return(

        <Container style={styles.container }  >

        <Content padder >

             <Card style={styles.mb1} >

            <CardItem  header bordered style={styles.mbitem} >

              <Text  style={{flex:1,textAlign:'center'}}> {this.props.navigation.state.params('name')}</Text>

            </CardItem>



              <Body>

                <Text style={{flex:1,textAlign:'center'}}>

                  1

                </Text>

              </Body>



          </Card>



             </Content>

             </Container>



     );

 }

}

answered Nov 24 '18 at 11:10

Ali Alsaggaf

235

add a comment |

First page

    import React, { Component } from "react";

import { Container,Content,Button,Input,Item,Form,Textarea,Text} from "native-base";

import styles from "./styles";

import firebase from "firebase";

import { Actions } from 'react-native-router-flux';

import PorsonTab from './PorsonTab'



class NewStr extends Component {



  componentDidMount() {

    var that = this;



    var date = new Date().getDate(); 

    var month = new Date().getMonth() + 1; 

    var year = new Date().getFullYear(); 

    var hours = new Date().getHours(); 

    var min = new Date().getMinutes(); 





    that.setState({ date: date + '/' + month + '/' + year + ' ' + hours + ':' + min, }); }



     test = () => {

      firebase.database().ref().child('users').push(

        { name:this.state.name,story: this.state.story,time2:this.state.date }),

        Actions.sentmsg();

        this.props.navigation.navigate('PorsonTab', {name:this.state.name})



      }





    state = {name: "",story: "",time2:""}



  render() {



    return (

      <Container style={styles.container}>





        <Content padder>

          <Form>

            <Item regular>

              <Input onChangeText = {name => this.setState({name})}  placeholder="عنوان القصة" />

            </Item>

          </Form>

          <Text/>

          <Text/>





          <Textarea onChangeText = {story => this.setState({story})} rowSpan={5} bordered placeholder="محتوى الرسالة يجيب الا تقل عن 100 كلمة" />

            <Text/>

            <Text/>

            <Text/>

            <Text/>

            <Text/>

            <Button block primary style={styles.mb15} 

            onPress={this.test.bind(this)} >

            <Text>نشر</Text>

          </Button>





        </Content>

      </Container>

    );

  }

}



export default NewStr;

Second page

import {Container,Text,Content,Card,CardItem,Body} from 'native-base';

import {Icon} from 'native-base';

import React,  {Component} from 'react';

import styles from "./styles";



















export default class PorsonTab extends Component {



    static navigationOptions = {

        tabBarIcon: ({tintColor}) => {

            return < Icon name='md-contacts' style={{color:tintColor}}/>

        }

    }



 render(){



     return(

        <Container style={styles.container }  >

        <Content padder >

             <Card style={styles.mb1} >

            <CardItem  header bordered style={styles.mbitem} >

              <Text  style={{flex:1,textAlign:'center'}}> {this.props.navigation.state.params('name')}</Text>

            </CardItem>



              <Body>

                <Text style={{flex:1,textAlign:'center'}}>

                  1

                </Text>

              </Body>



          </Card>



             </Content>

             </Container>



     );

 }

}

answered Nov 24 '18 at 11:10

Ali Alsaggaf

235

add a comment |

First page

    import React, { Component } from "react";

import { Container,Content,Button,Input,Item,Form,Textarea,Text} from "native-base";

import styles from "./styles";

import firebase from "firebase";

import { Actions } from 'react-native-router-flux';

import PorsonTab from './PorsonTab'



class NewStr extends Component {



  componentDidMount() {

    var that = this;



    var date = new Date().getDate(); 

    var month = new Date().getMonth() + 1; 

    var year = new Date().getFullYear(); 

    var hours = new Date().getHours(); 

    var min = new Date().getMinutes(); 





    that.setState({ date: date + '/' + month + '/' + year + ' ' + hours + ':' + min, }); }



     test = () => {

      firebase.database().ref().child('users').push(

        { name:this.state.name,story: this.state.story,time2:this.state.date }),

        Actions.sentmsg();

        this.props.navigation.navigate('PorsonTab', {name:this.state.name})



      }





    state = {name: "",story: "",time2:""}



  render() {



    return (

      <Container style={styles.container}>





        <Content padder>

          <Form>

            <Item regular>

              <Input onChangeText = {name => this.setState({name})}  placeholder="عنوان القصة" />

            </Item>

          </Form>

          <Text/>

          <Text/>





          <Textarea onChangeText = {story => this.setState({story})} rowSpan={5} bordered placeholder="محتوى الرسالة يجيب الا تقل عن 100 كلمة" />

            <Text/>

            <Text/>

            <Text/>

            <Text/>

            <Text/>

            <Button block primary style={styles.mb15} 

            onPress={this.test.bind(this)} >

            <Text>نشر</Text>

          </Button>





        </Content>

      </Container>

    );

  }

}



export default NewStr;

Second page

import {Container,Text,Content,Card,CardItem,Body} from 'native-base';

import {Icon} from 'native-base';

import React,  {Component} from 'react';

import styles from "./styles";



















export default class PorsonTab extends Component {



    static navigationOptions = {

        tabBarIcon: ({tintColor}) => {

            return < Icon name='md-contacts' style={{color:tintColor}}/>

        }

    }



 render(){



     return(

        <Container style={styles.container }  >

        <Content padder >

             <Card style={styles.mb1} >

            <CardItem  header bordered style={styles.mbitem} >

              <Text  style={{flex:1,textAlign:'center'}}> {this.props.navigation.state.params('name')}</Text>

            </CardItem>



              <Body>

                <Text style={{flex:1,textAlign:'center'}}>

                  1

                </Text>

              </Body>



          </Card>



             </Content>

             </Container>



     );

 }

}

answered Nov 24 '18 at 11:10

Ali Alsaggaf

235

First page

    import React, { Component } from "react";

import { Container,Content,Button,Input,Item,Form,Textarea,Text} from "native-base";

import styles from "./styles";

import firebase from "firebase";

import { Actions } from 'react-native-router-flux';

import PorsonTab from './PorsonTab'



class NewStr extends Component {



  componentDidMount() {

    var that = this;



    var date = new Date().getDate(); 

    var month = new Date().getMonth() + 1; 

    var year = new Date().getFullYear(); 

    var hours = new Date().getHours(); 

    var min = new Date().getMinutes(); 





    that.setState({ date: date + '/' + month + '/' + year + ' ' + hours + ':' + min, }); }



     test = () => {

      firebase.database().ref().child('users').push(

        { name:this.state.name,story: this.state.story,time2:this.state.date }),

        Actions.sentmsg();

        this.props.navigation.navigate('PorsonTab', {name:this.state.name})



      }





    state = {name: "",story: "",time2:""}



  render() {



    return (

      <Container style={styles.container}>





        <Content padder>

          <Form>

            <Item regular>

              <Input onChangeText = {name => this.setState({name})}  placeholder="عنوان القصة" />

            </Item>

          </Form>

          <Text/>

          <Text/>





          <Textarea onChangeText = {story => this.setState({story})} rowSpan={5} bordered placeholder="محتوى الرسالة يجيب الا تقل عن 100 كلمة" />

            <Text/>

            <Text/>

            <Text/>

            <Text/>

            <Text/>

            <Button block primary style={styles.mb15} 

            onPress={this.test.bind(this)} >

            <Text>نشر</Text>

          </Button>





        </Content>

      </Container>

    );

  }

}



export default NewStr;

Second page

import {Container,Text,Content,Card,CardItem,Body} from 'native-base';

import {Icon} from 'native-base';

import React,  {Component} from 'react';

import styles from "./styles";



















export default class PorsonTab extends Component {



    static navigationOptions = {

        tabBarIcon: ({tintColor}) => {

            return < Icon name='md-contacts' style={{color:tintColor}}/>

        }

    }



 render(){



     return(

        <Container style={styles.container }  >

        <Content padder >

             <Card style={styles.mb1} >

            <CardItem  header bordered style={styles.mbitem} >

              <Text  style={{flex:1,textAlign:'center'}}> {this.props.navigation.state.params('name')}</Text>

            </CardItem>



              <Body>

                <Text style={{flex:1,textAlign:'center'}}>

                  1

                </Text>

              </Body>



          </Card>



             </Content>

             </Container>



     );

 }

}

answered Nov 24 '18 at 11:10

Ali Alsaggaf

235

answered Nov 24 '18 at 11:10

Ali Alsaggaf

235

answered Nov 24 '18 at 11:10

Ali Alsaggaf

235

answered Nov 24 '18 at 11:10

Ali Alsaggaf

235

add a comment |

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Tukukkk