Navigate to another screen with react-native-navigation - javascript

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>
);
}

Related

Component Below Flatlist doens't appear

I've been trying to make a simple app, and I want some comment section that I create with flatlist, but after I create some component below my flatlist it won't appear, but the height of it appears, it just the component itself won't appear, after I'm trying to comment my flatlist, the component below it showed up.
Can you give me solution for this problem? so stuck with it
<View
style={{
alignItems: 'center',
flex: 1,
}}>
<FlatList
data={Comment}
keyExtractor={Comment.id}
renderItem={renderItem}
removeClippedSubviews={true}
scrollEnabled={false}
/>
</View>
</View>
<View>
<Timeline data={data} />
</View>
</View>
<!-- end snippet -->
Try this way
<View style={{ flex: 1 }}>
<View
style={{
alignItems: "center",
flex: 1,
}}
>
<FlatList
data={Comment}
keyExtractor={Comment.id}
renderItem={renderItem}
removeClippedSubviews={true}
scrollEnabled={false}
/>
</View>
<View>
<Timeline data={data} />
</View>
</View>

React Native Spinner Activity Indicator not working

This is Code but not working for me.
return (
<View style={styles.spinnerStyle}>
<ActivityIndicator
animating={true}
size='large'
/>
</View>
);
This styling is for showing ActivityIndicator on center of page.
<View style={{
display:"flex",
flex:1,
justifyContent:"center",
alignItems:"center"
}}>
<ActivityIndicator
animating={true}
size='large'
/>
</View>

how to change TextInput value using Id or Attribute?

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.

React-Native navigation with section list

i have this code in the SectionListView.js:
class SectionListItem extends Component {
render(){
return(
<View>
<TouchableHighlight onPress={()=>navigation.navigate('YoutubeScreen')} underlayColor='transparent'>
<View style={styles.SectionListItem}>
<MaterialIcons name='youtube-searched-for' size={20} style={styles.YtIcon}>
</MaterialIcons>
<View style={styles.Item}>
<Text style={{fontFamily:Fonts.OpenSans}}>{this.props.item.name}</Text>
<Text style={{fontSize:6,fontFamily:Fonts.OpenSans}}>{this.props.item.details}</Text>
</View>
<View style={styles.IconContainer}>
<MaterialIcons name='chevron-right' size={15} style={styles.IconChevron}>
</MaterialIcons>
</View>
</View>
</TouchableHighlight>
</View>
);
}
}
I want that user clicking on list item, go to YoutubeScreen.
This sectionlist is included in a Source Screen:
export default class Source extends Component {
render() {
return (
<Container>
<Header style={styles.Header}>
<Left>
<Button transparent>
<Icon name='menu' onPress={()=>
this.props.navigation.navigate('DrawerOpen')}/>
</Button>
</Left>
<Body style={styles.Body}>
<Text style={{color:'#ffffff'}}>Source</Text>
</Body>
<Right />
</Header>
<Content style={styles.Content}>
<SectionListView/>
</Content>
</Container>
);
}
}
My error is "cant find navigate variable" in section list.I dont understand how pass navigation or navigate.
You need to pass the navigation prop in your component in order to access it
<SectionListView navigation={this.props.navigation}/>
and
<TouchableHighlight onPress={()=> this.props.navigation.navigate('YoutubeScreen')}
or a better way would be to access the navigation in your parent component
SectionListItem.js
onPress={()=>this.props.navigate('YoutubeScreen')}
Source.js
<SectionListView navigate={this._navigate}/>
// Outside of render
_navigate = (screen) => this.props.navigation.navigate(screen)

How to render data in cards using ListView?

I want to render Local json file by listing it in cards, Im using FlatList View but couldn't get it rendered.
Here is my code Snippet :
import React, { Component, View, FlatList } from 'react';
import { Image } from 'react-native';
import {
Container,
Header,
Title,
Content,
Button,
Icon,
Card,
CardItem,
Text,
Thumbnail,
Left,
Body,
Right
} from 'native-base';
import styles from './styles';
const json = require('./fixtures.json');
const logo = require('../../../assets/logo.png');
const cardImage = require('../../../assets/cskvsdd.jpg');
class Fixtures extends Component {
render() {
return (
<FlatList
renderItem={({item}) => {
<Container style={styles.container}>
<Header>
<Left>
<Button transparent onPress={() => this.props.navigation.goBack()}>
<Icon name="arrow-back" />
</Button>
</Left>
<Body>
<Title>Fixtures</Title>
</Body>
<Right />
</Header>
<Content padder>
<Card style={styles.mb}>
<CardItem>
<Left>
<Thumbnail source={logo} />
<Body>
<Text>json data</Text>
<Text note>json data</Text>
</Body>
</Left>
</CardItem>
<CardItem cardBody>
<Image
style={{
resizeMode: 'cover',
width: null,
height: 200,
flex: 1
}}
source={cardImage}
/>
</CardItem>
<CardItem style={{ paddingVertical: 0 }}>
<Left>
<Button transparent>
<Icon active name="thumbs-up" />
<Text>josn data</Text>
</Button>
</Left>
<Body>
<Button transparent>
<Icon active name="chatbubbles" />
<Text>json data</Text>
</Button>
</Body>
<Right>
<Text>json data</Text>
</Right>
</CardItem>
</Card>
</Content>
</Container>
}
/>
);
}
}
export default Fixtures;
I Have overcome many tutorials before asking here. But couldn't figure it out. Apologies if this is too novice.
Kindly help me render json data to cards by refactoring my code.
Thank in advance
By looking at your code snippet I realized that you are not setting the data anywhere in the code. please pass the array of data into Flatlist.
<FlatList
data={[{key: 'a'}, {key: 'b'}]}
renderItem={({item}) => <Text>{item.key}</Text>}
keyExtractor={(item, index)=> index}
/>
keyExtractor should be unique .
Please check flatlist documentation:
https://facebook.github.io/react-native/docs/flatlist.html
Make sure your JSON data is correctly formated and accessed.

Categories