render() { const { todos } = this.props; return ( <FlatList data={todos} renderItem={item => <Todo item={item.item} />} keyExtractor={item => item.id.toString()} ListFooterComponent={<AddTodo />} /> ); }
render() { //console.log(contacts); return ( <View> <Button title="toggle contacts" onPress={this.toggleContacts} /> <Button title="toggle contacts" onPress={this.toggleContacts} /> {this.state.showContacts && ( <FlatList renderItem={obj => <Row {...obj.item} />} data={contacts} /> )} </View> ); }
render() { return ( <ScrollView style={{paddingTop:'3%',paddingLeft:'3%',paddingRight:'3%',backgroundColor:getColor('background')}}> <Text style={{paddingTop:'15%',paddingBottom:'10%',color:getColor('black'),fontSize:35,fontWeight:'bold'}}>What are you{"\n"}looking for?</Text> <View style={[{backgroundColor:getColor('itemBackgroundLigth'),borderRadius:25,width:'100%',paddingLeft:'3%',alignItems:'center',justifyContent:'flex-start',flexDirection:'row'},styles.shadow]}> <Icon style={{paddingLeft:'5%',paddingRight:'5%',paddingTop:'5%',paddingBottom:'5%'}} name="ios-search" size={20} color={getColor('contrast')} solid/> <TextInput style={{width:'80%'}} placeholder='find products' onEndEditing={(t)=>this.search(t)}/> </View> <Product>{(products)=> <FlatList scrollEnabled={false} data={products.categories} renderItem={(item) => <ListObject data={item.item} onPress={()=>{this.props.navigation.navigate('ListingPage',{category:{name:item.item.name,products:products.products[item.item.key]}})}}/>} /> } </Product> <View style={{height:20}}/> </ScrollView> ); }
render() { //Destruct pokeList and Loading from state. const { pokeList, loading } = this.state; //Destruct navigation from props const { navigation } = this.props; //If laoding to false, return a FlatList which will have data, rednerItem, and keyExtractor props used. //Data contains the data being mapped over. //RenderItem a callback return UI for each item. //keyExtractor used for giving a unique identifier for each item. if (!loading) { return ( <FlatList data={pokeList} renderItem={data => ( <PokeCard {...data.item} navigation={navigation} /> )} keyExtractor={item => item.name} /> ); } else { return <ActivityIndicator />; } }
render() { if (this.state.isLoading) { return ( <ActivityIndicator /> ) } return ( <View style={{paddingBottom: 20}}> <FlatList data={this.state.cards} keyExtractor={item => item.id.toString()} renderItem={card => { return <FlashCard {...card.item} navigation={this.props.navigation} /> }} /> </View> ); }
render() { return ( <View style={styles.container}> <Modal animationType={"slide"} visible={this.state.modalVisible} onRequestClose={() => console.log("close requested")} > <View style={styles.header}> <Text style={styles.headerTitle}>Table of Contents</Text> <TouchableOpacity style={styles.backButton} onPress={() => this.hide()}> <Icon name="close" size={34} /> </TouchableOpacity> </View> <FlatList style={styles.container} data={this.state.dataSource} renderItem={(row) => { return this.renderRow(row.item); }} keyExtractor={item => item.id} ItemSeparatorComponent={() => <View style={styles.separator} />} /> </Modal> </View> ); }
const PlacesListScreen = props => { const places = useSelector(state => state.places.places); const dispatch = useDispatch(); useEffect(() => { dispatch(placesActions.loadPlaces()); }, [dispatch]); return ( <FlatList data={places} keyExtractor={item => item.id} renderItem={itemData => ( <PlaceItem image={itemData.item.imageUri} title={itemData.item.title} address={itemData.item.address} onSelect={() => { props.navigation.navigate("PlacesDetail", { placeTitle: itemData.item.title, placeId: itemData.item.id }); }} /> )} /> ); }
render() { if(this.state.isLoading) { return ( <View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}> <Text>Loading</Text> </View> ); } return ( <View style={{flex: 1, backgroundColor: 'yellow'}}> <FlatList data={this.state.dataArr} renderItem={(info) => {return ( <Text>{info.item.email}</Text> )}} keyExtractor={(item) => item.email}/> </View> ); }
render() { return ( <FlatList scrollEnabled={false} removeClippedSubviews={false} contentContainerStyle={[styles.container, this.props.containerStyle]} data={this.props.posts} renderItem={list => { return ( <Post key={`post-${list.item.id}`} containerStyle={styles.postContainer} {...list.item} /> ) }} /> ) }
render() { return ( <FlatList scrollEnabled={false} removeClippedSubviews={false} contentContainerStyle={[styles.container, this.props.containerStyle]} data={this.props.posts} renderItem={list => { return ( <Post key={`post-${list.item.id} `} containerStyle={styles.postContainer} postWidth={postContainerWidth} {...list.item} /> ) }} /> ) }