How to show json data in flatlist in react native

 1. Create json data. Format is given below

    JsonData.json

[

    {

        "id" : 1,

        "FirstName" : "Sandeep",

        "LastName" : "Rauniyar",

        "DOB" : "4-7-1990",

        "CovidVaccine" : "Pfizer BioNTech",

        "FirstDose" : "EN6888",

        "SecondDose" : "ER8861",

        "image": "https://bootdey.com/img/Content/avatar/avatar1.png"

    },

    {

        "id" : 2,

        "FirstName" : "Mukesh",

        "LastName" : "Verma",

        "DOB" : "10/29/1995",

        "CovidVaccine" : "JANSSEN",

        "FirstDose" : "2030020",

        "SecondDose" : "",

        "image": "https://bootdey.com/img/Content/avatar/avatar2.png"

    }

]

2. import JsonData.json

import PostData from "../Data/JsonData.json";

3. Set data

    const [data, setData] = useState(PostData.filter(item=>item.id ==1 ));

 

4. 

<FlatList

   data={data}

   keyExtractor= {(item) => {

   return item.id;

   }}

   renderItem={({item}) => {

   return (

     <View>

        <View style={styles.box}>

           <Image style={styles.icon1} source={{uri: item.image}} />

           <View style={styles.boxContent}>

           <Text style={styles.title}>First Name : {item.FirstName}</Text>

            <Text style={styles.description}>Last Name :  {item.LastName}</Text>

            <Text style={styles.description}>DOB :  {item.DOB}</Text>

        <Text style={styles.description}>Covid-19 Vaccine : {item.CovidVaccine}</Text>   

             </View>

                </View>

             

            </View>

          )

        }}/>

new NativeEventEmitter()` was called with a non-null argument without the required `addListener` method

 To fix, add this to RNFSManager.java




// Required for rn built in EventEmitter Calls.
    @ReactMethod
    public void addListener(String eventName) {

    }

    @ReactMethod
    public void removeListeners(Integer count) {

    }

Example: for fix warning in react-native-fs add functions to 

node_modules\react-native-fs\android\src\main\java\com\rnfs\RNFSManager.java file.

Snapshots is given below.

Log message Request and Response in ASP.NET WebAPI

There are multiple approaches to generically handle Request/Response logging for every WebAPI method calls:

1.    ActionFilterAttribute: One can write custom ActionFilterAttribute and decorate the controller/action methods to enable logging.

Con: You need to decorate every controller/methods (still you can do it on base controller, but still it doesn't address cross cutting concerns.

2.    Override BaseController and handle logging there.

Con: We are expecting/forcing the controllers to inherit from a custom base controller.

3.    Using DelegatingHandler.

Advantage: We are not touching controller/method here with this approach. Delegating handler sits in isolation and gracefully handles the request/response logging.

I would recommend using a DelegatingHandler. Then you will not need to worry about any logging code in your controllers.

public class LogRequestAndResponseHandler : DelegatingHandler
{
    protected override async Task<HttpResponseMessage> SendAsync(
        HttpRequestMessage request, CancellationToken cancellationToken)
    {
        if (request.Content != null)
        {
            // log request body
            string requestBody = await request.Content.ReadAsStringAsync();
            Trace.WriteLine(requestBody);
        }
        // let other handlers process the request
        var result = await base.SendAsync(request, cancellationToken);

        if (result.Content != null)
        {
            // once response body is ready, log it
            var responseBody = await result.Content.ReadAsStringAsync();
            Trace.WriteLine(responseBody);
        }

        return result;
    }
}

Just replace Trace.WriteLine with your logging code and register the handler in WebApiConfig like this:

For more indepth article, refer this http://weblogs.asp.net/fredriknormen/log-message-request-and-response-in-asp-net-webapi

Package has been Ignored because it contains Invalid Configuration React Native Error Fix

 As a react native developer we face many kind of react native errors while developing apps. Sometimes you may come up with a warning in the terminal as given below:

This react native warning will finally leads to build error while trying to run your application. So, how to fix this particular error? All you need is to run npm install command on your terminal from your project folder. After that try running your project again using either react-native run-android or react-native run-ios command.

ReactNative Metro Bundler not starting automatically

 Replace the code with this one. The path of the file is -

node_modules\metro-config\src\defaults\blacklist.js

var sharedBlacklist = [

  /node_modules[\/\\]react[\/\\]dist[\/\\].*/,

  /website\/node_modules\/.*/,

  /heapCapture\/bundle\.js/,

  /.*\/__tests__\/.*/

];

Snapshots is given below:

ERROR:'keytool' is not recognized as an internal or external command, operable program or batch file

 Try C:\Program Files\Java\jre1.8.0_111\bin>keytool -genkey -v -keystore D:\debug.keystore -storepass android -alias androiddebugkey -keypass android -keyalg RSA -keysize 2048 -validity 10000 

React Native Task :app:validateSigningDebug FAILED

 The problem is that the build is looking for the debug keystore and cannot find it.

Keystore file /home/sandeep/react native/react-native-redux/android/app/debug.keystore not found for signing config 'debug'.

There's an issue with the same problem in React Native GitHub. According to the page, you can solve it by creating a debug keystore. Quote from the thread:

You can generate the debug keystore by running this command in the android/app/ directory: 

keytool -genkey -v -keystore D:\debug.keystore -storepass android -alias androiddebugkey -keypass android -keyalg RSA -keysize 2048 -validity 10000

Copy the file from D drive and put in below location

/home/sandeep/react native/react-native-redux/android/app/debug.keystore