react native list code example

Example 1: how to use flatlist keyextractor

<FlatList 
  data={[{name: 'a'}, {name: 'b'}]} 
  renderItem={
    ({item}) => <Text>{item.name}</Text>
  } 
  keyExtractor={(item, index) => index.toString()}
/>

Example 2: shadown reAct native

shadowColor: "#000",
            shadowOffset: {
              width: 0,
              height: 10,
            },
            shadowOpacity: 0.12,
            shadowRadius: 60,

Example 3: make a fixed list in react native

export default function App() {
  const [enteredGoal,setEnteredGoal] = useState('');
  const [courseGoals, setCourseGoals] = useState([]);
  const goalInputHandler = (enteredText) => {
    setEnteredGoal(enteredText);
  }
  const addGoalHandler = () => {
    setCourseGoals(currentGoals => 
      [...currentGoals,enteredGoal]
    )
  }

  return (
    <View style={styles.screen}>
      <View>
        <View style={styles.otherview}>
          <TextInput 
          placeholder='A goal' 
          style={styles.textinput} 
          onChangeText={goalInputHandler} 
          value={enteredGoal}/>
          <Button title='Add' onPress={addGoalHandler}/>
        </View>
      </View>
        <ScrollView>
          {courseGoals.map((goal) => 
            <View key={goal} style={styles.listItem}>
              <Text>{goal}</Text>
            </View>)
          }
        </ScrollView>
	</View>

Example 4: rngesturehandlermodule.default.direction react native

visit :- https://software-mansion.github.io/react-native-gesture-handler/docs/getting-started.html

Example 5: react native list view

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