FlatList and SectionList_NestedArray

 App.js this project contains only app.js

import React, { useState } from 'react';
import {
  View,
  Text,
  ScrollView,
  RefreshControl,
  StyleSheet,
  FlatList,
  SectionList,
} from 'react-native';

const App = () => {
  const [Items, setItems] = useState([
    //with keys
    // { key: "1", name: 'item 1' },
    // { key: "2", name: 'item 2' },
    // { key: "3", name: 'item 3' },
    // { key: "4", name: 'item 4' },
    // { key: "5", name: 'item 5' },
    // { key: "6", name: 'item 6' },
    // { key: "7", name: 'item 7' },
    // { key: "8", name: 'item 8' },
    // { key: "9", name: 'item 9' },
    // { key: "10", name: 'item 10' },
    //without keys
    { name: 'item 1' },
    { name: 'item 2' },
    { name: 'item 3' },
    { name: 'item 4' },
    { name: 'item 5' },
    { name: 'item 6' },
    { name: 'item 7' },
    { name: 'item 8' },
    { name: 'item 9' },
    { name: 'item 10' },
  ]);
  const [Data, setData] = useState([
    {
      title: 'Title 1',
      data: ['item1', 'item2', 'item3'],
    },
    {
      title: 'Title 2',
      data: ['item1', 'item2', 'item3'],
    },
    {
      title: 'Title 3',
      data: ['item1', 'item2', 'item3', 'item4', 'item5'],
    },
    {
      title: 'Title 4',
      data: ['item1', 'item2', 'item3', 'item4'],
    },
    {
      title: 'Title 5',
      data: ['item1', 'item2', 'item3'],
    },
    {
      title: 'Title 6',
      data: ['item1', 'item3'],
    },
  ])
  // const Data = [
  //   {
  //     title: 'Title 1',
  //     data: ['item1', 'item2', 'item3'],
  //   },
  //   {
  //     title: 'Title 2',
  //     data: ['item1', 'item2', 'item3'],
  //   },
  //   {
  //     title: 'Title 3',
  //     data: ['item1', 'item2', 'item3', 'item4', 'item5'],
  //   },
  //   {
  //     title: 'Title 4',
  //     data: ['item1', 'item2', 'item3', 'item4'],
  //   },
  //   {
  //     title: 'Title 5',
  //     data: ['item1', 'item2', 'item3'],
  //   },
  //   {
  //     title: 'Title 6',
  //     data: ['item1', 'item3'],
  //   },
  // ]
  const [Refreshing, setRefreshing] = useState(false);
  const onrefresh = () => {
    setRefreshing(true);
    setItems([...Data, {title:Data.title,Data:[Data.data]}]);
    setRefreshing(false);
  };

  return (
    <SectionList
      sections={Data}
      keyExtractor={(item, index) => index.toString()}

      renderItem={({ item }) => (
        // <View style={Styles.container2}>
          <Text style={Styles.txt}>{item}</Text>
        /* </View> */
      )}
      renderSectionHeader={({section})=>(
        <View style={Styles.container2}>
        <Text style={Styles.txt}>{section.title}</Text>
      </View>
      )}
      refreshControl={<RefreshControl refreshing={Refreshing}
            onRefresh={onrefresh}
            colors={['#ff00ff']} />}
    />
    // <View style={Styles.container}>
    //   <FlatList
    //     // numColumns={3}
    //     // horizontal={true}
    //     //inverted prop change the direction

    //     // inverted
    //     //without keys we can use keyExtractor
    //     keyExtractor={(item, index) => index.toString()}
    //     data={Items}
    //     renderItem={({ item }) => (
    //       <View style={Styles.container2}>
    //         <Text style={Styles.txt}>{item.name}</Text>
    //       </View>
    //     )}
    //     refreshControl={<RefreshControl refreshing={Refreshing}
    //       onRefresh={onrefresh}
    //       colors={['#ff00ff']} />}
    //   />
    // </View>
  );
};

//     <View>
//       <ScrollView style={Styles.container}
//       refreshControl={<RefreshControl refreshing={Refreshing}
//       onRefresh={onrefresh}
//       colors={['#ff00ff']}/>}>
//         {Items.map(i => {
//           return (
//             <View style={Styles.container2} key={i.key}>
//               <Text style={Styles.txt}>{i.item}</Text>
//             </View>
//           );
//         })}
//       </ScrollView>
//     </View>
//   );
// };
// let color ="gray";
export default App;

const Styles = StyleSheet.create({
  container: {
    // flex: 1,
    alignItems: 'center',
    // flexDirection:'column',
    backgroundColor:'green',
  },
  container2: {
    alignItems: 'center',
    // justifyContent:'center',
    height: 80,
    width: 300,
    backgroundColor: 'yellow',
    borderRadius: 20,
    justifyContent: 'space-evenly',
    borderWidth: 3,
    margin: 10,
  },
  txt: {
    fontSize: 30,
    fontStyle: 'italic',
  },
});
********************************************************************
package.json
  "dependencies": {
    "react": "17.0.2",
    "react-native": "0.65.1",
    "react-native-responsive-screen": "^1.4.2"
  },

Comments

Post a Comment

Popular posts from this blog

FlatList

 app.js import React , { useState } from 'react' ; import {   StyleSheet ,   View ,   Text ,   ScrollView ,   Platform ,   SafeAreaView ,   FlatList ,   TouchableOpacity , } from 'react-native' ; const App = () => {   const items = [     { id: 1 , name: 'imran' , age: 32 },     { id: 2 , name: 'kamran' , age: 22 },     { id: 3 , name: 'jabeel' , age: 14 },     { id: 4 , name: 'code' , age: 44 },     { id: 5 , name: 'with' , age: 78 },     { id: 6 , name: 'harry' , age: 32 },     { id: 7 , name: 'hellos' , age: 31 },     { id: 8 , name: 'majid' , age: 29 },     { id: 9 , name: 'sher' , age: 24 },     { id: 10 , name: 'muhammad' , age: 22 },     { id: 11 , name: 'asnari' , age: 32 },     { id: 12 , name: 'kamran' , age: 22 },     { id: 13 , name: 'jabeel' , age...
Read more

Privacy Policy For Real Love Calculator-Prank app

  Privacy Policy SMA Creative Studio built the Real Love Calculator-Prank app as a Free app. This SERVICE is provided by SMA Creative Studio at no cost and is intended for use as is. This page is used to inform visitors regarding my policies with the collection, use, and disclosure of Personal Information if anyone decided to use my Service. If you choose to use my Service, then you agree to the collection and use of information in relation to this policy. The Personal Information that I collect is used for providing and improving the Service. I will not use or share your information with anyone except as described in this Privacy Policy. The terms used in this Privacy Policy have the same meanings as in our Terms and Conditions, which are accessible at Real Love Calculator-Prank unless otherwise defined in this Privacy Policy. Information Collection and Use For a better experience, while using our Service, I may require you to provide us with certain personally identifiable inform...
Read more