[Android] setClipChildren doesn't seems to resolve overflow
See original GitHub issueIs this a bug report?
Yes
Have you read the Contributing Guidelines?
Yes
Environment
OS: macOS High Sierra 10.13.1 Node: 6.10.3 Yarn: 1.2.1 npm: 3.10.10 Watchman: 4.7.0 Xcode: Xcode 9.1 Build version 9B55 Android Studio: 3.0 AI-171.4443003
Packages: (wanted => installed) react: 16.0.0 => 16.0.0 react-native: 0.50.3 => 0.50.3
Target Platform: Android
Steps to Reproduce
- Create a custom native component that overrides
setClipChildren
on Android, ex:ViewWithoutOverflow
- Create a JS component using
ViewWithoutOverflow
as wrapper and specifying some width/height - Add a
View
inside with position absolute and greater width
Expected Behavior
Lately, we’re having some troubles with overflow on Android devices (as expected). I was able to fix it adding <item name="android:clipChildren">false</item>
on src/main/res/values/styles.xml
:
That was terrible: my animations started to show a very bad FPS. So, I decided to create a native component that handles this, and use only in some places… but I couldn’t make it work yet.
Can I get the same result presented changing styles.xml
with setClipChildren
on a custom native component?
Actual Behavior
With the native component(ViewWithoutOverflow
) the overflow: hidden
still stands.
Reproducible Demo
ViewWithoutOverflowPackage.java
public class ViewWithoutOverflowPackage implements ReactPackage {
// @Override
public List<NativeModule> createNativeModules(ReactApplicationContext reactContext) {
return Collections.emptyList();
}
// @Override
public List<Class<? extends JavaScriptModule>> createJSModules() {
return Collections.emptyList();
}
// @Override
public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) {
return Arrays.<ViewManager>asList(
new ViewWithoutOverflowManager()
);
}
}
ViewWithoutOverflowManager.java
public class ViewWithoutOverflowManager extends ViewGroupManager<ViewWithoutOverflowLayout> {
@Override
protected ViewWithoutOverflowLayout createViewInstance(ThemedReactContext reactContext) {
return new ViewWithoutOverflowLayout(reactContext);
}
@Override
public String getName() {
return "ViewWithoutOverflow";
}
}
ViewWithoutOverflowLayout.java
public class ViewWithoutOverflowLayout extends ReactViewGroup {
public ViewWithoutOverflowLayout(Context context) {
super(context);
setClipChildren(false);
setClipToPadding(false);
}
}
ViewWithoutOverflow.android.js
import { requireNativeComponent } from 'react-native';
export default requireNativeComponent('ViewWithoutOverflow', null);
DemoScreen.js
import * as React from 'react';
import { View } from 'react-native';
import ViewWithoutOverflow from './ViewWithoutOverflow';
class DemoScreen extends React.PureComponent {
render() {
return (
<ViewWithoutOverflow style={{
width: 200,
height: 200,
backgroundColor: 'green',
}}>
<View style={{
position: 'absolute',
left: 0,
top: 0,
width: 400,
height: 100,
backgroundColor: 'red',
}} />
</ViewWithoutOverflow>
);
}
}
export default DemoScreen;
Issue Analytics
- State:
- Created 6 years ago
- Reactions:22
- Comments:5
Top GitHub Comments
@isaachinman check it out https://github.com/entria/react-native-view-overflow
@felippepuhle Would you be willing to formally release this as a component via npm for those of us less comfortable working with Android codebases?