facebook/litho

A declarative UI framework for Android.

Abhilash Mishra

@mishrabhilash

Guys, if you want to add facebook-shimmer feature with litho, please do try slither.

It can be used to show loading effect, highlighting important parts in ui etc.

Michael Pardo

@pardom

Hey, all. :wave: Is there a catalog of Litho widgets or some other form of widget discovery tool?

This is the best I can find, but it would be nice if there were some screenshots: https://fblitho.com/javadoc/com/facebook/litho/widget/package-summary.html

Flutter does a really good job of this, for example: https://flutter.dev/docs/development/ui/widgets

Michael Pardo

@pardom

What consitutes an “appearing” or “disappearing” component? I’m trying to add transitions (https://fblitho.com/docs/transition_animations#null__appearing-and-disappearing-components) but, can’t figure out what actually triggers the transition.

Here’s what I’ve written. It was working at some point and then when I modified TodoDetailComponentSpec’s component, it stopped working.

@LayoutSpec
object AppComponentSpec {

    private val TRANSITION_ANIMATOR = Transition.timing(200, AccelerateDecelerateInterpolator())

    @OnCreateLayout
    fun onCreateLayout(
        context: ComponentContext,
        @Prop props: Props,
        @Prop dispatch: Dispatch<Msg>
    ): Component {
        val screen = when (props) {
            is Props.TodoList -> {
                TodoListComponent.create(context)
                    .props(props.props)
                    .dispatch(contramap(dispatch, Msg::TodoList))
            }
            is Props.TodoDetail -> {
                TodoDetailComponent.create(context)
                    .props(props.props)
                    .dispatch(contramap(dispatch, Msg::TodoDetail))
            }
        }

        return screen
            .transitionKey(javaClass.name)
            .widthPercent(100F)
            .heightPercent(100F)
            .positionType(YogaPositionType.ABSOLUTE)
            .build()
    }

    @OnCreateTransition
    fun onCreateTransition(
        context: ComponentContext,
        @Prop props: Props
    ): Transition {
        return Transition.create(javaClass.name)
            .animator(TRANSITION_ANIMATOR)
            .let { transition ->
                when (props.direction) {
                    Model.Direction.FORWARD -> {
                        transition
                            .animate(AnimatedProperties.X)
                            .appearFrom(DimensionValue.widthPercentageOffset(100F))
                            .disappearTo(DimensionValue.widthPercentageOffset(-100F))
                    }
                    Model.Direction.BACKWARD -> {
                        transition
                            .animate(AnimatedProperties.X)
                            .appearFrom(DimensionValue.widthPercentageOffset(-100F))
                            .disappearTo(DimensionValue.widthPercentageOffset(100F))
                    }
                    Model.Direction.REPLACE -> {
                        transition
                            .animate(AnimatedProperties.ALPHA)
                            .appearFrom(0F)
                            .disappearTo(0F)
                    }
                }
            }
    }

}

I’ve tried applying the transitionKey to the both the parent and child components with no luck. Tried wrapping the child component in a row to no success.

venkateshimmidi

@venkateshimmidi

HI Everyone! I need help with playing video in Litho framework for Android. I have attached my exoplayer (Video Player) to the coreVideoComponent. In the core component of Litho - I have written the methods like prefetch, initialize and clean video. I am not able to compile the code. Run time errors are coming. I would be very happy if anyone could send me a sample to integrate the video into Litho. Thanks in Advance!

BlackZheng

@BlackZheng

Hello everyone, after a RecyclerCollectionComponent is create, can we insert or remove items dynamically at runtime? If so, how to do that? Appreciate for any help

Abhilash Mishra

@mishrabhilash

@BlackZheng you can add and remove items directly from the data set that you provide to SectionSpec as a @prop param.
You'll have to recreate the RecyclerCollectionComponent with updated SectionSpec and Litho will take care of taking diff and rendering items accordingly.

Aleksander Guryanov

@caiiiycuk

Hi guys! I just trying to start with Hello World app. It works in debug mode when minify is disabled, but when I use minified build it always crash. But I didn't find docs about proguard rules. Can you help me?

```

2019-08-21 16:32:51.400 5359-6719/com.gamepix.gameapp W/OpenGLRenderer: Failed to choose config with EGL_SWAP_BEHAVIOR_PRESERVED, retrying without...
2019-08-21 16:32:51.431 5359-5359/com.gamepix.gameapp W/gamepix.gameap: CheckJNI: method to register "jni_YGNodeReset" not in the given class. This is slow, consider changing your RegisterNatives calls.
2019-08-21 16:32:51.432 5359-5359/com.gamepix.gameapp E/gamepix.gameap: ----- class 'Lcom/facebook/yoga/YogaNative;' cl=0x12c23638 -----
2019-08-21 16:32:51.432 5359-5359/com.gamepix.gameapp E/gamepix.gameap:   objectSize=172 (172 from super)
2019-08-21 16:32:51.432 5359-5359/com.gamepix.gameapp E/gamepix.gameap:   access=0x0008.0001
2019-08-21 16:32:51.432 5359-5359/com.gamepix.gameapp E/gamepix.gameap:   super='java.lang.Class<java.lang.Object>' (cl=0x0)
2019-08-21 16:32:51.432 5359-5359/com.gamepix.gameapp E/gamepix.gameap:   vtable (0 entries, 11 in super):
2019-08-21 16:32:51.432 5359-5359/com.gamepix.gameapp E/gamepix.gameap:   direct methods (42 entries):
2019-08-21 16:32:51.432 5359-5359/com.gamepix.gameapp E/gamepix.gameap:      0: void com.facebook.yoga.YogaNative.<clinit>()
2019-08-21 16:32:51.432 5359-5359/com.gamepix.gameapp E/gamepix.gameap:      1: void com.facebook.yoga.YogaNative.<init>()
2019-08-21 16:32:51.432 5359-5359/com.gamepix.gameapp E/gamepix.gameap:      2: void com.facebook.yoga.YogaNative.jni_YGConfigFree(long)
2019-08-21 16:32:51.432 5359-5359/com.gamepix.gameapp E/gamepix.gameap:      3: long com.facebook.yoga.YogaNative.jni_YGConfigNew()
2019-08-21 16:32:51.432 5359-5359/com.gamepix.gameapp E/gamepix.gameap:      4: void com.facebook.yoga.YogaNative.jni_YGConfigSetUseWebDefaults(long, boolean)
2019-08-21 16:32:51.432 5359-5359/com.gamepix.gameapp E/gamepix.gameap:      5: void com.facebook.yoga.YogaNative.jni_YGNodeCalculateLayout(long, float, float, long[], com.facebook.yoga.YogaNodeJNIBase[])
2019-08-21 16:32:51.432 5359-5359/com.gamepix.gameapp E/gamepix.gameap:      6: void com.facebook.yoga.YogaNative.jni_YGNodeClearChildren(long)
2019-08-21 16:32:51.432 5359-5359/com.gamepix.gameapp E/gamepix.gameap:      7: long com.facebook.yoga.YogaNative.jni_YGNodeClone(long)
2019-08-21 16:32:51.432 5359-5359/com.gamepix.gameapp E/gamepix.gameap:      8: void com.facebook.yoga.YogaNative.jni_YGNodeFree(long)
2019-08-21 16:32:51.432 5359-5359/com.gamepix.gameapp E/gamepix.gameap:      9: void com.facebook.yoga.YogaNative.jni_YGNodeInsertChild(long, long, int)
2019-08-21 16:32:51.432 5359-5359/com.gamepix.gameapp E/gamepix.gameap:     10: long com.facebook.yoga.YogaNative.jni_YGNodeNew(boolean)
2019-08-21 16:32:51.432 5359-5359/com.gamepix.gameapp E/gamepix.gameap:     11: long com.facebook.yoga.YogaNative.jni_YGNodeNewWithConfig(long, boolean)
2019-08-21 16:32:51.432 5359-5359/com.gamepix.gameapp E/gamepix.gameap:     12: void com.facebook.yoga.YogaNative.jni_YGNodeSetHasBaselineFunc(long, boolean)
2019-08-21 16:32:51.432 5359-5359/com.gamepix.gameapp E/gamepix.gameap:     13: void com.facebook.yoga.YogaNative.jni_YGNodeSetHasMeasureFunc(long, boolean)
2019-08-21 16:32:51.432 5359-5359/com.gamepix.gameapp E/gamepix.gameap:     14: void com.facebook.yoga.YogaNative.jni_YGNodeSetIsReferenceBaseline(long, boolean)
2019-08-21 16:32:51.432 5359-5359/com.gamepix.gameapp E/gamepix.gameap:     15: int com.facebook.yoga.YogaNative.jni_YGNodeStyleGetDirection(long)
2019-08-21 16:32:51.432 5359-5359/com.gamepix.gameapp E/gamepix.gameap:     16: long com.facebook.yoga.YogaNative.jni_YGNodeStyleGetHeight(long)
2019-08-21 16:32:51.432 5359-5359/com.gamepix.gameapp E/gamepix.gameap:     17: long com.facebook.yoga.YogaNative.jni_YGNodeStyleGetWidth(long)
2019-08-21 16:32:51.432 5359-5359/com.gamepix.gameapp E/gamepix.gameap:     18: void com.facebook.yoga.YogaNative.jni_YGNodeStyleSetAlignContent(long, int)
2019-08-21 16:32:51.432 5359-5359/com.gamepix.gameapp E/gamepix.gameap:     19: void com.facebook.yoga.YogaNative.jni_YGNodeStyleSetAlignItems(long, int)
2019-08-21 16:32:51.432 5359-5359/com.gamepix.gameapp E/gamepix.gameap:     20: void com.facebook.yoga

Aleksander Guryanov

@caiiiycuk

Problem method is

java_vm_ext.cc:570] JNI DETECTED ERROR IN APPLICATION: JNI NewGlobalRef called with pending exception java.lang.NoSuchMethodError: no static or non-static method "Lcom/facebook/yoga/YogaNative;.jni_YGNodeReset(J)V"

Aleksander Guryanov

@caiiiycuk

I added this

-keep,allowobfuscation @interface com.facebook.proguard.annotations.DoNotStrip
-keep,allowobfuscation @interface com.facebook.proguard.annotations.KeepGettersAndSetters

# Do not strip any method/class that is annotated with @DoNotStrip
-keep @com.facebook.proguard.annotations.DoNotStrip class *
-keepclassmembers class * {
    @com.facebook.proguard.annotations.DoNotStrip *;
}

-keepclassmembers @com.facebook.proguard.annotations.KeepGettersAndSetters class * {
  void set*(***);
  *** get*();
}

but does not help. dunno why

I have this in usage.txt from r8

com.facebook.yoga.YogaNative
static native void jni_YGConfigSetExperimentalFeatureEnabled(long,int,boolean)
static native void jni_YGConfigSetPrintTreeFlag(long,boolean)
static native void jni_YGConfigSetPointScaleFactor(long,float)
static native void jni_YGConfigSetUseLegacyStretchBehaviour(long,boolean)
static native void jni_YGConfigSetShouldDiffLayoutWithoutLegacyStretchBehaviour(long,boolean)
static native void jni_YGConfigSetLogger(long,java.lang.Object)
static native int jni_YGNodeGetInstanceCount()
static native void jni_YGNodeReset(long)

Aleksander Guryanov

@caiiiycuk

but still have this error

JNI DETECTED ERROR IN APPLICATION: JNI NewGlobalRef called with pending exception java.lang.NoSuchMethodError: no static or non-static method "Lcom/facebook/yoga/YogaNative;.jni_YGNodeReset(J)V"

Aleksander Guryanov

@caiiiycuk

This -keepclassmembers class {
native ** (...);
static native ** *(...);
}

helps me, still don't understand why default rule not working

Aleksander Guryanov

@caiiiycuk

replacing this

-keep @com.facebook.proguard.annotations.DoNotStrip class *

with

-keep @com.facebook.proguard.annotations.DoNotStrip class * { *; }

helps

Mohamed Hamdan

@mnayef95

Hi all is there any alternatives for ios?

Henry

@chihung93

Hello everyone, what are the fblitho's pros and cons?
thanks

Filip Misztal

@xserxses

Hi everyone, i have a big problem with

Fatal Exception: java.lang.UnsatisfiedLinkError: couldn't find DSO to load: libyoga.so caused by: couldn't find DSO to load: libfb.so caused by: Error: Cannot load /data/user/0/my.packagei/lib-main/libfb.so

While using litho.
Anyone knows this ?

Wang Liang

@bonede

/art: art/runtime/java_vm_ext.cc:470] JNI DETECTED ERROR IN APPLICATION: JNI GetFieldID called with pending exception java.lang.ClassNotFoundException: Didn't find class "com.facebook.jni.Countable" on path: DexPathList[[zip file "/data/app/com.geinikoudai.myapplication-2/base.apk"],

crashed when updated to Adroid Studio 3.6, any one has the same issue?

Artem

@zibellon

hello. Can you help me. The best way to update(refresh) recyclerCollectionComponent?? I have been using litho for a one year, and I think that my update method - is wrong....

vvkong

@vvkong

hello, everyone

Ask21

@askiled21

first time

anyone have some working code using the latest version of litho?
e.g: "com.facebook.litho:litho-core:0.35.0"

cause when im trying the latest version it seems to always have some errors
but whenever i tried using the old version e.g: "com.facebook.litho:litho-core:0.12.0"
it works

the problems lies when using RecyclerComponentSection

Thomas Pucci

@tpucci

Hello all, I am wondering to use Litho on my next project. However, I know I will need shared elements between fragments.

Typically, I have a list of items. When I click on an item, I need a shared elements transition to a new "details" fragment.

How can I use Litho with fragments Shared Elements ? Do you know some code examples ?

Thanks !

Josue Balandrano Coronel

@xirdneh

Hi, I'm trying to render a recycler collector within a fragment but it doesn't seem to render.

Is there anything special I need to do to use a recycler collector inside a fragment?

Josue Balandrano Coronel

@xirdneh

Here's the code I'm using:

override fun onCreateView(inflater: LayoutInflater, container: ViewGroup?, savedInstanceState: Bundle?){
    val c = ComponentContext(this.activity?.applicationContext)
    return LithoView.create(
        c,
        RecyclerCollectionComponent.create(c)
                .section(
                     SingleComponentSection.create(SectionContext(c))
                         .component(Text.create(c).text("some text").build())
                     .build()
                .build()
    )

If I use the same code but inside setViewContent() it works.

Josue Balandrano Coronel

@xirdneh

Ah, seems like the width and height are not set when using a recycler collection inside a fragment.

Josue Balandrano Coronel

@xirdneh

Anyone knows how to make recycler collection component to wrap its content?

Murtaza Icecreamwala

@Murtaza-arif

Has anyone measure performance increase when using litho compared to xml

Rami Mohammed Seid

@RamiMohammedSeid

What can I do about this?

    java.lang.IllegalStateException: Can't use Unspecified height on an horizontal scrolling Recycler if dynamic measurement is not allowed

var recyclerBinder = RecyclerBinder.Builder()
            .layoutInfo(LinearLayoutInfo(lithoContext, OrientationHelper.HORIZONTAL, false))
            .hasDynamicItemHeight(true)
            .build(lithoContext)
        var recycler =  LithoView.create(lithoContext,Recycler.create(lithoContext)
            .binder(recyclerBinder)
            .useHeightAsBaseline(true)
            .snapHelper(getSnapHelper(SNAP_TO_START, 2, 0 ))
            .hasFixedSize(false)
            .marginDip(YogaEdge.BOTTOM, carouselInstance.marginVertical ?: 0f)
            .build())

Rami Mohammed Seid

@RamiMohammedSeid

please !!!

NishcheyBhutani

@NishcheyBhutani

hello! i am a beginner, can u pls give me something beginner friendly to get started with???

Hank

@ihenk

Hi there. I'm new to Litho. Here are two questions. Could anyone help me out? I'm struggling to them for hours. Thanks.

LithoView couldn't be shown when scrolled up inside a ScrollView (facebook/litho#760)
Flex attribute works unexpectedly on Image components(facebook/litho#759)

Where communities thrive

People

Repo info

Activity