In my mainscreen App I am rendering a flatlist of articles , I need to change the code so that the urls open inside the App(like webview) . Does anyone know how can I modify the following code ?
render() {
if (this.state.refreshing) {
return (
<View style={styles.refreshing}>
<ActivityIndicator />
</View>
)
} else {
return (
<List>
<FlatList
data={this.state.articles}
renderItem={({ item }) => <Article article={item} />}
keyExtractor={item => item.url}
refreshing={this.state.refreshing}
onRefresh={this.handleRefresh.bind(this)}
/>
</List>
);
}
}
Related
I want to show this data in FlatList but it shows only whitescreen:
const [datas,setDatas] = useState([
{
name:'dhinesh',
phone:'9888888888',
email:'asdasd#gmail.com',
salary:'50000',
position:'ww'
},
{
name:'ramesh',
phone:'93388888',
email:'jhjj#gmail.com',
salary:'90000',
position:'sw'
}
]);
This is the code i used :
<FlatList
data={datas}
keyExtractor={(item, index) => index.toString()}
renderItem={({item}) => {
<View>
<Text>{item.name}</Text>
<Text>{item.phone}</Text>
<Text>{item.email}</Text>
<Text>{item.salary}</Text>
<Text>{item.position}</Text>
</View>
}}
/>
Please give me a solution
Add return in your view
renderItem={({item}) => {
return (
<View>
<Text>{item.name}</Text>
<Text>{item.phone}</Text>
<Text>{item.email}</Text>
<Text>{item.salary}</Text>
<Text>{item.position}</Text>
</View>
)
}}
I have this object that I want to render when an error occurs while running a grapqhl query (on Apollo's onError):
export const ErrorContainer: React.FunctionComponent = () => {
console.log('container running')
return (
<View style={styles.errorView}>
<Text style={styles.errorText}>Unable to Load Friends</Text>
</View>
);
};
Now on my main screen, I tried this:
const { data, error } = useGetMyProfileQuery({
onCompleted: () => {
//setUserData(data)
},
onError: ErrorContainer
},
});
I also tried this:
{error && <ErrorContainer />}
return (
<SafeAreaView style={styles.safeView}>
<Container style={styles.container}>
<Text
style={styles.backText}
onPress={() => navigation.navigate('Home')}>
Zurück
</Text>
<View style={styles.listHolder}>
{data &&
<FlatList
data={data.me.friends}
horizontal={false}
renderItem={({ item }) => (
<Friend
friend={item}
//onDeleteFriend={onDeleteFriend}
originatorId={data.me.id}
/>
)}
keyExtractor={(item) => item.id.toString()}
ListEmptyComponent={NoFriendsContainer}
/>
}
{error && ErrorContainer}
</View>
</Container>
</SafeAreaView>
);
but although I see the console logs, i dont see the actual content of the ErrorContainer. How else should I call the component?
Passing component as a callback to the hook as here onError: ErrorContainer makes no sense. Despite, component is a function, passing it as a callback will not magically render it.
You have to render it in the template. Like you did above {error && <ErrorContainer />}
Just try to add additional state to your screen
const [isErrorVisible, setErrorVisible] = useState(false);
And then set it in the callback where you passed component before
const { data, error } = useGetMyProfileQuery({
onCompleted: () => {
//setUserData(data)
},
onError: () => {
setErrorVisible(true); // callback now instead of ErrorContainer
}
});
And then use it in your template
return (
<SafeAreaView style={styles.safeView}>
<Container style={styles.container}>
<Text
style={styles.backText}
onPress={() => navigation.navigate('Home')}>
Zurück
</Text>
<View style={styles.listHolder}>
{data &&
<FlatList
data={data.me.friends}
horizontal={false}
renderItem={({ item }) => (
<Friend
friend={item}
//onDeleteFriend={onDeleteFriend}
originatorId={data.me.id}
/>
)}
keyExtractor={(item) => item.id.toString()}
ListEmptyComponent={NoFriendsContainer}
/>
}
{/* here using the flag and rendering the component in template */}
{isErrorVisible && <ErrorContainer />}
</View>
</Container>
</SafeAreaView>
);
I was trying to integrate react-native-swiper, which loads videos in it.
I am looking for a way to integrate it with a flat list. but the data is not loading properly, is there any alternative way to load data using flat list (using array.map())
export default class HomeTab extends Component {
render() {
return (
<FlatList
data={Data}
keyExtractor={(item, index) => item.id}
renderItem={({item}) =>
<Swiper style={styles.wrapper}
showsButtons={false}
horizontal={true}
loop={false}
index={item.id}
activeDot={
<View></View>
}
dot={
<View></View>
}
>
<View style={styles.slide1}>
<Video
source={{uri: item.media}} // Can be a URL or a local file.
ref={(ref) => {
this.player = ref
}}
resizeMode={'contain'}
style={styles.backgroundVideo}
/>
</View>
</Swiper>
}
/>
)
}
}
using npm package: react-native-swiper https://www.npmjs.com/package/react-native-swiper
try to use this lib, cause react-native-swiper-flatlist it has flatlist inside
Example below:
<SwiperFlatList
autoplay
autoplayDelay={3}
index={3}
autoplayLoop
data={items}
renderItem={({item}) => // Standard Image
<View style={[styles.child, { backgroundColor: '#000' }]}>
<Image
source={{uri:item.key}}
style={styles.checkoutSliderImage}
/>
<Text>{item.key}</Text>
</View>
}
showPagination
/>
I am trying to render out a list of object data using FlatList in my React Native component, however I am getting a blank screen without any errors on the console which is why it is rather difficult to get to the bottom of the issue here. The data is made available to the component using Redux-Saga approach and supplied to the FlatList which is showing up a blank screen without any errors. To double check if the FlatList is working fine I did a mockup array in component and passed to the FlatList which renders out the UI as expected. Following is the code I am using here;
=======================================================
class Mobile extends Component {
componentDidMount() {
let { readPostsAction } = this.props;
readPostsAction();
}
renderItem = ({ item }) => {
return (
<View>
<TouchableOpacity onPress={() => this.props.navigation.navigate('HomeDetails', { item })}>
<Card>
<CardItem header>
<Text style={styles.titleHeading}>{item.title}</Text>
</CardItem>
<CardItem cardBody>
<Content style={styles.cardContainer}>
<CustomCachedImage
component={FitImage}
source={{ uri: contentURL(item.attachments[0].url) }}
style={{ width: width, height: 200 }}
/>
<HTML tagsStyles={bodyText} html={reduceStringLength(contentText(item.excerpt))} />
</Content>
</CardItem>
</Card>
</TouchableOpacity>
</View>
)
}
keyExtractor = (item, index) => item.id;
render() {
const { dataSource } = this.props;
console.log('this.props', this.props);
return (
<View>
<FlatList
data={dataSource}
keyExtractor={this.keyExtractor}
renderItem={this.renderItem}
/>
</View>
);
}
}
function mapStateToProps({ launchAppReducer }) {
return {
isLoading: launchAppReducer.isLoading,
dataSource: launchAppReducer.data
}
}
export default connect(mapStateToProps, { readPostsAction: actions.readPostsAction })(Mobile);
=======================================================
Here is the screenshot of the console showing that the data is available in the component.
Modify your FlatList code and retry
<FlatList
data={dataSource}
extraData={this.props}
keyExtractor={this.keyExtractor}
/>
There was the problem at in the Actions, I was firing readPostsActions instead I should have fired readMobilePostsActions - it works fine now, thank you guys all the all input and help here.
Regards
You just need to add this style in your Flatlist:
<FlatList
style={{height:'100%'}}
data={dataSource}
keyExtractor={this.keyExtractor}
renderItem={this.renderItem}
/>
my JSON response looks like this
I would like to render the name i.e. pasta/pizza as header(which can be collapsed or opened) and the items i.e. types of pizza/pasta inside the respective category.
I am using react native, I tried using map and ListView
return (this.props.item.items.map((res) => {
console.log(res);
return (
<View>
<View style={CardContainer}>
<Text>{res.title}</Text>
<Image
source={{ uri: res.photo }}
style={imageStyle}
/>
</View>
</View>
);
})
);
but they return single objects so when I associate a onPress event over the category i.e. pasta it is registered twice which is undesirable as a click would mean expanding that category i.e. pasta.
Please let me know If i should change the JSON structure to make it efficient, this is a JSON response for menu card
EDIT: I tried the following but cannot get it to display result
renderItem() {
return (
<View>
{
this.props.menu.map(({ name, items }) => {
<View>
<Text>{name}</Text>
</View>
items.map((resp) => {
<View>
<Text>{resp.title}</Text>
</View>
});
})
}
</View>
);
}
<View>
{this.props.item.items.map((res) => (
<View>
<Header>
{ res.name }
</Header>
{ res.items.map(item => (
<View style={CardContainer}>
<Text>{item.title}</Text>
<Image
source={{ uri: item.photo }}
style={imageStyle}
/>
</View>
)}
</View>
)))}
</View>
IMO, a little more readable
render() {
const { item: { items: allItems } } = this.props;
return (
<View>
{ allItems.map(({ name, items }) => (
<Header>{ name }</Header>
{ items.map(({ title, photo }) => (
<View style={CardContainer}>
<Text>{title}</Text>
<Image
source={{ uri: photo }}
style={imageStyle}
/>
</View>
)}
)}
</View>
)
}