Android problems with large screens

[Angelk90]

Hi @zobeirhamid , I was trying the module. But trying on my device 6 polics, I noticed that there are problems, I also tried on an 8 polici tablet the problems seem to get worse.

Here is the link I tested: https://snack.expo.io/B1hCvbgAN

The problems are as follows: 1) Image: 2) Problems with BigNavigationBarCustomTitle, problems with the top where the image.

[zobeirhamid]

Hey @Angelk90, thanks for the report. I looked into your example, and saw the problem. First, you are using a ListView, you can use this Component with a ListView but the performance is not the best, I would recommend you a FlatList. But if you still want to use the ListView then the easiest fix is going into the example folder and then edit the BigNavigationBar.js file, by removing the following code:

 ScrollComponent={props => (
          <Animated.FlatList
            contentContainerStyle={{ paddingBottom: 20 }}
            data={[0, 1, 2]}
            renderItem={() => <PlaceHolder />}
            keyExtractor={(item, index) => `test-${index}`}
            {...props}
          />
)}

The updated working version you can find here: https://snack.expo.io/@zobeirhamid/honest-churros

The other option is using a FlatList and passing it via ScrollComponent.

Additionally, you don't have to use the examples in your code, you can just look into them and copy & paste the code you need.

Just to add, if you are talking about the image is not filling the whole screen, then it's because the image is too small for big screens.

If you have anymore questions, feel free to ask me.

[Angelk90]

@zobeirhamid : I did some tests on the updated link. These are the considerations: 1) The problem of images that are not seen in full screen seems to be due to the BigImageNavigationBar file line 11. If I remove this line it seems to give me problems with BigCustomImageNavigationBar. imageStyle={{ resizeMode: 'stretch', width: 375 }} 2) In AnimatedImageNavigationBar, if I wanted to put backButton, leftIcons, rightIcons would it be possible to do it? 3) I did a test of the code putting a Tab I used in this case native-base, problems arose.

• The cards Tab do not remain fixed but they shake
• The elements of the 2 Movie tab, remain fixed, do not shake. Do you know how to solve this problem?

Link: https://snack.expo.io/B1lmNpgA4

[zobeirhamid]

@Angelk90

1. Currently, you still have to give the Image a width. I will probably change that in the near future, where the width is automatically taken from the device width and then you optionally can change the width.
2. Currently it is not possible, because I didn't put much effort into AnimatedImageNavigationBar since its performance is kinda bad. Maybe in the future I will improve it. Otherwise, contributions are always welcomed.
3. Can you elaborate that because I don't exactly know what you mean.

[Angelk90]

@zobeirhamid : Have you tried the example of the link I sent you? Here is: https://snack.expo.io/HkZP7eZRN

I wanted to try your example with the tabs(native-base). If you go to the second tab tabs, try scrolling does not work and the tab does not remain fixed.

You know how you can help me solve this problem.

[zobeirhamid]

Yeah I see your point, it's because you got two ScrollComponents. The first one is AnimatedImageNavigationBar and then inside the tabs you got the ListView, so if you scroll on the ListView, then the NavigationBar won't update. You can fix it by setting the scrollEnabled on the ListView to false, so:

<ListView
              horizontal={false}
              initialListSize={this.state.dataSourceMovie._dataBlob.s1.length}
              contentContainerStyle={styles.list}
              dataSource={this.state.dataSourceMovie}
              renderRow={this.renderRow.bind(this)}
              enableEmptySections={true}
              scrollEnabled={false}
            />

But with this solution you would have to render the whole ListView fully before scrolling, so be aware of that when using.

[Angelk90]

@zobeirhamid : I don't understand, the one you indicated doesn't work.

[zobeirhamid]

@Angelk90 The scrolling should work tho now. The tabs wont remained fixed because it is regarded as a regular element in the ScrollView. This special use-case would need to be implemented, if I have some free time in the next days, then I will look deeper into that use-case.

[Angelk90]

@zobeirhamid : Strange to me it doesn't work. I look forward to your future updates.

[zobeirhamid]

@Angelk90 I rewrote most of the package, it should be possible to add a TabScreen now, but you would have to separate it into two components.

[Angelk90]

@zobeirhamid : could you give me an example?

[zobeirhamid]

@Angelk90 I'm very sorry for this late response, I was focusing on school for the last couple of months. You still need an example?

[Angelk90]

@zobeirhamid : Yes, especially if I could also post the three examples that are seen in the images on snack.io.

[zobeirhamid]

Sorry for the ultra late response, you still need an example?

[Angelk90]

@zobeirhamid : Yes.

[zobeirhamid]

@Angelk90 https://zobeirhamid.github.io/react-native-scrollable-navigation-bar/examples/image-background You can find a couple of examples on the docs now. If you need a specific use case let me know, I will write some docs for it too.