2

I'm trying to build an RN component that displays Tweets. I forked a great RN component, react-native-fabric-twitterkit and added a component that displays a tweet. So far so good but when I want to display that Tweet inside a ScrollView I have to specify the components height and width otherwise it won't get displayed. Any idea what am I doing wrong?

Here is my forked RN component: https://github.com/adamivancza/react-native-fabric-twitterkit

And here is a test application that showcases my issue: https://github.com/adamivancza/react-native-twitterkit-test

<View style={styles.container}>
    <ScrollView
      style={{ flex: 1 }}>
      // this component is displayed because I've set a specific height 
      <Tweet
        style={{ flex: 1, height: 200 }}
        tweetId='788105828461006848'/>
      // this component is not displayed
       <Tweet
        style={{ flex: 1 }}
        tweetId='788105828461006848'/>
    </ScrollView>   
</View>
Adam Ivancza
  • 2,459
  • 1
  • 25
  • 36
  • Did you try to set `height` and `width` to `null`? There is some bug with e.g. image in RN – jonzee Oct 27 '16 at 19:01
  • @jonzee sadly that didn't helped – Adam Ivancza Oct 28 '16 at 14:54
  • Been having the same problem. Looks like react native has issues resizing views. https://github.com/facebook/react-native/issues/4990 and https://github.com/facebook/react-native/issues/9275 have some discussion on the issue. – smilly92 Nov 09 '16 at 00:45

1 Answers1

4

The github issue linked by @smilledge has the answer.

When adding views dynamically in a native component it seems you need to manually trigger a layout cycle in order for react-native to pick up on the changes. (perhaps related to react native updating it's shadow-view)

 @Override
    public void requestLayout() {
        super.requestLayout();
        post(measureAndLayout);
    }

    private final Runnable measureAndLayout = new Runnable() {
        @Override
        public void run() {
            measure(
                    MeasureSpec.makeMeasureSpec(getWidth(), MeasureSpec.EXACTLY),
                    MeasureSpec.makeMeasureSpec(getHeight(), MeasureSpec.EXACTLY));
            layout(getLeft(), getTop(), getRight(), getBottom());
        }
    };
Tom Bevelander
  • 1,686
  • 1
  • 22
  • 31