Category Archives: Front-end

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;
`;

Admin-lte height bug (fixed)

Admin-Lte template

Admin-Lte template

Hop!

Desenvolvendo um Web App para a Divisão de Homicídios de Niterói São Gonçalo (DH-NSG) utilizando React e o template do Admin-lte vinha enfrentando um bug na visualização da página. O conteúdo era carregado apenas até a metade da página.

Depois de ter desistido por um tempo de corrigi-lo, descobri hoje um workaround em css que corrige este bug.

Segue:

  .wrapper {
    /*min-height: 100%;
    position: relative;
    overflow: hidden;*/
    width: 100%;
    min-height: 100%;
    height: auto !important;
    position: absolute;
  }
Depois de tentar algumas snippets este funcionou e com isso espero ajudar. Até…

React Native keyboard over InputText

During creating a form in React Native I faced a issue with the android keyboard. It override the text field, so I could not see what is the enter of the field.

So I found the solution, actually, three. I adopted the first one, just changing the View by KeyboardAvoidingView component.

Here is the complete solution.

Very cool and useful.

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 →