i have my app like this : https://i.gyazo.com/4cfe178d3a59bf4e7449a7aacd0f114e.png
It is a app for play to a drinking game :p. I want to save all of input already the four input and before and after the fields that the user has added
import React, { Component } from 'react';
import {
View,
Text,
Button,
ScrollView,
TextInput,
TouchableOpacity,
StatusBar
} from 'react-native';
import { createStackNavigator } from 'react-navigation';
import { style } from './style';
class Form extends Component {
constructor(props) {
super(props);
StatusBar.setBarStyle('light-content', true);
console.log(this.props);
state = {
users: [{
id:1,
prenom:''
}, {
id:2,
prenom:''
}, {
id:3,
prenom:''
}, {
id:4,
prenom:''
}]
}
}
saveUser = value => {
console.log('test');
};
showInput() {
return state.users.map((item) => {
console.log(item);
return (
<TextInput
key={item.id}
style={style.input}
placeholder={`Prénom ${item.id}`}
placeholderTextColor="#29235c"
/>
);
});
}
render() {
return this.props.fontLoaded ? (
<View style={style.bgWhite}>
<ScrollView>
{
this.showInput()
}
<View style={style.morePlayer}>
<Text style={style.morePlayerText}>+</Text>
</View>
</ScrollView>
<View style={style.center}>
<TouchableOpacity
activeOpacity={0.9}
onPress={() => this.props.navigation.navigate('Game')}
style={style.btnPlay}
>
<Text style={style.textPlay}>ON TEASE!</Text>
</TouchableOpacity>
<Button title="Go to Details" onPress={() => this.props.navigation.navigate('Game')} />
</View>
</View>
) : null;
}
}
export default Form;
Should I save this in the asyncstorage ? I want to pass the all value of input in the params to go in other screen.
Thanks,
If you just need to pass the params to another screen you can just pass an object as the second argument of navigate.
this.props.navigation.navigate('Game', {
users: this.state.users,
otherParam: 'anything you want here',
});
Related
I am trying to navigate between the screens. I installed npm react-navigation for this purpose. I am trying to go back from my AutoCompActivity page to app.js page. I have the following code on my AutoCompActivity page:
import HomeActivity from '../App'
class AutocompActivity extends Component {
constructor(props) {
super(props);
this.state = {
// Default Value of this State.
Loading_Activity_Indicator: true,
text:'',
selected_topic_id: -1,
}
this.arrayholder=[];
}
OpenHomePageFunction = () =>
{
this.props.navigation.navigate('Home');
}
and finally, I have this in my code:
export default MyNewProject= StackNavigator(
{
Home: {screen:HomeActivity}
}
I am getting the below error:
My AutoCompActivity.js resides inside a folder called Module, module reside inside the root folder' and app.js resides into the root folder of application.
Below is my App.js code:
import React, { Component } from 'react';
import { AppRegistry, StyleSheet, Text, View, Button, Image, TouchableOpacity,Platform } from 'react-native';
import { StackNavigator } from 'react-navigation';
import MissionActivity from './Modules/MissionActivity' ;
import AutoCompActivity from './Modules/AutoCompActivity' ;
import SearchServices from './Modules/SearchServices';
class MainActivity extends Component {
constructor(){
super();
this.state={
isVisible : true,
}
}
Hide_Splash_Screen=()=>{
this.setState({
isVisible : false
});
}
componentDidMount(){
var that = this;
setTimeout(function(){
that.Hide_Splash_Screen();
}, 5000);
}
static navigationOptions = {
title: '',
};
OpenSecondActivityFunction = () =>
{
this.props.navigation.navigate('Mission');
}
OpenThirdActivityFunction = () =>
{
this.props.navigation.navigate('autoComp');
}
OpenSearchSer = () =>
{
this.props.navigation.navigate('SearchSer');
}
render()
{
let Splash_Screen = (
<View style={styles.SplashScreen_RootView}>
<View style={styles.SplashScreen_ChildView}>
{/* Put all your components Image and Text here inside Child view which you want to show in Splash Screen. */}
<Image source={require('./Resources/CAC.png')}
style={{width:'100%', height: '100%', resizeMode: 'contain'}} />
</View>
<TouchableOpacity
activeOpacity = { 0.5 }
style={styles.TouchableOpacity_Style}
onPress={this.Hide_Splash_Screen} >
<Image source={{uri: 'https://reactnativecode.com/wp-content/uploads/2018/01/close_button.png'}}
style={{width:25, height: 25}} />
</TouchableOpacity>
</View> )
return(
<View style = { styles.MainContainer }>
<View style={styles.toolbar}>
<Image
resizeMode='contain'
style={styles.toolbarTitle}
source={require('./Resources/LogoWithDesc.jpg')} />
</View>
<View>
<Image
style={styles.title}
source={require('./Resources/Pot.png')} />
</View>
<View style={styles.searchButton}>
<Button onPress = { this.OpenSecondActivityFunction } title = 'Mission'/>
</View>
<View style={styles.searchButton}>
<Button onPress = { this.OpenThirdActivityFunction } title = 'Available Services'/>
</View>
{
(this.state.isVisible === true) ? Splash_Screen : null
}
</View>
);
}
}
export default ActivityProject = StackNavigator(
{
First: { screen: MainActivity, navigationOptions:{header:null} },
Mission: { screen: MissionActivity },
SearchSer: { screen: SearchServices },
autoComp:{screen: }
});
I am using react-native-router-flux as a router. This is my very first RN app in which I have a Home screen, and a chat screen. My home screen is working fine, and I am able to successfully navigate to to the chat screen upon button press. However, my home screen has an enough form and the value that the use enters (name) I want to pass to the chat screen as a prop.
Main App component
import React, { Component } from 'react';
import Home from './components/Home';
import Chat from './components/Chat';
import {
Router,
Stack,
Scene,
} from 'react-native-router-flux';
class App extends Component {
render() {
return (
<Router>
<Stack key='root'>
<Scene key='home' component={Home} title='Home' />
<Scene key='chat' component={Chat} title='Chat' />
</Stack>
</Router>
)
}
}
export default App;
Home component
import React, { Component } from 'react';
import {
View,
Text,
StyleSheet,
TextInput,
TouchableOpacity,
} from 'react-native';
import {
Actions,
} from 'react-native-router-flux';
class Home extends Component {
constructor(props) {
super(props);
this.state = {
name: '',
}
}
render() {
return (
<View>
<Text style={styles.title}>
Enter your name:
</Text>
<TextInput
style={styles.nameInput}
placeholder='why so serious??'
onChangeText={(text) => {
this.setState({name: text})
}}
value={this.state.name}
/>
<TouchableOpacity
onPress={() => {
Actions.chat({
name: this.state.name,
})
}}
>
<Text style={styles.buttonText}>
Next
</Text>
</TouchableOpacity>
</View>
)
}
}
const styles = StyleSheet.create({
title: {
marginTop: 20,
marginLeft: 20,
fontSize: 20,
},
nameInput: {
padding: 5,
height: 40,
borderWidth: 2,
borderColor: 'black',
margin: 20,
},
buttonText: {
marginLeft: 20,
fontSize: 20
}
})
export default Home;
if I alert this.state.value on the onPress() function, the value is being captured and alerted.
However,
Actions.chat({
name: this.state.name,
})
}}
isn't recieving this input value. When the app goes to the chat screen it just says "hello"
Chat component
import React, { Component } from 'react';
import {
View,
Text,
} from 'react-native';
class Chat extends Component {
render() {
return (
<View>
<Text>
Hello {this.props.name}
</Text>
</View>
)
}
}
export default Chat;
Am I simply over looking something here? any help is appreciated in passing prop from home to chat component.
edit:
In the chat component when i alert(this.props.name) it alert Hello chat. The key from <Scene key='chat' component={Chat} title='Chat' /> in the app component is being passed down instead of the input value from the home component. Not sure why this is happening
seems like name is reserved prop for action key you can do something like that
Actions.chat({
userName: this.state.name,
})
and in your chat class
class Chat extends Component {
render() {
return (
<View>
<Text>
Hello {this.props.userName}
</Text>
</View>
)
}
}
import React, { Component } from 'react';
import { AppRegistry, Text, View, TouchableOpacity } from 'react-native';
class Check extends Component {
constructor(props){
super(props);
this.pressed = true
}
_callme = () => {
if(!this.pressed){
return ( <View>
<TouchableOpacity onPress={this._callMe}>
Show me TextBox
</TouchableOpacity>
</View>
)
}
else{
return (
<View>
<TextInput />
</View>)
}
}
showText = () => {
return (
<TouchableOpacity on Press={this._callMe}>
<Text>Show me TextBox</Text>
</TouchableOpacity>
)
}
render() {
return(
<View>
{this.pressed ? this._callMe : this.showText}
</View>
)
}
}
AppRegistry.registerComponent('Check', () => Check);
I am Newbie into the ReactNative, what I want is when ever a user clicks on a button user should get a popup box for comment, but I don't know where I am doing wrong?
Since you want to render the returned value, you need to call the function with ()
{this.pressed ? this._callMe() : this.showText()}
Also showText function return component <TouchableOpacity on Press={this._callMe}> has a space between on Press change to onPress.
I am trying to create a ListView with multiple rows. Each row have a checkbox + text.
This is my implementation of a ListView:
class ListExample extends Component {
constructor() {
super();
const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
this.state = {
dataSource: ds.cloneWithRows(["hey1", "hey2", "hey3", "hey4"]),
};
}
render() {
return (
<ListView
dataSource={this.state.dataSource}
renderRow={(data) => <Row data={data} />}
/>
);
}
}
export default ListExample;
This is my implementation of a row:
import React from 'react';
import { CheckBox } from 'native-base';
import { View, Text, StyleSheet} from 'react-native';
const Row = (props) => (
<View style={styles.container}>
<CheckBox onPress={props.onPress} checked={false} />
<Text style={styles.text}>
{ props.data }
</Text>
</View>
);
export { Row };
Now I need create behavior on the checkbox. My goal is when a person click on the checkbox the box change the state to checked.
How can I do that ?
You can use the state of your Row component:
import React, { Component } from 'react';
import { CheckBox } from 'native-base';
import { View, Text, StyleSheet} from 'react-native';
class Row extends Component {
constructor(props) {
super(props);
this.state = { checked: false };
}
render() {
return (
<View style={styles.container}>
<CheckBox
onPress={() => this.setState({
checked: !this.state.checked
})}
checked={this.state.checked}
/>
<Text style={styles.text}>
{ props.data }
</Text>
</View>
);
}
}
export default Row;
I have been trying to binds methods to the class with no success. I think am doing everything right, as explained in the documentation. I have also tried other binding plugins but all in vain kindly help.
The weird thing is that, if I bind directly from the render method it works but the moment i try calling a method from another method hell brakes loose.
import React, { Component } from 'react';
import { Navigator, NetInfo, View } from 'react-native';
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
import { ActionCreators } from '../actions';
import _ from 'underscore';
import Api from '../utils/api';
import FooterView from '../components/footer';
import { Container, Content, Icon,
Badge,Footer, FooterTab, Header,
Title, Card, CardItem,Text,
Spinner, List, ListItem, Tabs, Button } from 'native-base';
import theme from '../stylesheets/theme';
import Communications from 'react-native-communications';
function mapStateToProps(state) {
return {
currentUser: state.currentUserReducers,
};
};
function mapDispatchToProps(dispatch) {
return bindActionCreators(ActionCreators, dispatch);
};
class ClientDirectory extends Component {
constructor(props){
super(props);
}
renderCustomers(){
let { currentUser, isLoading } = this.props;
var customers = _.map(currentUser.customers, function(customer){
return(
<Card style={{padding: 1}}>
<CardItem header>
<Text>Shop Name: { customer.name }</Text>
</CardItem>
<CardItem cardBody>
<Text>
Name: { customer.manager_first_name } { customer.manager_last_name }{"\n"}
Region: { customer.region_name }{"\n"}
Landmark: { customer.landmark }{"\n"}
Phone Number: { customer.phone_number }
</Text>
</CardItem>
<CardItem style={{flex:1, alignItems: 'center', justifyContent: 'center', }} header>
<Button transparent style={{ flex:1 }} onPress={ () => Communications.phonecall(customer.phone_number, false)}><Icon name='ios-call' /></Button>
<Button transparent style={{ flex:1 }} onPress={ () => Communications.text(customer.phone_number)}><Icon name='ios-chatboxes'/></Button>
<Button transparent style={{ flex:1 }} onPress={ this.handleMapView.bind(this) }><Icon name='ios-compass' /></Button>
</CardItem>
</Card>
);
});
return customers;
}
handleMapView(){
let { navigator } = this.props;
navigator.push({
name: 'ViewOnMap',
});
}
render(){
return (
<Container>
<Header>
<Button transparent>.</Button>
<Title>Bonus client list</Title>
<Button transparent>
<Icon name='ios-menu' />
</Button>
</Header>
<Content style={{padding: 10, marginBottom:10}}>
{ this.renderCustomers() }
</Content>
</Container>
);
}
};
export default connect(mapStateToProps,mapDispatchToProps)(ClientDirectory);
just to mention, I have tried the below with no luck
http://moduscreate.com/using-es2016-decorators-in-react-native/
https://www.npmjs.com/package/autobind-decorator
Any help will be highly appreciated.
Thanks.
This worked.
var _this = this;
http://javascriptplayground.com/blog/2012/04/javascript-variable-scope-this/
Move your bindings to the constructor like this:
constructor(props){
super(props);
this.handleMapView = this.handleMapView.bind(this);
}
And then your onPress callback should look like this:
onPress={ this.handleMapView }