I am following a tutorial but as I code along I am stuck,
Why isn't my FlatList not showing?
App.js is simply returning MessagesScreen "screen".
This is my code for a MessagesScreen:
import React from "react";
import { FlatList } from "react-native";
import ListItem from "../components/ListItem";
const messages = [
{
id: 1,
title: "T1",
description: "D1",
image: require("../assets/mosh.jpg"),
},
{
id: 2,
title: "T2",
description: "D2",
image: require("../assets/mosh.jpg"),
},
{
id: 3,
title: "T3",
description: "D3",
image: require("../assets/mosh.jpg"),
},
{
id: 4,
title: "T4",
description: "D4",
image: require("../assets/mosh.jpg"),
},
];
const MessagesScreen = () => {
return (
<FlatList>
data={messages}
keyExtractor={(message) => message.id.toString()}
renderItem=
{({ item }) => {
return (
<ListItem
title={item.title}
subTitle={item.subTitle}
image={item.image}
/>
);
}}
</FlatList>
);
};
export default MessagesScreen;
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
This is my component for the ListItem:
import React from "react";
import { View, StyleSheet, Image } from "react-native";
import AppText from "./AppText";
import colors from "../config/colors";
function ListItem({ title, subTitle, image }) {
return (
<View style={styles.container}>
<Image style={styles.image} source={image} />
<View>
<AppText style={styles.title}>{title}</AppText>
<AppText style={styles.subTitle}>{subTitle}</AppText>
</View>
</View>
);
}
const styles = StyleSheet.create({
container: {
flexDirection: "row",
},
image: {
width: 70,
height: 70,
borderRadius: 35,
marginRight: 10,
},
subTitle: {
color: colors.medium,
},
title: {
fontWeight: "500",
},
});
export default ListItem;
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
What I've tried is to use the return inside the "renderItem", but with no work, also done it without. The code doesn't give me any errors, so I can't see where the problem is.
You're accessing a property that doesn't exist on your items: subTitle. Did you mean to use description?
Also, I don't believe you can pass in the result of a require call like that. Try passing the raw url and placing the require in the image={} prop instead
Oh it's just a quick fix.
FlatList should be one tag:
const MessagesScreen = () => {
return (
<FlatList // <--- edit here
data={messages}
keyExtractor={(message) => message.id.toString()}
renderItem=
{({ item }) => {
return (
<ListItem
title={item.title}
subTitle={item.subTitle}
image={item.image}
/>
);
}}
/> // <--- and here
);
};
Here's a codesandbox to demonstrate
Related
unfortunately I am struggling to really grip how this library works, specifically the ParallaxImage component. I was wondering if someone could help me out. I am struggling to get my images to render.
Here are the docs: https://www.npmjs.com/package/react-native-snap-carousel#props-methods-and-getters
here is the following code but I also have a snack already running it here
It doesn't load on the web btw, you have to choose IOS or android.
import React, {useRef, useState, useEffect} from 'react';
import Carousel, {ParallaxImage} from 'react-native-snap-carousel';
import {
View,
Text,
Dimensions,
StyleSheet,
TouchableOpacity,
Platform,
} from 'react-native';
const ENTRIES1 = [
{
title: 'Text',
thumbnail: require('./assets/splash.png'),
},
{
title: 'Text 1',
thumbnail: require('./assets/splash.png'),
},
{
title: 'Text 2',
thumbnail: require('./assets/splash.png'),
},
];
const {width: screenWidth} = Dimensions.get('window');
const MyCarousel = props => {
const [entries, setEntries] = useState([]);
const carouselRef = useRef(null);
const goForward = () => {
carouselRef.current.snapToNext();
};
useEffect(() => {
setEntries(ENTRIES1);
}, []);
const renderItem = ({item, index}, parallaxProps) => {
return (
<View style={styles.item}>
<ParallaxImage
source={{uri: item.thumbnail}}
containerStyle={styles.imageContainer}
style={styles.image}
parallaxFactor={0.4}
{...parallaxProps}
/>
<Text style={styles.title} numberOfLines={2}>
{item.title}
</Text>
</View>
);
};
return (
<View style={styles.container}>
<Carousel
ref={carouselRef}
sliderWidth={screenWidth}
sliderHeight={screenWidth}
itemWidth={screenWidth - 60}
data={entries}
renderItem={renderItem}
hasParallaxImages={true}
/>
</View>
);
};
export default MyCarousel;
const styles = StyleSheet.create({
container: {
flex: 1,
},
item: {
width: screenWidth - 60,
height: screenWidth - 60,
},
imageContainer: {
flex: 1,
marginBottom: Platform.select({ios: 0, android: 1}), // Prevent a random Android rendering issue
backgroundColor: 'white',
borderRadius: 8,
},
image: {
...StyleSheet.absoluteFillObject,
resizeMode: 'cover',
},
});
I think you need to replace source={{uri: item.thumbnail}} with source={item.thumbnail}
because uri is used for web image url like https://image.png and require is used for the local image. I am tested on my android it's working fine now
I am beginner with react native expo, just creating my first project. I am able to make a flat list and app is working great so far.
However now I need to make something like this,
As being newbie, I am not sure where to start, It seems like a webview is used but I am not sure how to put flatview into webview, or am I completely on wrong track ?
This is what I coded so far,
import React from 'react';
import { SafeAreaView, View, FlatList, StyleSheet, Text, StatusBar } from 'react-native';
const DATA = [
{
id: 'bd7acbea-c1b1-46c2-aed5-3ad53abb28ba',
title: 'First Item',
},
{
id: '3ac68afc-c605-48d3-a4f8-fbd91aa97f63',
title: 'Second Item',
},
{
id: '58694a0f-3da1-471f-bd96-145571e29d72',
title: 'Third Item',
},
];
const Item = ({ title }) => (
<View style={styles.item}>
<Text style={styles.title}>{title}</Text>
</View>
);
const App = () => {
const renderItem = ({ item }) => (
<Item title={item.title} />
);
return (
<SafeAreaView style={styles.container}>
<FlatList
data={DATA}
renderItem={renderItem}
keyExtractor={item => item.id}
/>
</SafeAreaView>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
marginTop: StatusBar.currentHeight || 0,
},
item: {
backgroundColor: '#f9c2ff',
padding: 20,
marginVertical: 8,
marginHorizontal: 16,
},
title: {
fontSize: 32,
},
});
export default App;
Result:
Code:
import React from "react";
import { FlatList, SafeAreaView, StyleSheet, Text, View } from "react-native";
class App extends React.Component {
state = {
data: [
{ id: "00", name: "Mazda RX-7" },
{ id: "01", name: "McLaren F1" },
{ id: "02", name: "Mini Cooper" },
{ id: "03", name: "BMW 645 Ci" }
]
};
render() {
const columns = 3;
return (
<SafeAreaView>
<FlatList
data={createRows(this.state.data, columns)}
keyExtractor={item => item.id}
numColumns={columns}
renderItem={({ item }) => {
if (item.empty) {
return <View style={[styles.item, styles.itemEmpty]} />;
}
return (
<View style={styles.item}>
<Text style={styles.text}>{item.name}</Text>
</View>
);
}}
/>
</SafeAreaView>
);
}
}
function createRows(data, columns) {
const rows = Math.floor(data.length / columns);
let lastRowElements = data.length - rows * columns;
while (lastRowElements !== columns) {
data.push({
id: `empty-${lastRowElements}`,
name: `empty-${lastRowElements}`,
empty: true
});
lastRowElements += 1;
}
return data;
}
const styles = StyleSheet.create({
item: {
alignItems: "center",
backgroundColor: "#dcda48",
flexBasis: 0,
flexGrow: 1,
margin: 4,
padding: 20
},
itemEmpty: {
backgroundColor: "transparent"
},
text: {
color: "#333333"
}
});
export default App;
im writing a todolist with reactnative using hooks , however when rendering todo items , its not showing up, any advice to fix this
thank you so much for your help!!!
import React, { useState } from 'react';
import { StyleSheet, FlatList, Text, View } from 'react-native';
export default function App() {
const [todos, setTodos] = useState([
{ text: 'budddy', key: '1' },
{ text: 'helloddd', key: '2' },
{ text: "hellddo", key: '3' }
])
return (
<View style={styles.container} >
<View style={styles.content}>
<FlatList data={todos} renderItem={({ item }) => {
<Text> {item.text}</Text>
}} />
</View>
</View>
);
}
const styles = StyleSheet.create({
container: {
paddingTop: 30,
},
content: {
padding: 40
},
})
Check the renderItem code you need to add return or use the implicit return of arrow function
<FlatList data={todos} renderItem={({ item }) => (
<Text> {item.text}</Text>
)} />
Use the extraData property on your FlatList component.
As per documentation:
Bypassing extraData={this.state} to FlatList we make sure FlatList will re-render itself when the state.selected changes. Without setting this prop, FlatList would not know it needs to re-render any items because it is also a PureComponent and the prop comparison will not show any changes.
here is the example code (documentation)
import React from 'react';
import {
SafeAreaView,
TouchableOpacity,
FlatList,
StyleSheet,
Text,
} from 'react-native';
import Constants from 'expo-constants';
const DATA = [
{
id: 'bd7acbea-c1b1-46c2-aed5-3ad53abb28ba',
title: 'First Item',
},
{
id: '3ac68afc-c605-48d3-a4f8-fbd91aa97f63',
title: 'Second Item',
},
{
id: '58694a0f-3da1-471f-bd96-145571e29d72',
title: 'Third Item',
},
];
function Item({ id, title, selected, onSelect }) {
return (
<TouchableOpacity
onPress={() => onSelect(id)}
style={[
styles.item,
{ backgroundColor: selected ? '#6e3b6e' : '#f9c2ff' },
]}
>
<Text style={styles.title}>{title}</Text>
</TouchableOpacity>
);
}
export default function App() {
const [selected, setSelected] = React.useState(new Map());
const onSelect = React.useCallback(
id => {
const newSelected = new Map(selected);
newSelected.set(id, !selected.get(id));
setSelected(newSelected);
},
[selected],
);
return (
<SafeAreaView style={styles.container}>
<FlatList
data={DATA}
renderItem={({ item }) => (
<Item
id={item.id}
title={item.title}
selected={!!selected.get(item.id)}
onSelect={onSelect}
/>
)}
keyExtractor={item => item.id}
extraData={selected}
/>
</SafeAreaView>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
marginTop: Constants.statusBarHeight,
},
item: {
backgroundColor: '#f9c2ff',
padding: 20,
marginVertical: 8,
marginHorizontal: 16,
},
title: {
fontSize: 32,
},
});
I am working on a React Native app, what I was trying is to create a Custom ListView Item just like android where I can use TextViews, ImageView etc as a placeholder. The thing is I didn't find anything yet that could help me.
Desired Output
Listview is deprecated. Do try using Flatlist for the same, Do check out my code in expo snack expo-snack wher it resembles some part, exact design you can make of your own,
below is the code :
import React from 'react';
import { SafeAreaView, View, FlatList, StyleSheet, Text,Image } from 'react-native';
import Constants from 'expo-constants';
const DATA = [
{
id: 'bd7acbea-c1b1-46c2-aed5-3ad53abb28ba',
title: 'First Item',
},
{
id: '3ac68afc-c605-48d3-a4f8-fbd91aa97f63',
title: 'Second Item',
},
{
id: '58694a0f-3da1-471f-bd96-145571e29d72',
title: 'Third Item',
},
];
function Item({ title }) {
return (
<View style={styles.item}>
<Image style={{height:50,width:50}} source={{uri:'https://source.unsplash.com/random'}} />
<Text style={styles.title}>{title}</Text>
<Text style={styles.title2}>{title}</Text>
<Image style={{height:15,width:15,marginLeft:20}} source={{uri:'https://source.unsplash.com/random'}} />
</View>
);
}
export default function App() {
return (
<SafeAreaView style={styles.container}>
<FlatList
data={DATA}
renderItem={({ item }) => <Item title={item.title} />}
keyExtractor={item => item.id}
/>
</SafeAreaView>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
marginTop: Constants.statusBarHeight,
},
item: {
backgroundColor: '#f9c2ff',
padding: 20,
marginVertical: 8,
marginHorizontal: 16,
flexDirection:'row'
},
title: {
fontSize: 10,
},
title2:{
fontSize:12 , marginLeft:10
}
});
My problem is that I cannot do a subheader manually either because of flatlist. if I put any content where the flatlist goes the functionality of the flatlist its broken, when I scroll to the bottom to do the OnEndReached(the infinite scroll) I get back to to the top, that only happen like I said when I have content in the screen besides my flatlist, so that why I was asking if there is a possible way to do it with router-flux maybe in that way I will not have this problem.
I tried putting a View like first tag and do a manually subheader but it doesn't work.
EDIT:
Here is the image of what i have now, is there anyway to do horizontal scroll in the subheader instead of having all the tabs stacked
EDIT 2: I solved it using this plugin:
https://github.com/react-native-community/react-native-tab-view. This is my code:
import * as React from 'react';
import { Component } from 'react';
import { View, Dimensions, StyleSheet } from 'react-native';
import PostsList from '../../postsList';
import { TabView, TabBar, SceneMap } from 'react-native-tab-view';
const FirstRoute = () => (
<View>
<PostsList />
</View>
);
const SecondRoute = () => (
<View style={[{ backgroundColor: '#673ab7' }]} />
);
const ThirdRoute = () => (
<View style={[{ backgroundColor: '#673ab7' }]} />
);
const FourRoute = () => (
<View style={[{ backgroundColor: '#673ab7' }]} />
);
const FiveRoute = () => (
<View style={[{ backgroundColor: '#673ab7' }]} />
);
const initialLayout = {
height: 0,
width: Dimensions.get('window').width,
};
export default class Home extends Component {
constructor() {
super();
this.state = {
isData: true,
index: 0,
routes: [
{ key: 'first', title: 'First' },
{ key: 'second', title: 'Second' },
{ key: 'third', title: 'Third' },
{ key: 'four', title: 'Four' },
{ key: 'five', title: 'Five' },
]
};
}
_renderTabBar = props => (
<TabBar
{...props}
scrollEnabled
indicatorStyle={styles.indicator}
style={styles.tabbar}
tabStyle={styles.tab}
labelStyle={styles.label}
/>
);
_renderScene = SceneMap({
first: FirstRoute,
second: SecondRoute,
third: ThirdRoute,
four: FourRoute,
five: FiveRoute
})
_handleIndexChange = index =>
this.setState({
index,
});
render() {
return (
<TabView
navigationState={this.state}
renderTabBar={this._renderTabBar}
renderScene={this._renderScene}
onIndexChange={this._handleIndexChange}
initialLayout={initialLayout}
/>
)
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
},
tabbar: {
backgroundColor: '#3f51b5',
},
tab: {
width: 120,
},
indicator: {
backgroundColor: '#ffeb3b',
},
label: {
color: '#fff',
fontWeight: '400',
},
});
This is the scrollable tabs