How to render data in cards using ListView? - javascript

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.

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>

Navigate to another screen with react-native-navigation

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

How can I show a new screen after a button is pressed in a component in react native?

I have a created a Carousel component Splash and at the last view/page of it, I have a TextInput and button.On Press, I want this button to open a new screen with BottomNav component where I can do by other stuffs. I just want this Splash as a landing page. But when on running this code I get Splash and BottomNav mounted in same screen.
My Apps.js:
export class App extends Component {
render() {
return (
<PaperProvider>
<Splash />
<BottomNav />
</PaperProvider>
)
}
}
export default App
Splash.js:
render() {
return (
<View style={styles.container} onLayout={this._onLayoutDidChange} >
<Carousel
style={this.state.size}
currentPage={0}
autoplay
isLooped={false}
bulletStyle={{borderColor:'#02101a'}}
bullets
chosenBulletStyle={{backgroundColor:'#02101a'}}
>
<View style={[styles.container, this.state.size]}>
<Text style={styles.title}>
Sanitize Your Hands Properly
</Text>
<Animated.View>
<Image source={require('../src/sanitizehand.png')} style={styles.img}/>
</Animated.View>
<Text style={styles.subtitle}>
Use an alcohol-based hand sanitizer that contains at least 60% alcohol to disinfect your hand at regular basis.
</Text>
</View>
<View style={[styles.container, this.state.size]}>
<Text style={styles.title}>
Practice Social Distancing
</Text>
<Animated.View>
<Image source={require('../src/socialdistancing.png')} style={styles.img}/>
</Animated.View>
<Text style={styles.subtitle}>
Practice social distancing and maintain space between yourself and others to prevent infection and its spread.
</Text>
</View>
<View style={[styles.container, this.state.size]}>
<TextInput
label='Phone No.'
value={this.state.text}
placeholder='Enter here'
onChangeText={text => this.setState({ text })}
style={styles.textinput}
/>
<Button mode="contained" onPress={() => console.warn('Press')} icon='arrow-right'>
Register
</Button>
</View>
</Carousel>
</View>
);
}
BottomNav.js:
render() {
return (
<NavigationContainer>
<Tab.Navigator>
<Tab.Screen name="Home" component={Home} />
<Tab.Screen name="Feeds" component={Feeds} />
<Tab.Screen name="Global" component={Global} />
<Tab.Screen name="FAQ" component={Faq} />
</Tab.Navigator>
</NavigationContainer>
)
}
}

React Native Keyboard Avoiding view with Native base

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

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)

Categories