-
-
Notifications
You must be signed in to change notification settings - Fork 59
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
chore: remove react native elements from examples (#472)
* refactor: import components from react-native * chore: setup App with SafeAreaProvider * chore: use navigation header instead of custom * chore: replace react-native-elements usages with custom components * refactor: unify imports * chore: remove unused dependencies from examples * fix: update color from brand guide * refactor: remove duplicate .png type definition * fix: align .png type definitions * fix: add React import to ButtonGroup
- Loading branch information
1 parent
6534bd4
commit f17a8ac
Showing
30 changed files
with
647 additions
and
1,031 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1 +1,4 @@ | ||
| declare module "*.png"; | ||
| declare module "*.png" { | ||
| const content: number; | ||
| export default content; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,95 @@ | ||
| import React, { Fragment } from "react"; | ||
| import { | ||
| ScrollView, | ||
| StyleSheet, | ||
| Text, | ||
| TouchableOpacity, | ||
| View, | ||
| } from "react-native"; | ||
|
|
||
| import colors from "../styles/colors"; | ||
|
|
||
| const styles = StyleSheet.create({ | ||
| root: { | ||
| flexDirection: "row", | ||
| borderTopWidth: 2, | ||
| borderBottomWidth: 2, | ||
| borderColor: colors.grey, | ||
| }, | ||
|
|
||
| touchable: { | ||
| flex: 1, | ||
| paddingHorizontal: 16, | ||
| paddingVertical: 8, | ||
| justifyContent: "center", | ||
| alignItems: "center", | ||
| }, | ||
| touchableActive: { | ||
| backgroundColor: colors.blue, | ||
| }, | ||
| touchableText: { | ||
| textAlign: "center", | ||
| fontWeight: "bold", | ||
| }, | ||
| touchableTextActive: { | ||
| color: "#ffffff", | ||
| }, | ||
|
|
||
| divider: { | ||
| width: 2, | ||
| backgroundColor: "#dedede", | ||
| }, | ||
| }); | ||
|
|
||
| type ButtonGroupProps = { | ||
| value?: number; | ||
| options: string[]; | ||
| onPress: (index: number) => void; | ||
| disabled?: boolean; | ||
| scrollable?: boolean; | ||
| }; | ||
|
|
||
| export function ButtonGroup({ | ||
| value, | ||
| options, | ||
| onPress, | ||
| disabled, | ||
| scrollable, | ||
| }: ButtonGroupProps) { | ||
| const buttonGroup = ( | ||
| <View style={styles.root}> | ||
| {options.map((option, index) => ( | ||
| <Fragment key={option}> | ||
| {index > 0 && <View style={styles.divider} />} | ||
| <TouchableOpacity | ||
| style={[ | ||
| styles.touchable, | ||
| value === index && styles.touchableActive, | ||
| ]} | ||
| onPress={() => { | ||
| onPress(index); | ||
| }} | ||
| disabled={disabled} | ||
| > | ||
| <Text | ||
| style={[ | ||
| styles.touchableText, | ||
| value === index && styles.touchableTextActive, | ||
| ]} | ||
| > | ||
| {option} | ||
| </Text> | ||
| </TouchableOpacity> | ||
| </Fragment> | ||
| ))} | ||
| </View> | ||
| ); | ||
|
|
||
| return scrollable ? ( | ||
| <ScrollView horizontal style={{ flexGrow: 0 }}> | ||
| {buttonGroup} | ||
| </ScrollView> | ||
| ) : ( | ||
| buttonGroup | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
92 changes: 0 additions & 92 deletions
92
packages/examples/src/examples/FillRasterLayer/IndoorBuilding.js
This file was deleted.
Oops, something went wrong.
56 changes: 56 additions & 0 deletions
56
packages/examples/src/examples/FillRasterLayer/IndoorBuilding.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,56 @@ | ||
| import MapLibreGL from "@maplibre/maplibre-react-native"; | ||
| import React, { useState } from "react"; | ||
|
|
||
| import { FillExtrusionLayerStyle } from "../../../../../javascript"; | ||
| import indoorMapGeoJSON from "../../assets/indoor_3d_map.json"; | ||
| import sheet from "../../styles/sheet"; | ||
| import TabBarPage from "../common/TabBarPage"; | ||
|
|
||
| const OPTIONS = [-180, -90, 0, 90, 180]; | ||
|
|
||
| const layerStyles: { building: FillExtrusionLayerStyle } = { | ||
| building: { | ||
| fillExtrusionOpacity: 0.5, | ||
| fillExtrusionHeight: ["get", "height"], | ||
| fillExtrusionBase: ["get", "base_height"], | ||
| fillExtrusionColor: ["get", "color"], | ||
| fillExtrusionColorTransition: { duration: 2000, delay: 0 }, | ||
| }, | ||
| }; | ||
|
|
||
| export default function IndoorBuilding() { | ||
| const [value, setValue] = useState(-90); | ||
|
|
||
| return ( | ||
| <TabBarPage | ||
| defaultValue={1} | ||
| options={OPTIONS.map((option) => ({ | ||
| label: option.toString(), | ||
| data: option, | ||
| }))} | ||
| onOptionPress={(index, data) => setValue(data)} | ||
| > | ||
| <MapLibreGL.MapView style={sheet.matchParent}> | ||
| <MapLibreGL.Camera | ||
| zoomLevel={16} | ||
| pitch={40} | ||
| heading={20} | ||
| centerCoordinate={[-87.61694, 41.86625]} | ||
| /> | ||
|
|
||
| <MapLibreGL.Light id="light" style={{ position: [5, 90, value] }} /> | ||
|
|
||
| <MapLibreGL.ShapeSource | ||
| id="indoorBuildingSource" | ||
| // @ts-ignore | ||
| shape={indoorMapGeoJSON} | ||
| > | ||
| <MapLibreGL.FillExtrusionLayer | ||
| id="building3d" | ||
| style={layerStyles.building} | ||
| /> | ||
| </MapLibreGL.ShapeSource> | ||
| </MapLibreGL.MapView> | ||
| </TabBarPage> | ||
| ); | ||
| } |
Oops, something went wrong.