I have unlimited inputs and I can't count all of them. I want to change the value of these by pressing the buttons but I can't set state for all of these because these can be over 1000 of Inputs or less than 10.
How can I change the values by pressing any plus or negative buttons of each input?
import React, { Component } from 'react';
import { StyleSheet, View, ToastAndroid } from 'react-native';
import { Content, List, ListItem, Thumbnail, Text, Body, Right, Left, Button, Icon, Input } from 'native-base';
let basket = [];
let Numberr = 0;
let ProductCount = [];
class MyAppList extends Component<Props> {
constructor(props){
super(props);
this.state={
quantity:'0'
}
}
UserOrderBasket = (ProductId,InputId)=>{
document,getElementById(InputId).value=Numberr;
Numberr++;
}
render() {
return (
<Content>
<View style={{ flex:1, flexDirection: 'row' }}>
<Button primary style={styles.fakeButtons1} onPress={()=>this.props.navigation.navigate('MainPage')}>
<Icon name='arrow-back' />
</Button>
<Button primary style={styles.fakeButtons2} onPress={()=>this.props.navigation.navigate('Cart',{ORDERS:basket})}>
<Icon name="cart" style={{color:'#fff'}} />
</Button>
</View>
<List>
<ListItem>
<Left>
<Body style={{ flex:1, flexDirection: 'row' }}>
<Button icon transparent style={{width:36,padding:0}}>
<Left>
<Icon type="FontAwesome" name="minus-circle" style={{fontSize:40,color:'blue'}}/>
</Left>
</Button>
<Input
id="input-1"
value="0"
/>
<Button icon transparent style={{width:36,padding:0}} onPress={this.UserOrderBasket.bind(this,1,'input-1')}>
<Left>
<Icon type="FontAwesome" name='plus-circle' style={{fontSize:40,color:'blue'}}/>
</Left>
</Button>
</Body>
</Left>
<Body>
<Text>گوشت گوسفندی</Text>
<Text note>توضیحات کوتاه در باره محصول ... </Text>
</Body>
<Thumbnail square size={50} source={{ uri: 'http://192.168.1.102/studioaleph/img/image-15-630x825.jpg' }} />
</ListItem>
<ListItem>
<Left>
<Body style={{ flex:1, flexDirection: 'row' }}>
<Button icon transparent style={{width:36,padding:0}}>
<Left>
<Icon type="FontAwesome" name="minus-circle" style={{fontSize:40,color:'blue'}}/>
</Left>
</Button>
<Input
id="input-2"
value="0"
/>
<Button icon transparent style={{width:36,padding:0}} onPress={this.UserOrderBasket.bind(this,1,'input-1')}>
<Left>
<Icon type="FontAwesome" name='plus-circle' style={{fontSize:40,color:'blue'}}/>
</Left>
</Button>
</Body>
</Left>
<Body>
<Text>گوشت گوسفندی</Text>
<Text note>توضیحات کوتاه در باره محصول ... </Text>
</Body>
<Thumbnail square size={50} source={{ uri: 'http://192.168.1.102/studioaleph/img/image-15-630x825.jpg' }} />
</ListItem>
<ListItem>
<Left>
<Body style={{ flex:1, flexDirection: 'row' }}>
<Button icon transparent style={{width:36,padding:0}}>
<Left>
<Icon type="FontAwesome" name="minus-circle" style={{fontSize:40,color:'blue'}}/>
</Left>
</Button>
<Input
id="input-3"
value="0"
/>
<Button icon transparent style={{width:36,padding:0}} onPress={this.UserOrderBasket.bind(this,1,'input-1')}>
<Left>
<Icon type="FontAwesome" name='plus-circle' style={{fontSize:40,color:'blue'}}/>
</Left>
</Button>
</Body>
</Left>
<Body>
<Text>گوشت گوسفندی</Text>
<Text note>توضیحات کوتاه در باره محصول ... </Text>
</Body>
<Thumbnail square size={50} source={{ uri: 'http://192.168.1.102/studioaleph/img/image-15-630x825.jpg' }} />
</ListItem>
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
<ListItem>
<Left>
<Body style={{ flex:1, flexDirection: 'row' }}>
<Button icon transparent style={{width:36,padding:0}}>
<Left>
<Icon type="FontAwesome" name="minus-circle" style={{fontSize:40,color:'blue'}}/>
</Left>
</Button>
<Input
id="input-300"
value="0"
/>
<Button icon transparent style={{width:36,padding:0}} onPress={this.UserOrderBasket.bind(this,1,'input-1')}>
<Left>
<Icon type="FontAwesome" name='plus-circle' style={{fontSize:40,color:'blue'}}/>
</Left>
</Button>
</Body>
</Left>
<Body>
<Text>گوشت گوسفندی</Text>
<Text note>توضیحات کوتاه در باره محصول ... </Text>
</Body>
<Thumbnail square size={50} source={{ uri: 'http://192.168.1.102/studioaleph/img/image-15-630x825.jpg' }} />
</ListItem>
</List>
</Content>
);
}
}
const styles = StyleSheet.create({
ListTextB:{
fontSize:16,
fontFamily:'IRANSans',
paddingTop:5,
textAlign:'right'
},
fakeButtons1:{
width:'50%',
borderRadius:0,
alignItems: 'center',
},
fakeButtons2:{
width:'50%',
borderRadius:0,
justifyContent: 'flex-end'
},
shoppingButtons:{
borderRadius:50,
padding:5
},
shoppingText:
{
fontSize:18,
textAlign:'center',
padding:0,
backgroundColor:'#fff'
}
});
export {MyAppList};
how can I solve this problem? It's a mobile store application.
Related
Hey
I have my bottom bar out the Scroll View component,But it still scroll with the other components.
How can i make it fixed ?
"
<SafeAreaView styles={SafeViewAndroid.AndroidSafeArea}>
<View style={{ backgroundColor: "#fff", padding: 15 }}>
<HeaderTabs activeTab={activeTab} setActiveTab={setActiveTab} />
<SearchBar cityHandler={setCity} />
</View>
<ScrollView showsVerticalScrollIndicator={false}>
<Categories />
<RestaurantItems restaurantData={restaurantData} />
</ScrollView>
<Divider width={1} />
<BottomTabs />
</SafeAreaView>
"
Entire Code Screen
You can use flex proportions to separate the and components, as below
<SafeAreaView styles={SafeViewAndroid.AndroidSafeArea}>
<View style={{ backgroundColor: "#fff", padding: 15, flex : 1 }}>
<HeaderTabs activeTab={activeTab} setActiveTab={setActiveTab} />
<SearchBar cityHandler={setCity} />
</View>
<View style= {{flex : 3 }}>
<ScrollView showsVerticalScrollIndicator={false}>
<Categories />
<RestaurantItems restaurantData={restaurantData} />
</ScrollView>
</View>
<View style= {{flex : 1 }}>
<Divider width={1} />
<BottomTabs />
</View>
</SafeAreaView>
You can do it by styling your button component as -
<TouchableOpacity
style={{
width: 60,
height: 60,
backgroundColor: 'red',
position: 'absolute',
bottom: 50,
justifyContent: 'center',
alignItems: 'center',
}}
onPress={() => {
console.log('Button Pressed')
}}
>
<Text>Hello Bottom Button</Text>
</TouchableOpacity>
I started developing new application in React. I have a webview application and I want to add a feature like this, I want the basket icon at the bottom to not appear when the user login is not provided, but I need to ensure that the bottom basket button is active again when the user logs in. Can you help me on how to do this ?
onPressButtonURL = (url) => {
console.log("==========>>> URL: ", url);
this.setState({ url:`${url}?t=${Date.now()}` });
}
mystyles = {
display: "none"
};
render()
{
return (
<Container>
<WebView source={{uri:this.state.url}} ref={WEBVIEW_REF} useWebKit={true} cacheEnabled={true} style={{marginTop: 30, flex: 1}}
onLoadProgress={({ nativeEvent }) => {this.loadingProgress = nativeEvent.progress;}}/>
<View style={{ alignSelf: "auto"}}>
<Fab active={this.state.active} direction="up" containerStyle={{bottom: 100 }} style={{ backgroundColor: '#5067FF'}} position="bottomRight" onPress={() => this.setState({ active: !this.state.active })}>
<Icon type="FontAwesome" name="share-alt" />
<Button style={{ backgroundColor:'#34A34F'}} ref="whatsapp" onPress={() => Linking.openURL('whatsapp://send?text='+wa_message+'&phone='+wa_number) }><Icon type="FontAwesome" name="whatsapp"/></Button>
<Button style={{ backgroundColor:'#3B5998'}} ref="facebook" onPress={() => Linking.openURL(fb_url) }><Icon type="FontAwesome" name="facebook"/></Button>
<Button style={{ backgroundColor:'#f09433'}} ref="inst" onPress={() => Linking.openURL(inst_url) }><Icon type="FontAwesome" name="instagram"/></Button>
<Button style={{ backgroundColor:'#DD5144'}} ref="mail" onPress={() => Linking.openURL('mailto:'+mail_url) }><Icon type="FontAwesome" name="envelope"/></Button>
</Fab>
<Footer>
<FooterTab>
<Button vertical onPress={() => this.onPressButtonURL(this.site_url+'index.php')} danger={this.state.clicked}><Icon type="FontAwesome" name="home" /><Text></Text></Button>
<Button vertical onPress={() => this.onPressButtonURL(this.site_url+'sepetimigoster.html')} danger={this.state.clicked}><Icon type="FontAwesome" name="shopping-basket" id="shopping-basket" /><Text></Text></Button>
<Button vertical onPress={() => this.onPressButtonURL(this.site_url+'uyegiris.html')}><Icon type="FontAwesome" name="user" /><Text></Text></Button>
<Button vertical onPress={() =>this.refs[WEBVIEW_REF].goBack()}><Icon type="FontAwesome" name="arrow-left" /><Text></Text></Button>
<Button vertical onPress={() =>this.refs[WEBVIEW_REF].goForward()}><Icon type="FontAwesome" name="arrow-right" /><Text></Text></Button>
</FooterTab>
</Footer>
</View>
</Container>
);
}
}
If you want the button to be omitted completely you can just conditionally include it with something like this:
onPressButtonURL = (url) => {
console.log("==========>>> URL: ", url);
this.setState({ url:`${url}?t=${Date.now()}` });
}
mystyles = {
display: "none"
};
render()
{
let isLoggedIn = false; // wherever this comes from
return (
<Container>
<WebView source={{uri:this.state.url}} ref={WEBVIEW_REF} useWebKit={true} cacheEnabled={true} style={{marginTop: 30, flex: 1}}
onLoadProgress={({ nativeEvent }) => {this.loadingProgress = nativeEvent.progress;}}/>
<View style={{ alignSelf: "auto"}}>
<Fab active={this.state.active} direction="up" containerStyle={{bottom: 100 }} style={{ backgroundColor: '#5067FF'}} position="bottomRight" onPress={() => this.setState({ active: !this.state.active })}>
<Icon type="FontAwesome" name="share-alt" />
<Button style={{ backgroundColor:'#34A34F'}} ref="whatsapp" onPress={() => Linking.openURL('whatsapp://send?text='+wa_message+'&phone='+wa_number) }><Icon type="FontAwesome" name="whatsapp"/></Button>
<Button style={{ backgroundColor:'#3B5998'}} ref="facebook" onPress={() => Linking.openURL(fb_url) }><Icon type="FontAwesome" name="facebook"/></Button>
<Button style={{ backgroundColor:'#f09433'}} ref="inst" onPress={() => Linking.openURL(inst_url) }><Icon type="FontAwesome" name="instagram"/></Button>
<Button style={{ backgroundColor:'#DD5144'}} ref="mail" onPress={() => Linking.openURL('mailto:'+mail_url) }><Icon type="FontAwesome" name="envelope"/></Button>
</Fab>
<Footer>
<FooterTab>
<Button vertical onPress={() => this.onPressButtonURL(this.site_url+'index.php')} danger={this.state.clicked}><Icon type="FontAwesome" name="home" /><Text></Text></Button>
{isLoggedIn &&
<Button vertical onPress={() => this.onPressButtonURL(this.site_url+'sepetimigoster.html')} danger={this.state.clicked}><Icon type="FontAwesome" name="shopping-basket" id="shopping-basket" /><Text></Text></Button>}
<Button vertical onPress={() => this.onPressButtonURL(this.site_url+'uyegiris.html')}><Icon type="FontAwesome" name="user" /><Text></Text></Button>
<Button vertical onPress={() =>this.refs[WEBVIEW_REF].goBack()}><Icon type="FontAwesome" name="arrow-left" /><Text></Text></Button>
<Button vertical onPress={() =>this.refs[WEBVIEW_REF].goForward()}><Icon type="FontAwesome" name="arrow-right" /><Text></Text></Button>
</FooterTab>
</Footer>
</View>
</Container>
);
}
}
Good afternoon everyone. I'm a little bit stucked with a navigation on button click.
I would like to move to another screen on a button click
Button code part (./Components/Dashboard.js):
<List>
<ListItem avatar>
<Left>
<Thumbnail source={{ uri: 'image-url' }} />
</Left>
<Body>
<Button dark transparent>
<Text>Euro</Text>
<Text>4200</Text>
</Button>
</Body>
</ListItem>
</List>
And I have a new screen with few buttons (./Components/Screens/EuroScreen.js)
import * as React from 'react';
import { Button, View, Text } from 'react-native';
function HomeScreen({ navigation }) {
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center'}}>
<Text>Euro Screen</Text>
<Button dark>Test</Button>
</View>
);
}
How I can add a click property to my Button in ./Components/Dashboard?
This might help
Dashboard({ navigation }) {
return (
<View>
<List>
<ListItem avatar>
<Left>
<Thumbnail source={{ uri: "image-url" }} />
</Left>
<Body>
<Button onPress={() => navigation.navigate("EuroScreen")}>
<Text>Euro</Text>
<Text>4200</Text>
</Button>
</Body>
</ListItem>
</List>
</View>
);
}
I'm using native base in screen, and I'm trying to add but it is not working properly as keyboard still hides the text inputs
render() {
return (
<Container>
<Header style={styles.header}>
<Left style={styles.left}>
<TouchableOpacity
style={styles.backArrow}
onPress={() => this.props.navigation.navigate("Welcome")}
>
<FontAwesome
name={I18nManager.isRTL ? "angle-right" : "angle-left"}
size={30}
color="#6f6f6f"
/>
</TouchableOpacity>
</Left>
<Body style={styles.body} />
<Right style={styles.right} />
</Header>
<View style={styles.signuplogosec}>
<Image source={Logo} style={styles.signuplogostyle} />
</View>
<KeyboardAvoidingView behavior="padding" enabled>
<Form style={styles.form}>
<Item rounded style={styles.inputStyle}>
<Input
//placeholderTextColor="#ffffff"
textAlign={I18nManager.isRTL ? "right" : "left"}
placeholder="First Name"
onChangeText={(first_name) => { this.setState({ first_name }) }}
style={styles.inputmain}
/>
</Item>
<Item rounded style={[styles.inputStyle,, { marginTop: 10 }]}>
<Input
//placeholderTextColor="#ffffff"
textAlign={I18nManager.isRTL ? "right" : "left"}
placeholder="Last Name"
style={styles.inputmain}
onChangeText={(last_name) => { this.setState({ last_name }) }}
/>
</Item>
<Item rounded style={[styles.inputStyle,, { marginTop: 10 }]}>
<Input
//placeholderTextColor="#ffffff"
textAlign={I18nManager.isRTL ? "right" : "left"}
placeholder="Email"
style={styles.inputmain}
autoCapitalize='none'
onChangeText={(email) => { this.setState({ email }) }}
/>
</Item>
<Item rounded style={[styles.inputStyle, { marginTop: 10 }]}>
<Input
//placeholderTextColor="#ffffff"
placeholder="Password"
secureTextEntry={true}
textAlign={I18nManager.isRTL ? "right" : "left"}
style={styles.inputmain}
onChangeText={(password) => { this.setState({ password }) }}
/>
</Item>
<Item rounded style={[styles.inputStyle, { marginTop: 10 }]}>
<Input
//placeholderTextColor="#ffffff"
placeholder="Confirm Password"
secureTextEntry={true}
textAlign={I18nManager.isRTL ? "right" : "left"}
style={styles.inputmain}
onChangeText={(confirm_password) => { this.setState({ confirm_password }) }}
/>
</Item>
<TouchableOpacity
info
style={styles.signInbtn}
onPress={this.signIn}
>
<Text autoCapitalize="words" style={styles.buttongetstarted}>
Sign Up
</Text>
</TouchableOpacity>
</Form>
</KeyboardAvoidingView>
<View style={styles.signupbottomView}>
<TouchableOpacity
style={styles.fbButton}
onPress={() => alert("Facebook button Clicked")}
>
<View iconRight style={styles.fbview}>
<Ionicons name="logo-linkedin" size={30} color="white" />
<Text autoCapitalize="words" style={styles.fbButtonText}>
Sign Up with LinkedIn
</Text>
</View>
</TouchableOpacity>
<TouchableOpacity
style={styles.signupbottomText}
onPress={()=>{this.props.navigation.navigate('SignIn')}}>
<Text style={styles.bottomText01}>
Do you have an account?{" "}
<Text style={styles.bottomText02}>Sign In</Text>
</Text>
</TouchableOpacity>
</View>
</Container>
);
}
}
export default SignUpScreen;
I have tried to add different views inside form tag but it is still not working, I have tried to create different form tags but failed.
My requirement is simple I want to use the KeyboardAvoidingView inside Native base components, I'm wrong some where but I don't know where
Just import KeyboardAvoidingView from react-native using with
behavior='position'
import React, {Component} from 'react';
import {StyleSheet, TextInput, View, KeyboardAvoidingView} from 'react-native';
export default class App extends Component {
render() {
return (
<View>
<KeyboardAvoidingView behavior='position'>
<TextInput>Sample</TextInput>
<TextInput>Sample</TextInput>
<TextInput>Sample</TextInput>
<TextInput>Sample</TextInput>
<TextInput>Sample</TextInput>
<TextInput>Sample</TextInput>
<TextInput>Sample</TextInput>
</KeyboardAvoidingView>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#f5f5f5',
}
import { Image,KeyboardAvoidingView } from 'react-native';
import { Container, Content, Text, Card, CardItem, Button, Icon, Form, Item, Input, Spinner } from 'native-base';
//https://github.com/GeekyAnts/NativeBase/issues/1163
<KeyboardAvoidingView behavior="padding" style={{ flex: 1 }}>
<Content>...</Content>
</KeyboardAvoidingView>;
I am successfully getting data from API and also am able to pass the object as props in the next component, my code for passing object is:
if (stateItems.length > 0) {
console.log(stateItems[0]);
if (stateItems[i + 1]) {
items.push(
<Grid key={i}>
<Product key={stateItems[i].product_id} product={stateItems[i]} />
<Product key={stateItems[i + 1].product_id} product={stateItems[i + 1]} isRight />
</Grid>
);
}
}
In the receiving end when i console log this.props.product I can see my data:
but when I try to render the data I get an empty screen, my code for rendering the data is:
render() {
console.log(this.props.product)
return (
<Col style={this.props.isRight ? style.leftMargin : style.rightMargin}>
<Card transparent>
<CardItem cardBody>
<Button transparent style={style.button} onPress={() => this.pressed()}>
<Image source={{ uri: this.props.product.image }} style={style.image} />
<View style={style.border} />
</Button>
</CardItem>
<CardItem style={{ paddingTop: 0 }}>
<Button style={{ flex: 1, paddingLeft: 0, paddingRight: 0, paddingBottom: 0, paddingTop: 0 }}
transparent
onPress={() => this.pressed()}
>
<Body>
<Text
style={{ fontSize: 16 }}
numberOfLines={1}
>{this.props.product.name}</Text>
<View style={{ flex: 1, width: '100%', alignItems: 'center' }}>
<View style={style.line} />
<Text style={style.price}>{this.props.product.price}</Text>
<View style={style.line} />
</View>
</Body>
</Button>
</CardItem>
</Card>
</Col>
);}
As per you show this.props.product look like its array of object.
You need to use map for iterate array and display product.
this.props.product.map((singleProduct, index) => {
return (
<Col style={this.props.isRight ? style.leftMargin : style.rightMargin}>
<Card transparent>
<CardItem cardBody>
<Button transparent style={style.button} onPress={() => this.pressed()}>
<Image source={{ uri: singleProduct.image }} style={style.image} />
<View style={style.border} />
</Button>
</CardItem>
<CardItem style={{ paddingTop: 0 }}>
<Button style={{ flex: 1, paddingLeft: 0, paddingRight: 0, paddingBottom: 0, paddingTop: 0 }}
transparent
onPress={() => this.pressed()}
>
<Body>
<Text
style={{ fontSize: 16 }}
numberOfLines={1}
>{singleProduct.name}</Text>
<View style={{ flex: 1, width: '100%', alignItems: 'center' }}>
<View style={style.line} />
<Text style={style.price}>{singleProduct.price}</Text>
<View style={style.line} />
</View>
</Body>
</Button>
</CardItem>
</Card>
);
})