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

list in react native

Jessica Bassil answered on May 2, 2020 Popularity 10/10 Helpfulness 3/10

answer list in react native

related react native list view

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 list react-native

Link to this answer
Share Copy Link

Contributed on Aug 27 2022

Jessica Bassil

0 Answers Avg Quality 2/10

Closely Related Answers

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 j

Link to this answer
Share Copy Link

Contributed on May 02 2020

Joyous Jackal

0 Answers Avg Quality 2/10

list in react native

Contents

More Related Answers

list in react native

Closely Related Answers

react native list view

Grepper

Documentation

Social

Legal

Contact

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