Skip to content

Instantly share code, notes, and snippets.

View janhesters's full-sized avatar
📈
Learning.

Jan Hesters janhesters

📈
Learning.
View GitHub Profile
const RootSwitch = createSwitchNavigator({ LoadingScreen, MainTabs });
export default RootSwitch;
// ... screen imports
import { Platform } from "react-native";
import {
createBottomTabNavigator,
createDrawerNavigator,
createStackNavigator,
createSwitchNavigator
} from "react-navigation";
const HomeStack = createStackNavigator({ DetailScreen, HomeScreen, OptionsScreen });
// ... imports
// If you are using TypeScript, import NavigationTransitionProps,
// and TransitionConfig
const IOS_MODAL_ROUTES = ["OptionsScreen"];
let dynamicModalTransition = (
transitionProps: NavigationTransitionProps,
prevTransitionProps: NavigationTransitionProps
): TransitionConfig => {
return StackViewTransitionConfigs.defaultTransitionConfig(
import React, { Component } from "react";
import Orientation, { orientation } from "react-native-orientation";
import Navigator from "./navigation/Navigator";
interface Props {}
export default class App extends Component<Props> {
componentDidMount = () => {
Orientation.lockToPortrait();
};
// ... imports
import { Icon } from "react-native-elements";
// You only need NavigationScreenProps for TypeScript
import { NavigationScreenProps } from "react-navigation";
class HomeScreen extends Component {
static navigationOptions = ({ navigation }: NavigationScreenProps) => ({
headerTitle: "Home",
headerLeft: Platform.select({
ios: null,
// ... below const HomeStack = createStackNavigator(...
HomeStack.navigationOptions = {
tabBarLabel: "Home",
tabBarIcon: ({ tintColor }: TabScene) => (
<Icon name="ios-home" type="ionicon" color={tintColor} />
),
drawerLabel: "Home",
drawerIcon: ({ tintColor }: TabScene) => <Icon name="md-home" type="ionicon" color={tintColor} />
};
// ... imports, remember to omit NavigationScreenProp without TypeScript
import { Button, Icon } from "react-native-elements";
import { NavigationScreenProp } from "react-navigation";
interface Props {
navigation: navigation: NavigationScreenProp<any, any>;
}
class HomeScreen extends Component<Props, object> {
// ... navigationOptions
import styles from "./styles";
import React, { PureComponent } from "react";
import { ScrollView } from "react-native";
import { Button } from "react-native-elements";
import { DrawerItems, SafeAreaView } from "react-navigation";
class BurgerMenu extends PureComponent {
render() {
return (
<SafeAreaView style={styles.container} forceInset={{ top: "always", horizontal: "never" }}>
// ... amend this code to the HomeStack's navigationOptions
HomeStack.navigationOptions = ({ navigation }: NavigationScreenProps) => {
let drawerLockMode = "unlocked";
if (navigation.state.index > 0) {
drawerLockMode = "locked-closed";
}
return {
tabBarLabel: "Home",
tabBarIcon: ({ tintColor }: TabScene) => (
@janhesters
janhesters / styles.ts
Last active September 24, 2018 21:23
import { Platform, StyleSheet } from "react-native";
const primaryBlue = Platform.select({
ios: "#007aff", // rgb(0, 122, 255)
android: "#2196f3" // rgb(33, 150, 243)
});
const imageWidth = "80%";
const styles = StyleSheet.create({