Search code examples
react-nativereact-native-elementsreact-native-scrollview

react native elements Floating Action Button


i'm using react-native-elements on my new project and decided to use floating action button on home screen. but there is an issue im facing. in home screen there is scrollView and FAB is placing itself to bottom of when i write in scroll. outside of scroll i cant see it. how to solve this problem

this is FAB

readBarcode() {
    return (
      <View>
        <FAB title="Barkod Okut" placement="right" />
      </View>
    );
  }

and this is render

render() {
    return (
      <View style={Styles.Container}>
        {this.readBarcode()}
        <ScrollView style={Styles.MainScroll}>
          {slider()}
          {banner()}
          {categoryButtons()}
        </ScrollView>
      </View>
    );
  }

Solution

  • this is how i figure it out

    this is render

    render() {
        return (
          <View style={Styles.Container}>
            <ScrollView style={Styles.MainScroll}>
              {slider()}
              {banner()}
              {categoryButtons()}
            </ScrollView>
            {this.readBarcode()}
          </View>
        );
      }
    

    and this is FAB

    readBarcode() {
        return (
          <View>
            <FAB title="Barkod" placement="left" color="#005F8E" />
          </View>
        );
      }
    

    placement right wont work but when i do it left i work perfectly