react native text box above scrollable-tab-view

Question

New to react native, trying to place text-box above scrollable tab view

 export default React.createClass({
  render() {
    return 
    <View>
    <TextInput
          style={{height: 50}}
          placeholder="Enter!"
          onChangeText={(searchText) => this.setState({searchText})}/>
    <ScrollableTabView
      style={{marginTop: 10, }}
      initialPage={1}
      renderTabBar={() => <FacebookTabBar />} 
      >   
      <ScrollView tabLabel="ios-search" style={styles.tabView}>
        <View style={styles.card}>
           <TextInput
          style={{height: 50}}
          placeholder="Enter!"
          onChangeText={(searchText) => this.setState({searchText})}/>
        </View>
      </ScrollView>
    </ScrollableTabView>
    </View>
     ;
  },  
});

Scrollable tab view doesn't show up with above code, I am unable to understand why, please advice. I am trying to make something like Linkedin app.

max23_ · Accepted Answer · 2016-12-12T12:16:38.483

<ScrollableTabView> is styled with flex: 1, so you need to explicitly set flex: 1 to its parent like this in order to show it:

return (
  <View style={{flex: 1}}>
    ...
  </View>
);

Here is a quote from React Native documentation regarding Flex:

A component can only expand to fill available space if its parent has dimensions greater than 0. If a parent does not have either a fixed width and height or flex, the parent will have dimensions of 0 and the flex children will not be visible.

react native text box above scrollable-tab-view

1 Answers1