facebook/litho

A declarative UI framework for Android.

Pascal Hartig

@passy

That's how I and many others on the team use it.

Shridhar Sukhani

@shrisukhani

Got it. Thanks a ton @passy :)

Benoit Dion

@benoitdion

Hello, is there an easy way to serialize a yoga layout into something that can be deserialized and rendered by litho/componentkit/RN?

gnoldrol

@gnoldrol

Hi, I got an issue when creating custom Component by Litho

android studio didnt reliaze Component by fooSpec

Pascal Hartig

@passy

@benoitdion Not sure if something already exists for that, but I guess you'd have to serialize a YogaNode for that.

@gnoldrol Can you explain what you mean by this?

PengYue

@didixyy

I have a problem that when I implement a list page, I need the upper half of the list to be vertical and the lower half of the list to be staggered grid. They may be different in height. How can I use litho to do this? I've tried a lot of things, but I don't seem to be allowed to do that.

I found no similar example in the sample.

Jonathan Ross

@golgobot

Hey there. I was wondering if there is any documentation on how layout with text is calculated in Litho? Either in the code, or in documentation. Or any resources that the team used to model multi pass layouts with text. Thanks.

mihaelao

@mihaelao

@didixyy what have you tried? Sounds like you need two RecyclerCollectionComponent components, one that uses a LinearRecyclerConfiguration and one that uses a StaggeredGridRecyclerConfiguration.

akramhv

@akramhv

hi, can anybody help me on transitions?

akramhv

@akramhv

can i use traditinal android transition animations or not?

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 !

Where communities thrive

People

Repo info

Activity