Category Archives: Javascript

Styled Components FlatList ReactNative CSS problem

Something happens when a FlatList decorated with Styled Components update your data: the CSS of the Content disappears.

Bellow the original code and then the fix.

The CSS:
import styled from 'styled-components/native';
import DefaultButton from '~/components/Button';
export const Container = styled.View`
flex: 1;
background: #fff;
border-radius: 4px;
margin-bottom: 10px;
`;
export const Image = styled.Image`
width: auto;
height: 200;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
`;
export const Content = styled.View`
flex: 1;
padding: 15px;
`;
export const Title = styled.Text`
color: #333;
font-size: 16px;
font-weight: bold;
margin: 10px 0;
`;
export const Info = styled.Text`
color: #ccc;
font-size: 12px;
margin: 6px 0 6px 15px;
`;
export const Button = styled(DefaultButton)`
margin-top: 10px;
`;
The FlatList:
return (
<Background>
<Container>
<MeetupList
data={subscriptions}
keyExtractor={item=>String(item.id)}
renderItem={({item}) => (
<Meetup
data={item.meetup}
onHandle={() =>handleCancel(item.id)}
buttonText="Cancelar inscrição"
/>
)}
/>
</Container>
</Background>
);
The fix is set the Content flex-shrink to auto in the Content styled component.
export const Content = styled.View`
flex: 1 auto;
padding: 15px;
`;

Credit Card Metadata and Validator

Hi!

There’s a service that validates the credit card number and returns the metadata.

The requisition is via http and returns a json. Just like this:

curl -H "Accept-Version: 3" "https://lookup.binlist.net/45717360"
 {
  "number": {
    "length": 16,
    "luhn": true
  },
  "scheme": "visa",
  "type": "debit",
  "brand": "Visa/Dankort",
  "prepaid": false,
  "country": {
    "numeric": "208",
    "alpha2": "DK",
    "name": "Denmark",
    "emoji": "🇩🇰",
    "currency": "DKK",
    "latitude": 56,
    "longitude": 10
  },
  "bank": {
    "name": "Jyske Bank",
    "url": "www.jyskebank.dk",
    "phone": "+4589893300",
    "city": "Hjørring"
  }
}

The link: https://binlist.net/

But if you want regex for the most common credit card brands, check below.

    const elo = /((((636368)|(438935)|(504175)|(451416)|(636297)))[0-9]{4}$)|(((5067)|(4576)|(4011))[0-9]{8}$)$/;
    const visa = /^4[0-9]{12}(?:[0-9]{3})$/;
    const master = /^5[1-5][0-9]{14}$/;
    const amex = /^3[47][0-9]{13}$/;
    const diners = /^3(?:0[0-5]|[68][0-9])[0-9]{11}$/;
    const discover = /^6(?:011|5[0-9]{2})[0-9]{12}$/;
    const jcb = /^(?:2131|1800|35\d{3})\d{11}$/;
That’s it!

Axios Network Error

Android error image.

Trying to figure out what the hell was going on with a axios get request, I discover by axios – npm documentation a better or more complete way tho handle with error.

This is how:

axios.get(/user/12345)
  .catch(function (error) {
    if (error.response) {
      // The request was made and the server responded with a status code
      // that falls out of the range of 2xx
      console.log(error.response.data);
      console.log(error.response.status);
      console.log(error.response.headers);
    } else if (error.request) {
      // The request was made but no response was received
      // `error.request` is an instance of XMLHttpRequest in the browser and an instance of
      // http.ClientRequest in node.js
      console.log(error.request);
    } else {
      // Something happened in setting up the request that triggered an Error
      console.log(Error, error.message);
    }
    console.log(error.config);
  });
If we log just the error, it will display just the Network Error message on log.
By the way the error was this one: “_response”: “java.security.cert.CertPathValidatorException: Trust anchor for certification path not found.”,
I was trying to access a https local server. I resolved by change the protocol of the req to http.
Hope I can help!

Javascript is awesome

Javascript logo.

I’m very excited about studying Javascript on the mission of expand my knowledges at front-end. The principal goal is use Javascript at my Java back-end projects.

So, two things I really liked on javascript so far is:

  1. template string;
  2. spread operator.

The first concept lets a array be used as params of methods, on a very easy and functional way.

The second one helps on format messages that uses dynamics values, as variables. We can just reference the value inside a string pattern, marked with the ` character.

See the example…

Continue reading