react-native-paper#FAB JavaScript Examples

export default function Map(props) {
  const theme = useSelector(i => i.themes[i.theme]);
  const appleMaps = useSelector(i => i.settings.appleMaps);
  const center = {
    latitude: 0,
    longitude: 0,
    latitudeDelta: 90,
    longitudeDelta: 90
  }
  const mapRef = React.useRef(null);
  const [locError, setLocError] = React.useState(false);
  async function getLocation() {
    var { status } = await Location.requestPermissionsAsync();
    if (status !== "granted") {
      setLocError(true);
      return;
    }
    try {
      var loc = await Location.getCurrentPositionAsync({})
      mapRef.current.animateToRegion({
        latitude: loc.coords.latitude,
        longitude: loc.coords.longitude,
        latitudeDelta: 0.5,
        longitudeDelta: 0.5,
      });
    } catch (e) {
      setLocError(true);
    }
  }
  return <View style={{ flex: 1 }}>
    <MapView
      ref={mapRef}
      initialRegion={center}
      region={props.region}
      clusteringEnabled={props.markers?.length>60}
      provider={appleMaps?null:"google"}
      customMapStyle={theme.mapStyle}
      style={{ flex: 1 }}
      onRegionChangeComplete={(region)=>{
        props.onRegionChange?.({
          latitude: region.latitude,
          longitude: region.longitude,
          latitudeDelta: region.latitudeDelta,
          longitudeDelta: region.longitudeDelta
        })
      }}
    >
      {(props.circles||[]).map(i => <Circle
        key={i.id}
        center={{ latitude: i.lat, longitude: i.lng }}
        radius={i.radius}
        fillColor={i.fill}
        strokeColor={i.stroke}
      />)}
      {props.markers?.map(i => <MapMarker key={i.id} {...i} />)}
    </MapView>
    <FAB
      style={{ position: "absolute", top: 8, left: 8, backgroundColor: theme.navigation.bg }}
      color={theme.navigation.fg}
      small
      icon={true ? "crosshairs-gps" : "crosshairs"}
      onPress={getLocation}
    />
    <Snackbar
      visible={locError}
      onDismiss={() => setLocError(false)}
      duration={2000}
    >
      {typeof locError == "string" ? locError : "Failed retreiving location"}
    </Snackbar>
  </View>
}

export default function JobList(props) {
    const [data, setdata] = useState([])
    const [loading, setLoading] = useState(true)

    const loadData = () => {
        fetch('https://getplaced.pythonanywhere.com/api/blog/', {
            method: "GET"
        })
            .then(resp => resp.json())
            .then(data => {
                setdata(data)
                setLoading(false)
            })
            .catch(error => Alert.alert("error", error))
    }

    useEffect(() => {
        loadData();
    }, [])

    const clickedItem = (data) => {
        props.navigation.navigate("Blog-Detail", { data: data })
    }

    const renderData = (item) => {
        var date = new Date(`${item.post_date}`)
        return (
            <>
                <Card style={styles.cardStyle} onPress={() => clickedItem(item)}>
                    <View style={{ flex: 1 }}>
                        <Text
                            onPress={() => clickedItem(item)}
                            style={{ color: "#000", fontSize: 16, marginLeft: 15, }}>
                            {item.title}
                            <Text style={{ fontSize: 13, color: '#808080' }}>    -   ({date.getDate()}-{date.getMonth()}-{date.getFullYear()})</Text>
                        </Text>
                        <Text
                            onPress={() => clickedItem(item)}
                            style={{ color: "#808080", fontSize: 12, marginLeft: 17, }}>
                            {item.snippet}
                        </Text>

                    </View>
                </Card>
            </>
        )
    }
    return (
        <View>
            <FlatList
                data={data}
                renderItem={({ item }) => {
                    return renderData(item)
                }}
                onRefresh={() => loadData()}
                refreshing={loading}
                keyExtractor={item => `${item.id}`}
            />
            <FAB
                style={styles.fab}
                small={false}
                icon="plus"

                onPress={() => props.navigation.navigate("Create")}
            />
        </View>


    )
}

export default function UserFAB({ username, user_id }) {
  var theme = useSelector(i=>i.themes[i.theme]);
  var [FABOpen, setFABOpen] = React.useState(false);
  var nav = useNavigation();
  var bookmarks = useSelector(i => i.userBookmarks);
  var list = bookmarks.filter(i => i.username != username).slice(0, 5);
  var actions = React.useMemo(() => list.map(i => ({
    icon: () => <UserIcon theme={theme} size={40} user_id={Number(i.user_id)} />,
    style: {backgroundColor:theme.page_content.bg},
    label: i.username,
    onPress: () => {
      var prevState = nav.dangerouslyGetState();
      nav.reset({
        index: prevState.index,
        routes: prevState.routes.map(x=>{
          if(x.params?.username) {
            return {
              ...x,
              params: {
                ...x.params,
                username: i.username
              }
            }
          }
          return x;
        })
      })
    }
  })), [list.map(i=>i.user_id).join(',')]);
  const userAvatar = React.useMemo(() => () => <UserIcon size={56} user_id={Number(user_id)} />, [user_id]);
  if(list.length === 0) return null;
  return <FAB.Group
    animated={false}
    theme={{dark:theme.dark}}
    open={FABOpen}
    fabStyle={{backgroundColor:theme.page_content.bg}}
    icon={FABOpen ? 'close' : userAvatar}
    actions={actions}
    onStateChange={({ open }) => setFABOpen(open)}
  />;
}

function Tabs() {
  const isFocused = useIsFocused();
  const safeArea = useSafeArea();
  let tabBarProps = {};

  if (isTablet) {
    tabBarProps = {
      tabBar: props => <TabBar {...props} />,
    };
  }

  return (
    <React.Fragment>
      <Tab.Navigator
        initialRouteName="Feed"
        shifting={true}
        labeled={false}
        sceneAnimationEnabled={false}
        activeColor="#00aea2"
        inactiveColor="#95a5a6"
        barStyle={{ backgroundColor: '#ffff' }}
        {...tabBarProps}>
        <Tab.Screen
          name="Appointments"
          component={MyAppointments}
          options={{
            tabBarIcon: 'calendar-clock',
          }}
        />

        <Tab.Screen
          name="Patients"
          component={Patients}
          options={{
            tabBarIcon: 'account-multiple',
          }}
        />
        <Tab.Screen
          name="Departments"
          component={Departments}
          options={{
            tabBarIcon: 'layers',
          }}
        />
        <Tab.Screen
          name="Reports"
          component={Reports}
          options={{
            tabBarIcon: 'book-open',
          }}
        />
      </Tab.Navigator>
      <Portal>
        <FAB
          visible={isFocused} // show FAB only when this screen is focused
          icon="plus-box"
          label={isTablet ? 'Create new' : null}
          style={[
            styles.fab,
            {
              bottom: safeArea.bottom + 65,
            },
          ]}
        />
      </Portal>
    </React.Fragment>
  );
}

function WebMap(props) {
  var theme = useSelector(i => i.themes[i.theme])
  var [center,setCenter] = React.useState({lat:0,lng:0});
  var [map,setMap] = React.useState(null)
  var [locError, setLocError] = React.useState(false);
  async function getLocation() {
    try {
      var loc = await Location.getCurrentPositionAsync({})
      map.panTo({
        lat: loc.coords.latitude,
        lng: loc.coords.longitude
      });
      map.setZoom(10);
    } catch(e) {
      setLocError(true);
    }
  }
  return (
    <LoadScript
      googleMapsApiKey={key}
      version={version}
      libraries={libraries}
    >
      <GoogleMap
        zoom={1}
        center={props.center||center}
        options={{
          streetViewControl: false,
          zoomControl: false,
          scaleControl: true,
          rotateControl: false,
          clickableIcons: false,
          mapTypeControl: false,
          fullscreenControl: false,
          controlSize: 32,
          gestureHandling: "greedy",
          mapTypeControlOptions: {
            mapTypeIds: ['roadmap', 'satellite', 'hybrid', 'terrain', 'styled_map']
          },
          mapId: theme.dark?'1e47783ba0e84c45':'f5056005d4606f72'
        }}
        mapContainerStyle={{flex: 1}}
        onLoad={(m)=>setMap(m)}
        onCenterChanged={()=>{
          if(map) {
            if(center.lat!==map.center.lat()||center.lng!==map.center.lng()) setCenter({
              lat: map.center.lat(),
              lng: map.center.lng()
            })
            props.onRegionChange?.({
              latitude: map.center.lat(),
              longitude: map.center.lng()
            })
          }
        }}
      >
        <FAB
          style={{position: "absolute", top: 8, left: 8, backgroundColor: theme.navigation.bg}}
          color={theme.navigation.fg}
          small
          icon={true?"crosshairs-gps":"crosshairs"}
          onPress={getLocation}
        />
        <FAB
          style={{position: "absolute", bottom: 22, right: 8, backgroundColor: theme.navigation.bg}}
          color={theme.navigation.fg}
          small
          icon={"minus"}
          onPress={()=>map.setZoom(map.getZoom()-1)}
        />
        <FAB
          style={{position: "absolute", bottom: 70, right: 8, backgroundColor: theme.navigation.bg}}
          color={theme.navigation.fg}
          small
          icon={"plus"}
          onPress={()=>map.setZoom(map.getZoom()+1)}
        />
        <Snackbar
          visible={locError}
          onDismiss={()=>setLocError(false)}
          duration={2000}
        >
          Couldn't retrieve location
        </Snackbar>
        <MarkerRenderer {...props} />
        {props.circles?.map(i=><Circle
          radius={i.radius}
          center={{ lat: i.lat, lng: i.lng }}
          options={{
            fillColor: i.fill,
            fillOpacity: 1,
            strokeColor: i.stroke,
            strokeOpacity: 1,
          }}
        />)}
      </GoogleMap>
    </LoadScript>
  )
}