React Native - Component in Loop with Flatlist

-

 App.js:

import React from 'react';
import { FlatList, StyleSheet, Text, View } from 'react-native';

const App = () => {

    const users = [
        {
            id: 1,
            name: "Krishan",
            email: "krishan@gmail.com"
        },
        {
            id: 1,
            name: "Ram",
            email: "ram@gmail.com"
        },
        {
            id: 1,
            name: "Shyam",
            email: "shyam@gmail.com"
        }
    ]
    return (
        <View>
            <Text style={{ fontSize: 30, backgroundColor: 'blue', color: 'white' }}>Component in Loop with Flatlist</Text>

            <FlatList
                data={users}
                renderItem={({ item }) => <UserData item={item} />}

            />
        </View>
    );
};

const UserData = (props) => {
    const item = props.item;
    return (
        <View style={styles.box}>
            <Text style={styles.item}>{item.name}</Text>
            <Text style={styles.item}>{item.email}</Text>

        </View>
    )

}
const styles = StyleSheet.create({
    item: {
        fontSize: 20,
        color: 'white',
        backgroundColor: 'green',
        flex: 1,
        margin: 2,
        padding: 5,
        textAlign: 'center'

    },
    box: {
        flexDirection: 'row',
        borderWidth: 2,
        borderColor: 'black'
    }
})

export default App;





We can make two files for same program -


App.js:


import React from 'react';
import { FlatList, Text, View } from 'react-native';
import UserData from './components/UserData';

const App = () => {

    const users = [
        {
            id: 1,
            name: "Krishan",
            email: "krishan@gmail.com"
        },
        {
            id: 1,
            name: "Ram",
            email: "ram@gmail.com"
        },
        {
            id: 1,
            name: "Shyam",
            email: "shyam@gmail.com"
        }
    ]
    return (
        <View>
            <Text style={{ fontSize: 30, backgroundColor: 'blue', color: 'white' }}>Component in Loop with Flatlist</Text>

            <FlatList
                data={users}
                renderItem={({ item }) => <UserData item={item} />}

            />
        </View>
    );
};

export default App;



------------------------


UserData.js:


import { StyleSheet, Text, View } from 'react-native';
export default UserData = (props) => {
    const item = props.item;
    return (
        <View style={styles.box}>
            <Text style={styles.item}>{item.name}</Text>
            <Text style={styles.item}>{item.email}</Text>

        </View>
    )

}
const styles = StyleSheet.create({
    item: {
        fontSize: 20,
        color: 'white',
        backgroundColor: 'green',
        flex: 1,
        margin: 2,
        padding: 5,
        textAlign: 'center'

    },
    box: {
        flexDirection: 'row',
        borderWidth: 2,
        borderColor: 'black'
    }
})






Comments

Post a Comment

Popular posts from this blog

Send Data Child to Parent Component - React Js

-
 App.js: import React from "react" ; import './App.css' import { Student } from "./Components/Student" ; function App () {   function alertFunc ( data )   {     alert ( data )   }   const name = "Krishan Dev"   return (     <div className = "App" >     < Student data = { name } alert1 = { alertFunc } />         </div>   ) } export default App ; ---------------------------- Student.js import React from 'react' export const Student = ( props ) => {   const data = "Bhavesh"   return (     <div>       <h6> { props . data } </h6>       <button onClick = { props . alert1 ( data ) } > Click Me </button>     </div>   ) }
Read more

Hide , Show and Toggle in ReactJs

-
 App.js: import React , { useState } from 'react' ; import './App.css' function App () {   const [ show , setShow ]= useState ( true ) return (   <div>     {       show ? <h1> Hello Bhavesh </h1> : null     }     { /* <button onClick={()=>setShow(false)}>Hide</button>     <button onClick={()=>setShow(true)}>Show</button> */ } <button onClick = { () => setShow (! show ) } > Toggle </button>   </div> ) } export default App ;
Read more

Importance Of Web Content In SEO.

-
Content is one of the most important Google ranking factors. One of the benefits of publishing good content is that it will increase the number of people who find your website through search engines.  Content provides information and this information can be used to educate search engines about your website. Content also provides a great opportunity for internal links.
Read more