search

GeekyAnts / NativeBase

Mobile-first, accessible components for React Native & Web to build consistent UI across Android, iOS and Web.
https://nativebase.io/
MIT License
20.21k stars 2.39k forks source link

Using FAB as a button #1531

Closed TheMonster1995 closed 6 years ago

TheMonster1995 commented 6 years ago

I'm trying to use FAB as a button - to navigate to another page and NOT open any extra FABs, and for some reason, it doesn't work.

react-native, react and native-base version

react-native: 0.50.3 react: 16.0.0 native-base: 2.3.6

Expected behavior

Navigate to the new page

Actual behavior

Nothing happens

Steps to reproduce (code snippet or screenshot)

  <Container>
    <StatusBar barStyle="default" hidden={false} />
    <Header>
      <Left />
      <Body>
        <Text>
          ABC
        </Text>
      </Body>
      <Right />
    </Header>
    <StatusBar
      barStyle="light-content"
    />
    <Fab
      active={'true'}
      direction="up"
      containerStyle={{ }}
      style={{ backgroundColor: '#9f3799' }}
      position="bottomRight"
      onPress={() => navigation.navigate("Search")}
    >
      <Icon name="ios-search" />
    </Fab>
    <Content>
      <View
        style={{
          flex: 1,
          borderBottomColor: "#D9D5DC",
          borderBottomWidth: (1 / PixelRatio.getPixelSizeForLayoutSize(1)) * 2,
          flexDirection: "row",
          padding: 8,
        }}
      >
        <Left
          style={{
            flex: 1
          }}
        >
          <Thumbnail 
            source={require("../../img/inLogo.png")}
          />
        </Left>
        <Body
          style={{
            alignSelf: "flex-start",
            flexDirection: "column",
            flex: 3, 
            alignItems: "flex-start",
            justifyContent: "flex-start",
            paddingTop: 5, 
          }}
        >
          <Text
            style={{
              color: "rgba(0, 0, 0,0.9)",
              fontSize: 18,
              marginBottom: 5 
            }}
          >
            John Doe
          </Text>
          <Text
            style={{
              color: "rgba(0, 0, 0, 0.5)",
              fontSize: 12
            }}
          >
            Last seen about a week ago
          </Text>
        </Body>
      </View>
    </Content>
  </Container>

Is the bug present in both ios and android or in any one of them?

It appears on android. I haven't tested it on iPhone yet.

akhil-ga commented 6 years ago

@TheMonster1995 tried a sample code with react-navigation. It is working fine. Attaching a Gif.

Gif

fab

Sample Code

import React from 'react'
import { StackNavigator } from 'react-navigation'
import { Button } from 'react-native'
import { Container, Header, View, Icon, Fab } from 'native-base';

class MyHomeScreen extends React.Component {
  static navigationOptions = {
    title: 'Home',
  }

  render() {
    return (
      <Container>
        <View style={{ flex: 1 }}>
          <Fab
            active={true}
            direction="up"
            containerStyle={{}}
            style={{ backgroundColor: '#5067FF' }}
            position="bottomRight"
            onPress={() => this.props.navigation.navigate('Profile')}>
            <Icon name="share" />
          </Fab>
        </View>
      </Container>
    );
  }
}

class MyProfileScreen extends React.Component {
  static navigationOptions = {
    title: 'Profile',
  }

  render() {
    return (
      <Container>
        <View style={{ flex: 1 }}>
          <Fab
            active={true}
            direction="up"
            containerStyle={{}}
            style={{ backgroundColor: '#5067FF' }}
            position="bottomRight"
            onPress={() => this.props.navigation.goBack()}>
            <Icon name="share" />
          </Fab>
        </View>
      </Container>
    );
  }
}

export default ModalStack = StackNavigator({
  Home: {
    screen: MyHomeScreen,
  },
  Profile: {
    screen: MyProfileScreen,
  },
});
TheMonster1995 commented 6 years ago

It's okay untill you add a Content tag. Actually, the problem is not with it not functioning. It doesn't get clicked at all once a content component is added.

Should I open another issue and close this one?

akhil-ga commented 6 years ago

@TheMonster1995 <Content/> component is an implementation of ScrollView. Can you try setting prop contentContainerStyle={{ flex: 1 }} for <Content/>.

fab

TheMonster1995 commented 6 years ago

This temporarily fixes the problem. But if the list of the Views in the Content component extends the screen size (which in this case it most probably will), two things happen A) the FAB again becomes unavailable and B) the page won't be scrolled. And if the line you suggested contentContainerStyle={{ flex: 1 }} is omitted, then the page does scroll, but the Fab goes to the very end of the list/scroll, and is still unavailable - can't be touched. There's a similar problem here.

akhil-ga commented 6 years ago

@TheMonster1995 try placing FAB outside <Content/>

Gif

floatinglabel

SupriyaKalghatgi commented 6 years ago

This to be documented #1427

dylan-chong commented 6 years ago

The Fab still does nothing when placed outside of content. Removing the flat list fixes it. What is the solution? I mustn't be understanding something properly

import {
  Body,
  Button,
  Container,
  Content,
  Fab,
  Icon,
  Left,
  ListItem,
  Right,
  Text
} from 'native-base';
import { FlatList } from 'react-native';
import { type NavigationState } from 'react-navigation';
import React, { Component } from 'react';

import { userData } from '../services/UserService';

type Props = { navigation: NavigationState };

export class TasksScreen extends Component<Props> {
  static navigationOptions = { title: 'Tasks' };

  createTask() {
    const { navigate } = this.props.navigation;
    navigate('CreateTask');
  }

  editTask(entry) {
    const { navigate } = this.props.navigation;
    navigate('EditTask', {
      task: entry.item,
      index: entry.index,
    })
  }

  render() {
    return (
      <Container>
        <Fab
          direction="left" 
          position="bottomRight" 
          onPress={ () => this.createTask() }>
          <Icon name="add" />
        </Fab>
        <Content contentContainerStyle={{ flex: 1 }}>
          <FlatList
            data={ userData.currentUser().tasks }
            renderItem={ entry =>
                <ListItem itemDivider>
                  <Left />
                  <Body>
                    <Text>
                      { entry.item.title }
                    </Text>
                  </Body>
                  <Right>
                    <Button transparent onPress={ () => this.editTask(entry) }>
                      <Icon active name="arrow-forward" />
                    </Button>
                  </Right>
                </ListItem>
            }
          />
        </Content>
      </Container>
    );
  }
}
Dimon70007 commented 4 years ago

try to use rounded Button instead of Fab and specify equals width and height. It worked for me

Jahangeer3 commented 4 years ago

Just use FAB component after Flatlist then it will work perfectly