I have the + and - overlapping and clicking on them doesn't do anything.
The code is however basic.
import React from "react";
import { View, Text, Buttonn, FlatList } from "react-native";
import NumericInput from "react-native-numeric-input";
const style = require("#app/components/common/styles").style;
export default class HomeSettingsScreen extends React.Component {
constructor(props) {
super(props);
this.navigation = props.navigation;
this.state = {
homeCitiesNumber: 10,
};
}
render = () => {
return (
<View>
<View style={style.container}>
<View
style={{
flexDirection: "row",
backgroundColor: "black",
width: "100%",
fontFamily: "DMSans-Regular",
}}
>
<Text style={style.titleContainer}>Settings</Text>
</View>
</View>
<NumericInput
value={this.state.homeCitiesNumber}
onChange={(value) => this.setState({ homeCitiesNumber: value })}
minValue={0}
maxValue={25}
/>
<NumericInput onChange={(value) => console.log(value)} />
</View>
);
};
}
Related
This is my code want to implement an add country and region drop down. I am facing and error at 7,8 line saying semicolon is missing. I would like help as i am beginner at reactnative.
import React,{ Component } from 'react';
import { CountryDropdown, RegionDropdown } from 'react-country-region-selector';
import { StyleSheet, Text, TextInput, View } from 'react-native';
export default function App extends Component() {
constructor(props) {
super(props);
this.state = { country: '', region: '' };
};
selectCountry=(val)=>{
this.setState({ country: val });
};
selectRegion=(val)=>{
this.setState({ region: val });
};
const { country, region } = this.state;
return (
<View style={styles.container}>
<View style={styles.line}>
<Text style={styles.text}>Enter name:</Text>
<TextInput
style={styles.input}
placeholder='e.g. John Doe'
/>
</View>
<View style={styles.line}>
<Text style={styles.text}>Enter Age:</Text>
<TextInput
keyboardType='numeric'
style={styles.input}
placeholder='2'
/>
</View>
<View style={styles.line}>
<Text style={styles.text}>Enter Country:</Text>
<CountryDropdown
value={country}
onValueChange={(val) => this.selectCountry(val)} />
</View>
<View style={styles.line}>
<Text style={styles.text}>Enter Region:</Text>
<RegionDropdown
country={country}
value={region}
onValueChange={(val) => this.selectRegion(val)} />
</View>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex:1,
backgroundColor: '#fff',
alignItems:'center',
justifyContent:'center',
},
line:{
flexDirection:'row',
flex:0,
marginBottom:5,
},
text:{
flex:1,
},
input:{
flex:1,
width:70,
borderBottomWidth:1,
borderBottomColor:'#777',
},
});
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
You are using a class component but calling it a function ....
change export default function App extends Component() { to export default class App extends Component(){
also add a render() function with appropriate surrounding brackets
new code below
import React,{ Component } from 'react';
import { CountryDropdown, RegionDropdown } from 'react-country-region-selector';
import { StyleSheet, Text, TextInput, View } from 'react-native';
export default class App extends Component() { <-- change here
constructor(props) {
super(props);
this.state = { country: '', region: '' };
};
selectCountry=(val)=>{
this.setState({ country: val });
};
selectRegion=(val)=>{
this.setState({ region: val });
};
render() { <-- add here
const {country, region} = this.state;
return (
<View style={styles.container}>
<View style={styles.line}>
<Text style={styles.text}>Enter name:</Text>
<TextInput
style={styles.input}
placeholder='e.g. John Doe'
/>
</View>
<View style={styles.line}>
<Text style={styles.text}>Enter Age:</Text>
<TextInput
keyboardType='numeric'
style={styles.input}
placeholder='2'
/>
</View>
<View style={styles.line}>
<Text style={styles.text}>Enter Country:</Text>
<CountryDropdown
value={country}
onValueChange={(val) => this.selectCountry(val)}/>
</View>
<View style={styles.line}>
<Text style={styles.text}>Enter Region:</Text>
<RegionDropdown
country={country}
value={region}
onValueChange={(val) => this.selectRegion(val)}/>
</View>
</View>
);
} <-- add here
}
const styles = StyleSheet.create({
container: {
flex:1,
backgroundColor: '#fff',
alignItems:'center',
justifyContent:'center',
},
line:{
flexDirection:'row',
flex:0,
marginBottom:5,
},
text:{
flex:1,
},
input:{
flex:1,
width:70,
borderBottomWidth:1,
borderBottomColor:'#777',
},
});
I don't know how to select flatlist items on onPress and display highlight the flatlist items onPress function using flatlist.
In this flatlist i am fettching data using package.js file and using class method
Code
import React from 'react'
import {Stylesheet, View, Text, TouchableOpacity, FlatList, ScrollView } from 'react-native'
import PACKAGE from './Package'
export default class extends React.Component {
constructor(props) {
super(props)
this.state = {
selected: '',
}
_OnPress =() =>{
/**/
}
<FlatList
data={PACKAGE}
contentContainerStyle={{ paddingRight: 20 }}
horizontal
showsHorizontalScrollIndicator={false}
renderItem={({ item, separators }) => (
<View style={{ paddingLeft: 20 }}>
<TouchableOpacity style={[styles.myAccountPriceInfo, { backgroundColor: item.color }]}>
<View>
<Text style={[styles.priceText, { color: item.textColor }]}>{item.name}</Text>
</View>
<View style={styles.priceDetail}>
<Text style={[styles.numText, { color: item.textColor }]}>from </Text>
<Text style={[styles.dollarText, { color: item.textColor }]}>$</Text>
<Text style={[styles.priceNumText, { color: item.textColor }]}>{item.cost}</Text>
</View>
</TouchableOpacity>
</View>
)}
/>
}
You could use the _OnPress function like this.
import React from 'react'
import {Stylesheet, View, Text, TouchableOpacity, FlatList, ScrollView } from 'react-native'
import PACKAGE from './Package'
export default class extends React.Component {
constructor(props) {
super(props)
this.state = {
selected: null,
}
renderItem = ({ item, separators }) => {
// you can know here whether the item is selected or not.
const isSelected = item.name === this.selected.selectedItem;
return (
<View style={{ paddingLeft: 20 }}>
<TouchableOpacity
style={[
styles.myAccountPriceInfo, { backgroundColor: item.color },
// you could highlight your selected item like this.
isSelected && styles.highlightSelected
]}
// let the state know which item has been selected
onPress={() => this.setState(item.name)}
>
<View>
<Text style={[styles.priceText, { color: item.textColor }]}>{item.name}</Text>
</View>
<View style={styles.priceDetail}>
<Text style={[styles.numText, { color: item.textColor }]}>from </Text>
<Text style={[styles.dollarText, { color: item.textColor }]}>$</Text>
<Text style={[styles.priceNumText, { color: item.textColor }]}>{item.cost}</Text>
</View>
</TouchableOpacity>
</View>
)
}
return (
<FlatList
data={PACKAGE}
contentContainerStyle={{ paddingRight: 20 }}
horizontal
showsHorizontalScrollIndicator={false}
renderItem={renderItem}
/>
)
}
I have a HomeScreen component which has button. I am trying to popup a modelview(Seperate component ie PopUpView) on the button click. In PopUpView i am sending its visibility as prop (isVisible).On the click of the button i am trying to change the state value popUpIsVisible from false to true. Hoping that this would re-render and popup my model view(Note this is working fine if i explicitly pass true). However with the state change it look like the render function is not being called and the popUp is not being displayed. Thanks for your help in advance
import React from 'react';
import { View, StyleSheet, Text, Button, TouchableHighlight, Alert, Dimensions} from 'react-native';
import { createStackNavigator, createAppContainer } from 'react-navigation';
import PopUpView from './src/PopUpView';
class HomeScreen extends React.Component {
constructor(props) {
super(props);
this.state = {
popUpIsVisible: false,
};
}
setPopUpIsVisible(isVisible){
this.setState({popUpIsVisible: isVisible });
}
render() {
this.setPopUpIsVisible = this.setPopUpIsVisible.bind(this);
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center', backgroundColor:"blue" }}>
<Text>Home Screen</Text>
<PopUpView isVisible={this.state.popUpIsVisible}/>
<Button onPress={() => {this.setPopUpIsVisible(true)}} title="Open PopUp Screen"/>
</View>
);
}
}
const RootStack = createStackNavigator(
{
Home: HomeScreen
},
{
initialRouteName: 'Home',
}
);
const AppContainer = createAppContainer(RootStack);
export default class App extends React.Component {
render() {
return <AppContainer />;
}
}
PopUpView.js
import React from 'react';
import { View, Modal,StyleSheet, Text, TouchableOpacity, Dimensions} from 'react-native';
import { TabView, TabBar,SceneMap } from 'react-native-tab-view';
import Icon from 'react-native-vector-icons/SimpleLineIcons';
const FirstRoute = () => (
<View style={{ flex: 1, backgroundColor: '#ff4081' }} />
);
const SecondRoute = () => (
<View style={{ flex: 1, backgroundColor: '#673ab7' }} />
);
const ThirdRoute = () => (
<View style={{ flex: 1, backgroundColor: '#673ab7' }} />
);
export default class PopUpView extends React.Component {
constructor(props) {
super(props);
this.state = {
modalVisible:this.props.isVisible,
index: 0,
routes: [
{ key: 'first', title: 'HIGHLIGHTS' },
{ key: 'second', title: 'AMENITIES' },
{ key: 'third', title: 'FACILITIES' },
],
};
}
setModalVisible(visible) {
this.setState({modalVisible: visible});
}
renderHeader = props => <TabBar
{...props}
indicatorStyle={{backgroundColor: 'red'}}
tabStyle={styles.bubble}
labelStyle={styles.noLabel}
/>;
render() {
return (
<Modal
animationType="slide"
transparent={true}
visible={this.state.modalVisible}
onRequestClose={() => {
Alert.alert('Modal has been closed.');
}}>
<View style={styles.container}>
<View style={styles.navBar}>
<Text style={styles.navBarTitle}>Test</Text>
<TouchableOpacity
onPress={() => {
this.setModalVisible(!this.state.modalVisible);
}}>
<Icon style={styles.closeButton} name="close" size={35} color="grey" />
</TouchableOpacity>
</View>
<TabView
navigationState={this.state}
renderScene={SceneMap({
first: FirstRoute,
second: SecondRoute,
third: ThirdRoute,
})}
onIndexChange={index => this.setState({ index })}
initialLayout={{ width: Dimensions.get('window').width }}
renderTabBar={props =>
<TabBar
{...props}
style={{ backgroundColor: 'white' }}
indicatorStyle={{backgroundColor: 'black'}}
tabStyle={styles.bubble}
labelStyle={styles.label}
/>
}
/>
</View>
</Modal>
);
}
}
const styles = StyleSheet.create({
container: {
flex:1,
margin: 50,
marginLeft: 20,
marginRight: 20,
marginBottom: 20,
backgroundColor: "white",
borderWidth: 1,
borderColor: "grey",
flexDirection: 'column'
},
navBar:{
height:70,
justifyContent: 'space-between',
alignItems: 'center',
flexDirection: 'row',
borderBottomColor: 'lightgrey',
borderBottomWidth: 1,
},
navBarTitle:{
fontSize: 25,
fontFamily: 'Optima',
paddingLeft:15,
},
closeButton:{
paddingRight:12,
},
label: {
color: 'black'
}
})
The problem with your code is that you are using the state inside the PopUpView which does not change when you change the external prop. to fix this you should use the componentwillreceiveprops and update your state accordingly.
componentWillReceiveProps(nextProps){
if(this.props.isVisible!=nextProps.isVisible){
this.setState({modalVisible:nextProps.isVisible})
}
}
The better approach will be using the this.props.isVisible as the visible prop for the Model.
In this scenario you will have to pass a function as a prop to popupview which will set the popUpIsVisible to false.
Something like below
<PopUpView isVisible={this.state.popUpIsVisible}
onDismiss={()=>{this.setState({popUpIsVisible:false})}}/>
You can call the onDismiss inside the child as
<Modal visible={this.props.isVisible}>
<TouchableHighlight
onPress={() => {
this.props.onDismiss();
}}>
<Text>Hide Modal</Text>
</TouchableHighlight>
</Modal>
The second approach is better as the visibility of the child is controlled by the parent.
Add below line into constructor after state defining
this.setPopUpIsVisible = this.setPopUpIsVisible.bind(this);
Here is the code, I'm not able to invoke removeItem function while clicking on Icon tag.Please help me out I'm a beginner in react native.I'm stuck for 3 days.
Please help me out in proper way of calling function.Thanks in advanced
import React from 'react';
import { StyleSheet, Text, View,TextInput,KeyboardAvoidingView,Dimensions,ScrollView,Alert,TouchableOpacity,Button,TouchableHighlight } from 'react-native';
import Icon from 'react-native-vector-icons/Entypo';
var {height, width} = Dimensions.get('window');
var d = new Date();
export default class App extends React.Component {
constructor(props){
super(props);
this.state = {
noteList: [],
noteText: ''
}
}
addItems(){
var a = this.state.noteText;
this.state.noteList.push(a)
this.setState({
noteText:''
})
console.log(this.state.noteList)
}
removeItem(key) {
console.log('removeItem is working',key);
}
render() {
return (
<KeyboardAvoidingView style={styles.container} behavior="padding" enabled>
<View style={styles.header}>
<Text style={{fontSize: 20}}>NOTE APPLICATION</Text>
</View>
<View style={styles.body}>
<ScrollView>
{this.state.noteList.map(function(value,key){
return(
<View key={key} style={styles.bodyElements} >
<Text>{key}</Text>
<Text>{value}</Text>
<Text>{d.toDateString()}</Text>
<Icon onPress={(key) => this.removeItem(key)} name="cross" color="white" size={40}/>
</View>
)
})}
</ScrollView>
</View>
<View style={styles.footer}>
<TextInput style={{marginTop:10,marginLeft:10}}
placeholder="Jot down your thoughts before they vanish :)"
width={width/1.2}
underlineColorAndroid="transparent"
onChangeText={(noteText) => this.setState({noteText})}
value={this.state.noteText}
/>
<Icon style={{marginTop:15}} name="add-to-list" color="white" size={40} onPress={this.addItems.bind(this)}/>
</View>
</KeyboardAvoidingView>
);
}
}
I do not have your array data so i use a,b values. but mamy issue with map functionis here, you need to pass this as params . check in the code
import React from 'react';
import { StyleSheet, Text, View, TextInput, KeyboardAvoidingView, Dimensions, ScrollView, Alert, TouchableOpacity, Button, TouchableHighlight } from 'react-native';
// import Icon from 'react-native-vector-icons/Entypo';
var { height, width } = Dimensions.get('window');
var d = new Date();
export default class App extends React.Component {
constructor(props) {
super(props);
this.state = {
noteList: ['a','b'],
noteText: ''
}
}
addItems() {
var a = this.state.noteText;
this.state.noteList.push(a)
this.setState({
noteText: ''
})
console.log(this.state.noteList)
}
removeItem(key) {
console.warn('removeItem is working');
}
render() {
return (
<View >
<View style={styles.header}>
<Text style={{ fontSize: 20 }}>NOTE APPLICATION</Text>
<Button title="try" onPress={(key) => this.removeItem()} name="cross"
size={40} />
</View>
<View style={styles.body}>
{this.state.noteList.map(function(value,key){
return(
<View key={key} style={styles.bodyElements} >
<Text>{key}</Text>
<Text>{value}</Text>
<Text>{d.toDateString()}</Text>
<Button title="try"
onPress={() => this.removeItem()}
name="cross"
color="white"
size={40}/>
</View>
)
},this)}
</View>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
welcome: {
fontSize: 25,
textAlign: 'center',
margin: 10,
},
child: {
fontSize: 18,
textAlign: 'center',
margin: 10,
backgroundColor: 'green',
height: 100,
width: 200,
},
});
I can not open the third page screen with the On Press method in the List Component.js file. I do not understand the problem. I want to know what I'm doing wrong with this. Where is the problem? Thank you. Please help.
Thank you for your reply but this will not work, my friend. I've updated the ListComponent.js file. The ListComponent.js file is actually a list. Please can you look again. ?
App.js
import React, { Component } from 'react';
import {
WebView,
AppRegistry, StyleSheet, Text, View, Button
} from 'react-native';
import { StackNavigator } from 'react-navigation';
import ListComponent from './ListComponent';
class App extends Component {
static navigationOptions =
{
title: 'App',
};
OpenSecondActivityFunction = () =>
{
this.props.navigation.navigate('Second');
}
render() {
return (
<View style={styles.container}>
<Button onPress = { this.OpenSecondActivityFunction } title = 'Open Second Activity'/>
</View>
);
}
}
class SecondActivity extends Component
{
static navigationOptions =
{
title: 'SecondActivity',
};
OpenThirdActivityFunction = () =>
{
this.props.navigation.navigate('Third');
}
render()
{
return(
<View style={{ flex: 1}}>
<ListComponents data={alapinCtrl} OpenThirdActivityFunction={this.OpenThirdActivityFunction} />
</View>
);
}
}
class ThirdActivity extends Component
{
static navigationOptions =
{
title: 'ThirdSecondActivity',
};
render()
{
return(
<View style={{ flex: 1}}>
<Text>3</Text>
</View>
);
}
}
export default ActivityProject = StackNavigator(
{
First: { screen: App },
Second: { screen: SecondActivity },
Third: { screen: ThirdActivity }
});
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},ActivityNameTextCss:
{
fontSize: 22,
color: 'black',
textAlign: 'center',
},
});
AppRegistry.registerComponent('ActivityProject', () => ActivityProject);
ListComponent.js
import React, { Component } from "react";
import {AppRegistry,View, Text, FlatList, ActivityIndicator} from "react-native";
import { List, ListItem, SearchBar } from "react-native-elements";
class ListComponents extends Component {
constructor(props) {
super(props);
this.state = {
loading: false,
data: [],
page: 1,
seed: 1,
error: null,
refreshing: false
};
}
renderSeparator = () => {
return (
<View
style={{
height: 1,
width: "98%",
backgroundColor: "#CED0CE",
marginLeft: "2%"
}}
/>
);
};
renderHeader = () => {
return <SearchBar placeholder="Type Here..." lightTheme round />;
};
renderFooter = () => {
if (!this.state.loading) return null;
return (
<View
style={{
paddingVertical: 20,
borderTopWidth: 1,
borderColor: "#CED0CE"
}}
>
<ActivityIndicator animating size="large" />
</View>
);
};
render() {
return (
<List containerStyle={{ borderTopWidth: 0, borderBottomWidth: 0 }}>
<FlatList
data={this.props.data}
renderItem={({ item }) => (
<ListItem
roundAvatar
title={`${item.name}`}
subtitle={item.coders}
containerStyle={{ borderBottomWidth: 0 }}
onPress={() => this.props.OpenThirdActivityFunction(item.coders)}
/>
)}
keyExtractor={item => item.coders}
ItemSeparatorComponent={this.renderSeparator}
ListHeaderComponent={this.renderHeader}
ListFooterComponent={this.renderFooter}
/>
</List>
);
}
}
export default ListComponents;
Only SecondActivity has the navigation prop; you need to explicitly pass it to child component:
<ListComponent navigation={this.props.navigation} />
Alternatively,
<ListComponent onPress={() => this.props.navigation.navigate('Third')} />;
Then just do <Button onPress={this.props.onPress} in your ListComponent.