Breaking News: Grepper is joining You.com. Read the official announcement!

react native list view

Add Answer

Joyous Jackal answered on May 2, 2020 Popularity 10/10 Helpfulness 3/10

answer react native list view

related list in react native

react native list view

Comment

-2

<FlatList data={yourData} renderIten={({item, index}) =>{
  return (
    <View key={index}>
    {item.item}
    </View>
  )
}/>

Popularity 10/10 Helpfulness 3/10 Language javascript

Source: Grepper

Tags: javascript list react-native view

Link to this answer
Share Copy Link

Contributed on May 02 2020

Joyous Jackal

0 Answers Avg Quality 2/10

Closely Related Answers

list in react native

Comment

import React, {useState} from "react";
import {
  View,
  Text,
  Button,
  TextInput,
  StyleSheet,
  FlatList,
  ScrollView,
} from "react-native";

function ListStuff(){
	const [listInput, setListInput] = useState("");
    const [listData, setListData] = useState<{
    	myKey: string;
    }>([]);
  	const [error, setError] = useState("");
  
  	const addInputDataToList = ()=>{
    	if(listInput === ""){
        	setError("input can not be empty");
          	return;
        }
      	const newListData = [...listData, {myKey: listInput}];
      	setListData(newListData);
      	setError("");
      	setListInput("");
    };
  
  	return(
    	<View style={styles.view}>
            <Text> Input </Text>
	        <TextInput value={listInput} style={styles.input} onChangeText={setListInput} />
			<Button title="add" onPress={addInputDataToList} />
              
      		<Text> List </Text>
			<ScrollView>
              <FlatList 
				style={styles.list}
				keyExtractor={item => item.myKey} 
				data={listData}
				renderItem={({item})} => (
                	<Text style={styles.item}> {item.file} </Text>
                )}
              />
			</ScrollView>
			{error && <Text>{error}</Text>}
		</View>
	);
}
export default ListStuff;

const styles = StyleSheet.create({
  input: {
    height: 40,
    width: 200,
    margin: 12,
    borderWidth: 1,
    padding: 10,
  },
  view: {
    flex: 1,
    alignItems: "center",
    justifyContent: "center",
  },
  list: {
    flex: 1,
    margin: 10,
  },
  item: {
    padding: 3,
    fontSize: 14,
    height: 22,
  },

});

Popularity 10/10 Helpfulness 3/10 Language javascript

Source: Grepper

Tags: javascript j

Link to this answer
Share Copy Link

Contributed on Aug 27 2022

Jessica Bassil

0 Answers Avg Quality 2/10

react native list view

Contents

More Related Answers

react native list view

Closely Related Answers

list in react native

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.