Problem scroll example button maps

[Angelk90]

@cesardeazevedo : Hi, I copied the following example. Link: https://github.com/cesardeazevedo/react-native-bottom-sheet-behavior/blob/master/example/views/GoogleMapsView.js I did not change anything, but it looks like this when I scroll.

What could be the problem?

[cesardeazevedo]

Hi, that's weird, did you tried run the example directly to see if it happens as well?

[Angelk90]

@cesardeazevedo : I only did the example directly, without doing anything else.

[cesardeazevedo]

You said that you copied to example file, so i thought that you were running in a separate project different from the example, i really don't know how to reproduce it, i need to know what android version and simulator you are using, so i might can take a look.

[Angelk90]

@cesardeazevedo: Latest version of the project, Android version 7.0, physical device.

[cesardeazevedo]

I just tested on my personal phone (galaxy s6, android version 7.0), and it's working pretty well, so i really don't know what could be.

Have you tested on other phones? Does the FAB never disappears when matches with the toolbar? or maybe it reappears at some time?

[Angelk90]

@cesardeazevedo:I tried again, first time I first started, strangely this.

link: https://i.imgur.com/ZPu9yCw.gif

All the next time this happens.

link: https://i.imgur.com/pj91zZq.gif

[Angelk90]

@cesardeazevedo : Try like this: Create a new project: react-native init test

Installs the following dependencies: "dependencies": { "prop-types": "^ 15.6.0", "react": "16.1.1", "react-native": "0.50.4", "react-native-bottom-sheet-behavior": "^ 1.0.0-beta.7" "react-native-maps": "^ 0.17.1", "react-native-vector-icons": "^ 4.4.2", "react-navigation": "1.0.0-beta.21" },

In the Primary App.js file, enter the following code: https://github.com/cesardeazevedo/react-native-bottom-sheet-behavior/blob/master/example/views/GoogleMapsView.js

P.Š. Do not forget the picture folder. :)

Let me know what happens to you.

[cesardeazevedo]

So that's right, you are not using the example project directly :joy:, can you post your build.gradle?

This is the build.gradle from the example https://github.com/cesardeazevedo/react-native-bottom-sheet-behavior/blob/master/example/android/app/build.gradle

BTW, i didn't tested react-native 0.50.4 yet, but i will give a try.

[Angelk90]

You thought I was kidding? 😂

apply plugin: "com.android.application"

import com.android.build.OutputFile

/**
 * The react.gradle file registers a task for each build variant (e.g. bundleDebugJsAndAssets
 * and bundleReleaseJsAndAssets).
 * These basically call `react-native bundle` with the correct arguments during the Android build
 * cycle. By default, bundleDebugJsAndAssets is skipped, as in debug/dev mode we prefer to load the
 * bundle directly from the development server. Below you can see all the possible configurations
 * and their defaults. If you decide to add a configuration block, make sure to add it before the
 * `apply from: "../../node_modules/react-native/react.gradle"` line.
 *
 * project.ext.react = [
 *   // the name of the generated asset file containing your JS bundle
 *   bundleAssetName: "index.android.bundle",
 *
 *   // the entry file for bundle generation
 *   entryFile: "index.android.js",
 *
 *   // whether to bundle JS and assets in debug mode
 *   bundleInDebug: false,
 *
 *   // whether to bundle JS and assets in release mode
 *   bundleInRelease: true,
 *
 *   // whether to bundle JS and assets in another build variant (if configured).
 *   // See http://tools.android.com/tech-docs/new-build-system/user-guide#TOC-Build-Variants
 *   // The configuration property can be in the following formats
 *   //         'bundleIn${productFlavor}${buildType}'
 *   //         'bundleIn${buildType}'
 *   // bundleInFreeDebug: true,
 *   // bundleInPaidRelease: true,
 *   // bundleInBeta: true,
 *
 *   // whether to disable dev mode in custom build variants (by default only disabled in release)
 *   // for example: to disable dev mode in the staging build type (if configured)
 *   devDisabledInStaging: true,
 *   // The configuration property can be in the following formats
 *   //         'devDisabledIn${productFlavor}${buildType}'
 *   //         'devDisabledIn${buildType}'
 *
 *   // the root of your project, i.e. where "package.json" lives
 *   root: "../../",
 *
 *   // where to put the JS bundle asset in debug mode
 *   jsBundleDirDebug: "$buildDir/intermediates/assets/debug",
 *
 *   // where to put the JS bundle asset in release mode
 *   jsBundleDirRelease: "$buildDir/intermediates/assets/release",
 *
 *   // where to put drawable resources / React Native assets, e.g. the ones you use via
 *   // require('./image.png')), in debug mode
 *   resourcesDirDebug: "$buildDir/intermediates/res/merged/debug",
 *
 *   // where to put drawable resources / React Native assets, e.g. the ones you use via
 *   // require('./image.png')), in release mode
 *   resourcesDirRelease: "$buildDir/intermediates/res/merged/release",
 *
 *   // by default the gradle tasks are skipped if none of the JS files or assets change; this means
 *   // that we don't look at files in android/ or ios/ to determine whether the tasks are up to
 *   // date; if you have any other folders that you want to ignore for performance reasons (gradle
 *   // indexes the entire tree), add them here. Alternatively, if you have JS files in android/
 *   // for example, you might want to remove it from here.
 *   inputExcludes: ["android/**", "ios/**"],
 *
 *   // override which node gets called and with what additional arguments
 *   nodeExecutableAndArgs: ["node"],
 *
 *   // supply additional arguments to the packager
 *   extraPackagerArgs: []
 * ]
 */

project.ext.react = [
    entryFile: "index.js"
]

apply from: "../../node_modules/react-native/react.gradle"

/**
 * Set this to true to create two separate APKs instead of one:
 *   - An APK that only works on ARM devices
 *   - An APK that only works on x86 devices
 * The advantage is the size of the APK is reduced by about 4MB.
 * Upload all the APKs to the Play Store and people will download
 * the correct one based on the CPU architecture of their device.
 */
def enableSeparateBuildPerCPUArchitecture = false

/**
 * Run Proguard to shrink the Java bytecode in release builds.
 */
def enableProguardInReleaseBuilds = false

android {
    compileSdkVersion 23
    buildToolsVersion "23.0.1"

    defaultConfig {
        applicationId "com.sheetbehavior"
        minSdkVersion 16
        targetSdkVersion 22
        versionCode 1
        versionName "1.0"
        ndk {
            abiFilters "armeabi-v7a", "x86"
        }
    }
    splits {
        abi {
            reset()
            enable enableSeparateBuildPerCPUArchitecture
            universalApk false  // If true, also generate a universal APK
            include "armeabi-v7a", "x86"
        }
    }
    buildTypes {
        release {
            minifyEnabled enableProguardInReleaseBuilds
            proguardFiles getDefaultProguardFile("proguard-android.txt"), "proguard-rules.pro"
        }
    }
    // applicationVariants are e.g. debug, release
    applicationVariants.all { variant ->
        variant.outputs.each { output ->
            // For each separate APK per architecture, set a unique version code as described here:
            // http://tools.android.com/tech-docs/new-build-system/user-guide/apk-splits
            def versionCodes = ["armeabi-v7a":1, "x86":2]
            def abi = output.getFilter(OutputFile.ABI)
            if (abi != null) {  // null for the universal-debug, universal-release variants
                output.versionCodeOverride =
                        versionCodes.get(abi) * 1048576 + defaultConfig.versionCode
            }
        }
    }
}

dependencies {
    compile project(':react-native-vector-icons')
    compile project(':react-native-maps')
    compile project(':react-native-bottom-sheet-behavior')
    compile fileTree(dir: "libs", include: ["*.jar"])
    compile "com.android.support:appcompat-v7:23.0.1"
    compile "com.facebook.react:react-native:+"  // From node_modules
}

// Run this once to be able to run the application with BUCK
// puts all compile dependencies into folder libs for BUCK to use
task copyDownloadableDepsToLibs(type: Copy) {
    from configurations.compile
    into 'libs'
}

[Angelk90]

@cesardeazevedo : Meanwhile, trying to figure out where I'm wrong, I wanted to ask you three more things. 1) When I'm in the state where you can see the whole map, I want to remove the status bar, that is, I would not like color that blue color but transparent color, would it be possible to do it when you see the beer slider? I do not understand that properties must be changed, in this case. 2) Instead of starting the component from the map, it would be possible to start from state 2, that is where you see the beer slider. (you know I'm very close to the beers 😂 ) 3) In a test I'm doing, I've deleted the rows of the following file: https://github.com/cesardeazevedo/react-native-bottom-sheet-behavior/blob/master/example/views/GoogleMapsView.js

Start line deletion: https://github.com/cesardeazevedo/react-native-bottom-sheet-behavior/blob/master/example/views/GoogleMapsView.js#L190 Last delete line: https://github.com/cesardeazevedo/react-native-bottom-sheet-behavior/blob/master/example/views/GoogleMapsView.js#L250

The problem that arises is that below you see the map, how can i not let you see it, especially when I scroll. (Although I do not scroll it you see.)

[cesardeazevedo]

Now i was be able to reproduce your issue, you need to include the support library with compile "com.android.support:appcompat-v7:24.2.1" and bump the appcompat version to 24.2.1, you should follow the build.gradle dependencies on the example, those dependencies are required in order to provide backward compatibility, otherwise won't work as expected, you should also change the compileSdkVersion and targetSdkVersion to 24 (or even 25, see this issue)

Regarding your questions.

I am not really sure on what you trying to achieve, if you show some example, i might can help you, and guide you if this component really fits your needs, i also don't recommend the usage of this component for all use cases.

When I'm in the state where you can see the whole map, I want to remove the status bar, that is, I would not like color that blue color but transparent color, would it be possible to do it when you see the beer slider?

Are you meant the StatusBar or the ToolbarAndroid?

The StatusBar is the bar that shows the hour and battery status, if you want to hide it, you can just pass the hidden prop to it, <StatusBar hidden />.

Now ToolbarAndroid that is inside the ScrollingAppBarLayout, you should set the backgroundColor style to transparent on the ScrollingAppBarLayout parent, which works, but it would remains a elevation shadow around, which i would need to expose a prop to disable the outline shadow, that wouldn't be too hard.

Instead of starting the component from the map, it would be possible to start from state 2, that is where you see the beer slider. (you know I'm very close to the beers 😂 )

If you want to start from the anchor point, you should just do this.

  componentDidMount() {
    this.bottomSheet.setBottomSheetState(BottomSheetBehavior.STATE_ANCHOR_POINT)
  }

  render() {
    return (
      <BottomSheetBehavior ref={ref => {this.bottomSheet = ref}} />
    )
  }

But you just can't disable the collapsed state, which that's why this component is for, you can only disable the anchor point state.

The problem that arises is that below you see the map, how can i not let you see it

That's because you are not fitting the whole component on your screen, applying a height: Dimensions.get('window').height on the detailListSection style will fit the component on the whole screen.

Let know if you got it.

[Angelk90]

First of all, I would like to thank you for the support you give me. ;) Let's begin.

1) Having never bump the appcompat version, I do not know how to do it and I would not want to combine some trouble. You could tell me the steps I have to make and which versions I have to put. So I have to change the file https://github.com/cesardeazevedo/react-native-bottom-sheet-behavior/blob/master/example/android/app/build.gradle They're on windows.

The following lines: a) https://github.com/cesardeazevedo/react-native-bottom-sheet-behavior/blob/master/example/android/app/build.gradle#L86 b) https://github.com/cesardeazevedo/react-native-bottom-sheet-behavior/blob/master/example/android/app/build.gradle#L92 c) https://github.com/cesardeazevedo/react-native-bottom-sheet-behavior/blob/master/example/android/app/build.gradle#L137

Quite right? Better 24 or 25?

The following line should also put it: https://github.com/cesardeazevedo/react-native-bottom-sheet-behavior/blob/master/example/android/app/build.gradle#L138

2) This is the sample code, link: https://paste.ofcode.org/JiWaxdazHkPw53UJpdL9ud 3) Sample Video Links: https://streamable.com/ai46m

4) As you can see, I was able to start the screen from step 2 (where the beers are once). Thus, in the renderBottomSheet function, link: https://github.com/cesardeazevedo/react-native-bottom-sheet-behavior/blob/master/example/views/GoogleMapsView.js#L326

I added the following line to : state={STATE_ANCHOR_POINT}. You are advised to use:

componentDidMount () {
this.bottomSheet.setBottomSheetState (BottomSheetBehavior.STATE_ANCHOR_POINT);
 }

What better than the two solutions according to you?

5)As you can see from the video, I would like to hide the status bar, the one where the map was once, from the video from 0.6 to 0.7. To show all the full image, as when it is in state 2 (Where the beers were), the status bar is not visible. I did try, but I did not succeed.

6)As you can see from the video, at the second 0.12, below you see the two images. In the video at 0.27, I did as you said, solved the problem. But more space than it would not be, this is the ability to scroll to elements that are not there. It can see it from the video, from the second 0.30 to 0.40. I was thinking of using flex, but still more problems. Any other idea?

@cesardeazevedo: P.Š. If you have advice on how to improve what I am doing, you will. I expect them with anxiety. ;)

[cesardeazevedo]

1 - Yes, that's correct, go ahead with 25, just follow the example.

4 - You should manage the bottom sheet state from the componentDidMount as i said, if you set the state prop directly, each unrelated state change will affect the bottom sheet state to the anchor point.

5 - Set the statusBarColor from MergedAppBarLayout and ScrollingAppBarLayout components to #00000000, which will make the StatusBar transparent.

6 - Take a look at the AnchorSheetView.js example, which is implemented correctly, basically set a flex:1 on bottomSheetContent style, so you can get a fixed height.

[Angelk90]

@cesardeazevedo:

5)I did as you say:

      <MergedAppBarLayout
        translucent
        mergedColor={PRIMARY_COLOR}
        toolbarColor={PRIMARY_COLOR}
        statusBarColor="#00000000"
        style={styles.appBarMerged}>

      <ScrollingAppBarLayout
        translucent
        barStyleTransparent={'light-content'}
        style={styles.scrollAppBar}
        statusBarColor="#00000000">

But it does not work, even worse, in the state 2 is added the blue statusbar and the clock battery icons become black. Same thing in the state1.

6)In the: <View style = {styles.bottomSheetContent}> I put:

bottomSheetContent: {
    flex: 1,
    backgroundColor: WHITE,
  },

The situation worsens, the whole content of the bottomSheetContent disappears.

[cesardeazevedo]

Yes that's correct, also try to set the backgroundColor from StatusBar component to transparent.

And uncomment this line as well https://github.com/cesardeazevedo/react-native-bottom-sheet-behavior/blob/master/example/views/GoogleMapsView.js#L456 to make it work.

The AnchorSheetView.js example already shows how to fit the whole screen height without scrolling.

[Angelk90]

@cesardeazevedo :

5) Perfect works, only thing is that when it is in the state3, the compressed without images, I liked that the color of the status bar was colored STATUS_BAR_COLOR, ie to have that contrast between the status bar, and the title that would be colored PRIMARY_COLOR. I think it can not be done, right? That is, status1 and status2 is transparent and status3 PRIMARY_COLOR.

6) I uncomment that line, it seems to work.

So the line: https://github.com/cesardeazevedo/react-native-bottom-sheet-behavior/blob/master/example/views/GoogleMapsView.js#L502 I leave it commented or would it be better to uncomment it?

[cesardeazevedo]

I can't just tell you exactly you should do or shouldn't do, comment this line or not, is that correct or not, if would be better or not, because i really don't know 😂

The height on bottomSheet style is useful to make the bottom sheet fits the whole screen, but i don't know, i might be wrong, there's a lot possibilities and multiple approaches to achieve the same thing.

There's no correct way of doing things, only the rational way that makes sense for you and for your project, and maybe multiples ways of achieve the same result, so, you shouldn't trust me at all and all my advices, because i might be wrong, and i have limited time and limited information on what exactly you trying to do.

The only advise that i can tell you, follow your heart, and your intuition :joy:, if it works for you, and didn't break any other part, go ahead, if you didn't find something that you want, try to dig on the documentation and the examples, don't be afraid to touch them and to change all the props, try to break them by changing their styles, to understand how they works, because i will probably do the same. :joy:

[Angelk90]

@cesardeazevedo: In fact, I took you at your word, in line 313, where there is title, if I put a text, which is taken from the state. So if I put, this.state.title, the object breaks, it breaks all that part, but I do not understand the reason. :)

[cesardeazevedo]

Are you sure that your this.state.title is not null?

[Angelk90]

@cesardeazevedo : At the beginning it is empty, but then it is filled by an http call. But, I bypassed the problem in another way. ;)

Instead a high problem arose, I tried everything, but I can not solve it any other way. I have set it up:  

 bottomSheet: {
     height,
     zIndex: 5,
     backgroundColor: 'white'
   },
   bottomSheetContent: {
     // flex: 1,
     backgroundColor: WHITE,
   },

In this way.

Inside renderBottomSheetContent (), I have elements that fill in height all the renderBottomSheetContent ().

Here now the problem arises, I make a call http, which takes a while to be executed, at the end of the call, I make a loop that calls renderDetailItem () and adds some elements. The problem that these elements are printed, but I can not see them, because I can not do the Scrolling.

I tried to put a ScrollView, but it does not seem to work.

Could you give me some suggestions?

[cesardeazevedo]

I really don't know what is going on there, so, you need to help me to help you, if you post a snippet code, i might take a look.

[Angelk90]

@cesardeazevedo : Thank you. Ok, I will help you to help me. 😂 Here is the code example, link: https://paste.ofcode.org/yNYE9BYcWXetGsL9uY47S3 if you wait two seconds, another 49 items will be added, but you will not be able to scroll through them.

[Angelk90]

@cesardeazevedo: Did you find a solution to the problem by chance?

[cesardeazevedo]

No, I didn't had time to look at it yet, but i will try.

[Angelk90]

@cesardeazevedo: Did you understand how to solve the problem?

[cesardeazevedo]

Not yet, i have been too busy this week and working away from home, i will try to do this on the weekend.

[cesardeazevedo]

@Angelk90 It seems that your link expired, can you post again?

[Angelk90]

@cesardeazevedo : Of course. ;)

import React, { Component } from 'react'
import PropTypes from 'prop-types'
 // 15.6.0
import {
  View,
  Text,
  Image,
  Keyboard,
  Platform,
  StatusBar,
  StyleSheet,
  Dimensions,
  ToastAndroid,
  TouchableNativeFeedback,
} from 'react-native'

import Icon from 'react-native-vector-icons/Ionicons'
 // 4.4.2
import IconMDI from 'react-native-vector-icons/MaterialIcons'
 // 4.4.2
import {
  CoordinatorLayout,
  BottomSheetHeader,
  MergedAppBarLayout,
  BackdropBottomSheet,
  BottomSheetBehavior,
  FloatingActionButton,
  ScrollingAppBarLayout,
} from 'react-native-bottom-sheet-behavior'
 // 1.0.0-beta.6

const { width, height } = Dimensions.get('window')

const anchorPoint = 235
const RippleColor = (...args) => (
  Platform.Version >= 21
    ? TouchableNativeFeedback.Ripple(...args)
    : null
)

const WHITE = '#FFFFFF'
const PRIMARY_COLOR = '#4589f2'
const STATUS_BAR_COLOR = '#205cb2'
const STAR_COLOR = '#FF5722'

const { STATE_ANCHOR_POINT, STATE_COLLAPSED } = BottomSheetBehavior

class Prova extends Component {
  static contextTypes = {
    openDrawer: PropTypes.func,
  };

  constructor() {
    super();
    this.state = {
      n: null
    };
  }

componentDidMount () {
  setTimeout(() => {
    this.setState({n: 50});
  }, 2000)
}

  handleOpenDrawer = () => {
    Keyboard.dismiss()
    this.context.openDrawer()
  }

  handleFabPress = () => {
    ToastAndroid.show('Pressed', ToastAndroid.SHORT)
  }

  handleState = (state) => {
    this.bottomSheet.setBottomSheetState(state)
  }

  handleHeaderPress = () => {
    this.handleState(STATE_ANCHOR_POINT)
  }

  renderDetailItem(icon, text,i) {
    return (
      <TouchableNativeFeedback key={i} delayPressIn={0} delayPressOut={0} background={RippleColor('#d1d1d1')}>
        <View>
          <View pointerEvents="none" style={styles.detailItem}>
            <Icon name={icon} size={22} color={PRIMARY_COLOR} />
            <Text pointerEvents="none" style={styles.detailText}>{text}</Text>
          </View>
        </View>
      </TouchableNativeFeedback>
    )
  }

  renderBottomSheetContent() {
    return (
      <View style={styles.bottomSheetContent}>
        <Text style={{padding:5, color:"#000"}}>An Amazon princess comes to the world of Man to become the greatest of the female superheroes.</Text>
        <View style={styles.detailListSection}>
        {Array(this.state.n).fill().map((_, i) => i).map(i =>
          this.renderDetailItem('md-timer', 'Text:'+i,i)
        )}
        </View>
      </View>
    )
  }

  renderFloatingActionButton() {
    return (
      <FloatingActionButton
        autoAnchor
        elevation={18}
        rippleEffect={true}
        rippleColor="#55ffffff"
        icon="star"
        iconProvider={IconMDI}
        iconColor={WHITE}
        iconColorExpanded={PRIMARY_COLOR}
        onPress={this.handleFabPress}
        backgroundColor={PRIMARY_COLOR}
        backgroundColorExpanded={WHITE}
      />
    )
  }

  renderBackdrop() {
    return (
      <BackdropBottomSheet height={anchorPoint}>
        <View style={{flex: 1, backgroundColor: 'white'}}>
            <Image style={{width, height: 320}} source={{uri:"https://image.tmdb.org/t/p/w640/6iUNJZymJBMXXriQyFZfLAKnjO6.jpg"}} />
        </View>
      </BackdropBottomSheet>
    )
  }

  renderMergedAppBarLayout() {
    return (
      <MergedAppBarLayout
        translucent
        mergedColor={PRIMARY_COLOR}
        toolbarColor={PRIMARY_COLOR}
        statusBarColor={STATUS_BAR_COLOR}
        style={styles.appBarMerged}>
        <Icon.ToolbarAndroid
          title='Jon Snow'
          titleColor={WHITE}
          style={{elevation: 6}}
          onIconClicked={() => this.handleState(STATE_COLLAPSED)}
        />
      </MergedAppBarLayout>
    )
  }

  renderBottomSheet() {
    return (
      <BottomSheetBehavior
        anchorEnabled
        anchorPoint={anchorPoint}
        peekHeight={80}
        elevation={8}
        ref={(bottomSheet) => { this.bottomSheet = bottomSheet }}
        onSlide={this.handleSlide}
        onStateChange={this.handleBottomSheetChange}
        state={STATE_ANCHOR_POINT}>
        <View style={styles.bottomSheet}>
          <BottomSheetHeader
            onPress={this.handleHeaderPress}
            textColorExpanded={WHITE}
            backgroundColor={WHITE}
            backgroundColorExpanded={PRIMARY_COLOR}>
            <View pointerEvents='none' style={styles.bottomSheetHeader}>
              <View style={styles.bottomSheetLeft}>
                <Text selectionColor={'#000'} style={styles.bottomSheetTitle}>
                  Wonder Woman
                </Text>
                <View style={styles.starsContainer}>
                  <Text style={{marginRight: 8}} selectionColor={STAR_COLOR}>Power. Grace. Wisdom. Wonder.</Text>
                </View>
              </View>
              <View style={styles.bottomSheetRight}>
                <Text style={styles.routeLabel} selectionColor={PRIMARY_COLOR}>2017-05-30</Text>
              </View>
            </View>
          </BottomSheetHeader>
          {this.renderBottomSheetContent()}
        </View>
      </BottomSheetBehavior>
    )
  }

  renderSlider() {
    return (
      <View style={styles.containerMap}>
        <Image style={{height: "100%"}} source={{uri: "https://image.tmdb.org/t/p/original/paKWqpEGiHilKfpFKuHXXkFpYNn.jpg"}} />
      </View>
    )
  }

  renderToolbar() {
    return (
      <ScrollingAppBarLayout
        translucent
        barStyleTransparent={'light-content'}
        style={styles.scrollAppBar}
        statusBarColor={STATUS_BAR_COLOR}>
      </ScrollingAppBarLayout>
    )
  }

  render() {
    return (
      <CoordinatorLayout style={styles.container}>
        <StatusBar translucent barStyle='dark-content' backgroundColor={STATUS_BAR_COLOR} />
        {this.renderToolbar()}
        <View style={styles.content}>
          {this.renderSlider()}
        </View>
        {this.renderBackdrop()}
        {this.renderBottomSheet()}
        {this.renderMergedAppBarLayout()}
        {this.renderFloatingActionButton()}
      </CoordinatorLayout>
    )
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#000",
  },
  content: {
    backgroundColor: 'transparent',
  },
  scrollAppBar: {
    zIndex: 1,
  },
  appBarMerged: {
    backgroundColor: 'transparent',
  },
  containerMap: {
    //position: 'absolute',
    //top: 0,
    //left: 0,
    //right: 0,
    //bottom: 0,
    height,
    width,
    //justifyContent: 'flex-end',
    //alignItems: 'center',
    //backgroundColor: "#000"
  },
  bottomSheet: {
    height,
    zIndex: 5,
    backgroundColor: 'white'
  },
  bottomSheetHeader: {
    padding: 16,
    paddingLeft: 28,
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    // Don't forget this if you are using BottomSheetHeader
    backgroundColor: 'transparent'
  },
  bottomSheetLeft: {
    flexDirection: 'column'
  },
  bottomSheetRight: {
    flexDirection: 'column'
  },
  bottomSheetTitle: {
    fontFamily: 'sans-serif-medium',
    fontSize: 18,
  },
  bottomSheetContent: {
    //flex: 1,
    backgroundColor: WHITE,
  },
  starsContainer: {
    flexDirection: 'row',
    alignItems: 'center',
  },
  routeLabel: {
    marginTop: 32,
    marginRight: 12,
    fontSize: 12,
    fontFamily: 'sans-serif-medium',
  },
  detailListSection: {
    paddingVertical: 8,
  },
  detailItem: {
    height: 42,
    alignItems: 'center',
    flexDirection: 'row',
    paddingHorizontal: 26,
  },
  detailText: {
    color: '#333',
    fontSize: 14,
    marginLeft: 24,
    lineHeight: 22,
  },
})

export default Prova

[cesardeazevedo]

Here is one solution https://gist.github.com/cesardeazevedo/15de270ca24854de7d7d48624192e1c9

In this case, i basically set the height of bottomSheet style to a fixed screen height when the data is not ready, and set to null when is ready, so you will be able to scroll (line 171).

[Angelk90]

@cesardeazevedo : I understood what you did, but from there arises a problem being "n" a result that comes from a fech I do not know what number is, if it was a low number for example 1, strange things happen, you can see the image below. Line: https://gist.github.com/cesardeazevedo/15de270ca24854de7d7d48624192e1c9#file-bottomsheetissue35-js-L65

I tried to put backgroundColor: 'white', but it does not solve. 😂

[cesardeazevedo]

Setting a minHeight: height on bottomSheetContent style might be a better solution, it will make sure that just 3 lines of descriptions will fit the whole screen.

I'm going to close this issue, since it's already getting too far away, feel to free to reopen if you think that there's any bug with the library, but i haven't see so far, basically i ended up helping you layout your app, but i can't help you further than that, that's your responsibility 😂 , maybe getting help on stackoverflow or any react-native community would be more appropriate.

Good luck with your app. Cheers.