CODEWITHSUNDEEP
user-interfaceflexboxreact-native
Johan Wiström
Johan Wiström

Reputation: 373

Layout issues with React Native

I am facing rather weird layout issues in my React Native app. My layout is mainly based on flexbox with some exceptions when it comes to margins, image sizes and tab bar height. Running the app on two different simulators causes different behavior. On a 5S simulator, it looks great. When running on a 6S Plus simulator some rows in a ListView look weird and tab bar margin/padding looks weird (see attached screenshots). Anyone else that have faced this issue or might know what causing it?

5S simulator 6 Plus simulator

regards Johan

Upvotes: 1

Views: 465

Answers (1)

usedunderpants
usedunderpants

Reputation: 11

I just ran into a similar issue with react native router flux tab bar (which should be using the same Tab Bar you're using). I found the problem was using a decimal for borderTopWidth.

My style for the tab bar had been:

    tabBarStyle: {
        borderTopWidth : .5,
        borderColor    : '#DEF6FC',
        backgroundColor: '#FFF',
        opacity        : 1,

    }

Changed to:

    tabBarStyle: {
        borderTopWidth : 1,
        borderColor    : '#DEF6FC',
        backgroundColor: '#FFF',
        opacity        : 1,

    }

And everything worked fine. I had actually copied that style from an example I saw online so didn't really know what/why. But switching it out made views in a standard and plus view work. Hopefully it helps!

Upvotes: 1

Related Questions