How can I achieve same design

Asked by At

enter image description here

can some one help me to achieve the same design as above

Here is code

                    {, i) => {
                            <ButtonTabView color={each.color}>
                                <ButtonText color={each.color}>{each.title}</ButtonText>

export const TabView = styled.View`
    flexDirection: row;
    padding: 10px;
    justify-content: space-around;
export const ButtonTabView = styled.TouchableOpacity`
    padding: 10px;
    border-width: 1px;
    border-radius: 8px;
    border-color: ${props => props.color};
    justify-content: center;
export const ButtonText = styled.Text`
    color: ${props => props.color};
    font-family: ${Theme.fontFamily.regular};
    font-size: ${Theme.fontSize.semiRegular};

I'm getting problem to achieve same design am I missing any styling property here?

2 Answers

Prasun On Best Solutions

You are almost there, you need to add one more property to it, add flex-wrap: wrap in TabView style. The default behaviour of flexWrap is nowrap. Take a look at the document here.

Also, you might need to consider justifyContent, as per your shared code which is space-around, that does not meet the requirement you have shared. Instead, flex-start will mimic the design you have shared.

Put some margin around the ButtonTabView component.

Note: It's clear that you are using Styled Component, but in the shared code you have written flexDirection, which need to be changed to flex-direction.

Hope this will help!

Community On

you need to replace your TabView here,

export const TabView = styled.View`
    flex-direction: row;
    flex-wrap: wrap;
    padding: 10px;
    justify-content: space-around;