Category Archives: React Native

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;

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!