Tab Rendering issue with React 29.0

[qntnrbns]

Introduction

When I attempt to render the TabLayout, it renders as shown in the image below. I am relatively new with react/react-native, so if this is a simple issue with styling(, etc), please let me know.

Versions/Dependencies

react-native-android-tablayout@0.3.0 react-native@0.29.2 react@15.2.0

Steps to reproduce

1. react-native init test
2. npm install --save react-native-android-tablayout
3. rnpm link
4. Replace index.android.js with code below
5. Start Emulator
6. react-native run-android

import React, { 
     Component
 } from 'react';
 import { 
     AppRegistry, 
     View, 
     Text } from 'react-native';
 import { 
     Tab, 
     TabLayout 
 } from 'react-native-android-tablayout';

 class Test extends Component {
    constructor() {
      super(...arguments);
      this.state = {
        tabSelected: 1
      };
    }

    _createSelectedView() {
      return (
        <View style={{padding: 10}}>
          <Text>Tab {this.state.tabSelected} selected</Text>
        </View>
      );
    }

   render() {
     return (
        <View style={{flex: 1}}>
            <View>
              <TabLayout
                style={{backgroundColor: '#ddd'}}
                selectedTabIndicatorColor="green">
                <Tab
                  name="Tab 1"
                  textColor="rgb(0,0,255)"
                  onTabSelected={()=>{ this.setState({tabSelected: 1}) }}/>
                <Tab
                  name="Tab 2"
                  onTabSelected={()=>{ this.setState({tabSelected: 2}) }}/>
                <Tab
                  name="Tab 3"
                  onTabSelected={()=>{ this.setState({tabSelected: 3}) }}/>
              </TabLayout>
              {this._createSelectedView()}
            </View>
        </View>
     );
   }
 }

 AppRegistry.registerComponent('test', () => Test);

[qntnrbns]

After dealing with a similar issue in another package, I have found that rnpm, or at the version that I am using (1.9.0), does not properly deal with linking. It tries to add the package to MainActivity.java, and in the latest versions of react-native the getPackages functions is in MainApplication.java.

EDIT: This has not yet been fixed on the most recent react-native documentation http://facebook.github.io/react-native/releases/0.30/docs/native-modules-android.html

[janoschpizza]

Progress! I managed to compile and run the test above. Unfortunately the app crashes as soon as I touch another tab.

react-native 0.36.1 testing on android 6.0.1 hardware device