Nativebase: using flex:1 for View in Content does not have any impact.

Created on 4 Jan 2017 · 8Comments · Source: GeekyAnts/NativeBase

react-native, react and native-base version

"native-base": "^0.5.19",
"react": "~15.4.0-rc.4",
"react-native": "0.38.0",

Expected behaviour

I want to divide element and share among two Views. I can obtain the expected behaviour for example with:

            <View style={{flex: 1}}>
                <View style={{ flex:1, backgroundColor: 'yellow' }}>
                    <Text>window 1</Text>
                </View>
                <View style={{ flex:1, backgroundColor: 'green' }}>
                    <Text>window 2</Text>
                </View>  
            </View>

this works as expected. But I want to use <Container> and <Content> elements for this component. I am trying the following:

<Container><Content>
                <View style={{ flex:1, backgroundColor: 'yellow' }}>
                    <Text>window 1</Text>
                </View>
                <View style={{ flex:1, backgroundColor: 'green' }}>
                    <Text>window 2</Text>
                </View>  
</Content></Container>

Actual behaviour

With <Container> and <Content> elements, using flex: 1 has no impact. The upper view with yellow background is just shown as one liner encapsulating the <Text> element.

Steps to reproduce (code snippet or screenshot)

<Container><Content>
                <View style={{ flex:1, backgroundColor: 'yellow' }}>
                    <Text>window 1</Text>
                </View>
                <View style={{ flex:1, backgroundColor: 'green' }}>
                    <Text>window 2</Text>
                </View>  
</Content></Container>

Is the bug present in both ios and android or in any one of them?

any of them.

Source

eduedix

👍2

Most helpful comment

fixed it by doing:
```

eduedix on 5 Jan 2017

👍21 ❤5

All 8 comments

fixed it by doing:
```

eduedix on 5 Jan 2017

👍21 ❤5

when I use flex in contentContainerStyle I keep getting an error saying 'you attempted to set the key padding with the value 0 on an object that is meant to be immutable and hes been frozen.

This triggers for ex when I push a route or pressing a Fab button, but only when setting flex: 1 on Content, did you encounter this issue?

L3V147H4N on 17 Jan 2017

I didn't get any such error.

eduedix on 17 Jan 2017

I'm also seeing this issue. @eduedix workaround worked for me. Why the need for the workaround though?

keslert on 15 Feb 2017

The same problem happens to Tabs and Tab.

Following code does the work.

<Container>
    <Headers></Headers>
    <Tabs contentContainerStyle={{ flex: 1 }}>
        <Tab style={{flex: 1}}>

            <View style={{ flex:1, backgroundColor: 'yellow' }}>
                <Text>window 1</Text>
            </View>

        </Tab>
    </Tabs>
</Container>