Skip to content

Fix TabLayout for new versions of React Native. Allow custom views. #4

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
enterline wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Fix TabLayout for new versions of React Native. Allow custom views. #4

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions .gitignore
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
node_modules
build/
npm-debug.log

*.iml
2 changes: 1 addition & 1 deletion android/build.gradle
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ android {

dependencies {
compile fileTree(include: ['*.jar'], dir: 'libs')
compile 'com.facebook.react:react-native:0.15.+'
compile 'com.facebook.react:react-native:+'
compile 'com.android.support:appcompat-v7:23.0.0'
compile 'com.android.support:support-annotations:+'
compile 'com.android.support:design:23.1.1'
Expand Down
8 changes: 6 additions & 2 deletions android/src/main/java/com/reactnativeandroiddesignsupport/ReactNestedScrollViewHelper.java
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,13 +14,16 @@
*/

// EDITED: 1. Import additional classes
import com.facebook.react.views.scroll.ScrollEvent;

import android.os.SystemClock;
import android.view.View;
import android.view.ViewGroup;

import com.facebook.react.bridge.ReactContext;
import com.facebook.react.uimanager.UIManagerModule;
import com.facebook.react.views.scroll.ReactHorizontalScrollView;
import com.facebook.react.views.scroll.ReactScrollView;
import com.facebook.react.views.scroll.ScrollEvent;
import com.facebook.react.views.scroll.ScrollEventType;

/**
* Helper class that deals with emitting Scroll Events.
Expand All @@ -37,6 +40,7 @@ public static void emitScrollEvent(ViewGroup scrollView, int scrollX, int scroll
ScrollEvent.obtain(
scrollView.getId(),
SystemClock.uptimeMillis(),
ScrollEventType.SCROLL,
scrollX,
scrollY,
contentView.getWidth(),
Expand Down
24 changes: 9 additions & 15 deletions android/src/main/java/com/reactnativeandroiddesignsupport/ReactNestedScrollViewManager.java
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,27 +15,21 @@
*/

// EDITED: 1. Import additional classes
import com.facebook.react.views.scroll.OnScrollDispatchHelper;
import com.facebook.react.views.scroll.ReactHorizontalScrollView;
import com.facebook.react.views.scroll.ReactHorizontalScrollViewManager;
import com.facebook.react.views.scroll.ReactScrollView;
import com.facebook.react.views.scroll.ReactScrollViewCommandHelper;
import com.facebook.react.views.scroll.ReactScrollViewHelper;
import com.facebook.react.views.scroll.ReactScrollViewManager;
import com.facebook.react.views.scroll.ScrollEvent;
import android.view.ViewGroup;
import android.support.v4.widget.NestedScrollView;
import android.support.design.widget.CoordinatorLayout;
import android.support.design.widget.AppBarLayout;

import javax.annotation.Nullable;
import java.util.Map;
import com.facebook.react.bridge.ReadableArray;
import com.facebook.react.common.MapBuilder;
import com.facebook.react.uimanager.ReactProp;
import com.facebook.react.uimanager.ThemedReactContext;
import com.facebook.react.uimanager.ViewGroupManager;
import com.facebook.react.views.scroll.ReactHorizontalScrollView;
import com.facebook.react.views.scroll.ReactScrollView;
import com.facebook.react.views.scroll.ReactScrollViewCommandHelper;
import com.facebook.react.views.view.ReactClippingViewGroupHelper;

import java.util.Map;

import javax.annotation.Nullable;
/**
* View manager for {@link ReactScrollView} components.
*
Expand Down Expand Up @@ -88,7 +82,7 @@ public void scrollTo(
ReactScrollViewCommandHelper.ScrollToCommandData data) {
scrollView.smoothScrollTo(data.mDestX, data.mDestY);
}
@Override

public void scrollWithoutAnimationTo(
ReactNestedScrollView scrollView,
ReactScrollViewCommandHelper.ScrollToCommandData data) {
Expand All @@ -97,7 +91,7 @@ public void scrollWithoutAnimationTo(
@Override
public @Nullable Map getExportedCustomDirectEventTypeConstants() {
return MapBuilder.builder()
.put(ScrollEvent.EVENT_NAME, MapBuilder.of("registrationName", "onScroll"))
.put("topScroll", MapBuilder.of("registrationName", "onScroll"))
.put("topScrollBeginDrag", MapBuilder.of("registrationName", "onScrollBeginDrag"))
.put("topScrollEndDrag", MapBuilder.of("registrationName", "onScrollEndDrag"))
.put("topScrollAnimationEnd", MapBuilder.of("registrationName", "onScrollAnimationEnd"))
Expand Down
62 changes: 44 additions & 18 deletions android/src/main/java/com/reactnativeandroiddesignsupport/ReactTabLayoutManager.java
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,26 +1,27 @@
package com.reactnativeandroiddesignsupport;

import java.util.Map;
import javax.annotation.Nullable;

import android.view.View;
import android.support.design.widget.TabLayout;
import android.support.v4.view.ViewPager;
import android.view.View;

import com.facebook.infer.annotation.Assertions;
import com.facebook.react.bridge.JSApplicationIllegalArgumentException;
import com.facebook.react.bridge.ReadableArray;
import com.facebook.react.bridge.ReadableMap;
import com.facebook.react.bridge.JSApplicationIllegalArgumentException;
import com.facebook.react.common.MapBuilder;
import com.facebook.react.uimanager.ViewGroupManager;
import com.facebook.react.uimanager.ReactProp;
import com.facebook.react.uimanager.ThemedReactContext;
import com.facebook.react.uimanager.ViewGroupManager;
import com.facebook.react.uimanager.annotations.ReactProp;

import android.util.Log;
import java.util.ArrayList;
import java.util.Map;

import javax.annotation.Nullable;


public class ReactTabLayoutManager extends ViewGroupManager<TabLayout> {
public ReadableArray mTabs = null;
private ArrayList<TabLayout.Tab> mCustomTabs = new ArrayList<>();

@Override
public String getName() {
Expand All @@ -29,6 +30,7 @@ public String getName() {

@Override
public TabLayout createViewInstance(ThemedReactContext context) {
mCustomTabs.clear();
return new TabLayout(context);
}

Expand All @@ -38,12 +40,20 @@ public boolean needsCustomLayoutForChildren() {

@Override
public void addView(TabLayout view, View child, int index) {
view.addTab(view.newTab().setCustomView(child));
TabLayout.Tab tab = view.newTab();
tab.setCustomView(child);
view.addTab(tab);
mCustomTabs.add(tab);
}

@Override
public int getChildCount(TabLayout view) {
return view.getTabCount();
// mCustomTabs contains tabs that actually have custom views.
// This is called by NativeViewHierarchyManager.dropView() during cleanup
// which then will call getChildAt() for each index.
// If there are no custom views, then this will correctly return 0
// since t.getCustomView() will return null if there is not a custom view for a tab.
return mCustomTabs.size();
}

@Override
Expand All @@ -57,10 +67,10 @@ public void removeViewAt(TabLayout view, int index) {
view.removeTabAt(index);
}

// @Override
// public void removeAllViews(TabLayout view) {
// view.removeAllTabs();
// }
@Override
public void removeAllViews(TabLayout view) {
view.removeAllTabs();
}

public static final int COMMAND_SET_VIEW_PAGER = 1;

Expand All @@ -75,7 +85,6 @@ public Map<String,Integer> getCommandsMap() {
public void receiveCommand(TabLayout view, int commandType, @Nullable ReadableArray args) {
Assertions.assertNotNull(view);
Assertions.assertNotNull(args);

switch (commandType) {
case COMMAND_SET_VIEW_PAGER: {
int viewPagerId = args.getInt(0);
Expand All @@ -85,7 +94,11 @@ public void receiveCommand(TabLayout view, int commandType, @Nullable ReadableAr
ReadableArray tabs = args.getArray(1);
if (tabs != null) {
view.removeAllTabs();
this.populateTablayoutWithTabs(view, tabs);
this.populateTabLayoutWithTabs(view, tabs);
}
else if (!mCustomTabs.isEmpty()) {
view.removeAllTabs();
this.populateTabLayoutWithCustomTabs(view);
}

return;
Expand All @@ -103,7 +116,7 @@ public void receiveCommand(TabLayout view, int commandType, @Nullable ReadableAr
public void setTabs(TabLayout view, ReadableArray tabs) {
view.removeAllTabs();
this.mTabs = tabs;
this.populateTablayoutWithTabs(view, tabs);
this.populateTabLayoutWithTabs(view, tabs);
}

@ReactProp(name = "normalColor", customType = "Color")
Expand Down Expand Up @@ -132,7 +145,7 @@ public void setTabMode(TabLayout view, String mode) {
}
}

private void populateTablayoutWithTabs(TabLayout view, ReadableArray tabs) {
private void populateTabLayoutWithTabs(TabLayout view, ReadableArray tabs) {
try {
int tabSize = tabs.size();
for (int i=0; i<tabSize; i++) {
Expand All @@ -150,4 +163,17 @@ private void populateTablayoutWithTabs(TabLayout view, ReadableArray tabs) {
// TODO: Handle Exception
}
}

private void populateTabLayoutWithCustomTabs(TabLayout view) {
try {
int tabSize = mCustomTabs.size();
for (int i=0; i < tabSize; i++) {

view.addTab(mCustomTabs.get(i));

}
} catch (Exception e) {
// TODO: Handle Exception
}
}
}