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;
Related
What I'm Trying To Do
My current code is like this.
import React from 'react';
import {
Container, Header, Body, View, Content, Title, Text, Left, Right
} from 'native-base';
import 'react-native-gesture-handler';
import Fire from 'app/src/Fire';
import {
StyleSheet, Image, TouchableOpacity,
} from 'react-native';
export default class All extends React.Component {
constructor(props) {
super(props);
this.state = {
items: [],
};
}
async componentDidMount() {
const querySnapshot = await Fire.shared.getItems(1);
const items = await Fire.shared.pushItems(querySnapshot);
this.setState({ items });
}
render() {
const { items } = this.state;
return (
<Container>
<View>
{items.map((item) => (
<Image
source={{ uri: item.first_img_url }}
/>
<View>
<Text>{item.name}</Text>
</View>
))}
</View>
</Container>
);
}
}
I have another component that has almost same code as above one.
The differences are class name and
await Fire.shared.getItems(1);
or
await Fire.shared.getItems(2);
I know I should combine the same code into one component.
I would appreciate it if you could give me any advices or tips :)
You can extract this code and pass the number 1 or 2 in props.
import React from 'react';
import {
Container, Header, Body, View, Content, Title, Text, Left, Right
} from 'native-base';
import 'react-native-gesture-handler';
import Fire from 'app/src/Fire';
import {
StyleSheet, Image, TouchableOpacity,
} from 'react-native';
export default class All extends React.Component {
constructor(props) {
super(props);
this.state = {
items: [],
};
}
async componentDidMount() {
const querySnapshot = await Fire.shared.getItems(this.props.nbrOfItems);
const items = await Fire.shared.pushItems(querySnapshot);
this.setState({ items });
}
render() {
const { items } = this.state;
return (
<Container>
<View>
{items.map((item) => (
<Image
source={{ uri: item.first_img_url }}
/>
<View>
<Text>{item.name}</Text>
</View>
))}
</View>
</Container>
);
}
}
You can call this component in any component like this
<All nbrOfItems={1} />
Or
<All nbrOfItems={2} />
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 have created a component called OrderGuideSelect and I am trying to render it in another area of our app. The problem is the OrderGuideSelect component is not rendering. When I set up breakpoints I am able to hit inside of the renderOrderGuideOptions function but it never makes it into the OrderGuideSelect.js file. I also tried putting 'export default' in front of the class declaration instead of the connection but it didn't make a difference. Does anyone know how to get the OrderGuideSelect component rendering properly?
Here is where I call the function that renders the OrderGuideSelect component:
<TouchableOpacity onPress={() => this.renderOrderGuideOptions()}>
<MBIcon name="ico-24-filter" size={30} style={styles.filterIcon}/>
</TouchableOpacity>
And here is the rendering function:
renderOrderGuideOptions = () => {
return (
<View>
<OrderGuideSelect />
</View>
)
}
Here is the OrderGuideSelect.js file:
import React, {Component} from 'react';
import {View, FlatList, ActivityIndicator, StyleSheet} from 'react-native';
import {connect} from 'react-redux';
import {fetchOrderGuides} from '../../actions/AppActions';
import {orderGuideSelected} from '../../actions/ProductAction';
import Header from '../../components/Header/Header';
import {createIconSetFromIcoMoon} from 'react-native-vector-icons';
import selection from '../../selection';
import OrderGuideOption from './OrderGuideOption';
const MBIcon = createIconSetFromIcoMoon(selection);
class OrderGuideSelect extends Component {
constructor(props) {
super(props);
}
componentWillMount() {
this.props.dispatch(fetchOrderGuides());
}
selectOrderGuide = id => {
this.props.dispatch(orderGuideSelected(id));
}
render() {
const {isLoading, orderGuides} = this.props.orderGuide;
return (
<View style={styles.wrapper}>
<Header />
<View style={styles.iconLine}>
<MBIcon name='ico-24-filter' style={styles.filterIcon} />
</View>
{isLoading &&
<ActivityIndicator
style={{alignSelf: 'center'}}
animating={true}
size='large'
/>
}
{!isLoading &&
<View style={styles.optionList}>
<FlatList
style={styles.optionList}
data={orderGuides}
keyExtractor={(item, index) => item.id.toString()}
renderItem={({item}) => <OrderGuideOption guideData={item} isSelected={item.id == this.props.selectedGuide.id} onSelected={this.selectOrderGuide} />}
/>
</View>
}
</View>
);
}
}
function mapStateToProps(state){
const {products, orderGuide} = state;
return {
selectedGuide: products.selectedOrderGuide,
orderGuide
}
}
export default connect(mapStateToProps)(OrderGuideSelect);
Also, I may be importing of the OrderGuideSelect component should be correct:
In your code calling this.renderOrderGuideOptions function on onPress event doesn't make sense, i.e. this.renderOrderGuideOptions returns the element but where to append it in DOM?
This should be achived using state in React. So you can set the state in onPress handler then use that state in render to show your OrderGuideOptions component.
So on onPress event bind the function handler:
<TouchableOpacity onPress={this.showOrderGuideOptions}>
<MBIcon name="ico-24-filter" size={30} style={styles.filterIcon}/>
</TouchableOpacity>
Now this showOrderGuideOptions will set the state named showOrderGuideFunction to true.
showOrderGuideOptions(){
this.setState({showOrderGuideFunction: true});
}
At last step use this showOrderGuideFunction state to render your component in the render function like this:
render() {
return (
<div>
...
{
this.state.showOrderGuideFunction &&
renderOrderGuideOptions()
}
</div>
)
}
You can do what you want probably holding a state property in your component and show your OrderGuideOptions according to this state property.
state = { showOrderGuideOptions: false };
renderOrderGuideOptions = () =>
this.setState( prevState => ( { showOrderGuideOptions: !prevState.showOrderGuideOptions }) );
render() {
return (
<View>
<TouchableOpacity onPress={this.renderOrderGuideOptions}>
<MBIcon name="ico-24-filter" size={30} style={styles.filterIcon}/>
</TouchableOpacity>
{ this.state.showOrderGuideOptions && <OrderGuideSelect /> }
</View>
)
}
I think you wanted to something similar to this
class RenderOrderGuideSelectComponent extends Component {
constructor(props) {
super(props);
this.state={
showOrderGuideSelect : false
};
}
renderOrderGuideOptions = () => {
this.setState({showOrderGuideSelect: true});
}
render() {
if(this.state.showOrderGuideSelect) {
return (
);
} else {
return (
this.renderOrderGuideOptions()}>
);
}
}
}
Hello I am trying to make a Instagram like button with react-native by changing the image on press, but when I press the image no changes
Everything is up to date. And the code has no errors.
Here is my code:
import React, { Component } from 'react';
import { View, Text, StyleSheet, Image,navigation,TouchableOpacity } from 'react-native';
import { Container, Content, Badge, Left, Icon, Header} from 'native-base';
import { DrawerActions } from 'react-navigation';
class HomePage extends Component {
constructor(props){
super(props)
this.state = {
likedQ: false,
uri: require('./images/mianIcons/like.png')
}
}
_ifLiked = () => {
likedQ = true;
uri: require('./images/mianIcons/like3.png')
}
render(){
return(
<View>
<Header>
<Left>
<Icon name="ios-menu" onPress={()=> this.props.navigation.openDrawer()}
/>
</Left>
</Header>
<TouchableOpacity onPress={this._ifLiked()}>
<Image
style={{width: 32 , height: 32 ,}}
source={require(uri)}
/>
</TouchableOpacity>
</View>
)
}
}
export default HomePage;
You should set state to rerender the component
_ifLiked = () => {
this.setState({
likedQ: true,
uri: require('./images/mianIcons/like3.png')
})
}
change your onPress function like this. It is basic thing that you should set state for react components to update
There are some more corrections. Following is the corrected code
class HomePage extends Component{
constructor(props){
super(props)
this.state = {
likedQ: false,
uri: './images/mianIcons/like.png'
}
}
_ifLiked = () => {
this.setState({
likedQ: true,
uri: require('./images/mianIcons/like3.png')
}
}
render(){
return(
<View>
<Header>
<Left>
<Icon name="ios-menu" onPress={()=> this.props.navigation.openDrawer()} />
</Left>
</Header>
<TouchableOpacity onPress={() => this._ifLiked}>
<Image style={{width: 32 , height: 32}} source={require(this.state.uri)} />
</TouchableOpacity>
</View>
)}
}
When i try to use DatePickerIOS with react native nothing happen in my phone ...
my code :
import React, { Component } from 'react';
import {Text, View, DatePickerIOS} from 'react-native';
export default class DatePicker extends Component {
constructor(props) {
super(props);
this.state = {
today: new Date(),
}
}
render() {
return (
<View>
<DatePickerIOS date={this.state.today} mode="time" onDateChange={(value) => this.setState({today: value})}/>
</View>
);
}
}
SomeOn know why ?
If you want to print selected time in the UI add the following to the render
render() {
return (
<View>
<DatePickerIOS
date={this.state.today}
mode="time"
onDateChange={(value) => this.setState({today: value})}
/>
<Text>{this.state.today.toTimeString()}</Text>
</View>
);
}